The above chapter talks about the first seven skills of HTML5, and now let’s learn new skills.
8. Placeholder
Previously, we needed to use JavaScript to create placeholders for text boxes. You can initially set the value attribute to see if it is appropriate, but as long as the user deletes the text, the input content will become empty again. The placeholder attribute effectively compensates for this.
<input name=email type=email [email protected] />
9. Local storage
Thanks to HTML5's local storage, we can let advanced browsers remember what we entered, and even if the browser is closed or refreshed later, it will not be affected. Although not all browsers support it, the most critical Internet Explorer 8, Safari 4, Firefox 3.5.
10. Semantic Header and Footer
<div id=header>
…
</div>
<div id=footer>
…
</div>
Gone are the code above. Divs does not have any semantic structure fundamentally, even if the ID is applied. In HTML5, we can use the <header> and <footer> elements, and the above code can be replaced by:
<header>
…
</header>
<footer>
…
</footer>
Be careful not to confuse these two elements with the head and feet of the website. They are just containers representing them.
11. IE and HTML5
It takes a lot of money to understand the new HTML5 elements. In order to ensure that the new HTML5 elements can be displayed correctly as block-level elements, it is necessary to define their style with the following code:
header, footer, article, section, nav, menu, hgroup {
display: block;
}
Even so, IE still doesn't know what these elements are, so it ignores these formats and needs to use the following code to solve this problem:
document.createElement(article);
document.createElement(footer);
document.createElement(header);
document.createElement(hgroup);
document.createElement(nav);
document.createElement(menu);
12. Group title (hgroup)
Suppose a website has a name and subtitle tags to be marked with <h1> and <h2> tags respectively. There is no way in HTML4 that can describe the relationship between the two with a good semantic relationship. In addition, when using h2 to display other titles on the page, there are more problems in terms of hierarchy. Using the group title hgroup element, we can gather these titles together without affecting the entire outline of the document.
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
13. Required attributes
The form allows new necessary properties, specifying whether a specific input is necessary. You can declare this attribute in the following two different ways according to your own preferences for writing code:
<input type=text name=someInput required>
Or, more rigorous:
<input type=text name=someInput required=required>
Both lines of code above work. After using this line of code and the browser supports the required attribute, the blank form will not be submitted. Here is a simple example, and we also added the placeholder attribute:
<form method=post action=>
<label for=someInput> Your Name: </label>
<input type=text id=someInput name=someInput placeholder=Douglas Quaid required>
<button type=submit>Go</button>
</form>
If the input is empty, the form will not be submitted, highlighting the text box.
14. Autofocus attributes
Similarly, with HTML5, JavaScript solutions are no longer needed to solve the problem of autofocus. If an input should be selected or focused, we can now use the autofocus property of HTML.
<input type=text name=someInput placeholder=Douglas Quaid required autofocus>
15. Audio support
We no longer need to rely on third-party plugins to provide audio. HTML5 provides audio element <audio>. Currently, only the latest browsers support HTML5 audio. At this point, it is better to provide some backward compatibility.
<audio autoplay=autoplay controls=controls>
<source src=file.ogg />
<source src=file.mp3″ />
<a href=file.mp3″>Download this file.</a>
</audio>
Speaking of audio formats, neither Mozilla nor Webkit has fully supported it. Firefox wants to see a .ogg file, and the Webkit browser only supports the most common .mp3 extension. This means that you should create two versions of audio, at least so far. When Safari loads the page, it does not recognize the .ogg format file and will be skipped and moved to the mp3 version. Please note that IE does not support it, and Opera 10 or lower only supports .wav files.