HTML 5 Structure tags demo_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-27 00:34 出处：网络

i can\'t find demo of structure tags <header>, <footer>, <articles> ... http://brucelawson.co.uk/tests/html5-elements.html

相关专题：demo tags

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