Tips for HTML5 tagging

Web technology is growing too fast. If you don't keep up with the times, you will be eliminated. Therefore, in response to the upcoming HTML5, This article summarizes 22 basic HTML5 skills, hoping to help you learn more about HTML5.

1. New doctype statement
The XHTML statement is too long. I believe few front-end developers can write this doctype Statement by hand.

Copy the code and run the code to edit the code.

1. <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" ">

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

The HTML5 doctype Declaration is very short. I believe you will be able to remember this declaration immediately. You don't have to waste brain cells to remember the long, abnormal XHTML doctype declaration.

Copy the code and run the code to edit the code.

1. <! Doctype HTML>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

The brief doctype Statement of HTML5 enables modern browsers such as Firefox and chrome and IE6/7/8 to enter the standard mode, you may wonder that IE6/7 can also support HTML5 doctype. In fact, ie enters the standard mode as long as the doctype complies with this format.

2. <figure> label
Take a look at the following simple SectionCode:

Copy the code and run the code to edit the code.

3. <H6> image of Mars. </H6>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

Unfortunately, the H6 label and the IMG label seem to have nothing to do with it, and the semantics is not clear enough. When HTML5 realized this, it adopted the <figure> label. When the <figure> combined with the <figcaption> label is used, the H6 label and the IMG label can be combined to make the code more semantic.

Copy the code and run the code to edit the code.

1. <Figure>
5. <Figcaption>
7. <H6> This is an image of something interesting. </H6>
9. </Figcaption>
11. </Figure>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

3. Redefinition <small>
Not long ago, I used the <small> label to create a subtitle related to the logo. However, the <small> label is redefined in HTML5 to make it more semantic, And the font size of <small> will decrease, think about it if this tag is used for the copyright information at the bottom of the website.

4. removed the type attribute of the JavaScript and CSS labels.
Generally, you add the type attribute to <link> and <SCRIPT>:

Copy the code and run the code to edit the code.

1. <LINK rel = "stylesheet" href = "path/to/stylesheet.css" type = "text/CSS">
3. <SCRIPT type = "text/JavaScript" src = "path/to/script. js"> </SCRIPT>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

In HTML5, the type attribute is no longer needed, because it is a bit redundant. after removal, the code can be simpler.

Copy the code and run the code to edit the code.

1. <Link href = "path/to/stylesheet.css">
3. <SCRIPT src = "path/to/script. js"> </SCRIPT>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

5. Whether double quotation marks are used
This is a bit confusing. HTML5 is not xthml. You can save double quotation marks in tags. I believe that most of the comrades, including those I am used to adding double quotation marks, make the Code look more standard. However, you can decide whether to use double quotation marks based on your personal preferences.

Copy the code and run the code to edit the code.

1. <H6 class = "myclass" id = "someid"> Start the reactor. </H6>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

6. Make the webpage content editable

 

This is a new function of HTML5. Adding a contenteditable attribute to the tag and setting the value to true can directly edit the content of the tag on the page, including the sub-level label content of this label. With this attribute, you can use this attribute to complete many tasks, such as editing a to-do list on a webpage.

Copy the code and run the code to edit the code.

1. <H6 contenteditable = "true"> Break mechanical cab <span> driver </span> </H6>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

7. Email input box
The email attribute of an input box is added to hmtl5 to check whether the input content conforms to the email writing format. The function becomes more and more powerful. javascript can only be used for detecting the input content before HTML 5. Although the built-in form verification function will soon become a reality, this attribute is not supported by many browsers and will only be processed as a common text input box.

Copy the code and run the code to edit the code.

1. <Form method = "get">
3. <Label for = "email"> Email: </label>
5. <Input id = "email" name = "email" type = "email">
7. <Button> submit form </button>
9. </Form>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

This attribute is not supported so far, including modern browsers, so it is still unreliable for the time being.

8. placeholders
Placeholders in the text box (look at the effects of the search box in this blog) help improve user experience. Previously, we had to rely on JS to implement the placeholder effect, and added the placeholder attribute placeholder in html5.

Copy the code and run the code to edit the code.

1. <Input name = "email" Placeholder = "doug@givethesepeopleair.com" type = "email">

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

