HTML 5 Structure tags demo

StackOverflow https://stackoverflow.com/questions/2616579

  •  26-09-2019
  •  | 
  •  

Question

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

Was it helpful?

Solution 2

WT... I FIND THIS!!! http://netstream.ru/htmlsamples/html5-blog/index.html Here, this is georgeous!!!

OTHER TIPS

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top