Hopp til innholdet

cjohansen.no

Semantisk HTML

Semantisk HTML er et begrep alle som skriver HTML mot betaling bør mestre. Det er også et begrep alle som lager innhold på web, kanskje spesielt bloggere, bør merke seg. Hvis du bare skal lære deg bare litt HTML gir jeg deg her den lille biten du bør satse på.

Semantisk HTML handler om å bruke HTML-taggene for den meningen, eller den semantikken, de gir innholdet. Mange tagger har et distinkt utseende med nettlesernes standardvisning, men det er viktig å merke seg at dette standardutseendet ligger i nettleseren, og alt er mulig å overstyre med CSS. Ideelt sett bør nettstedets rammeverk være satt opp på en slik måte at de som produserer innhold kun trenger å tenke struktur i teksten, ikke utseende.

Når du så er innstilt på å skrive HTML som beskriver strukturen i dokumentet er første skritt å få oversikt over de viktigste taggene å bruke.

(Jeg minner om at HTML 4.01 og XHTML 1.0 er innholdsmessig like, så teksten er like aktuell for både HTML og XHTML).

Overskrifter

Tilgjengelige tagger: <h1>, <h2>, <h3>, <h4>, <h5> og <h6>.

W3C: "A heading element briefly describes the topic of the section it introduces." 7.5.5 Headings

Overskrifter brukes til å strukturere innholdet hierarkisk. <h1> er den viktigste. Seksjoner som er logiske underseksjoner til teksten under <h1>-overskriften får <h2>-overskrift osv.

Mange anser <h1> som sidens hovedoverskrift og bruker alltid én, og kun én <h1> per side. Videre brukes overskrifter i et logisk hieraki - det anses som dårlig praksis å hoppe over et nivå. Det er ikke teknisk feil å ha en <h1> etterfulgt av en <h3> (les: det validerer), men det medfører en logisk brist i innholdet.

Sammendrag

Hvis du tar bort all teksten og kun overskriftene står igjen skal du sitte igjen med et sammendrag av dokumentet. Du kan videre tenke deg at hver overskrift rykkes inn en gang per nivå. Når du gjør denne øvelsen bør sammendraget gi mening. W3Cs Semantic Extractor gjør akkurat dette. Eksempelet fra min forside gir følgende sammendrag:

Dette gir mening. Koden bak er: 

<h1>Christian Johansen om Webutvikling, musikk og film</h1>
[...]
<h2>Siste innlegg på bloggen</h2>
[...]
<h3>Essensielle Firefox-plugins</h3>
[...]
<h3>Presentasjoner fra Webdagene på nett</h3>
[...]
<h3>Ikke-påtrengende Javascript</h3>
[...]
<h2>Aktuell musikk</h2>
[...]
<h3>High on Fire: Death is this Communion</h3>
[...]
<h3>Nile: Ithyphallic</h3>
[...]
<h2>Sist sette</h2>
[...]
<h3>The Longest Day</h3>
[...]
<h3>Devils Rejects (2005)</h3>
[...]

Lister

Tilgjengelige tagger: <ul> <ol> <dl> (og tilhørende <li>, <dt> og <dd>)

Alt som er en oppramsing av noe slag kan kodes som en liste. Det er tre aktuelle listetyper i HTML, usorterte lister ( <ul>), sorterte lister ( <ol>) og definisjonslister ( <dl>).

Usorterte lister (<ul> og <li>)

En usortert liste er enhver logisk oppramsing av elementer hvor rekkefølgen er vilkårlig. Eksempler kan være menyen på et nettsted (liste med lenker) eller en liste over mennesker som deltar på en konferanse.

Et eksempel fra denne siden er kategoriskyen ("tag cloud") som brukes på både bloggen og film-seksjonen (forenklet for klarhet): 

<ul class="tagcloud">
     <li><span class="small"><a href="#" rel="tag">eZ Publish</a></span></li>
     <li><span class="medium"><a href="#" rel="tag">Tilgjengelighet</a></span></li>
     <li><span class="small"><a href="#" rel="tag">Subversion</a></span></li>
     <li><span class="large"><a href="#" rel="tag">Teknikker</a></span></li>
     <li><span class="max"><a href="#" rel="tag">XHTML</a></span></li>
 </ul>

