Strukturelle elementer i HTML5

1. Den primære funktion for <header> vil oftest være at fungere som container for elementet <nav>, et logo, hjemmesidens navn - de ting som typisk ligger placeret i toppen af siden.
2. <header> kan også indeholde en sekundær <nav> - altså en menu som ikke er hovednavigation for hele websitet, men kun rummer links til en afgrænset del af websitet.
3. <header> kan benyttes flere gange på samme side.

1. <nav> bør indeholde den overordnede navigation for websitet – altså links der fører til andre elementer på samme side eller til andet indhold fra samme website. Enkeltstående links og links der fører til eksternt indhold (andre hjemmesider) bør ikke placeres i <nav>
2. Links som ligger i <footer> bør ikke omkranses af <nav> - definitionen for elementet <footer> giver per default mulighed for at indsætte hyperlinks uden yderligere opnærkning i koden.
3. <nav> kan bruges flere gange på samme side. For eksempel kan jeg have en horizontal hovedmenu i toppen af siden og en vertikal menu placeret i en af siderne - begge bør opbevares i <nav>.
4. <nav> er ikke forbeholdt links opsat på liste-form (fx <ul> og <li>) - sæt af hyperlinks kan også opbevares i <nav> - for eksempel:

HTML

                <a href="side-A.html"</a> 
                <a href="side-B.html"</a>    
                <a href="side-C.html"</a>   
            

Til trods for at <main> er et af de elementer, der i forhold til brug og beskrivelse hersker uenighed om mellem de 2 organisationer som udvikler HTML5 (W3C og WHATWG), er der enighed om, at elementet kan kaldes en erstatning for div'en ofte kaldet id=”mainwrap” eller id=”content” eller lignende.

1. <main> omkranser sidens primære og mest betydningfulde indhold – er sidens formål for eksempel at beskrive et givent emne, vil <main> indeholde alt indhold af beskrivende karakter om emnet som artikler, info i siderne etc
2. <main> bør ikke indeholde elementer som ikke har direkte relevans for sidens formål – er sidens formål at beskrive et emne, er for eksempel en menu eller et logo ikke elementer som er strengt nødvendige for formålet, og bør derfor ikke omkranses af <main>
3. <main> må aldrig ligge inde i et header, nav, article, aside eller footer element
4. <main> må ligesom en 'id' div kun bruges 1 gang på en side

W3C versus WHATWG fortolkninger

Bemærk dog, at der mellem W3C og WHATWG på dette punkt er uenighed om fortolkningen – et argument for at <main> bør kunne bruges flere gange på samme side er, at sidens primære og mest betydningsfulde indhold ofte ligger adskilt fra hinanden af elementer som ikke bør opbevares i <main>. Se denne artikel på html5doctor for mere info.

Main eller section?

Desuden er der nogen uklarhed om forskellen på <main> og <section>, som i definitionen minder om hinanden – ophæver brugen af det ene element det andet? Jeg er tilbøjelig til at sige ja – kan alt indhold af primær betydning indeholdes i en enkelt <section>, er brugen af <main> ikke længere nødvendig og omvendt.

Afhængigt af hvem der fortolker definitionen af elementet, kan <section> i praksis bruges på flere forskellige måder – understående er min fortolkning, og er – ligesom alt andet på dette website - ikke nødvendigvis den eneste sandhed.

1. <section> kan indeholde et eller flere mindre underliggende elementer, som omhandler det samme emne og som kan beskrives ved hjælp af en enkelt sammenfattende overskrift placeret i toppen af <section>
2. <section> kan indeholde et eller flere elementer – for eksempel <article> og <aside>
3. <section> bør som udgangspunkt ikke opbevare elementerne <header> og <footer>
4. <section> kan benyttes flere gange på samme side

Om section vs article

Der er delte meninger om den hierakiske værdi af disse to elementer – hvilke af de to elementer er 'mother' og 'child' i sidens HTML? Nogle mener, at <article> bør bruges som container for <section>, og andre mener det modsatte gør sig gældende, mens andre igen mener, at begge dele kan bruges afhængigt af situation og indhold:

