Semanttiset tunnisteet: header, nav, main, article ja footer

Semanttisessa HTML:ssä käytetään elementtejä, jotka kuvaavat sisällön merkitystä eivätkä vain sen ulkoasua. <article> kertoo, että kyseessä on "itsenäinen sisältökokonaisuus". Yleiskäyttöinen <div> ei kerro mitään.

Varhaiset verkkokehittäjät rakensivat asettelut kokonaan <div>- ja <span>-elementeistä. Ruudunlukijat eivät pystyneet erottamaan navigointia, sisältöä ja mainoksia toisistaan. Hakukoneiden täytyi arvailla sivun rakenne.

<header>-elementti sisältää sivun tai osion esittelysisällön: yleensä logon, sivuston nimen ja navigoinnin. Sivulla voi olla useita header-elementtejä — yksi sivustolle ja yksi kutakin artikkelia kohden.

Käyttäkää <nav>-elementtiä navigointilinkkien ryhmien ympärillä: päävalikossa, murupolussa tai sisällysluettelossa. Ruudunlukijat ilmoittavat navigoinnin maamerkit, joten käyttäjät voivat siirtyä suoraan niiden kohdalle tai ohittaa ne.

Sivulla pitäisi olla täsmälleen yksi <main>-elementti. Se sisältää tälle sivulle ainutlaatuisen pääsisällön — ei toistuvia elementtejä, kuten navigointia tai alatunnistetta. Avustavat teknologiat mahdollistavat siirtymisen suoraan main-elementtiin.

<article> ympäröi sisältöä, joka on ymmärrettävää sellaisenaan ja joka voitaisiin julkaista muualla: blogikirjoitusta, uutista, käyttäjän kommenttia tai tuotekorttia. Kysykää itseltänne: "Olisiko tämä ymmärrettävä, jos kopioisin sen toiselle sivustolle?"

<section> ryhmittelee toisiinsa liittyvää sisältöä, joka kuuluu yhteen — esimerkiksi lukuja, välilehtiä tai aihealueita. Jokaisella osiolla on yleensä otsikko. Jos sisältö voisi toimia itsenäisesti, käyttäkää sen sijaan article-elementtiä.

<aside> sisältää ympäröivään sisältöön välillisesti liittyvää sisältöä: sivupalkkeja, nostoja, mainoksia tai aiheeseen liittyviä linkkejä. Ruudunlukijat tuovat sen esiin täydentävänä maamerkkinä.

<footer> sisältää tietoja elementistä, jonka sisällä se sijaitsee: tekijänoikeusilmoituksia, yhteydenottolinkkejä ja aiheeseen liittyviä asiakirjoja. Kuten header-elementtejä, myös footereita voi sivulla olla useita.

Käyttäkää otsikoita loogisen dokumenttirakenteen luomiseen. Sivulla pitäisi olla vain yksi <h1>-elementti. Alaotsikoissa käytetään h2-tasoa, niiden alaotsikoissa h3-tasoa ja niin edelleen. Älkää ohittako tasoja älkääkä käyttäkö otsikoita vain niiden visuaalisen koon vuoksi.

Hakukoneet käyttävät semanttista rakennetta sivun sisällön ymmärtämiseen — asianmukaiset maamerkit ja otsikkohierarkia sisältävä sivu sijoittuu usein paremmin hakutuloksissa. Ruudunlukijoiden käyttäjät navigoivat maamerkkien ja otsikoiden avulla, joten semantiikka liittyy suoraan saavutettavuuteen.

Käyttäkää <header>-, <nav>-, <main>-, <article>-, <section>-, <aside>- ja <footer>-elementtejä, jotta dokumentillanne on rakenne, jonka selaimet, hakukoneet ja ruudunlukijat ymmärtävät.