Similarly, the current mainstream modern browsers do not support this attribute well. Currently, only chrome and Safari support this attribute. Firefox and opera do not support this attribute.

 

9. Local Storage
The local storage function of HTML5 enables modern browsers to "remember" What we input, even if the browser is closed and refreshed, it will not be affected. Although some browsers do not support this function, IE8, Safari 4, and Firefox 3.5 still support this function. You can test it.

 

10. More semantic headers and footer
The following code will no longer exist in HTML5

Copy the code and run the code to edit the code.

1. <Div id = "Header">
3. ...
5. </Div>
7. <Div id = "footer">
9. ...
11. </Div>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

We usually define a div for the header and footer, and then add an ID. However, in HTML5, you can directly use the

Copy the code and run the code to edit the code.

1. <Header>
3. ...
5. </Header>
7. <Footer>
9. ...
11. </Footer>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

Be sure not to confuse the two labels with the header and footer of the website. They only represent their containers.

11. Support for HTML5 by IE
Currently, Internet Explorer does not provide good support for HTML5, which is also a major obstacle to the faster popularization of HTML5. However, ie9 supports HTML5 well.
IE parses all the tags added to HTML5 into inline elements, but they are actually block-level elements, so it is necessary to define a style for them:

Copy the code and run the code to edit the code.

1. Header, footer, article, section, NAV, menu, hgroup {
3. Display: block;
5. }

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

However, ie still cannot parse the newly added HTML5 tags. At this time, JavaScript is needed to solve this problem:

Copy the code and run the code to edit the code.

1. Document. create_relement_x ("article ");
3. Document. create_relement_x ("footer ");
5. Document. create_relement_x ("Header ");
7. Document. create_relement_x ("hgroup ");
9. Document. create_relement_x ("nav ");
11. Document. create_relement_x ("menu ");

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

You can use this JavaScript code to fix IE's better parsing of HTML5

Copy the code and run the code to edit the code.

1. <! -->
3. <SCRIPT mce_src = "> </SCRIPT>
4. <! [Endif] -->

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

12. Title Group)
This is similar to the second tip. If the H1 and H2 tags are used to indicate the website name and Subtitle respectively, this will not associate the two closely related headers. In this case, you can use the

Copy the code and run the code to edit the code.

1. <Header>
3. <Hgroup>
5. <H1> recall fan page
6. <H2> only for people who want the memory of a lifetime. </H2>
8. </Hgroup>
10. </Header>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

13. Required Properties
The front-end personnel must have done a lot of Form Verification projects. One of the most important aspects is that some input boxes must be filled in. Javascript should be used to check the content here. In HTML5, a "mandatory" attribute is added: required. The required attribute can be used in two ways. The second method is more structured, while the first method is more concise.

Copy the code and run the code to edit the code.

1. <Input type = "text" name = "someinput" required>
3. <Input type = "text" name = "someinput" required = "required">

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

With this attribute, it is easier to submit and verify the form. Let's take a look at the following simple example:

Copy the code and run the code to edit the code.

1. <Form method = "Post">
3. <Label for = "someinput"> your name: </label>
5. <Input id = "someinput" name = "someinput" Placeholder = "Douglas Quaid" required = "required" type = "text">
7. <Button> go </button>
9. </Form>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

If the input box is blank, the form cannot be submitted successfully.

14. automatically retrieve focus
Similarly, HTML5 does not require JavaScript to automatically obtain the focus of the input box. If an input box should be selected or get the input focus, HTML5 adds the autofocus attribute:

Copy the code and run the code to edit the code.

1. <Input name = "someinput" Placeholder = "Douglas Quaid" required = "required" type = "text">

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

Autofocus can also be written as "autofocus = autofocus", which looks more standard, depending on your personal preferences.

15. Audio Playback support
The <audio> tag is provided in HTML5 to solve the problem that in the past, you must rely on a third-party plug-in to play audio files. So far, only a few of the latest browsers support this tag.

Copy the code and run the code to edit the code.

1. <Audio tabindex = "0" controls = "controls">
3. <Source src = "file.ogg">
5. <Source src = "filepath">
7. <A href = "filepath"> download this file. </a>
9. </Audio>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

