Www-sivun sisältöä voidaan ja se kannattaa tarvittaessa ryhmitellä osiin. Sisällön jaotteluun on aiemmissa HTML:n versioissa käytetty <div>- ja <span>-tageja ja HTML5:n myötä käytettäväksi on saatu useita muita tageja. Alkuperäisillä <div>- ja <span>-tageilla ei ole sellaisenaan mitään varsinaista merkitystä, jonka ne antaisivat sisältämälleen dokumentin osalle eikä selaimilla ole niiden esittämiseen mitään erityisiä tyylisääntöjä. Uusilla HTML5-tageilla sen sijaan on kullakin jokin semanttinen merkitys, jossa niitä on tarkoitus käyttää.

Semanttisten tagien käyttäminen sivun rakentamisessa on tärkeää, sillä silloin sivun sisältö on helpommin luettavissa ja tulkittavissa koneellisesti. Tämä helpottaa esimerkiksi hakukoneiden sekä näkövammaisille suunnattujen ruudunlukijaohjelmien toimintaa.

Div

Dokumentin osio (division) merkitään <div>-tagilla. Tällä tagilla merkityllä osiolla ei tarvitse olla erityisempää semanttista merkitystä tai sitä voidaan käyttää sellaisten sisältöjen rajaamiseen, joille ei ole omaa tagia. Sitä voidaan käyttää esimerkiksi blogikirjoituksen metatietojen (kirjoittaja ja päiväys) rajaamiseen.

Tällä tagilla ei ole valmiiksi määriteltyä merkitystä, mutta sivun tekijä voi itse lisätä sille class-attribuutilla luokan, joka kuvaa elementin sisältöä ja jonka avulla sille voidaan määritellä ulkoasua. <div>-tagi luo dokumenttiin niin sanottu lohkotyyppisen elementin, eli mahdollisesti suurempiakin sisältöjä sisältävän “laatikon”.

<div class="esimerkki">
    <p>Vähän tekstiä</p>
    <p>Hiukan lisää pidempää tekstiä.</p>
</div>

Span

Kun tekstistä halutaan jostain syystä merkitä jokin osuus, jonka merkitykselle ei ole omaa tagia, voidaan käyttää <span>-tagia. Samoin kuin <div>-tagilla, myöskään <span>-tagilla ei ole valmiiksi määriteltyä merkitystä tai ulkoasua vaan ne ovat käyttäjän itse määriteltävissä esimerkiksi class-attribuuttia käyttämällä.

<span>-tagi on tyypiltään rivin sisäinen elementti, eli sen sisään ei ole tarkoitus koota suurempia lohkotyyppisiä dokumentin osia, kuten kappaleita, vaan rivin sisällä olevaa juoksevaa tekstiä.

<div class="esimerkki">
    <p>Vähän tekstiä</p>
    <p>Hiukan <span class="huomio">lisää pidempää</span> tekstiä.</p>
</div>

Article

<article>-tagilla luodaan lohkotyyppinen elementti, joka on jollain tavalla itsenäinen ja itseriittoinen yksinään luettavissa oleva kokonaisuus. Tällainen on esimerkiksi foorumille tai blogiin lähetetty postaus tai yksittäinen uutinen sivuilla, joilla on luettavissa yhtä aikaa useita artikkeleita.

<article>
    <h2>Avaruusalus laskeutui kuuhun</h2>
    <p>Tänään keskipäivällä kuuhun laskeutui ...</p>
    <p>Kuussa käveltiin...</p>
</article>
<article>
    <h2>Kuuauto törmäsi kiveen</h2>
    <p>Kuussa ajelulla ollut auto törmäsi kuukiveen.</p>
</article>

Section

<section>-tagilla luodut elementit ovat lohkotyyppisiä ja sillä merkitään pidemmästä dokumentista sen osuuksia, kuten lukuja/kappaleita, ylä- tai ala-tunnisteita tai muun tyyppisiä sisällön osia.

