Comment: The HTML structure is clearer and more standardized, and learn the idea of HTML5 optimization structure. HTML5 has added some new elements to identify commonly used structures. HTML is more semantic, but we cannot use it directly, and we have to wait for it for ten or eight years even if it is possible. It's like a micro format, use class instead, or click it at will, use id and class names to make your structure clearer
The HTML structure is clearer and more standardized, and learn the idea of HTML5 optimization structure.HTML5 has added some new elements to identify commonly used structures. HTML is more semantic, but we cannot use it directly, and we have to wait for it for ten or eight years even if it is possible.
It's like micro format, using class instead, or click at will, using id and class names instead, making your structure clearer, and can be promoted into a standard, making team collaboration smoother.
Some new structural markers
◎section: This can be a chapter or section in the book, and it can actually be anything with its own title in HTML4
◎Header: The header displayed on the page; it is different from the head element
◎footer: footer; can display signatures in emails
◎nav: A set of links to other pages
◎article: an article in blog, magazine, article compilation, etc.
Some examples
HTML5 document structure
<header>...</header>
<nav>...</nav>
<article>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>
XHTML document structure
<divid=header>header</div>
<divid=nav>nav</div>
<divclass=article>
<divclass=section>section</div>
</div>
<divid=aside>aside</div>
<divid=footer>footer</div>
HTML5 picture structure
<figureid=fig2>
<legend>Figure2.InstallMozillaXFormsdialog</legend>
<imgalt=AWebsiteisrequesting permission to install theollowingitem:MozillaXForms0.7Unsignedsrc=installdialog.jpg/>
</figure>
XHTML image structure
<divclass=figure>
<h4class=legend>Figure2.InstallMozillaXFormsdialog</h4>
<imgalt=AWebsiteisrequesting permission to install theollowingitem:MozillaXForms0.7Unsignedsrc=installdialog.jpg/>
</div>
HTML5 tagging
The m element means that the text is marked, but it does not have to be emphasized. Think of it as a section highlighted in the book.
Google's cached pages are a typical use case. If linked to a cached copy, the search term is marked. For example, if you search for Egret, the cached Google page might look like this:
The Great<m>Egret</m>(alsoknownastheAmerican<m>Egret</m>)isalarge whitewading bird found worldwide.The Great<m>Egret</m>flies with slowing beats.Thescientific name of the Great<m>Egret</m>isCasmerodiusalbus.XHTML tagged The Great<spanclass=m> Egret</span>(alsoknownastheAmerican<spanclass=m>Egret</span>)isalarge whitewading bird found worldwide.The Great<spanclass=m>Egret</span>flies with slowing beats.Thescientific name of the Great<spanclass=m>Egret</span>isCasmerodiusalbus.