HTML 5 – en ny standard

Onsdag den 29. juni 2009 18:11:57

html 5 – hvad for en fisk?

Jeg er gennem et stykke tid stødt på en del debat om html 5, som er den seneste form for html-koder. Det er enormt spændende at følge med i udviklingen på dette område da det helt sikkert vil få betydning for mit arbejde i fremtiden.

Html er et opmærkningssprog.

HyperText Markup Language på dansk kunne det kaldes hypertekst ompmærkningssprog. Navnet hypertekst beskriver det at man kan linke fra et dokument til et andet (hyperlink) d.v.s. grundstenen i hele www. Opmærkningen er det at man tildeler en tekst nogle markører (tags eller mærker). Tags eller mærker siger noget om den tekst som de omslutter. Der er forskellige typer af markører. Strukturmarkører, præsentationsmarkører og
beskrivende markører.

Strukturmarkører

En strukturmarkør er f.eks. :

<h1>noget tekst</h1> eller
<p>noget mere tekst</p>.

H1-markøren fortæller at teksten inden i tag'et er en overskrift og P fortæller at dette her er et tekstafsnit. Strukturmarkører siger ikke noget om hvordan teksten skal vises på skærmen men beskriver kun hvad for en slags tekst vi har med at gøre.

Præsentationsmarkører

Præsentationsmarkører bruges til at angive noget om hvordan teksten skal vises på en computerskærm.

<b>noget tekst</b>

betyder at noget tekst skal skrives med fed skrifttype. Problemet med præsentationsmarkører er at de ikke nødvendigvis vises ens på forskellige computerskærme eller i forskellige webbrowsere. En anden indvending går på at den samlede kode bliver rodet fordi indhold og præsentation blandes sammen i det samme dokument.

Beskrivende markører

Denne her slags markører kaldes også semantiske markører fordi de beskriver meningen med det de indeholder.

<address>Slusevej 5</address>

giver f.eks. god mening. En af idéerne med udviklingen af html 5 er netop at gøre opmærkningssproget
mere semantisk.

Html 5 har nye semantiske tags

<header>, <nav>,  <section>, <article>,
<aside>, <footer>, <audio> eller <video>

er nogle af de nye opmærkningskoder i html 5. For at det ikke skal blive en lang kedelig teknisk gennemgang vil jeg kun gennemgå et par af de nye html 5 koder. Så kan du selv dykke ned i stoffet f.eks. ved at tjekke nogle de links jeg har i bunden af dette indlæg.

<header>

Dette tag kan indeholde en indledning eller f.eks. navigationshjælpemidler. Et header-mærke vil typisk indeholde en overskrift, men kan også rumme andet indhold, såsom en indholdsfortegnelse, en søgeboks, eller eventuelle relevante logoer. Der må gerne være mere end et header-tag på en side alle afsnit kan f.eks. starte med en header-kode.

Hvor man før skrev <div id="header"> kan man i html 5 nøjes med <header>. Den gamle kode ser umiddelbart lige så beskrivende ud som den nye. Problemet er at der før ingen standard var. Jeg kunne ligeså godt have skrevet <div id="sidehoved"> der for mig som er dansker giver god mening, men måske er lidt svært at forstå hvis man er italiener eller søgemaskine.

<nav>

nav-elementet er beregnet til en del af en side med links til andre sider eller dele på webstedet altså et afsnit med navigationslinks. Ikke alle grupper af links på en side behøver at være i
et nav-element.

<footer>

Denne her kode er tænkt som et del af en side der indeholder oplysninger om det afsnit den indgår i, såsom som forfatter, links til relaterede dokumenter, oplysninger om ophavsret og lignende. Footer-koder behøver ikke at blive vist i slutningen af et afsnit, selvom de normalt gør det.

html 5 bliver allerede brugt

Specifikationerne for html 5 er ikke færdige endnu, men flere webbrowsere er allerede begyndt at understøtte nogle af de nye tags som webudviklere fremover vil kunne gøre brug af. Der findes også websider som er begyndt at bruge løs af standarden selvom den ikke er færdigudviklet.

Google bruger html 5

Tag nu vores allesammens mest brugte søgemaskine Google, ja så bruger den faktisk allerede html 5. Du kan selv se efter hvis du trykker ctrl+u i firefox eller vælger vis kildekode i internet explorer, mens du står på google, så ser du nemlig denne kodestump: <!doctype html>html><head>... i starten af kildekoden. Laver du samme nummer her på siden vil du se denne her kodestump: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">.

Doctype fortæller browseren hvad det er for en slags dokument den har med at gøre og hvordan den derfor skal behandle det. Mit site har en lang smøre der fortæller at vi har at gøre med xhtml hvorimod Googles side bruger en fin lille en <!doctype html> som fortæller at det her er html 5.

Snup mit feed eller del!

Tryk på et ikon og følg med i mit univers eller del med dine venner!

Rss-feed Facebook twitter