<article>
    <h1>Raportti tärkeästä asiasta</h1>
    <section>
        <h2>Alaotsikko</h2>
        <p>Raportin tärkeää asiaa...</p>
    </section>
    <section>
        <h2>Toinen alaotsikko</h2>
        <p>Lisää tärkeää asiaa...</p>
    </section>
</article>

Aside

<aside> on lohkotyyppinen tagi, jolla merkitään varsinaisen dokumentin tai artikkelin ohessa olevia “sivusisältöjä”, kuten uutisten yhteydessä olevia inforuutuja tai artikkelin ohessa olevia asiaan läheisesti liittyviä muita asioita.

<article>
    <h2>Avaruusalus laskeutui kuuhun</h2>
    <p>Tänään keskipäivällä kuuhun laskeutui ...</p>
    <aside>
        <h4>Kuu</h4>
        <p>Kuu kiertää maapallon kerran kuukaudessa</p>
    </aside>
    <p>Kuussa käveltiin...</p>
</article>

Header

<header>-tagi on lohkotyyppinen ja sillä merkitään yleensä sivun tai artikkelin alussa olevat otsikkotiedot tai ylätunnisteen. Tyypillisesti <header>-elementti sisältää yhden tai useampia otsikkotageja (<h1> - <h6>), logon tai ikonin ja ehkä sivun tai artikkelin tekijän tietoja.

Footer

<footer>-tagi on myös lohkotyyppinen ja sillä merkitään sivun tai artikkelin alatunniste, jossa on tyypillisesti yhteystietoja, tekijänoikeustietoja, artikkelin tekijän tietoja ja niin edelleen.

<article>
    <header>
        <img src="images/html5.png" alt="HTML5-logo">
        <h1>Www-ohjelmointi</h1>
        <h2>Lukiolaisille</h2>
    </header>
    <section>
        <p>Artikkelin sisältö.</p>
    </section>
    <footer>
        <ul>
            <li>Tekijä: Petri Salmela</li>
            <li>Osoite: <a href="http://petrit.net/www-ohjelmointi/">http://petrit.net/www-ohjelmointi/</a>
        </ul>
    </footer>
</article>

Www-ohjelmointi

Lukiolaisille

Artikkelin sisältö.

Nav

<nav>-tagi on lohkotyyppinen elementti, joka on tarkoitettu sivuston navigoinnin esittämiseen. Navigoinnin merkitseminen semanttisesti <nav>-tagilla on tärkeää siksi, että esimerkiksi osa näkövammaisille tarkoitetuista ruudunlukijaohjelmista osaa jättää sillä merkityt osat sivusta oletuksena lukematta ja toisaalta osaavat lukea ne navigointia pyydettäessä.

Strong

<strong>-tagi on tyypiltään rivin sisällä käytettävä tagi, jolla merkitään tekstistä tärkeitä kohtia. Selaimet käyttävät <strong>-tagin ulkoasuna yleensä lihavointia, mutta sivun tekijä voi tyylimäärityksillä määritellä sille haluamansa ulkoasun. Aiemmissa HTML-versioissa lihavointiin käytettiin <b>-tagia (bold), mutta nykyisin suositellaan käyttämään <strong>-tagia, joka kertoo paremmin sillä merkityn tekstiosuuden merkityksen, eli tärkeyden, eikä niinkään sen ulkoasua.

<p>Vähän tekstiä <strong>korostuksella</strong>.</p>

Em

<em>-tagi on toinen rivitason tekstin korostamiseen tarkoitettu tagi. Selaimet käyttävät sillä merkityn tekstin tyypillisesti kursivoituna. Aiemmissa HTML-versioissa kursivointiin käytettiin usein <i>-tagia (italics), mutta nykyään <em>-tagi on merkitystä (emphasise /korostus) korostavana suositeltavampi.

<p>Vähän tekstiä <em>korostuksella</em>.</p>