HTML eerste stappen - les 2 - de tags p, div en hun verschil. De tag br
In de vorige les hebben we ons eerste HTML-document gemaakt, wat betekent dat je nu al weet dat we HTML-code schrijven in een teksteditor, en dat we alle veranderingen bekijken via de browser door de pagina te vernieuwen (meestal met de toets F5).
In deze les gaan we verder werken met tekst en gebruiken we tags om tekst te omhullen: span, p en div. Ook bekijken we de tag br.
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
</body>
</html>
Dit is de code waarmee we verder zullen werken.
Laten we nu wat regels toevoegen.
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<p>Eerste regel in de P-tag</p>
<p>Tweede regel in de P-tag</p>
<div>Eerste regel in de DIV-tag</div>
<div>Tweede regel in de DIV-tag</div>
</body>
</html>
Als je dit document in de browser opent, zie je dat de p-tags de tekst op aparte regels tonen, maar er is een verschil. Mijn browser voegt standaard een marge boven en onder de p-tag toe, terwijl de div-tag de regels tegen elkaar “plakt”. Dat komt omdat p een tag is voor paragrafen tekst, terwijl div een tag is voor een blok of een sectie. Dus, als we een tag nodig hebben voor tekst, gebruiken we p, maar als we een gebied willen afbakenen — bijvoorbeeld om het van een achtergrondkleur te voorzien of een rand te geven — dan gebruiken we div.
Als een website tekst bevat, moet die tekst zich in een p- of h1–h6-tag bevinden, tenzij het om technische of decoratieve tekst gaat. Dus de juiste structuur ziet er zo uit:
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<div>
<p>Eerste regel in de P-tag</p>
<p>Tweede regel in de P-tag</p>
</div>
</body>
</html>
Zo hebben we de hiërarchie body > div > p. Onthoud: er mag geen div-tag binnen een p-tag staan. body > p > div is onjuist.
Laten we nu bekijken hoe we tekst naar een nieuwe regel kunnen verplaatsen. Soms is onze paragraaf te lang, en dan kunnen we ervoor kiezen om de tekst op te splitsen in meerdere paragrafen, of de regelafbrekingstag br toe te voegen. De tag <br /> is een enkelvoudige tag, daarom plaatsen we een schuine streep vóór het grotere-dan-teken.
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<div>
<p>De HTML-taal werd ontwikkeld door de Britse wetenschapper Tim Berners-Lee rond 1989–1991 bij CERN in Genève (Zwitserland). HTML werd ontworpen als een taal voor het uitwisselen van wetenschappelijke en technische documentatie, geschikt voor mensen zonder ervaring met opmaak. HTML vereenvoudigde de complexiteit van SGML door een kleine set structurele en semantische elementen te definiëren — zogenaamde “descriptors”, ook wel “tags” genoemd. Met HTML kun je eenvoudig een relatief simpel maar mooi opgemaakt document maken. Naast de eenvoudige documentstructuur werd ook hypertekstondersteuning toegevoegd. Multimediafuncties kwamen later. Oorspronkelijk was HTML bedoeld als een middel om documenten te structureren en te formatteren zonder afhankelijk te zijn van specifieke weergavemiddelen. Idealiter moest een HTML-tekst zonder vervorming worden weergegeven op apparaten met verschillende mogelijkheden (bijvoorbeeld een kleurenmonitor, een monochroom scherm, een mobiel toestel of een spraaklezer). Tegenwoordig is het gebruik van HTML echter ver verwijderd van zijn oorspronkelijke doel. Bijvoorbeeld, de <TABLE>-tag, die meerdere keren wordt gebruikt om de pagina die je nu leest op te maken, was bedoeld voor tabellen, maar zoals je ziet, zijn er hier geen tabellen. Na verloop van tijd werd het platformonafhankelijke principe van HTML opgeofferd aan de moderne eisen van multimedia en grafische opmaak.</p>
</div>
</body>
</html>
De regel is te lang geworden. Als we hem in het tekstbestand afbreken, verandert er in de browser niets:
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<div>
<p>De HTML-taal werd ontwikkeld door de Britse wetenschapper Tim Berners-Lee rond 1989–1991 bij CERN in Genève (Zwitserland).
HTML werd ontworpen als een taal voor het uitwisselen van wetenschappelijke en technische documentatie, geschikt voor mensen zonder ervaring met opmaak. HTML vereenvoudigde de complexiteit van SGML door een kleine set structurele en semantische elementen te definiëren — zogenaamde “descriptors”.
De descriptors worden ook vaak “tags” genoemd. Met HTML kun je eenvoudig een relatief simpel maar mooi opgemaakt document maken. Naast de eenvoudige documentstructuur werd ook hypertekstondersteuning toegevoegd. Multimediafuncties kwamen later. Oorspronkelijk was HTML bedoeld als een middel om documenten te structureren en te formatteren zonder afhankelijk te zijn van specifieke weergavemiddelen.
Idealiter moest een HTML-tekst zonder vervorming worden weergegeven op apparaten met verschillende mogelijkheden (bijvoorbeeld een kleurenmonitor, een monochroom scherm, een mobiel toestel of een spraaklezer). Tegenwoordig is het gebruik van HTML echter ver verwijderd van zijn oorspronkelijke doel. Bijvoorbeeld, de <TABLE>-tag, die meerdere keren wordt gebruikt om de pagina die je nu leest op te maken, was bedoeld voor tabellen, maar zoals je ziet, zijn er hier geen tabellen.
Na verloop van tijd werd het platformonafhankelijke principe van HTML opgeofferd aan de moderne eisen van multimedia en grafische opmaak.</p>
</div>
</body>
</html>
Dat helpt niet — in de browser verandert er niets. En hier komt de tag <br /> van pas. Laten we die aan het einde van elke regel toevoegen.
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<div>
<p>De HTML-taal werd ontwikkeld door de Britse wetenschapper Tim Berners-Lee rond 1989–1991 bij CERN in Genève (Zwitserland).<br />
HTML werd ontworpen als een taal voor het uitwisselen van wetenschappelijke en technische documentatie, geschikt voor mensen zonder ervaring met opmaak.<br />
HTML vereenvoudigde de complexiteit van SGML door een kleine set structurele en semantische elementen te definiëren — zogenaamde “descriptors”.<br />
De descriptors worden ook vaak “tags” genoemd. Met HTML kun je eenvoudig een relatief simpel maar mooi opgemaakt document maken.<br />
Naast de eenvoudige documentstructuur werd ook hypertekstondersteuning toegevoegd.<br />
Multimediafuncties kwamen later.<br />
Oorspronkelijk was HTML bedoeld als een middel om documenten te structureren en te formatteren zonder afhankelijk te zijn van specifieke weergavemiddelen.<br />
Idealiter moest een HTML-tekst zonder vervorming worden weergegeven op apparaten met verschillende mogelijkheden (bijvoorbeeld een kleurenmonitor, een monochroom scherm, een mobiel toestel of een spraaklezer).<br />
Tegenwoordig is het gebruik van HTML echter ver verwijderd van zijn oorspronkelijke doel. Bijvoorbeeld, de <TABLE>-tag, die meerdere keren wordt gebruikt om de pagina die je nu leest op te maken, was bedoeld voor tabellen, maar zoals je ziet, zijn er hier geen tabellen.<br />
Na verloop van tijd werd het platformonafhankelijke principe van HTML opgeofferd aan de moderne eisen van multimedia en grafische opmaak.</p>
</div>
</body>
</html>
Nu begrijpt de browser dat de tekst naar een nieuwe regel moet worden verplaatst — de <br />-tag vertelt dat expliciet.
We kunnen de tekst ook opsplitsen in meerdere paragrafen. Laten we de p-tags gebruiken.
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<div>
<p>De HTML-taal werd ontwikkeld door de Britse wetenschapper Tim Berners-Lee rond 1989–1991 bij CERN in Genève (Zwitserland).<br />
HTML werd ontworpen als een taal voor het uitwisselen van wetenschappelijke en technische documentatie, geschikt voor mensen zonder ervaring met opmaak.<br />
HTML vereenvoudigde de complexiteit van SGML door een kleine set structurele en semantische elementen te definiëren — zogenaamde “descriptors”.<br />
De descriptors worden ook vaak “tags” genoemd. Met HTML kun je eenvoudig een relatief simpel maar mooi opgemaakt document maken.<br />
Naast de eenvoudige documentstructuur werd ook hypertekstondersteuning toegevoegd.<br />
Multimediafuncties kwamen later.<br />
</p>
<p>
Oorspronkelijk was HTML bedoeld als een middel om documenten te structureren en te formatteren zonder afhankelijk te zijn van specifieke weergavemiddelen.<br />
Idealiter moest een HTML-tekst zonder vervorming worden weergegeven op apparaten met verschillende mogelijkheden (bijvoorbeeld een kleurenmonitor, een monochroom scherm, een mobiel toestel of een spraaklezer).<br />
Tegenwoordig is het gebruik van HTML echter ver verwijderd van zijn oorspronkelijke doel. Bijvoorbeeld, de <TABLE>-tag, die meerdere keren wordt gebruikt om de pagina die je nu leest op te maken, was bedoeld voor tabellen, maar zoals je ziet, zijn er hier geen tabellen.<br />
Na verloop van tijd werd het platformonafhankelijke principe van HTML opgeofferd aan de moderne eisen van multimedia en grafische opmaak.</p>
</div>
</body>
</html>
Vernieuw de pagina in je browser en je zult zien dat de tekst nu in twee paragrafen is verdeeld.