Semantische HTML | belangrijker dan je denkt - GiovanniKaaijk/weekly-nerd-1920 GitHub Wiki

HTML

HTML kan je zien als een taal die gesproken kan worden. Bij een gesproken taal zijn er woorden die we gebruiken om te communiceren en bij HTML zijn dit de tags die we gebruiken om een document te markeren.

Een <h1> tag geeft bijvoorbeeld een titel aan. Deze tag is semantisch omdat mensen weten wat titels zijn en browsers weten hoe ze deze moeten weergeven.

Aan de andere kant van deze vergelijking zijn tags zoals <div> en <b> niet semantisch, omdat ze alleen definiëren hoe de tekst eruit moet zien en geen extra betekenis geven aan de opmaak.

Voorbeeld

Dit is semantische HTML:

<body>
    <nav>
        <ul>
            <li>
                <a title="home" href="/home">home</a>
            </li>
            <li>
                <a title="about" href="/about">about</a>
            </li>
        </ul>
    </nav>
</body>

Dit is geen sematische HTML:

<body>
    <div>
        <div>
            <a href="/home">home</a>
        </div>
        <div>
            <a href="/about">about</a>
        </div>
    </div>
</body>

Waarom is het belangrijk dat onze HTML semantisch is?

Wanneer er bijvoorbeeld gezocht wordt naar een pagina op het internet, gebruiken de zoekmachines puur de HTML zonder styling om te kijken welke elementen belangrijk zijn binnen de pagina. De enige manier om aan te geven dat bepaalde content belangrijk is, is dus door semantische HTML te gebruiken. Als we bijvoorbeeld de titel van de pagina in een <p> tag zetten, zal deze verloren gaan tussen alle andere inhoud en niet worden weergegeven in de zoekresultaten. Maar wanneer we de titel in een <h1> neerzetten, wordt deze wel juist weergegeven op de resultatenpagina. Elke website wil hoog in Google verschijnen, dit is dus een reden voor semantische HTML.

Maar ook voor andere developers, is het handig wanneer er semantische HTML geschreven wordt. Ook al werk je in je eentje aan een project, als je ooit het bedrijf verlaat, zal iemand anders zich waarschijnlijk over de code buigen. Wanneer de HTML dan een bende is, zal dit erg veel extra, onnodig werk opleveren. Wanneer je tags als <header> en <footer> gebruikt, zal de code een stuk logischer zijn.

Wat ook nog een belangrijke reden is voor semantische HTML, is de toegankelijkheid van je website. Blinde of slechtziende mensen maken vaak gebruik van een screenreader, deze gebruikers gebruiken enkel hun toetsenbord om door een website heen te navigeren. Hierbij is het dus belangrijk dat elk tag bereikbaar is en dat het makkelijk is om hier doorheen te navigeren. Wanneer je bijvoorbeeld enkel <div> gebruikt op je website, zal dit een hel worden voor de screenreader gebruiker en waarschijnlijk zal diegene zo snel mogelijk de website weer verlaten.