Tags Related to Code Display, Quotations, and Lists

This article explains tags related to code display, quotations, and lists.

This explains how to write source code, quotes, annotations, and lists in HTML.

YouTube Video

Code display-related tags

<code> tag

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

• The <code> tag is an inline element used to indicate code or program snippets within an HTML document.
• By default, it is displayed in a monospace font, enhancing the readability of code.

<pre> tag

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

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

• The <pre> tag is used to display text in its original format within an HTML document. Using this tag preserves whitespace and line breaks in the text, maintaining its original format. It is mainly used for displaying content that needs to maintain formatting, such as program code, poetry, or text art.

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

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

• In the <pre> tag, spaces are preserved, so if there is a space before the closing tag, a blank line will appear at the end as in this example.

<samp> tag

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

• The <samp> tag is an HTML tag used to represent the output of a computer program. It is used to indicate output or messages from a program or system.

<kbd> tag

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

• The <kbd> tag is an HTML tag used to represent user input. It is used to indicate keyboard input or command input, such as shortcuts.

<var> tag

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

• The <var> tag is used to represent variables in a program or equation. It is used to emphasize variable names or variables in mathematical formulas.

Tags used for quotations, etc.

<blockquote> tag

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

• The <blockquote> tag is used to represent long quotations or text from other sources, and is typically displayed at the block level.

<q> tag

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

• The <q> tag is an inline element used to represent short quotations. This tag can be used to mark up a portion of text or a sentence as a quotation. Text enclosed in a <q> tag is typically displayed with quotation marks. The <q> tag can also be nested. In this case, different types of quotation marks are generally used for the inner quotation.

<cite> tag

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

• The <cite> tag is an inline element used to indicate the source of a citation or reference. It is mainly used to indicate the source of a work, such as titles of works, articles, papers, web pages, or books.

<address> tag

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

• The <address> tag is used to represent contact information related to the author or owner of a document or section. This tag typically contains email addresses, phone numbers, physical addresses, and similar information.

The <time> tag

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

• The <time> tag is used to represent a specific point in time, a duration, or a recurring time. This tag can include dates and times to provide semantic meaning to the document.

The <data> tag

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

• The <data> tag is used to associate human-readable content with machine-interpretable values. This tag is useful for marking up data in a way that can be easily processed by programs.

<details> and <summary> Tags

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

• The <details> tag creates a collapsible and expandable widget. By using it with the <summary> tag, you can set up a clickable section to reveal more details, often used for interactive displays like 'Read more'.

Tags used for list display

<ul> tag

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

• This is a tag used to create unordered lists. Each item in the list is defined with the <li> tag. By default, a black dot is displayed in front of each list item.

<ol> tag

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

• This tag is used to create an ordered list. Each item in the list is defined with the <li> tag. By default, numbers are displayed to indicate the order of the items.

<dl> tag

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>

• This tag is used to create a list of pairs consisting of terms and definitions, or names and details. The list items are defined with the <dt> and <dd> tags. The term or name is written in the <dt> tag, and the definition or explanation is written in the <dd> tag.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video