Taggar relaterade till kodvisning, citat och listor

Den här artikeln förklarar taggar relaterade till kodvisning, citat och listor.

Detta förklarar hur man skriver källkod, citat, kommentarer och listor i HTML.

YouTube Video

Kodvisningsrelaterade taggar

<code>-tagg

1Inline code example: <code>let x = 10;</code>

• Taggen <code> är ett inline-element som används för att markera kod eller programfragment i ett HTML-dokument.
• Som standard visas det med ett monospace-teckensnitt, vilket förbättrar läsbarheten av koden.

<pre>-tagg

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

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>

• <pre>-taggen används för att visa text i sitt ursprungliga format inom ett HTML-dokument. Att använda denna tagg bevarar blanksteg och radbrytningar i texten, vilket bibehåller dess ursprungliga format. Den används främst för att visa innehåll som behöver behålla formateringen, såsom programkod, poesi eller textkonst.

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

1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>

• I <pre>-taggen bevaras mellanslag, så om det finns ett mellanslag före sluttaggen visas en tom rad i slutet som i detta exempel.

<samp>-tagg

1Sample system output: <samp>Error: Invalid input.</samp>

• Taggen <samp> är en HTML-tagg som används för att representera utdata från ett datorprogram. Den används för att indikera utdata eller meddelanden från ett program eller system.

<kbd>-tagg

1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>

• Taggen <kbd> är en HTML-tagg som används för att representera användarinmatning. Den används för att indikera tangentbordsinmatning eller kommandon, som genvägar.

<var>-tagg

1Variable example: <var>x</var> = 5;

• Taggen <var> används för att representera variabler i ett program eller en ekvation. Den används för att framhäva variabelnamn eller variabler i matematiska formler.

Taggar som används för citat, etc.

<blockquote>-tagg

1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>

• Taggen <blockquote> används för att representera långa citat eller text från andra källor, och visas vanligtvis på blocknivå.

<q>-tagg

1This is a short quote: <q>Short quote example.</q>

• Taggen <q> är ett inline-element som används för att representera korta citat. Den här taggen kan användas för att markera en del av en text eller en mening som ett citat. Text som omsluts av en <q>-tagg visas vanligtvis med citattecken. Taggen <q> kan också vara inbäddad. I detta fall används vanligtvis olika typer av citattecken för det inre citatet.

<cite>-tagg

1Reference to a book: <cite>The Great Gatsby</cite>

• Taggen <cite> är ett inline-element som används för att ange källan till ett citat eller en referens. Det används främst för att ange källan till ett verk, såsom titlar på verk, artiklar, uppsatser, webbsidor eller böcker.

<address>-tagg

1<address>123 Main Street, Springfield, USA</address>

• <address>-taggen används för att representera kontaktinformation relaterad till författaren eller ägaren av ett dokument eller en sektion. Denna tagg innehåller vanligtvis e-postadresser, telefonnummer, fysiska adresser och liknande information.

Taggen <time>

1<time datetime="2024-12-04">December 4, 2024</time>

• Taggen <time> används för att representera en specifik tidpunkt, en varaktighet eller en återkommande tid. Denna tagg kan inkludera datum och tider för att ge semantisk betydelse till dokumentet.

Taggen <data>

1<data value="2024">Current Year</data>

• Taggen <data> används för att koppla mänskligt läsbart innehåll till maskintolkbara värden. Denna tagg är användbar för att märka upp data på ett sätt som enkelt kan behandlas av program.

<details> och <summary>-taggar

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>

• <details>-taggen skapar en hopfällbar och expanderbar widget. Genom att använda den med <summary>-taggen kan du skapa en klickbar sektion för att visa fler detaljer, ofta använd för interaktiva visningar som 'Läs mer'.

Taggar som används för listvisning

<ul>-tagg

1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>

• Detta är en tagg som används för att skapa osorterade listor. Varje objekt i listan definieras med <li>-taggen. Som standard visas en svart punkt framför varje listobjekt.

<ol>-tagg

1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>

• Denna tagg används för att skapa en numrerad lista. Varje objekt i listan definieras med <li>-taggen. Som standard visas siffror för att indikera ordningen på objekten.

<dl>-tagg

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>

• Denna tagg används för att skapa en lista över par bestående av termer och definitioner eller namn och detaljer. Listobjekten definieras med <dt> och <dd>-taggarna. Termen eller namnet skrivs i <dt>-taggen, och definitionen eller förklaringen skrivs i <dd>-taggen.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video