Sorterte lister (<ol> og <li>)

Alle lister som ikke gir samme mening dersom elementene blir stokket om er sorterte lister. En sortert liste trenger ikke å vises med løpende nummerering av elementene selvom det er standardvisning i de fleste nettlesere. Eksempler på sorterte lister kan være alfabet-menyer eller oppramsing av stegene i en prosess.

Et eksempel fra denne siden er listen over sist kommenterte innlegg i høyrekolonnen. Rekkefølgen kommuniserer mening - det ferskest kommenterte innlegget er det på toppen av lista. HTMLen bak er som følger (URLer fjernet for klarhet): 

<ol class="comments">
    <li><a href="#" rel="bookmark">Essensielle Firefox-plugins</a></li>
    <li><a href="#" rel="bookmark">Ikke-påtrengende Javascript</a></li>
    <li><a href="#" rel="bookmark">Rails i Subversion</a></li>
    <li><a href="#" rel="bookmark">Semantisk HTML - hvem bryr seg?</a></li>
</ol>

Definisjonslister (<dl>, <dt> og <dd>)

Definisjonslister skiller seg fra andre typer lister i at de er bygget opp av to og to (eller flere) elementer; en term og en definisjon/beskrivelse. Spesifikasjonen foreslår også at for eksempel en samtale kan markeres med en definisjonsliste, noe som indikerer at definisjonslister kan brukes til mer enn rene term-definisjon(er)-lister.

Merk at en term kan ha flere beskrivelser.

Eksempler på definisjonslister kan være en ordliste der hvert ord er en <dt> og hver beskrivelse en <dd> eller en kvittering der brukerens valg i et skjema oppsummeres.

Strukturert tekst

Tilgjengelige tagger: <em>, <strong>, <cite>, <dfn>, <code>, <kbd>, <var>, <abbr>, <acronym>, <del>, <ins>, <pre>, <p>, <blockquote>, <q>

Det finnes mange elementer for å strukturere tekst. Den vanligste er <p> som definerer et avsnitt med tekst. Andre viktige tagger er <em> som brukes for å legge trykk på noen ord eller et uttrykk. <em> vises som oftest med kursivert tekst, men dette kan man overstyre med CSS om man vil. <strong> er for enda kraftigere trykk og vises ofte med fet tekst.

Forkortelser

<abbr> kan brukes for å angi en forkortelse. Med title-attributtet er det mulig å gi den fulle stavelsen av ordet, og mange nettlesere vil vise denne formen når brukeren legger musen over ordet. Eksempel: <abbr title="eksempel">eks</abbr>. <acronym> brukes tilsvarende for akronymer.

Språk i dokumentet

For at blant annet skjermlesere skal fungere skikkelig er det viktig at maskiner er i stand til å forstå hvilket språk innholdet ditt er skrevet på. Dette angis for hele dokumentet, og trenger ofte ikke å endres på. MEN, ofte henter vi inn fraser fra andre språk, og da kan det være nyttig å fortelle nettleseren at vi skifter språk. Dette kan gjøres gjennom lang-attributtet (og tilsvarende xml:lang i XHTML).

La oss ta et eksempel der vi gjengir to engelske fraser i en norsk tekst. Den ene legger vi trykk på (med <strong>), den andre gir vi kun språkinformasjon om (med den generiske taggen <span>): 

<p>Jeg syns <span lang="en">South Park</span> er en <strong lang="en">kick ass</strong> TV-serie.</p>

Mer (X)HTML!

Det finnes mange mange flere tagger i HTML som jeg ikke har beskrevet her, men de nevnte burde gi deg et solid grunnlag for dagligdagse oppgaver rundt det å produsere innhold på nett. Det jeg ikke har sagt noe om er tabeller, men her er det så mye å si at de nesten må få sitt eget innlegg.

Publisert 11. oktober 2007 under tilgjengelighet, teknikker og html.

Muligens relatert

2006 - 2012 Christian Johansen Creative Commons Lisens