Why are there two formats of audio files? Due to the difference in the format supported by firefoxand webkitviewer, firefoxonly supports .ogg files, while webkitonly supports ghost files. The solution is to create two versions of audio files so that they can be compatible with Firefox and WebKit browsers. Note that IE does not support this label.

16. Video Playback support
Like the <audio> tag, HTML5 also supports the <video> tag to play video files. Youtube also announced a new HTML5 video embedding. However, unfortunately, the HTML5 specification does not specify a specific video decoder, but allows the browser to decide on its own. This causes a browser compatibility problem, although both safari and ie9 support H. 264 format video (flash players can play), Firefox and Opera support open-source theora and Vorbis formats. Therefore, you must prepare two formats when displaying HTML5 videos.

Copy the code and run the code to edit the code.

1. <Video tabindex = "0" controls = "controls" preload = "">
3. <Source src = "cohagenphonecall. OGV" type = "Video/Ogg; codecs = 'vorbis, theora '">
5. <Source src = "cohagenphonecall.mp4" type = "Video/MP4; 'codecs = 'avc1. 42e01e, mp4a. 100'">
7. <Div> your browser is old. <a href = "cohagenphonecall.mp4"> download this video instead. </a> </div>
9. </Video>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

It should be noted that although the type attribute can be omitted, if it is added, the browser can parse the video file more quickly and accurately. Not all browsers support HTML5 videos, so you must use the flash version instead. Of course, this is your decision.

17. Pre-load video
Preload attributes: preload. First, determine whether to preload the video. If a visitor accesses a page with many videos displayed, it is necessary to preload a video, this saves the visitor's waiting time and improves the user experience. You can add a preload attribute to the <video> label to implement the preload function.

Copy the code and run the code to edit the code.

1. <Video tabindex = "0" preload = "preload">
3. ...
5. </Video>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

18. display controls 

The display control attribute allows you to add a pause control to a video. Note that the display effect of each browser may be different.

Copy the code and run the code to edit the code.

1. <Video tabindex = "0" preload = "preload" controls = "controls">
3. ...
5. </Video>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

19. Use Regular Expressions
In HTML5, we can directly use regular expressions.

Copy the code and run the code to edit the code.

1. <Form action = "" method = "Post">
3. <Label for = "username"> Create a username: </label>
5. <Input name = "username" id = "username" Placeholder = "4 <> 10"
6. Pattern = "[A-Za-Z] {4, 10}" required = "required" type = "text">
8. <Button type = "Submit"> go </button>
10. </Form>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

20. Check the browser's support for HTML5 attributes
Different browsers have different support for HTML5 attributes, which causes some compatibility problems. However, you can use the method to check whether the browser supports these attributes. If the code in the previous example is to check whether the pattern attribute is recognized by the browser, you can use JavaScript code to check the pattern attribute.

Copy the code and run the code to edit the code.

1. Alert ('pattern' in document. create_relement_x ('input') // Boolean;

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

In fact, this is a common method for determining browser compatibility. This method is often used by the jquery library. The above Code creates an input tag and checks whether the pattern attribute is supported by the browser. If it is supported, the browser supports this function; otherwise, it does not.

Copy the code and run the code to edit the code.

1. <SCRIPT>
3. If (! 'Pattern' in document. create_relement_x ('input ')){
5. // Do client/server side validation
7. }
9. </SCRIPT>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

21. Mark tag
<Mark> A tag is used to highlight the text that needs to highlight its importance to the user visually. The strings enclosed in the tag must be related to the user's current behavior. For example, if I search "Open your mind" in some blogs, I can use JavaScript in the <mark> label to wrap each action.

Copy the code and run the code to edit the code.

1. <H3> Search Results
2. <H6> they were interrupted, just after quato said, <mark> "Open your mind" </mark>. </H6>

Copy the code and run the code to edit the code.

Powered by w3cfuns.com

 

22. How to correctly use the DIV tag
Some people may have doubts. DO <div> tags still be used in HTML5 with ArticleOr a navigation menu, we recommend that you use the <Article> and <nav> labels with more semantics.

Many people think that HTML5 may still be far away, so they simply ignore it. In fact, many websites are now using HTML5. In fact, some new HTML5 attributes and functions make the code more concise, which is always a good thing and deserves our praise. Finally, thank you for reading this HTML5 entry-level article, hoping to help you learn more about HTML5.