Strukturelle elementer i HTML5

Udviklingen af HTML5

Når jeg bruger HTML5, er det vigtigt at huske, at sproget i skrivende stund er under udvikling - der indføres stadig nye elementer, mens andre kassereres. Samtidig er der blandt webudviklere løbende debat om, hvorledes definitionen af de enkelte elementer skal fortolkes og benyttes i praksis - kritikere mener, at beskrivelserne er for løst formulerede og ofte ikke giver mening når anvendt i praksis. Samtidig analyseres brugen af elementerne af udviklerne bag sproget HTML5, hvliket i sidste ende vil få betydning for definitionen af de enkelte elementer.

W3C og WHATWG

Selve udviklingen af sproget HTML5 og styringen af elementer og beskrivelser ledes af organisationen W3C (World Wide Web Consortium), mens WHATWG sideløbende bidrager med egne definitioner, fortolkninger og undersøgelser. Oprindeligt var W3C enerådig i forhold til sproget HTML, men da der omkring årtusindskiftet internt i W3C opstod uenighed om i hvilken retning HTML skulle forme sig fremadrettet, førte det til dannelsen af udbrydergruppen WHATWG, således at vi i dag nu har 2 organisationer som sideløbende arbejder på udviklingen af HTML5.

Hvad angår fortolkning og implementering af HTML5-elementerne er de 2 organisationer langt hen ad vejen enige, men på enkelte områder er det tydeligt, at der hersker stor uenighed – læs her diskussionen på hjemmesiden html5doctor.com i forlængelse af en beskrivelse af elementet <main>, som tydeligt viser uenigheden mellem repræsentanten for W3C Steve Faulkner og Ian "Hixie" Hickson fra WHATWG.

Generelle retningslinier for brugen af HTML5-elementer

Disse ting bør altid overvejes:
  • Alle elementer bør indsættes i et Reset CSS, og bør udover almindelig styling for et Reset CSS også tilføjes display: block;
  • Et strukturelt element bør altid have en semantisk funktion – altså medvirke direkte til forståelsen af sidens formål. Et strukturelt elements funktion kan således aldrig kun have betydning for sidens udseende og layout – til dette formål bør jeg som normalt bruge div, span etc
  • De strukturelle HTML5-elementer kan og bør ligesom en ”almindelig” div styles ved hjælp af CSS – et strukturelt element kan altså have en funktion i forhold til layout, samtidig med at det opfylder sin primære funktion i forhold til semantisk struktur.

Beskrivelser af elementerne

header

header kan have flere funktioner:

  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. Alternativt kan <header> rumme en introduktion til efterfølgende elementer – indholdet kan fx være <h1> - <h6>, en dato for udgivelsen af materiale, navn på forfatteren og lignende ??????????????????
  4. <header> kan benyttes flere gange på samme side.

"The header element typically contains the headings for a section (an h1-h6 element or hgroup element (Edit: <hgroup> er udgået), along with content such as introductory material or navigational aids for the section."

Kilde: http://www.w3.org/TR/html-markup/header.html#header

nav

nav er en forkortelse af 'navigation' – indholdet af nav bør være links.

  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>   

"The nav element represents a section of a document that links to other documents or to parts within the document itself; that is, a section of navigation links."

Kilde: http://www.w3.org/TR/html-markup/nav.html#nav

main

Medio 2013 er main introduceret.

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.

"The main element represents the main content section of the body of a document or application. The main content section consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application."

Kilde: http://www.w3.org/TR/2012/WD-html-main-element-20121217/

"The main element can be used as a container for the dominant contents of another element. It represents its children. "

Kilde: http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-main-element

section

I praksis bruges section på forskellige måder.

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..”

”The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”

Kilde: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

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.

”The section element represents a section of a document, typically with a title or heading.”

Kilde: http://www.w3.org/TR/html-markup/section.html#section

article

Brugen af article er ligesom flere andre HTML5-elementer åben for fortolkning.

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

"The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry."

Kilde: http://www.w3.org/TR/html-markup/article.html#article

aside

aside bør bruges til opbevaring af sekundært indhold:

  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

"The aside element represents content that is tangentially related to the content that forms the main textual flow of a document."

Kilde: http://www.w3.org/TR/html-markup/aside.html#aside

footer

footer kan have flere funktioner:

  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>

"The footer element represents the footer for the section it applies to."

Kilde: http://www.w3.org/TR/html-markup/footer.html#footer

Andre vigtige elementer

h1 - h6

h1 er et af de tags, der altid har været meget debat omkring

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.

"The h1 through h6 elements are headings for the sections with which they are associated."

Kilde: http://www.w3.org/TR/html-markup/h1.html#h1

Debatten om brug af flere h1 i HTML5

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

hgroup

hgroup samler grupper af headings: h1 - h6

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>
figure

figure opbevarer grafiske elementer og lignende

  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.

"The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning."

Kilde: http://www.w3.org/TR/html-markup/figure.html#figure

figcaption

figcaption beskriver indholdet i figure

  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>

"The figcaption element represents a caption or legend for a figure."

Kilde: http://www.w3.org/TR/html-markup/figcaption.html#figcaption

button

button er en knap som kan klikkes på

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:

1. 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>

"The button element with a type attribute whose value is "button" represents a button with no additional semantics."

Kilde: http://www.w3.org/TR/html-markup/button.button.html#button.button


2. 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>

"The button element with a type attribute whose value is "submit" represents a button for submitting a form. "

Kilde: http://www.w3.org/TR/html-markup/button.submit.html#button.submit


3. 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>

"The button element with a type attribute whose value is "reset" represents a button for resetting a form."

Kilde: http://www.w3.org/TR/html-markup/button.reset.html#button.reset


Grafisk overblik

HTML5-graphic-setup

Grafisk overblik over hierakiet for de strukturelle elementer - grafik af Kenneth Hayes