New document type (Doctype)

<! DOCTYPE HTML - the PUBLIC"/ / / / W3C DTD XHTML 1.0 Transitional / / EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
Copy the code

Are you still using XHTML document types that are cumbersome and difficult to remember? If so, it’s time to switch to the new HTML5 document type.

HTML5 document type:

<! DOCTYPE html>Copy the code

Now it’s as simple as 15 characters. (Note: your doctype declaration should appear on the first line of your HTML file.)

Figure elements

Are you still thinking of tagging images with the following code?

<mg SRC = "path/to/image" Alt = "About image" /><p>Image of Mars. </p>
Copy the code

The code above cannot be associated with the title of a graph in a simple and semantically relevant way, because it is simply wrapped in paragraph tags and image elements, which HTML5 improves by introducing the figure element. When used with the Figcaption element, we can pair the figure title with the figure. The code is as follows:

<figure>
<img src="The path/to/image" alt="The About image"/ >
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
Copy the code

To redefine the

It turns out that you can use the small element to create subheadings that are closely related to the logo. However, NOW THAT HTML5 has changed this usage, the small element has been redefined, or more appropriately, it is now used to represent small print or other side notes (for example, a copyright notice at the bottom of a website).

Scripts, link types are no longer required

Chances are you’ll still add type attributes to your links and script tags as shown in the following code.

<link rel= "stylesheet" href= "path/to/stylesheet. CSS" type= "text/ CSS" /><script type="Text/javascript" src="The path/to/script. Js"></script>
Copy the code

In HTML5, this is no longer necessary. This means that the two tags represent styles and scripts, respectively. Therefore, we can remove all of their type attributes. The code is as follows:

< link rel = "stylesheet" href = "path/to/stylesheet. CSS" / ><script src="The path/to/script. Js"></script>
Copy the code

To use or not to use quotes

Remember, HTML5, unlike XHTML, doesn’t have to enclose attributes in quotes if you don’t like it. However, if you feel more comfortable using quotation marks, there’s no problem.

<p class=myClass id=someId> Start the reactor.
Copy the code

Make your content editable

One of HTML5’s most powerful features is “contenteditable”, which, as the name implies, will allow users to edit any text content contained within an element (including its children). It can be useful for simple to-do lists or wiki-based sites, as well as taking advantage of local storage.

<! DOCTYPE HTML > < HTML lang= "en" > <head> <meta Charset = "UTF-8" > <title> Untitled </title> </head> <body> <h2> To-do List </h2> <ul contenteditable= "true" > <li> Break mechanical cab driver. </li> <li> Drive to abandoned factory <li> Watch video of self </li> </ul> </body> </html>Copy the code

Alternatively, you could write line 9 like this (without quotes) :

<ul contenteditable=true>
Copy the code

Email entry

If we apply the “E-mail” type to specify the form of input, we can command the browser to allow only strings that match the structure of a valid E-mail address. Built-in form validation is coming soon, but we can’t rely on it. Older browsers don’t understand this “E-mail” type and simply return to a plain text box.

<! DOCTYPE html><html lang="En">
<head>
<meta charset="Utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="Get">
<label for="Email">Email:</label>
<input id="Email" name="Email" type="Email" />
<button type="Submit"> Submit Form </button>
</form>
</body>
</html>
Copy the code

When it comes to elements and attributes that browsers do and don’t support, you need to know that current browsers aren’t all that reliable. For example, Opera only supports E-mail validation if you specify the name attribute. However, it does not support placeholder attributes (as we’ll see below). Finally, while you can use this form of validation, don’t rely too much on it.

A placeholder

Previously, we needed to use JavaScript to create placeholders for the text box. You can initially set the value attribute to see if it’s appropriate, but as soon as the user deletes the text, the input will be empty again. The placeholder attribute effectively compensates for this.

< input name = "email" type = "email" placeholder = "XXXX @163.Com "/ >Copy the code

The local store

Thanks to HTML5’s Local Storage, we can make advanced browsers “remember” what we type, even if the browser shuts down or refreshes later. Not all browsers support it, but the key ones are Internet Explorer 8, Safari 4, and Firefox 3.5. All support.

Semantic headers and footers

< div id = "header" >... </div><div id="Footer">
…
</div>
Copy the code

