HTML5 Tips 1: The speed of technology development today is amazing. If you are not careful, you may not be able to keep up with it. The development of the new generation of HTML-HTML5 continues to bring us new surprises. We will introduce some HTML techniques to you through this article.
1. New document type (Doctype)
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Are you still using the above XHTML document type that is both troublesome and difficult to remember? If this is still the case, it's time to switch to the new HTML5 document type.
<!DOCTYPE html>
Now it only takes 15 characters such a simple one. (Note: Your doctype declaration needs to appear on the first line of your html file.)
2. Graphics (Figure) elements
Are you still considering using the following code to mark images?
<mg src=path/to/image alt=About image />
<p>Image of Mars. </p>
The above code cannot be associated with the title of the graph in a simple and semantic way, because it is simply wrapped with paragraph marks and image elements, and HTML5 improves this by introducing <figure> elements. When used in conjunction with the <figcaption> element, we can pair the graphic title with the graphic. The code is as follows:
<figure>
<img src=path/to/image alt=About image />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3. Redefine <small>
It turns out that you can use the <small> element to create subtitles closely related to the logo. However, now HTML5 has modified this usage, and the <small> element has been redefined, or more appropriately, it is now used to represent small words or other side notes (such as copyright notice at the bottom of the website).
4. No more scripts or link types are needed
Most likely you are still adding properties of type to your links and script tags like the code below.
<link rel=stylesheet href=path/to/stylesheet.css type=text/css />
<script type=text/javascript src=path/to/script.js></script>
In HTML5, this is no longer needed. It means that these two labels represent styles and scripts respectively. Therefore, we can delete all their type attributes. The code is as follows:
<link rel=stylesheet href=path/to/stylesheet.css />
<script src=path/to/script.js></script>
5. Use or not use quotes
Remember, HTML5 is different from XHTML, and you don't have to wrap the attributes in quotes if you don't like it. However, if you think using quotes will make you feel more comfortable, of course there will be no problems.
<p class=myClass id=someId> Start the reactor.
6. Make your content editable
One of the very powerful features of HTML5 is contenteditable, which, as the name implies, will allow the user to edit any text content contained within an element (including his child elements). It has a wide range of uses, such as simple task lists or wiki-based sites, and one of its advantages is that it utilizes 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>
Or, as the fifth trick says, you can also write the code on line nine like this (without quotes):
<ul contenteditable=true>
7. Email input
If we apply the email type to specify the form of the input, we can command the browser to allow only string input that conforms to the valid email address structure. Although built-in form verification will arrive soon, we cannot rely entirely on this. Older browsers don't understand this email type, they simply return to the normal 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>
When it comes to elements and attributes that the browser supports and does not support, you must know that all browsers are not that reliable at present. For example, Opera only supports email verification if you specify the name attribute. However, it does not support the placeholder attribute (as will be discussed below). Finally, while you can use this form of verification, don't rely too much on it.