Tags met betrekking tot codeweergave, citaten en lijsten
Dit artikel legt de tags uit met betrekking tot codeweergave, citaten en lijsten.
Dit legt uit hoe je broncode, citaten, annotaties en lijsten schrijft in HTML.
YouTube Video
Codeweergave-gerelateerde tags
<code> tag
Inline code example:
let x = 10;
1Inline code example: <code>let x = 10;</code>- De
<code>-tag is een inline-element dat wordt gebruikt om code of programmasnippets in een HTML-document aan te geven. - Standaard wordt het weergegeven in een monospaced lettertype, wat de leesbaarheid van code verbetert.
<pre> tag
function hello() {
console.log("Hello, world!");
}
1<pre>
2function hello() {
3 console.log("Hello, world!");
4}
5</pre>- De
<pre>-tag wordt gebruikt om tekst in zijn oorspronkelijke formaat in een HTML-document weer te geven. Met behulp van deze tag blijven spaties en regelafbrekingen in de tekst behouden, waardoor het oorspronkelijke formaat wordt gehandhaafd. Het wordt voornamelijk gebruikt voor het weergeven van inhoud die de opmaak moet behouden, zoals programmacode, poëzie of tekstkunst.
function hello() {
console.log("Hello, world!");
}
1 <pre>
2 function hello() {
3 console.log("Hello, world!");
4 }
5 </pre>- In de
<pre>-tag blijven spaties behouden, dus als er een spatie voor de sluitende tag staat, verschijnt er aan het einde een lege regel zoals in dit voorbeeld.
<samp> tag
Sample system output: Error: Invalid input.
1Sample system output: <samp>Error: Invalid input.</samp>- De
<samp>-tag is een HTML-tag die wordt gebruikt om de uitvoer van een computerprogramma weer te geven. Het wordt gebruikt om uitvoer of berichten van een programma of systeem aan te geven.
<kbd> tag
Keyboard input example: Ctrl + C
1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>- De
<kbd>-tag is een HTML-tag die wordt gebruikt om gebruikersinvoer weer te geven. Het wordt gebruikt om toetsenbordinvoer of commando-invoer, zoals sneltoetsen, aan te geven.
<var> tag
Variable example: x = 5;
1Variable example: <var>x</var> = 5;- De
<var>-tag wordt gebruikt om variabelen in een programma of vergelijking weer te geven. Het wordt gebruikt om variabelenamen of variabelen in wiskundige formules te benadrukken.
Tags die worden gebruikt voor citaten, enz.
<blockquote> tag
This is a blockquote for longer quotations.
1<blockquote>
2 This is a blockquote for longer quotations.
3</blockquote>- De
<blockquote>-tag wordt gebruikt om lange citaten of tekst uit andere bronnen weer te geven en wordt meestal op blokniveau weergegeven.
<q> tag
This is a short quote:
Short quote example.
1This is a short quote: <q>Short quote example.</q>- De
<q>-tag is een inline-element dat wordt gebruikt om korte citaten weer te geven. Deze tag kan worden gebruikt om een deel van een tekst of een zin als citaat te markeren. Tekst tussen<q>-tags wordt doorgaans weergegeven met aanhalingstekens. De<q>-tag kan ook genest worden. In dit geval worden meestal verschillende soorten aanhalingstekens gebruikt voor het binnenste citaat.
<cite>-tag
Reference to a book: The Great Gatsby
1Reference to a book: <cite>The Great Gatsby</cite>- De
<cite>-tag is een inline-element dat wordt gebruikt om de bron van een citaat of verwijzing aan te geven. Dit wordt voornamelijk gebruikt om de bron van een werk aan te geven, zoals titels van werken, artikelen, papers, webpagina's of boeken.
<address>-tag
123 Main Street, Springfield, USA
1<address>123 Main Street, Springfield, USA</address>- De
<address>-tag wordt gebruikt om contactinformatie weer te geven die gerelateerd is aan de auteur of eigenaar van een document of sectie. Deze tag bevat doorgaans e-mailadressen, telefoonnummers, fysieke adressen en soortgelijke informatie.
De <time>-tag
1<time datetime="2024-12-04">December 4, 2024</time>- De
<time>-tag wordt gebruikt om een specifiek tijdstip, een duur of een terugkerende tijd aan te duiden. Deze tag kan datums en tijden bevatten om semantische betekenis aan het document te geven.
De <data>-tag
Current Year
1<data value="2024">Current Year</data>- De
<data>-tag wordt gebruikt om mensleesbare inhoud te koppelen aan machineleesbare waarden. Deze tag is nuttig om gegevens te markeren op een manier die gemakkelijk door programma's kan worden verwerkt.
<details>- en <summary>-tags
More information
Here is some additional content.
1<details>
2 <summary>More information</summary>
3 <p>Here is some additional content.</p>
4</details>- De
<details>-tag maakt een inklapbare en uitklapbare widget aan. Door deze te gebruiken met de<summary>-tag, kun je een klikbaar gedeelte instellen om meer details te tonen, vaak gebruikt voor interactieve weergaven zoals 'Lees meer'.
Tags die worden gebruikt voor lijstweergave
<ul>-tag
- Item 1
- Item 2
- Item 3
1<ul>
2 <li>Item 1</li>
3 <li>Item 2</li>
4 <li>Item 3</li>
5</ul>- Dit is een tag die wordt gebruikt om ongeordende lijsten te maken.
Elk item in de lijst wordt gedefinieerd met de
<li>-tag. Standaard wordt er een zwarte stip weergegeven voor elk lijstitem.
<ol>-tag
- Step 1
- Step 2
- Step 3
1<ol>
2 <li>Step 1</li>
3 <li>Step 2</li>
4 <li>Step 3</li>
5</ol>- Deze tag wordt gebruikt om een geordende lijst te maken.
Elk item in de lijst wordt gedefinieerd met de
<li>-tag. Standaard worden er nummers weergegeven om de volgorde van de items aan te geven.
<dl>-tag
- Term 1
- Definition of Term 1
- Term 2
- Definition of Term 2
1<dl>
2 <dt>Term 1</dt>
3 <dd>Definition of Term 1</dd>
4 <dt>Term 2</dt>
5 <dd>Definition of Term 2</dd>
6</dl>- Deze tag wordt gebruikt om een lijst te maken van paren bestaande uit termen en definities, of namen en details.
De lijstitems worden gedefinieerd met de
<dt>- en<dd>-tags. De term of naam wordt geschreven in de<dt>-tag en de definitie of uitleg wordt geschreven in de<dd>-tag.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.