Basisprincipes van HTML
In dit artikel leggen we de basisprincipes van HTML uit.
Dit legt de belangrijkste tags uit, zoals de DOCTYPE-declaratie, <html>, <head> en <body>-tags. Het beschrijft ook tags, attributen en speciale tekens.
YouTube Video
Basisprincipes van HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>Aan het begin van het bestand verklaren we dat dit een HTML5-document is, wat aangeeft dat het de regels van HTML5 volgt.
-
<html>De
<html>-tag is het buitenste element in een HTML-document dat de gehele inhoud omhult. Elk HTML-bestand bevat slechts één<html>-tag, en alle andere tags zijn binnen deze tag genest. Delang="en"binnen de openingstag<html>wordt een attribuut genoemd en informeert de browser dat het document in het Engels is geschreven. Dit helpt schermlezers en zoekmachines te informeren over de taal van het document. -
<head>De
<head>-tag definieert de metadata (informatie) voor de pagina. Dit omvat de paginatitel, tekenencoding en instellingen voor responsive design. Responsief ontwerp verwijst naar een methode die is ontworpen voor websites of apps om zich aan te passen en goed weer te geven op verschillende apparaten en schermformaten. Dit stelt gebruikers in staat om content comfortabel te bekijken op verschillende apparaten zoals smartphones, tablets en desktops.<meta charset="UTF-8">stelt de tekenencoding van het document in op UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">is een instelling die de weergave optimaliseert voor mobiele apparaten. De pagina past zich aan aan de breedte van het scherm van het apparaat.<title>vertegenwoordigt de titel van de pagina die wordt weergegeven in het browsertabblad. In dit voorbeeld is de titel 'Basics of HTML' ingesteld. -
<body>De
<body>tag bevat het deel dat inhoud aan gebruikers toont. Binnen deze tag worden tekst, afbeeldingen, links, enz. geschreven. -
<main>De
<main>tag vertegenwoordigt de hoofdinhoud van de pagina. Dit omvat koppen en alinea's. -
<h1>De
<h1>tag vertegenwoordigt de belangrijkste kop op de pagina. Het is gebruikelijk om de<main>tag en<h1>tag slechts eenmaal in een document te gebruiken. -
<p>De
<p>tag vertegenwoordigt een alinea. -
<!-- Comment -->Je kunt opmerkingen in HTML schrijven in dit formaat. Aangezien client-side HTML door iedereen kan worden bekeken, voeg geen gevoelige informatie zoals wachtwoorden of API-sleutels toe in opmerkingen.
HTML heeft veel tags, maar let hier op de volgende punten. Een HTML-bestand bestaat uit een DOCTYPE-declaratie en één <html> tag. De <html> tag bevat één <head> tag en één <body> tag. In HTML bevinden alle tags zich binnen de <html> tag, waarbij de structuur van tekst wordt uitgedrukt door ouder-, kind- en broeder- zusterrelaties, vergelijkbaar met een boomstructuur. Let bij het schrijven van HTML ook op de documentstructuur.
Tags en Attributen
Laten we vervolgens een kijkje nemen naar HTML-tags en attributen.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->Tags worden omsloten door hoekige haken (<, >) en bestaan meestal uit een paar van openings- en sluit-tags. Echter, er zijn ook enkele tags, zoals de <meta> tag en <img> tag, die geen inhoud bevatten. Enkele tags vereisen geen sluit-tag.
Tags kunnen attributen hebben, die aanvullende informatie aan de tag geven. Attributen worden binnen de openingstag geschreven in het formaat attribuutNaam="waarde".
Hier wordt <div> een tag genoemd en <div>Content</div> een element.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>Veelvoorkomende attributen in HTML zijn onder andere id, class en style. Het id-attribuut wordt gebruikt om een element een unieke identifier te geven, en er kan maar één element met dezelfde id op een pagina zijn. Het is nuttig bij het manipuleren van specifieke elementen met JavaScript of CSS. Het class-attribuut stelt je in staat om meerdere elementen te groeperen met CSS of JavaScript door een klasnaam toe te kennen. Je kunt dezelfde klasse toewijzen aan meerdere elementen, zodat stijlen gedeeld kunnen worden. Het style-attribuut specificeert CSS-stijlen inline voor een element. Normaal gesproken worden stijlen gedefinieerd in een extern stylesheet of binnen de <style>-tag, maar dit attribuut wordt gebruikt wanneer je stijlen direct voor individuele elementen wilt specificeren.
Speciale tekens in HTML
Laten we vervolgens kijken naar speciale tekens in HTML.
In HTML zijn er speciale tekens die worden gebruikt om specifieke symbolen en tekens weer te geven. Deze speciale tekens worden entiteiten genoemd. Speciale tekens beginnen met & (ampersand), gevolgd door een naam of nummer, en eindigen met ; (puntkomma).
Representatieve speciale tekens in HTML
Hier zijn enkele veelvoorkomende speciale tekens.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
Voorbeelden van het gebruik van speciale tekens in HTML
Met name hoekige haken (<, >) en dubbele aanhalingstekens moeten correct worden gebruikt in HTML.
Hoekige haken (<, >) en dubbele aanhalingstekens moeten worden weergegeven als speciale tekens in HTML, zoals hieronder getoond.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
HTML-versies
Laten we hier eens kijken naar de HTML-versies.
HTML-versies zijn geëvolueerd om de structuur en functionaliteit van webpagina's te definiëren. Hier zijn de belangrijkste versies:.
-
HTML 1.0 (1993)
De eerste HTML-versie had alleen zeer basale opmaakfuncties. Het definieerde elementen zoals links, koppen, alinea's en lijsten.
-
HTML 2.0 (1995)
De eerste gestandaardiseerde versie, met meer toegevoegde elementen, waaronder ondersteuning voor formulieren en tabellen.
-
HTML 3.2 (1997)
Meer opmaakfuncties werden toegevoegd, waardoor de insluiting van stijlelementen en scripts mogelijk werd. Bovendien werd layout met het
<table>element gebruikelijk. -
HTML 4.01 (1999)
De scheiding van structuur en presentatie vorderde, en CSS werd geïntroduceerd. Het maken van standaarden-conforme sites werd aanbevolen. Bovendien werden de internationalisering en toegankelijkheid van documenten verbeterd.
-
HTML5 (2014)
De nieuwste grote versie, die ondersteuning introduceert voor video en audio, canvas, lokale opslag, geolocatie en andere nieuwe APIs. Het is mobielvriendelijk, waardoor de ontwikkeling van meer interactieve webtoepassingen mogelijk wordt.
HTML5.2 is een versie van HTML die in 2017 werd aanbevolen en is een verbeterde versie van HTML5. Sinds HTML5.2 wordt het continu bijgewerkt als de HTML Living Standard, in plaats van een statisch versienummer te hebben.
HTML is geëvolueerd door deze versies en heeft zich ontwikkeld tot een meer flexibele en krachtige webtechnologie.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.