Lidt om HTML 5 – Tags

-Kort sagt gør de nye tags det nemmere for brugerne og giver en forbedret søgemaskineoptimering. 

<header>.

<header> bruges for det meste i toppen af din side og er det nye <div id=”header”> tag som vi kender.

I headeren kan man placere logo, navigation, søgebar og sidens overskrift men, kan også bruges mere en 1 gang på din side f.eks. i toppen af hver af dine sektioner f.eks.:

<article>

     <header>  

          <h1>overskrift</h1>

          <p>tekst</p>

    </header>

</article>

<article> og <section>.

Article kan bruges til mange ting som en artikel på siden, kommentarer, opslag på et forum osv.

Der er mange diskussioner om opbyggelsen af <article> og <section>, om det skal være <article> inde i <section> og omvendt eller om de skal være helt separate.

Det vi synes giver mest mening er denne opbyggelse af koden hvor du har 1 <section> hvor der så kan være flere <article>’s (som i en avis med en sports sektion hvor der er flere forskellige artikler):

<section>

  <article>

     <header>  

          <h1>overskrift</h1>

     </header>

          <p>tekst</p>

 </article>

 <article>

     <header>  

          <h1>overskrift</h1>

     </header>

       <p>tekst</p>

   </article>

</section>

<aside>.

<aside> har noget indhold som har med siden/den artikel den ligger i f.eks. en lille fakta boks der ligger i siden af artiklen eller bare en farvet boks med fremhævet tekst. Rygterne vil vide at hvis denne fjernes giver det andet stadig mening.

Nogen bruger <aside> til en menu/liste eller reklamer helt ude i siden på sitet men dette er forkert!!

Eksempel på opbygning af kode:

  <article>

     <header>  

          <h1>overskrift</h1>

     </header>

          <p>tekst bla bla bla </p>

          <p>tekst bla bla bla </p>

          <p>tekst bla bla bla </p>

              <aside>

                      <q>info info </q>

             </aside>

          <p>tekst bla bla bla </p>

</article>

(<q> tagget kan bruges til at definere et kort citat)

<footer>.

Footer er ligesom <header> bare omvendt og kan placeres i bunden af din side med en <adress> eller som header bruges flere gange på siden bare i bunden af dine <article>’s.

<nav>.

A.k.a navigationen.                                                                                                      Bruges til at ”binde udenom din hovedmenu” f.eks.:

<nav>

  <ul>

     <li><a href=”menu1.html”></a>menu1</li>

     <li><a href=”menu2.html”></a>menu2</li>

     <li><a href=”menu3.html”></a>menu3</li>  

  </ul>

</nav>       

Hvilket gør det nemmere for skærmoplæsere og det ser godt ud på Google:

 

(Husk også at strukturen i din nav er vigtig i forhold til Googles visning)














(screenshot fra www.Google.com)