I assume all of you may be familiar with HTML5, for such technology is discussed by lots of media. But can you name out the new features of HTML5? There are 15 features of HTML5 that you should know.
1. New Doctype
Many websites still use XHTML 1.0 at present and to declare the document type in the first line like this:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
In HTML5, the method used above will lose effectiveness. Here is the HTML5 method to declare:
1. <!DOCTYPE html>
2. No more types for scripts and links
On HTML4 or XHTML, you need to use the following lines of codes add CSS and JavaScript to your website.
1. <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
2. <script type="text/javascript" src="path/to/script.js"></script>
3. The semantic header and footer
In HTML4 or XHTML, you have to use the following codes to declare “Header” and “Footer”.
1. <div id="header">
2. …
3. </div>
4. ……….
5. <div id="footer">
6. …
7. </div>
In HTML5, you have two elements replacing the declaration above, to make the codes more brief.
1. <header>
2. …
3. </header>
4. <footer>
5. …
6. </footer>
4. Hgroup
In HTML5, there are some new elements introduced, and hgroup is one of these elements. Suppose there is a subhead under the head of my website, I can define them as <h1> and <h2> respectively. However, such definitions do not suggest the relation between the two heads. What is more, the tab <h2> will bring more problems, when there are other heads on the website.
In HTML5, we can use the hgroup element to group them, which will not affect the outline of the document.
1. <header>
2. <hgroup>
3. <h1> Recall Fan Page </h1>
4. <h2> Only for people who want the memory of a lifetime. </h2>
5. </hgroup>
6. </header>
5. Mark Element
You can use it as the highlight tab. The character string modified by this tab should be relevant to the actions of the user. For instance, when I search “Open your mind” in someone’s blog, I can use <mark> to modify the words found in the blog.
1. <h3> Search Results </h3>
2. <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>
6. Figure Element
In HTML4 or XHTML, such codes are used to modify the notes of images.
1. <img src="path/to/image" alt="About image" />
2. <p>Image of Mars. </p>
But the codes do not connect the words and the image. So HTML5 introduced the element <figure>. When using with <figcaption>, we can connect the notes with the relevant images semantically.
1. <figure>
2. <img src="path/to/image" alt="About image" />
3. <figcaption>
4. <p>This is an image of something interesting. </p>
5. </figcaption>
6. </figure>
7. <small> element redefined
In HTML4 or XHTML, the <small> element already exists. But there is no complete explanation about how to use this element properly. In HTML5, <small> is used to define small characters, just think about the copyright status on the bottom of the website.
8. Placeholder
In HTML4 or XHTML, you need to use JavaScript to add placeholders to the textbox. For example, you can set some information beforehand, and when the user begins to input, the words in the textbox will disappear.
But in HTML5, the new “placeholder” will simplify the problem.
9. Required Attribute
New attributes “required” in HTML5 determines whether the input is necessary. There are two ways to declare such attribute.
1. <input type="text" name="someInput" required>
2. <input type="text" name="someInput" required="required">
When the textbox is determined that it is necessary to be input, if it is blank, the table cannot be submitted.
1. <form method="post" action="">
2. <label for="someInput"> Your Name: </label>
3. <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
4. <button type="submit">Go</button>
5. </form>
In the example above, if there is no input and the table is submitted, the textbox will be highlighted.
10. Autofocus Attribute
The HTML5 method wipes off the needs for JavaScript. If the input should be “selection” or “autofocus”, mostly, we use the autofocus attribute.
1. <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
11. Audio Support
Now we have to use the third-party components to rendering audio. In HTML5, the element <audio> is introduced.
1. <audio autoplay="autoplay" controls="controls">
2. <source src="file.ogg" />
3. <source src="file.mp3" />
4. <a href="file.mp3">Download this file.</a>
5. </audio>
Two formats of audio are included when you use the element <audio>. Firefox needs the .ogg format, while the Webkit needs the .mp3 format. As usual, it does not support IE, and Opera10 and under version 10 only support .wav.
12. Video support
HTML5 not only contains the element <audio>, but also the element <video>. However, similar to <audio>, HTML5 does not appoint a certain video decoder; it leaves it to the browser to decide. Though Safari and Internet Explorer9 can support H.264 format videos, but Firefox and Opera still are persist in Theora and Vorbis format. Thus, when appointing videos in HTML5, you should provide both formats.
1. <video controls preload>
2. <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs=’vorbis, theora’" />
3. <source src="cohagenPhoneCall.mp4" type="video/mp4; ‘codecs=’avc1.42E01E, mp4a.40.2′" />
4. <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
5. </video>
13. Preload attribute in videos element
When the users visit the website, this attribute enables the video to preload. To accomplish this function, you can add “preload= “preload”” or just “preload” in the element <video>.
1. <video preload>
14. Display Controls
If you have used every point mentioned above, you may have noticed that if you use the codes above, the video on the website appearing as an image with no control bar. To let the control bar appear, we should determine the attribute in the element <video>.
1. <video preload controls>
15. Regular Expressions
In HTML4 or XHTML, you need to use some regular expressions to check some certain texts. In HTML5, the new pattern attribute enables us to add a regular expression at the tab.
1. <form action="" method="post">
2. <label for="username">Create a Username: </label>
3. <input type="text"
4. name="username"
5. id="username"
6. placeholder="4 <> 10"
7. pattern="[A-Za-z]{4,10}"
8. autofocus
9. required>
10.<button type="submit">Go </button>
11.</form>
Conclusions
In fact, there are more new elements and attributes, and the points I mentioned above is the ones I think frequently used in the website development, and the rest are up to you to find out.
Did you like this? Share it:
