Igang med HTML5

Tags: html

Skrevet af Bruger #7662 @ 25.09.2010

Introduktion

Ifølge hjemmesiden http://ishtml5readyyet.com må vi vente 4120 dage, før HTML5 er klar. Det kan der være noget om, for HTML5 er endnu ikke en standart, og det har lange udsigter. Følgende er taget fra http://da.wikipedia.org/wiki/HTML5, for det kunne jeg ikke have formulerer bedre selv.

Ian Hickson, redaktør af HTML5 specifikationen, forventer at specifikationen når W3C Candidate Recommendation milepælen i 2012 - og W3C Recommendation i år 2022 eller senere. Mange dele af specifikationen er dog stabile og kan blive implementeret i slutprodukter.

Og det er den sidste sætning vi skal lægge mærke til. Flere HTML5 specifikke containers (/læs tags) er nemlig stabile og kan implementeres i vores produkter (/læs hjemmesider). Med Microsofts Internet Explorer 9, kan alle populære browsere på markedet nu læse og forstå disse nye containers, som vi vil kigge nærmere på.

HTML5 strukturen

Det første man gør, når man opretter en ny HTML side, er at oprette HTML strukturen. Førhen har dette været en noget kedelig proces, hvor man enten har været på nettet og copy+pasted, eller haft små templates liggende på computeren. Dette har HTML5 haft focus på, og nu tager det kun få minutter at oprette et korrekt HTML5 dokument.

!DOCTYPE
Før HTML5 har !DOCTYPE set sådan ud

HTML kode

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Fuldstændigt urimeligt lang og umulig at lære udenad, men det har man haft fokus på i udviklingen af HTML5, og når vi i fremtiden skal deklarere !DOCTYPE gøres det på denne simple måde

HTML kode

 <!DOCTYPE html>

Det her er til at have med at gøre. Det er til at huske, og der er ingen overskydende og ubrugelig information. Det er vigtigt, at der ikke må være noget mellemrum før <!DOCTYPE>, det vil få nogle browsere til at starte i quirks mode.

Ved du ikke, hvad quirks mode er? Det er en af grundene til, at vi laver strukturerede dokumenter for større tilgængelighed. (/læs http://en.wikipedia.org/wiki/Quirks_mode).

Strukturen

Resten af strukturen ser ud som vi kender den fra førhen:

HTML kode

 <html>
 <head>
 <title></title>
 </head>
 <body>
 
 </body>
 </html>

Der er altså intet nyt under solen her, men tager vi et nærmere kig på head sektionen, før vi endnu en gang en god overraskelse.

Når vi før HTML5 skulle deklarere charsæt (/læs tegnsæt) brugte vi følgende metode:

HTML kode

 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Igen er der mange ting man skal huske, og vi skal 60 tegn hen i sætningen, før vi kommer til det vigtige. Med HTML5 gøres dette simpelt

HTML kode

 <meta charset="utf-8">

Læg mærke til at meta containeren ikke er afsluttet med />. XHTML kræver at man afslutter alle enkelt containere med />. Dette er HTML5 ligeglad med. HTML5 specifikationen er opbygget således at browseren ved, at når der kommer et enkelttag, skal der ikke ledes efter en afsluttende container.

Vi har altså en HTML5 struktur, der ser således ud:

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
   <title>Gyldig HTML5</title>
   <meta charset="utf-8">
 </head>
 <body>
   <p>Mit første HTML5 dukoment</p>
 </body>
 </html>

De nye containere

HTML5 byder på en ny række containere, som gør vores dokumenter mere struktureret. Denne nye måde at opbygge vores dokumenter på, kan virke uoverskueligt ved første øjekast, men med den rette tilgang/tankegang, vil problemerne med overgangen til denne måde at opbygge dokumenter på være små i forhold til gevinsterne.

header
hgroup

To nye containere er header og hgroup. Header bruges hver gang vi har en overskrift ( /læs <h1>-<h6> ), og hgroup bruges hver gang vi har flere overskrifter.

HTML kode

 <header>
   <h1>En overskrift i HTML5</h1>
 </header>
 
 <hgroup>
   <h1>Overskrift i HTML5</h1>
   <h3>Under-overskrift i HTML5</h3>
 </hgroup>

footer

Denne container bruges i bunden af et dokument, hvor man tidligere ville have brugt <div id="footer">, men i HTML5 har footeren altså fået sin egen container. Det hjælper bl.a. med at holde styr på strukturen i dokumentet.

Eksempel på brug af footer

HTML kode

 <!-- Klippet ud af dokument -->
 <footer>
   <p>Copyright by mysite.www 2020 with HTML5</p>
 </footer>
 </body>
 </html>

article

En anden ny container er article. Indholdet i article skal kunne stå alene, og stadig give mening, hvis det bliver genbrugt et andet sted på siden, eller hentet af en RSS læser. Eksempler, hvor article er den korrekte container: artikler (som f.eks. denne, ville være gyldig i en article container) forum indlæg, gæstebogs indlæg, kommentarer osv.

Eksempel på brug af article containeren

HTML kode

 <article>
   <header>
     <h1>HTML5 vinder point</h1>
   </header>
 
   <p>HTML5 vinder stadig point hos flere webudviklere</p>
 </article>

aside

Som navnet på containeren antyder, så er <aside> en container til indhold, som måske ikke kan stå alene, men som relaterer til andet i vores dokument. Det behøver ikke relatere til hele hjemmesiden, men skal forbindes med indholdet i f.eks. en article container.

Eksempel på brug af aside containeren

HTML kode

 <article>
   <header>
     <h1>HTML5 vinder point</h1>
   </header>
 
   <p>HTML5 vinder stadig point hos flere webudviklere</p>
 </article>
 
 <aside>
   <hgroup>
     <h1>Fakta om HTML5</h1>
     <h3>Uden filter</h3>
   </hgroup>
 
   <p>Hvis man sværger til Microsofts internetbrowser Internet Explorer og bruger Windows XP, så ser fremtiden sort ud. Microsoft udgiver nemlig kun Internet Explorer 9, som understøtter HTML5, til Windows vista og Windows 7.</p>
 </aside>

nav
Navnet på <nav> containeren er en forkortelse af navigation, og er en container til links i vores navigationslinje. <nav> skal ikke bruges, hver gang vi har et link, men kun i navigations felter.

Eksempel på brug af nav

HTML kode

 <nav>
   <a href="index.htm">Hjem</a>
   <a href="html5.htm">Lær mere om HTML5</a>
   <a href="kontakt.htm">Kontakt os</a>
 </nav>

section

Som navnet på containeren antyder, så er <section> en ny sektion på siden. En <section> bruges kun hvis article, aside og nav ikke er passende. <section> bruges ikke til at style din hjemmeside, det er stadig div's job.

HTML kode

 <section>
   <header>
     <h1>HTML5 hmm...</h1>
   </header>
 
   <p>Ved ikke helt, om mit indhold kan stå alene. Jeg inderholder ikke vejvisende links, og jeg relaterer ikke rigtigt til noget på siden. Jeg passer i en <section> container</p>
 </section>

Opsætning af HTML5 dokument

For at gøre det nemmere at overskue, hvordan man skal indsætte sit indhold i dokumentet, kan det hjælpe at man laver en punktegnliste.

Overskrift
Navigation
Nyheder
- Nyhed 1
  - Indhold1
- Nyhed 2
  - Indhold2
Artikler
- Artikel 1
  - Indhold1
- Artikle 2
  - Indhold2
Fodnote

Lad os prøve at indsætte følgende i et HTML5 dokument

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
   <title>HTML5 titel</title>
   <meta charset="utf-8">
 </head>
 <body>
 
 <header>
   <h1>Overskrift</h1>
 </header>
 
 <nav>
   <a href="#">Navigation</a>
   <a href="#">Navigation</a>
   <a href="#">Navigation</a>
   <a href="#">Navigation</a>
   <a href="#">Navigation</a>
 </nav>
 
 <section>
   <header>
     <h1>Nyheder</h1>
   </header>
 
   <article>
     <header>
       <h1>Nyhed 1</h1>
     </header>
     <p>Inhold1</p>
   </article>
 
   <article>
     <header>
       <h1>Nyhed 2</h1>
     </header>
     <p>Inhold2</p>
   </article>
 </section>
 
 <section>
   <header>
     <h1>Artikler</h1>
   </header>
 
   <article>
     <header>
       <h1>artikel 1</h1>
     </header>
     <p>Inhold1</p>
   </article>
 
   <article>
     <header>
       <h1>Artikel 2</h1>
     </header>
     <p>Inhold2</p>
   </article>
 </section>
 
 <footer>
   <p>Fodnote</p>
 </footer>
 </body>
 </html>

Afsluttende kommentarer

Det var en hurtig gennemgang af de nye containers i HTML5, som du allerede nu kan begynde at lege med. Hvis der er interesse for emnet, vil der med stor sandsynlighed komme flere, evt. mere dybdegående artikler om HTML5.

Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:

Kommentarer (9)

Bruger #12245 @ 10.10.10 03:15

Vil anbefale folk at kigge på http://html5boilerplate.com hvis de vil starte op på HTML5 allerede nu. Der er nogle super dygtige gutter som står bag det, bl.a. Paul Irish som arbejder på Google Chrome og jQuery. Det er i bund og grund et skabelon til at lave HTML5 sider med en masse tilhørende lir som bl.a. giver bagud kompabilitet til browsers som ikke understøtter HTML5, samt en masse andre lænkre detailjer.

Bruger #2126 @ 16.10.10 13:11

...Flere HTML5 specifikke containers (/læs tags) er nemlig stabile og kan implementeres i vores produkter (/læs hjemmesider). Med Microsofts Internet Explorer 9, kan alle populære browsere på markedet nu læse og forstå disse nye containers

beyuder det, at man f.eks. kan bruge <footer>-tag'et allerede nu? Og i såfald, når man skal referere til dit i ens stylesheet, er det så ligesom hvis man referer til f.eks. et <h1>-tag?

Jeg synes det er rigtig fedt at de nye containers er struktureret i forhold til en sides semantiske indhold, men føler måske lidt at der mangler en container til ophav? Det synes jeg da også er relevant, især i forhold til at der jo er mange sites hvor der bliver "gæsteblogget" og der er jo også mange sites hvor indholdet generelt er produceret af forskelligt ophav (f.eks. online magaziner).

Bruger #7662 @ 17.10.10 16:32

Christina Jørgensen, alle de containere, som er vist i denne artikel kan bruges allerede nu. Det kræver bare at brugeren, der besøger siden, har en browser, som forstår HTML5 syntaksen.

Det er korrekt, at når du skal style en af de nye elementer bruger du samme metode som tidligere.

CSS kode

 footer {
   color: #f0f;
   font-family: Verdana, Helvetica, Arial, sans-serif;
 }

Bruger #8223 @ 18.10.10 08:46

Strengt taget kan du bruge et hvilket som helst tag i alle browsere der forstår CSS. Du skal bare huske at style dem så alle browsere forstår tagget ens. Du kan i reglen opfinde dit eget <skvuddamadulla> tag og style det i CSS så selv IE6 forstår det. Det er bare ikke anbefalelsesværdigt.

Bruger #7662 @ 21.10.10 15:50

Nu handler artiklen om den nye HTML5 struktur, og et <skvuddamadulla> vil ikke godkendes som værende gyldigt HTML5, det vil f.eks <footer> og <article> til gengæld. Derudover ville den tid vi alle bruger på at strukturere dokumenter være spildt, hvis vi skal til at lave vores egne containers. Det er ikke kun uanbefalingsværdigt, det burde være direkte forbudt at besudle en struktur på den måde.

Synes din kommentar er på vildspor, da den ikke henvender sig til artiklen og heller ikke til Christina's spørgsmål.

Bruger #8223 @ 27.10.10 20:15

Steffan: Du misforstår fuldstændigt. Jo, det har da i høj grad noget med Christinas spørgsmål at gøre. Hun spørger om hvorvidt man kan bruge HTML5-specifikke tags i browsere der ikke kender HTML5 - mit svar er at det kan man godt, fordi man kan opfinde sine egne tags. At opfinde sit eget tag er dumt, som du selv nævner, men for IE6 vil <footer> blive opfattet som et hjemmelavet tag, og derfor nævner jeg muligheden.

Iogmed at alle browsere retter sig efter CSS, uanset om tagget er validt eller ej, betyder det at hvis vi applyer de rigtige CSS-regler, så vil alle browsere, uanset hvor oldnordiske deres kendskab til HTML er, altid kunne bruge container-tags der først bliver opfundet senere. Jeg snakker ikke om at opfinde helt nye personlige tags.

Bruger #3143 @ 04.12.10 15:53

Artiklen har en fejl i to af de kodeeksempler der inkluderer charset. Den korrekte version af det første af de to eksempler ser således ud:

Kode

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Gyldig HTML5</title>
  </head>
  <body>
    <p>Mit første HTML5 dukoment</p>
  </body>
</html>

Meta charset står før title. Hvis den ikke gør det, så er den ugyldig.

Bruger #2126 @ 29.08.11 21:48

Nu ved jeg godt at det lang tid siden der har været kommentarer på denne artikel, men jeg har, siden jeg sidst kommenterede, kigget lidt på html5, og jeg undrer mig over din kommentar, Per.

"...uanset om tagget er validt eller ej, betyder det at hvis vi applyer de rigtige CSS-regler, så vil alle browsere, uanset hvor oldnordiske deres kendskab til HTML er, altid kunne bruge container-tags der først bliver opfundet senere"

Hvis dette er korrekt, hvorfor er der så så mange der laver forskellige IE-hacks (som det blive beskrevet på html5doctor, f.eks.) for at få f.eks. <article> til at virke (korrekt)?

(Jeg skriver ikke denne kommentar for at være på tværs, udelukkende fordi jeg ikke forstår det

)

Bruger #13010 @ 05.10.11 23:38

Fin artikel.

Eneste fejl jeg lige kan se er der hvor der står "<section> bruges ikke til at style din hjemmeside, det er stadig div's job."

Det er vel CSS som bruges til at style hjemmesiden ?

Du skal være logget ind for at skrive en kommentar.

Introduktion

HTML5 strukturen

De nye containere

Opsætning af HTML5 dokument

Afsluttende kommentarer

Kommentarer (9)

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler