HTML - Intro en opbouw


HTML, staat voor HyperText Markup Language, de taal waarmee webpagina's worden gemaakt. Dit is niet anders dan een bestand dat bestaat uit codes die de browser begrijpt en gebruikt om de webpagina weer te geven. HTML is dus geen opmaaktaal en is ook niet als dusdanig bedacht maar dient om de structuur van een pagina aan te geven. Er zijn echter wel sinds versie 4 van HTML, gepubliceerd in 1997 stijlonderdelen beschikbaar maar het advies is om deze niet te gebruiken en opmaak in een CSS bestand te plaatsen.

De meest recente versie van HTML is eigenlijk nu HTML5. Na HTML 4 kwam nog HTML 4.1 in 1999 met kleine verbeteringen en dit zou de laatste versie van HTML worden. XHTML was de beoogde opvolger, in de basis hetzelfde als HTML maar met een strengere syntaxis. Zo is het bijvoorbeeld niet toegestaan om tags met hoofdletters te schrijven en tags moeten correct worden afgesloten. Zover is het uiteindelijk niet gekomen mede omdat ontwikkelaars niet enthousiast waren om over te gaan stappen op XHTML en zodoende is op een gegeven moment besloten om de ontwikkeling van HTML voort te zetten. In de loop der jaren heeft HTML5 een enorme vlucht in populariteit genomen.

Met de nieuwe specificatie zijn er diverse nieuwe tags bijgekomen om nog meer structuur in een document aan te geven, denk bijvoorbeeld aan een <header> tag, een <footer> tag, een <aside> tag, een <article> tag en een <nav> tag voor navigatie. Ook is er een nieuwe <video> tag voor het kunnen afspelen van video's zonder dat hiervoor een plugin nodig is.

Opbouw

De opbouw van een HTML pagina is vrij eenvoudig en begint met een Doctype, hiermee geef je aan met welke versie HTML code je de pagina hebt gemaakt. In het onderstaande geval is het een korte regel voor HTML5, een doctype voor HTML 4 is een stuk langer.

Tussen de <head> tags staat informatie over de pagina die aan de voorkant niet te zien is voor bezoekers van de pagina. Hier wordt bijvoorbeeld de titel van de pagina geplaatst die te zien is in het tabblad van de browser of in de zoekresultaten, ook wordt er een metatag 'description' geplaatst met informatie over hetgeen wat er op de pagina te zien is. Tussen deze tags wordt verder het CSS bestand met opmaak van de pagina aangeroepen en vaak worden er andere codes geplaatst zoals bijvoorbeeld de code van Google Analytics, een gratis pakket van Google om statistieken van een website of webshop te verzamelen.

Tussen de <body> tags wordt de daadwerkelijke content die is te zien op de betreffende pagina geplaatst. Denk aan simpelweg tekst, foto's, video's, navigatiemenu's, en meer.

<!DOCTYPE HTML">
<html>
        <head>
                <title>Pagina Titel</title>
        </head>
        <body>
                <p>De content van je pagina.</p>
        </body>
</html>

HTML5

Een iets uitgebreidere versie van een HTML5 document met onder andere specifieke HTML5 tags en een verwijzing naar een CSS bestand ziet er dan zoals hieronder uit. Ook hieronder een verwijzing naar een favicon, het icoon van een pagina te zien op het tabblad.

Header, Footer en Aside

In de code hieronder zie je als eerste de <header> tag. Deze tag mag meerdere keren terugkomen op een pagina en kan dienen voor het bovenste gedeelte van een pagina waar bijvoorbeeld het logo in staat maar dient ook als kop van een <section> of een <article>. Vaak staan in deze tag koppen maar diverse andere elementen mogen ook. Als tweede de <footer> tag. Deze tag kan gebruikt worden voor het onderstaande gedeelte van een website maar kan ook meerdere keren voorkomen op een pagina, bijvoorbeeld als onderdeel van een <article> tag. Als derde is er de <aside> tag die dient voor bijvoorbeeld een linker of rechterkolom met bijvoorbeeld de laatste nieuwsberichten of advertenties.

Article en Section

Dan is er nog de <article> tag die kan worden gebruikt voor de belangrijkste content zoals een nieuwsbericht met uiteraard weer een kop. In de regel is het zo dat de content die binnen een <article> tag staat op zichzelf staand ook nog logisch is en los van de website verspreid kan worden zoals dus een nieuwsbericht. Naast article is er de <section> tag dient om bepaalde onderdelen op een pagina te verdelen zoals bijvoorbeeld een portfolio of een slider. Een <section> heeft bijna altijd een kop (<header>) plus aanvullende content. Deze dient niet voor styling, in dat geval kan er beter een <div> worden gebruikt. Verder mag een section net als een article zich niet bevinden in een header of footer tag.

<!DOCTYPE HTML">
<html>
        <head>
                <title>Pagina Titel</title>
                <meta charset="utf-8" />
                <meta name="description" content="Beschrijving van de pagina" />
                <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
                <link rel="stylesheet" href="css/main.css" />
        </head>
        <body>
                <header>Logo</header>
                <nav>
                        <ul>
                                <li> <a href="#">Menu item</a></li>
                                <li> <a href="#">Menu item</a></li>
                                <li> <a href="#">Menu item</a></li>
                        </ul>
                </nav>
                <div id="main" role="main">
                        <aside>Kolom</aside>
                        <article>
                                <header>Titel nieuwsbericht</header>
                                <p>Nieuwsbericht</p>
                                <footer>Reacties</footer>
                                <section>Laatste tweets</section>
                        </article>
                </div>
                <footer>Footer</footer>
        </body>
</html>

Internet Explorer 6, 7 en 8

Zodra je HTML5 tags gaat gebruiken zoals header, footer en nav dan zul je zien dat dit niet goed zal gaan in oudere versies van Internet Explorer, het gaat dan om de versies 6, 7 en 8. Door de onderstaande code op te nemen in de <head> kan dit probleem eenvoudig worden opgelost en kun je de tags gewoon gebruiken en laten werken in alle browsers.

<!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Validator

Om te controleren of je correct HTML hebt gebruikt is er de validator van het World Wide Web Consortium (W3C) deze vind je hier en testen kan door een adres in te voeren.