HTML 5 Structure tags demo
i can't find demo of structure tags <header>
, <footer>
, <articles>
...
http://brucelawson.co.uk/tests/html5-elements.html
Here,开发者_开发百科 something like this, but with highlighted of each elements
Please, help
There a good article at list apart (as usual) : http://www.alistapart.com/articles/previewofhtml5
For a simple structure, it's posible to enclose 'article' and 'aside' inside a 'section' but this not mandatory if you have only one section.
For example :
<header>...</header>
<section>
<article>...</article>
<aside>...</aside>
</section>
<footer>...</footer>
is the same than :
<header>...</header>
<article>...</article>
<aside>...</aside>>
<footer>...</footer>
But as this tags are very flexibles they are not fixed to one place, for example :
<header>...</header>
<section>
<header>...</header>
<nav>...</nav>
<aside id="navbar1">...</aside>
<article>
<header>...</header>
<section>...</section>
<aside>...</aside>
<footer>...</footer>
</article>
<aside id="navbar2">...</aside>
<footer>
</footer>
</section>
</section>...</section>
<nav>...<nav>
<footer>...</footer>
Two great resources are HTML5 Doctor and HTML5 Gallery. They offer detailed articles on how to use new HTML5 tags and examples of sites using them, respectively.
The post above is correct, but the navigation tools should use the <nav>
tag, that is more semantic code.
(note: don't use the section tag for a global container, use <div id="main">
or even <body>
with the rearranged header and footer):
<header>...</header>
<div id="main">
<header>...</header>
<nav>...</nav>
<aside class="nav_container">
<nav id="navbar1">...<nav>
</aside>
<article>
<header>...</header>
<section>...</section>
<aside>...</aside>
<footer>...</footer>
</article>
<aside class="nav_container">
<nav id="navbar2">...<nav>
</aside>
<footer>
</footer>
</div>
</section>...</section>
<nav>...<nav>
<footer>...</footer>
Introduction with html5 is best way
精彩评论