<section><!--HER ER SECTION 'MOTHER'-->
    <article><!--HER ER ARTICLE 'CHILD' -->
        ”Indhold her..”
    </article>
</section>

Efter min mening bør <section> indeholde <article> og ikke omvendt, da specifikationen ifor elementet <section> på WHATWG omtaler indholdet som værende ”..en gruppering af indhold med samme tema..”

Indholdet i section er flere elementer

Sammenholder jeg, at indholdet i <section> omtales som en gruppering – altså flere elementer – med specifikationen for <article>, som betegner indholdet som værende unikt i forhold til det omgivende indhold, mener jeg ikke, at <article> kan indeholde en <section> bestående af en gruppering af elementer.

Desuden findes en interessant debat her på stackoverflow, hvor især det sidste indlæg fra 'pandita' Sep 10. 2013 nederst på siden ved hjælp af rækkefølgen W3 lister de 2 elementer giver en spændende indgangsvinkel til fortolkningen af hierakiet mellem de 2 elementer.

Se kommentarerne ovenfor i section: ”Om <section> vs <article>”

1. <article> opbevarer en del af sidens indhold som enkeltstående kan give mening udenom sidens øvrige indhold
2. <article> kan opbevare elementer som <figure>, <aside> og almindelige HTML-elementer
3. <article> kan benyttes flere gange på samme side

1. Indholdet af <aside> relaterer sig sidestillet eller underordnet til sidens primære indhold, og bør ikke have direkte betydning for forståelsen af sidens indhold – indholdet af <aside> bør altså kunne fjernes, uden at siden af den grund bliver mindre forståelig
2. <aside> kan findes i <article> hvis indholdet af <aside> relaterer sig direkte til indholdet i <article>
3. <aside> kan præsentere for eksempel information som uddyber sidens indhold i form af årstal, geografi eller en reklame – altså ofte de ting jeg har liggende i siden af HTML-dokumentet - fotos bør ikke opbevares i <aside>, men i elementet <figure>
4. <aside> kan benyttes flere gange på samme side

1. <footer> afrunder oftest hele sidens indhold, og ligger placeret i bunden med info om for eksempel adresse og kontakt
2. <footer> kan sagtens optræde flere gange på samme side, da indholdet i <footer> markerer en individuel afslutning af en forudgående <section> - så jo, er der 2 <sections> på samme side, kan der principielt optræde 2 <footer> også
3. <footer> kan indeholde enkeltstående hyperlinks til åbning af et mail-program eller en side indeholdende en kontaktformular - det er ikke nødvendigt, at omkranse hyperlinks i <nav>, når de er placeret i <footer>

Medvirkende til usikkerheden omkring brugen af <h1> er, at søgemaskinerne har brugt disse tags til indeksere hjemmesiders indhold.

Søgemaskiner og indeksering via h1

Når en søgemaskines robotter første gang besøger mit website for at indeksere indholdet, bruger og husker de indholdet af <h1> til at levere forslag, der matcher de søgninger vi indtaster i søgemaskinen – jo bedre <h1> matcher vores søgninger, desto flere besøgende vil websitet få, hvilket i sidste ende kan give en regulær økonomisk gevinst hvis hjemmesiden tilhører et firma.

Dette har webudviklere udnyttet maksimalt ved for eksempel at bruge <h1> som en container for alt indhold på en side, eller ved at indsætte mange <h1> med forskelligt indhold på samme side, og derved opnå få mest muligt indhold indekseret i søgemaskinerne.

Resultatet er, at søgemaskinerne har måttet udvikle nogle filtre, som kan vurdere brugen af <h1> på en side – når det gælder Google siger ”myten”, at bruger jeg mere end et enkelt <h1> på den samme side, vil Google ”straffe” mit website ved at give det en dårligere placering i forhold til Page Rank.

Så tommelfingerreglen har op til i dag været, at jeg kun bør bruge et enkelt <h1> på hver side for at undgå at siden bliver registreret som ”spam” af søgemaskinernes robotter.

HTML5 og mere end et h1>

