Als webontwikkelaar werk ik met veel verschillende mensen. Veel van deze mensen zijn wel eens in aanraking geweest met HTML. Soms omdat deze mensen ook webontwikkelaars zijn, maar soms ook omdat klanten hun website willen bijwerken. Voor veel mensen is het niet helemaal duidelijk wat HTML precies is. In dit artikel zal ik het belangrijkste element van HTML verder toelichten.
HyperText Markup Language (afgekort HTML) is een computertaal (meer specifiek, een opmaaktaal) voor de specificatie van documenten op het World Wide Web.
Bron: Wikipedia.nl
HTML is in het jaar 1990 ontwikkeld door Tim Berners-Lee. Het idee achter HTML is een taal die de structuur van een document beschrijft, niet de vormgeving. Zo zijn er opmaakcodes om kopteksten te maken, teksten te benadrukken en om lijsten samen te stellen. Zo staat de code <p> voor een paragraaf en een <h1> voor een belangrijke koptekst. Deze codes, ook wel HTML elementen, worden door webontwikkelaars dagelijks gebruikt.
Het belangrijkste HTML element van vandaag de dag is het <a> element. De a staat hier voor het engelse woord anchor, wat we vrij kunnen vertalen naar anker, koppeling of link. Met dit element kun je een link creëren naar een andere pagina. Dit element koppelt dus pagina’s op het internet met elkaar, al deze koppelingen worden samen ook wel internet genoemd.
Het <a> element
De kracht van het <a> element zit hem in het href attribuut. De tekst href staat hier voor hypertext reference, of te wel voor hypertekst referentie. De waarde van dit attribuut bepaald naar welke pagina gelinkt wordt.
<a href="https://www.pronamic.nl">
Zoals je kunt zien bevind het href attribuut zich binnen het <a> element. De beschrijvende tekst van de link bevind zich daartussen in:
<a href="https://www.pronamic.nl">Bezoek de website van Pronamic</a>
Met bovenstaande code kunt u dus een link creëren naar een andere pagina. Doordat dit zo eenvoudig is is het internet zo groot geworden als het nu is. Er is echter meer dan het href attibuut.
Op de XHTML Basic 1.1 Cheat Sheet pagina van het W3C is te zien dat het <a> element ook de volgende attributen kan hebben:
- title
- rev
- rel
- type
Het rel attribuut
Met het rel attribuut kun je de relatie beschrijven tussen de gekoppelde pagina en de pagina waarop de link staat. Je bent helemaal vrij in wat je invult in het rel attribuut. Het wordt wel aangeraden om zo kort en duidelijk mogelijk de relatie te beschrijven. Er is wel een lijst met veel gebruikte rel attribuut waarden.
| Waarde | Beschrijving |
|---|---|
| alternate | Een alternatieve versie van de pagina (bijvoorbeeld: print versie of vertaling). |
| stylesheet | Een extern opmaak document voor de pagina. |
| start | De start pagina. |
| next | De volgende pagina. |
| prev | De vorige pagina. |
| contents | Een inhoudsopgave voor de pagina. |
| index | Een index of sitemap voor de pagina. |
| glossary | Een verklarende woordenlijst (toelichting) van de gebruikte woorden in de pagina. |
| copyright | Een pagina met informatie over de auteursrechten. |
| chapter | Een hoofdstuk van de pagina. |
| section | Een sectie van de pagina. |
| subsection | Een subsectie van de pagina. |
| appendix | Een appendix pagina. |
| help | Een help pagina. |
| bookmark | Een verwante pagina |
Zo bevat de webwinkel op Leskist.nl in het hoofdmenu een link naar een informatie pagina. Deze informatie pagina geeft extra informatie / hulp over de webwinkel en het bestelproces. Het rel attribuut van deze link bevat daarom de waarde help.
<a href="/informatie/" rel="help">Informatie</a>
De website van Pronamic bevat links onderin links naar een RSS nieuws feed en naar een copyright pagina. Deze links zien er als volgt uit:
<a href="/copyright/" rel="copyright">Copyright © 2005-2008 Pronamic</a>
<a href="http://feeds.feedburner.com/pronamic" rel="alternate" type="application/rss+xml"> <img src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="" /></a>
De ontwikkelingen staan echter niet stil. Het rel attribuut wordt steeds vaker gebruikt en er ontstaan steeds meer standaarden. Zo zijn er enkele Microformats bedacht, namelijk: rel-license, rel-tag en rel-nofollow.
De waarde nofollow is waarschijnlijk de bekendste rel waarde. Deze waarde is namelijk bedacht door Google. Zodra Google tijdens het indexeren van een website een link tegen komt met deze waarde zal Google deze link niet volgen. Dit kan positieve en negatieve gevolgen hebben voor je positie bij Google.
Je kunt tegenwoordig zelfs aangeven hoe je bevriend bent met een persoon. Dit kan door gebruik te maken van de XFN standard. Zo heb ik bijvoorbeeld op mijn persoonlijke website links naar de websites van mijn vrienden en collega’s Jelke en Leo. Deze staan in de code als volgt genoteerd.
<a href="http://www.jelkeboonstra.nl/" title="Website van collega en vriend Jelke Boonstra begin_of_the_skype_highlighting end_of_the_skype_highlighting" rel="external friend met colleague">Jelke Boonstra begin_of_the_skype_highlighting end_of_the_skype_highlighting</a>
<a href="http://www.leo-oosterloo.eu/" title="Website van collega en vriend Leo Oosterloo" rel="external friend met colleague">Leo Oosterloo</a>
De waarde external geeft aan dat ik link naar een externe website. Dat ik bevriend ben met de eigenaar van de website is te zien aan de waarde friend. Aan de hand van de waarde met is te zien dat ik diegene ook in het echt heb ontmoet. Ten slotte geeft de waarde colleague aan dat we collega’s zijn. Met behulp van de online applicatie XFN 1.1 Maker kun je eenvoudig dergelijks links samenstellen.
Je zult je waarschijnlijk afvragen wat het nut is van het beschrijven van relaties tussen verschillende pagina’s. Ik denk dat door pagina’s op het internet te voorzien van extra informatie computers en zoekmachines de pagina’s beter kunnen begrijpen. Dit leidt tot grotere beschikbaarheid van informatie en hopelijk tot interessantere diensten.