HTML Text Content Elements

Text content

Text content elements organizes blocks or sections of contents placed within body element tags.

Blocks

<div>

Generic content division

Use this when no other semantic element like <article> and <nav> could be more appropriately applied.

For aligning and positioning, use CSS Grid and CSS Flexbox. Previously done with align attribute, but it's obsolete.

Handy styling container. Use class attribute and style it in CSS.

This


                                        <div class="js-resultbox">

box is an example.

<figure>

Figure with optional caption

The figure, its caption, and its content are a single figure unit.

Example usage: image, illustration, code snippet, diagram, etc.

<figcaption>: Figure's caption

Figure for img

<figure>
    <img src="..." alt="...">
    <figcaption>...</figcaption>
</figure>

Figure for code snippet

<figure>
    <figcaption>CSS</figcaption>
    <pre>
...
    ...
    ...
...
    </pre>
</figure>

CSS

figure {
    border: 3px solid peachpuff;
    border-radius: 8px;
    padding: 0.5em 1em;
}

figcaption {
    color: cadetblue;
    font-weight: bold;
}

Figure for blockquote

<figure>
    <figcaption><cite>...:</cite></figcaption>
    <blockquote>...</blockquote>
</figure>

Result

Little girl:

Twinkle twinkle little stars, how I wonder what you are.

Paragraph blocks

<p>

Paragraph

The block level element for regular paragraph.

Default characteristic:

Has top and bottom margin.
Automatically remove extra spaces and lines.
Wrap

Initial CSS values:

display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;

<pre>

Preformatted Text

Present the paragraph exactly as written in the HTML file.

Default characteristic:

Monospace font
Extra spaces and lines are not removed
Not wrapped
Like <p>, has top and bottom margin.

Initial CSS values:

display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;

Drawing with pre

<pre class="js-resultbox">
    ^__^
    (oo)\_______
    (__)\       )\/\
        ||----w |
        ||     ||
</pre>

Result

    ^__^
    (oo)\_______
    (__)\       )\/\
        ||----w |
        ||     ||

<blockquote>

Block quoation wrapper

For quotation displayed in its own block. Special attribute: cite for the citation's URL.

<blockquote cite="https://...">

Compare to inline quotation element <q>

Blockquote with figure

<figure>
    <blockquote cite="https:...">
        <p>...</p>
    </blockquote>
    <figcaption>...<cite>...</cite></figcaption>
</figure>

Result

A supernova is a powerful and luminous stellar explosion.

–Author Name, Wikipedia

Listing

<ul>

Unordered List

Permitted child elements: <li> <script> <template>

<li>: List Item; Allowed parent elements: <ul> <ol> <menu>

List structure

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

Result

First item
Second item
Third item

Default bullet style:

First level: disc
- Second level: circle
  - Third level and the rest: square

To change bullet style in CSS: ul {list-style-type: circle;}

Deprecated special attributes:

compact – CSS equivalent: line-height: 80%;
type – values: circle, disc, and square. CSS equivalent: list-style-type: value.

<ol>

Ordered List

Permitted child elements: <li> <script> <template>

<li>: List Item; Allowed parent elements: <ul> <ol> <menu>

Special attributes:

reversed: boolean attribute, specifies that list items are in reverse order. Items will be numbered from high to low.
Note: Since the attribute is a boolean, it's written without value. Writting the value both true or false will be equal to having the boolean (as true) altogether.
<ol reversed>
1. First item
2. Second item
3. Third item
start: arabic numerals. Starting number of the list item.
<ol start="5">
1. First item
2. Second item
3. Third item
<ol start="5" reversed>
1. First item
2. Second item
3. Third item
type: numbering type. Value options:
- a: lowercase letters
- A: uppercase letters
- i: lowercase Roman numerals
- I: uppercase Roman numerals letters
- 1: default Arabic numerals
<ol type="A" start="5" reversed>
1. First item
2. Second item
3. Third item

<menu>

Semantic alternative to <ul>

Just like <ul>, it's also an unordered list. Difference:

<menu> is intended for interactive items, to act on.
- One of old use is for context menu. This is now obsolete.
<ul> primarily contains items for display.

Examples:

Examples

<menu>
    <li><button onclick="copy()">Copy</button></li>
    <li><button onclick="cut()">Cut</button></li>
    <li><button onclick="paste()">Paste</button></li>    
</menu>

CSS

menu {
    display: flex;
    list-style: none;
    padding: 0;
    width: 400px;
}

li {
    flex-grow: 1;
}

button {
    width: 100%;
}

Results

Description

<dl>

Description List

<dt>: Description Term
<dd>: Description Details

Description structure

<dl>
    <dt>...</dt>
    <dl>...</dl>

    <dt>...</dt>
    <dd>...</dd>
</dl>

Multiple terms and multiple descriptions are both allowed

Most prominent usage example of description listing is glossary. This page is structured using nesting description listing. If then different structure is founds to be more suiting, or this is not appropriate use altogether, then maybe a note will be placed here.

Divider

<hr>

Horizontal Rule

Thematic break between paragraph level elements.

Empty element, only have start tag.

Special attributes:

deprecated attributes: align, noshade, size, width
Non-standard attributes: color

<p>...</p>
<hr>
<p>...</p>

The CSS

hr {
    border: none;
    border-top: 2px dotted pink;
}

Result

Monoceros (Greek: Μονόκερως, "unicorn") is a faint constellation on the celestial equator. Its definition is attributed to the 17th-century Dutch cartographer Petrus Plancius.

Draco is a constellation in the far northern sky. Its name is Latin for dragon. It was one of the 48 constellations listed by the 2nd century astronomer Ptolemy, and remains one of the 88 modern

Text content

Resources