Articles
Introduktion til HTML
Tags relateret til kodedisplay, citater og lister

Tags relateret til kodedisplay, citater og lister

Denne artikel forklarer tags relateret til kodedisplay, citater og lister.

Dette forklarer, hvordan man skriver kildekode, citater, annotationer og lister i HTML.

YouTube Video

Kodevisningsrelaterede tags

<code> tag

Inline code example: let x = 10; 
1Inline code example: <code>let x = 10;</code>
  • <code>-taggen er et inline-element, der bruges til at angive kode eller programuddrag i et HTML-dokument.
  • Som standard vises den i en monospace-skrifttype, der forbedrer læsbarheden af koden.

<pre> tag 

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>
  • <pre>-tagget bruges til at vise tekst i sin oprindelige formatering i et HTML-dokument. Brugen af denne tag bevarer mellemrum og linjeskift i teksten og fastholder dens oprindelige format. Den bruges primært til at vise indhold, der skal bevare sin formatering, såsom programkode, poesi eller tekstkunst.
    function hello() {
        console.log("Hello, world!");
    }
    
1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>
  • I <pre>-tagget bevares mellemrum, så hvis der er et mellemrum før afslutningstagget, vil en tom linje fremkomme til sidst som i dette eksempel.

<samp> tag

Sample system output: Error: Invalid input. 
1Sample system output: <samp>Error: Invalid input.</samp>
  • <samp>-taggen er en HTML-tag, der bruges til at repræsentere output fra et computerprogram. Det bruges til at angive output eller meddelelser fra et program eller system.

<kbd> tag

Keyboard input example: Ctrl + C 
1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>
  • <kbd>-taggen er en HTML-tag, der bruges til at repræsentere brugerinput. Den bruges til at angive tastaturinput eller kommandoinput, såsom genveje.

<var> tag

Variable example: x = 5; 
1Variable example: <var>x</var> = 5;
  • <var>-taggen bruges til at repræsentere variabler i et program eller en ligning. Den bruges til at fremhæve variabelnavne eller variabler i matematiske formler.

Tags anvendt til citater, m.m.

<blockquote> tag

This is a blockquote for longer quotations. 
1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>
  • <blockquote>-taggen bruges til at repræsentere lange citater eller tekst fra andre kilder og vises typisk som et blokniveauelement.

<q> tag

This is a short quote: Short quote example. 
1This is a short quote: <q>Short quote example.</q>
  • <q>-taggen er et inline-element, der bruges til at repræsentere korte citater. Denne tag kan bruges til at markere en del af tekst eller en sætning som et citat. Tekst indrammet i et <q>-tag vises typisk med anførselstegn. <q>-taggen kan også indlejres. I dette tilfælde bruges generelt forskellige typer anførselstegn til det indre citat.

<cite>-tag

Reference to a book: The Great Gatsby 
1Reference to a book: <cite>The Great Gatsby</cite>
  • <cite>-taggen er et inline-element, der bruges til at angive kilden til en citation eller reference. Det bruges hovedsageligt til at angive kilden til et værk, såsom titler på værker, artikler, papirer, websider eller bøger.

<address>-tag

123 Main Street, Springfield, USA
1<address>123 Main Street, Springfield, USA</address>
  • <address>-tagget bruges til at repræsentere kontaktoplysninger relateret til forfatteren eller ejeren af et dokument eller en sektion. Dette tag indeholder typisk e-mailadresser, telefonnumre, fysiske adresser og lignende oplysninger.

Tagget <time> 

1<time datetime="2024-12-04">December 4, 2024</time>
  • Tagget <time> bruges til at repræsentere et specifikt tidspunkt, en varighed eller et tilbagevendende tidspunkt. Dette tag kan inkludere datoer og tidspunkter for at give dokumentet semantisk betydning.

Tagget <data>

Current Year 
1<data value="2024">Current Year</data>
  • Tagget <data> bruges til at forbinde menneskeligt læsbart indhold med maskin-tolkelige værdier. Dette tag er nyttigt til at strukturer data, så det nemt kan behandles af programmer.

<details>- og <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>
  • <details>-tagget skaber en sammenklappelig og udvidelig widget. Ved at bruge det sammen med <summary>-tagget kan du oprette et klikbart område for at afsløre flere detaljer, ofte brugt til interaktive visninger som 'Læs mere'.

Tags, der bruges til listevisning

<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>
  • Dette er et tag, der bruges til at oprette uordnede lister. Hvert element i listen defineres med <li>-tagget. Som standard vises en sort prik foran hvert listeelement.

<ol>-tag

  1. Step 1
  2. Step 2
  3. Step 3
1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>
  • Dette tag bruges til at oprette en ordnet liste. Hvert element i listen defineres med <li>-tagget. Som standard vises numre for at angive rækkefølgen af elementerne.

<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>
  • Dette tag bruges til at oprette en liste med par bestående af termer og definitioner eller navne og detaljer. Listeelementerne defineres med <dt>- og <dd>-taggene. Termen eller navnet skrives i <dt>-tagget, og definitionen eller forklaringen skrives i <dd>-tagget.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Tekstrelaterede tagsTabel-relaterede tags