First, we have to declare and create the document type, we are no longer as HTML 4 or XHTML 1.0 PUBLIC “- / / W3C / / DTD XHTML 1.0 Transitional ….. statements, we can write:
<!doctype html>
Look, simple and obvious, not case sensitive. It can be more easily backwards compatible. Can at least save you some typing time.
HTML5 We have now to define the type of HTML5 document. So far so good.Now we look at new HTML5 tags. Before we visit a new tab, take a look at is how we normally write
<html>
<head>
...other...
</head>
<body>
<div id="header">
<h1>css3-html5 home</h1>
</div>
<div id="nav">
<ul>
<li>home page</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="content">
<h1>heading</h1>
<p> ... </p>
</div>
<div id="footer">
<p>copyright information</p>
</div>
</body>
</html>
In the above example, the use of <div>. It is now very common practice. Its purpose is twofold, first, providing a unique identity ID, can be applied to a specific page section. Secondly, identification as a primitive, pseudo-semantic structure. ID name of each site may vary, and then we can hardly understand what it means that ID.
<header> Tags:
<header>tag is equivalent to our normal as defined by <div id=”header”>. If your site or <div id=”header”> this definition, we can now replace it with <header>.
<nav> Tags:
<nav> a navigation label, just like we normally use:
<div id="menu">
<ul>
<li>index</li>
<li>news</li>
...
</ul>
</div>
Now with <nav>:
<nav> <ul> <li><a href="index.html">home</a ></li> <li><a href="/about/">about</a></li> <li><a href="/blog/">blog</a></li> </ul > </nav>
<section> Tags:
<section> label which can be a content or thematic groups, usually with a start tag and end tag. Of course, the tags can also be nested. <article> Tags:
<article>tag which can be a content.
<aside>
<footer> Tags:
<footer> label, do not say that people can understand what this is used instead. Can have more than one, usually the very bottom of the site.
<!DOCTYPE html>
<html>
<head>
... Stuff ...
</head>
<body>
<header>
<h1>My Site</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<h1>My Article</h1>
< article >
<p> ... </p>
</article>
</section>
< footer >
<p> ... </p>
</footer>
</body>
</html>
Through the code, more concise and easier to understand, right?