Home>Web design tutorial>WEB standardization

New elements in HTML 5

Author：Eve Cole Update Time：2009-05-31 00:37:41

In my opinion, HTML 5 is a compromise solution. Although it is not radical, it can promote the continued progress of technology. There are no namespaces, elements are not required to be closed (which is not an advantage, of course), and browsers can handle some errors leniently. Everything follows the practices of HTML 4 in the last century. When it comes to HTML rendering, browsers are stuck at 1999 levels. To this end, HTML 5 is a pragmatic solution, which not only can continue to process HTML that has been scattered in all corners of the world for so many years, but also makes it easier for browser manufacturers to add new features. This is called degrade gracefully. Let's take a look at some of the new elements added by HTML 5.

Structural elements

This is a real pleasure. Currently, we can only define the structure through a "universal" div, trying to express the header, bottom or sidebar respectively by setting the value of its attribute id such as header, footer, sidebar, etc. With them, code writers no longer need to worry about naming IDs, which has more semantic benefits for mobile phones, readers and other devices. HTML 5 adds new structural elements to express these most commonly used structures:

section: This can express a part or chapter of a book, or a section within a chapter

header: The header on the body of the page. Not a head element

footer: The bottom of the page (footer), which can be the location of an email signature

nav: a collection of links to other pages

article: An independent record in a blog, magazine, compendium, etc.

For example, the homepage of a blog, written in HTML 5, could look like this (with some omissions):

The following is the quoted content:

<<!DOCTYPE HTML>
<HTML>
<head>
<title>realazy</title>
</head>
<body>
<header>
<h1>Realazy</h1>
</header>
<section>
<article>
<h2><a href="http://realazy.org/blog">Title</a></h2>
<p>The content is here...(omit the n word)</p>
</article>
<article>
<h2><a href="http://realazy.org/blog">Title 2</a></h2>
<p>Content 2 is here...(omit the n word)</p>
</article>
...
</section>
<footer>
<nav>
<ul>
<li><a href="http://realazy/blog">Navigation 1</a></li>
<li><a href="http://realazy/blog">Navigation 2</a></li>
...
</ul>
</nav>
<p>© 2007 realazy</p>
</footer>
</body>
</HTML>Block-level block semantic elements
HTML also adds the following three block-level elements:

aside
figure/code>
dialog
aside can be used to express notes, tips, sidebars, summaries, inserted quotes, etc. as supplementary content. For example, express the sidebar of the blog like this:

<aside>
<h3>Latest articles</h3>
<ul>
<li><a href="http://realazy.org/blog/">Article title</a></li>
...
</ul>
The </aside>figure element represents a block-level image with a description. for example:

<figure>
<legend>This is the description of the picture</legend>
<img alt="Image alternative text" src="/path/to/img.png" />
The </figure>dialog element is used to express conversations between people. In HTML 5, dt is used to represent the speaker, and dd is used to represent the content of the speaker. like:

<dialog>
<dt>Buddha</dt>
<dd>Color is emptiness</dd>
<dt>Wukong</dt>
<dd>I now need some empty...inline semantic elements

The m element is used to mark some text that does not require emphasis. It is still controversial and may eventually be changed to mark.

The time element, as its name suggests, is used to express time. It requires a datetime feature to indicate a time that the machine can recognize, such as:

<time datetime="2008-08-08T20:08:08">8:08:08 pm on August 8, 2008</tiem> The meter element expresses a value within a specific range. Can be used for salaries, percentages, fractions, etc. for example:

I'm sorry to tell you that I only have <meter>150cm</meter>. It also has 6 features to express various meanings, such as:

<p>Your score is: <meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.</p >

There is also progress, which is just as its name suggests, used to express progress:

Goal completion: <progress value="40" max="100">40%</progress> Embed multimedia

Added video and audio elements. As the name suggests, they are used to insert video and sound respectively. As for the format, it is left to the browser to implement, and HTML no longer needs special code to play a specific format. Just like img, it can be displayed whether it is png, jpg or gif. Notably, they can contain content. For example, you can put lyrics into a certain song:

The following is the quoted content:
<audio src="Who sleeps with you.mp3">
<p>The tears dried up</p>
<p>How can I bear to wrong myself</p>
<p>There was a moment of sadness and joy</p>
...
</audio>

interactivity

HTML 5 is also called Web Applications 1.0, so it also further develops interactive capabilities. These tags are designed to improve the interactive experience of the page:

The following is the quoted content:
details
datagrid
menu
command

details

It is used to represent a specific piece of content, but the content may not be displayed by default. It will be displayed after interacting with the legend through some means (such as clicking). This is somewhat similar to the current methods of hiding a piece of content through JavaScript and displaying it after clicking. for example:

Record every bit of life in one sentence,

The following is the quoted content:
<details>
<legend>More</legend>
<p>Communicate and share, bring you and your friends closer, support MSN/GTalk/QQ, SMS, mobile WAP</p>
</details>It can have an open attribute to display details or not.

The datagrid is used to control data and can be updated by users or scripts.

menu existed in HTML 2, but HTML 4 made it obsolete. HTML 5 waste is used and the command element is added during the period.

Reference: New elements in HTML 5

Related Articles