Med introduktionen af HTML5 åbnes der nu op for at bruge flere <h1> på den samme side ud fra en semantisk og strukturel betragtning - under forudsætning af, at <h1> fungerer som indledning til et nyt afsnit i for eksempel en <section>), hvori indholdet kan betegnes som unikt og selvstændigt.

Men hvordan spiller dette sammen med søgemaskinernes krav til brugen af <h1>? Det er et af de spørgsmål, der i skrivende stund optager mange webudviklere – udmeldingerne fra Google og Bing om emnet er modstridende og uklare, så vil jeg være på den sikre side, holder jeg mig til den gamle tommelfingerregel og nøjes med et <h1> per side indtil HTML5 er fuldt udviklet.

Læs eventuelt denne udmærkede artikel af Kezz Bracey på tutsplus.com om brugen af multiple <h1> i en HTML5-opsætning, og ikke mindst den efterfølgende debat i kommentarerne nederst på siden – dette viser tydeligt, hvor stor uenighed der kan være i forhold til fortolkning og brug af elementerne.

En kommentar til artiklen får derefter sin helt egen side på en af debatørers personlige blog adrianroselli.com

Hele diskussionen fører til, at spørgsmålet om hvordan beskrivelsen af elementet <h1> skal fortolkes i en HTML5 kontekst i januar 2014 rejses i forummet for udviklerne fra W3C

Til trods for at elementet <hgroup> stadig kan findes på både WHATWG og W3C er <hgroup> dødt og skrinlagt – brug derfor ikke <hgroup> på nye sider..

http://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html

1. <hgroup> opbevarer <h1> - <h6> i grupper af 2 eller flere for eksempel:

            <hgroup>
                <h1>Mine sandaler</h1>
                <h2>Købt i Snekkersten 1893</h2>
            </hgroup>
        

1. <figure> opbevarer grafiske elementer som fotos, lillustrationer og diagrammer, men også video og eksempler på kode (brug <pre når visning af kode sker gentagne gange).
2. Indholdet i <figure> bør være unikt, og bør kunne slettes uden at det får konsekvenser for den overordnede forståelse af sidens samlede indhold og formål. På den måde ligner <figure> elementet <aside> i funktion - dog med et grafisk indhold frem for et tekstuelt indhold som i <aside>.
3. <figure> bør ikke fungere som container for indhold, hvis formål udelukkende er af dekorativ karakter - for eksempel bør baggrundsbilledet i en header ikke omkranses af <figure>, da det kun har betydning i forhold til layoutet i headeren og ikke i forhold til teksten på siden. Omvendt vil jeg placere et logo i <figure>, da det har relevans for siden.
4. <figure> kan indeholde et eller flere elementer og kan bruges flere gange på den samme side.

1. <figcaption> indeholder beskrivende tekst til et eller flere elementer i <figure>
2. <figcaption> kan indeholde et relevant link med SEO-venlig 'title' <figure>
3. <figcaption> kan kun benyttes 1 gang for hver enkelt <figure> - også selvom <figure> indeholder flere forskellige emner

<figure>
	<img src="images/dametaske.jpg" >
	<figcaption>Originalt foto af Ove Evild</figcaption>
</figure>

Som navnet antyder bør alle knapper der udfører en handling ved hjælp af et klik opbevares i <button>. Der findes imidlertid 3 forskellige typer af elementet <button>, som hver især repræsenterer knapper med hvert sit formål:

Button

Dette er den klassiske knap, som udfører en handling, når der klikkes på den

For eksempel åbner den en skjult div ved hjælp af Jquery:

<button type="button"> Vis info </button>

Submit

Denne type button optræder typisk i en form

For eksempel kan den fungere som en ”ja tak”-knap efter at brugeren har indtastet oplysninger i formularens felter:

<button type="submit" value="Accepter indtastninger"/> Accepter indtastninger </button>

Reset

Også denne type button bruges oftest i en form

En 'reset' <button> vil retablere en <form> til dens default indstillinger – altså slette alle tidligere aktiviteter og nulstille formularen til oprindelige tilstand:

<button type "reset" value="Nulstil og start forfra"/> Nulstil og start forfra </button>