The code above is gone forever. Divs has no semantic structure at all, even when ID is applied. In HTML5, we can use header and footer elements, and the code above can be replaced with:

The < header >... </header><footer>
…
</footer>
Copy the code

Be careful not to confuse these two elements with the head and foot of the site. They just represent their containers.

Internet explorer and HTML 5

To ensure that new HTML5 elements display properly as block-level elements, it is necessary to style them with the following code:

header, footer, article, section, nav, menu, hgroup {
display: block;
}
Copy the code

Even so, IE still doesn’t know what these elements are, so it ignores these formats, using the following code to solve the problem:

documentThe createElement method (" article ");documentThe createElement method (" footer ");documentThe createElement method (" header ");documentThe createElement method (" hgroup ");documentThe createElement method (" nav ");documentThe createElement method (" menu ");Copy the code

Group Title (HGroup)

Assume that a website has a name and subtitle marked with h1 and H2 tags, respectively. In HTML4, there is no way to describe the relationship between the two with a good semantic relationship. In addition, there are more problems in terms of hierarchy when using H2 to display other titles on the page. With the group header hGroup element, we can group these headings together without affecting the overall 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>
Copy the code

The Required attribute

Forms allow new necessary attributes that specify whether a particular input is necessary. You can declare this property in two different ways, depending on your coding preferences:

< input type = "text" name = "someInput required" >Copy the code

Or, to be more precise:

< input type = "text" name = "someInput required =" required "" >Copy the code

Both lines of code work. With this line of code and the browser supporting the required attribute, forms entered blank will not be submitted. Here is a simple example, with placeholder attributes added:

< form method = "post" action ="">   Copy the code

If the input is empty, the form cannot be submitted, highlighting the text box.

Autofocus property

Similarly, with HTML5 there is no need for JavaScript solutions to solve the autofocus problem. If an input should be “selected” or focused, we can now use HTML’s autofocus attribute.

<input type= "text" name= "someInput" placeholder= "Douglas Quaid" required autofocus>Copy the code

Audio support

We no longer need to rely on third-party plugins to provide audio. HTML5 provides the audio element audio. Currently, only the latest browsers support HTML5 audio. At this point, it’s best to provide some backward compatibility.

The < audio the autoplay controls the autoplay controls "=" "> ="<source src="The file. The ogg" />
<source src="The file. The mp3" />
<a href="The file. The mp3">Download this file.</a>
</audio>
Copy the code

Video support

The audio element is very similar, and HTML5 video is also supported on the new browser. In fact, just recently YouTube announced a new HTML5 video embed. Unfortunately, since the HTML5 documentation doesn’t specify a specific encoder for the video, it’s all up to the browser. While Safari and IE9 support H.264 video, Firefox and Opera stick with Theora and Vorbis. Therefore, when displaying HTML5 video, you must provide two formats.

Video preloading

You first need to decide if you need a browser to pre-load the video. Is there a need? Suppose, for example, that a visitor comes to a page dedicated to displaying a video, and it makes sense to pre-load that page to save a bit of waiting time. You can preload the video by setting preload= “preload”, or by adding preload in between.

< video preload >... </video >Copy the code

According to the control

You may have noticed that with the code above, the video will just display as a picture without any controls. To get these play controls, we must specify these control properties in the video element.

< video preload controls >... </video >Copy the code

Regular expression

Thanks to the properties of the new schema, we can insert a regular expression directly into our code.

< form method = post action ="">  < INPUT ID = "username" type= "text" name= "username" placeholder= "4 <> 10" required= "required"  Copy the code

If you’re familiar with regular expressions, you’ll notice this new pattern: [a-za-z]{4,10} only accepts upper and lower case letters. The string must have a minimum of four characters and a maximum of ten characters.

Mark element

The main function of the Mark element is to highlight text on the page that needs to be visually important to the user. The string wrapped in this tag must be related to the user’s current behavior. For example, if I search for “Open your Mind” in some blogs, I can wrap every action with JavaScript in the Mark tag.

<h3> search results </h3>
<h6> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </h6>
Copy the code

When to use

Do YOU still need to use div tags? Of course. For example, if you want to wrap a piece of code around an element, especially for content positioning, div would be ideal. However, if you want to wrap a blog post or a list of links in the footer instead of the above, it is recommended that you use the article and nav elements respectively.