Content sections

The content sections are quite similar to the semantic content sections. The main difference is that the use of all the given elements are not driven by the outline or purpose of the document like the semantic sections are.

hr

The hr element is the horizontal rule element, its syntax is as follows:

<hr>

Description

By default, the hr element will draw a horizontal line in the content. You can change the look of this element through CSS.

This element should never have any content inside of it:

<p>This is a paragraph.</p>
<hr/>
<p>This paragraph goes in another direction.</p>

pre

The pre element is the preformatted text:

<pre></pre>

Description

The text in an HTML document is usually not shown in the browser with the same whitespace or line breaks as it is in a text document. The pre element allows you to display text in the same way as it is in the document. Whitespace and line breaks will be preserved.

Here is an example of using line breaks:

<pre>This text
has some
line breaks.</pre>

blockquote

The syntax of a blockquote element is as follows:

<blockquote cite></blockquote>

Attributes

The cite attribute is used in the blockquote element to point to the URL of the cited document.

Description

The blockquote element is used when pulling a quotation out of a document or text.

Here is an example:

<blockquote cite="https://www.packtpub.com/">
    <p>Contact Us</p>
</blockquote>

ol

The ol element is the ordered list element, which has the following syntax:

<ol reversed start type></ol>

Attributes

The attributes that are used in the ol element are as follows:

• reversed: This is a Boolean value. It denotes that the list is in a reverse order.
• start: This accepts a value as a number to start with.
• type: This will change the type of the numbered elements. By default, we can have a numbered list (1), but we can change to other types, such as lowercase letters (a), uppercase letters (A), lowercase Roman numerals (i), and uppercase Roman numerals (I).

Description

The ol element can be used in the same situations as a ul element, except that an ol element is numbered instead of bulleted. For example, you would use a ul element for a grocery list and an ol element for a numbered set of instructions. You can have multiple ul or ol elements nested within each other.

The items in the list will be the li elements.

Here is an example of a list that uses Roman numerals and starts at 10.

<ol start="10" type="i">
    <li>Roman numeral 10</li>
    <li>Roman numeral 11</li>
</ol>

See also

You can also refer to the ul and li elements to find out more about the ol element.

ul

The ul element is an unordered list element:

<ul></ul>

Description

The ul element can be used in the same situations as an ol element, but a ul element will be bulleted and an ol element will be numbered.

When you style this list, you should use CSS and not the older HTML 4 attributes.

You can nest the ul and ol elements multiple times.

Here is an example of the ul element:

<ul>
    <li>Items in</li>
    <li>no particular</li>
    <li>order</li>
</ul>

See also

You can also refer to the ol and li elements to learn more about the ul element.

li

The li element is the list item element:

<li value></li>

Attributes

The value attribute is used in the li element with the ol element and it is the value of the item in the ordered list.

Description

You will use the li element for each item in a list.

Here is an example:

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

See also

You can also refer to the ol and ul elements to know more details about the li element.

dl

The dl element is the definition list element:

<dl></dl>

Description

The dl element is a list where the items have a term and definition; however, the dl element can be used for more than just terms and definitions.

You must use the dt element followed by the dd element when building the list for the dl element. Each dt element can have multiple dd elements after it.

Here is an example:

<dl>
    <dt>PactPub</dt>
    <dd>Packt Publishing</dd>
</dl>

See also

You can also refer to the dt and dd elements to find out more about the dl element.

dt

The dt element is the definition term element:

<dt></dt>

Description

The dt element is the first item in a definition list, the dd element being the other item.

Here is an example:

<dl>
    <dt>PactPub</dt>
    <dd>Packt Publishing</dd>
</dl>

See also

You can also refer to the dl and dd elements to find out more about the dt element.

dd

The dd element is the definition description element:

<dd></dd>

Description

The dd element is the second item in a definition list, the other one being the dt element.

Here is an example:

<dl>
    <dt>PactPub</dt>
    <dd>Packt Publishing</dd>
</dl>

See also

You can also refer to the dl and dd elements to find out more about the dd element.

figure

The syntax of the figure element is as follows:

<figure></figure>

Description

The figure element is a new element introduced with HTML5. In much the same way as an article adds some meaning where there was none, a figure adds meaning too. A figure is an image or any other item of information that is related to the document. This has more meaning than just using an img element.

Here is an example:

<figure>
     <img src="figure1.jpg" title="Figure 1" />
     <figcaption>Figure One</figcaption>
</figure>

See also

You can also refer to the figcaption element to find out more about the figure element.

figcaption

The figcaption element is the figure caption element:

<figcaption></figcaption>

Description

The figcaption element was introduced in HTML5 along with the figure. This element provides the caption for a figure. This element must be inside a figure element and it must be either the first or last child of the figure element.

Here is a simple example of the figcaption element:

<figure>
     <img src="figure1.jpg" title="Figure 1" />
     <figcaption>Figure One</figcaption>
</figure>

See also

You can also refer to the figure element to find out more about the figcaption element.

p

The p element is the pision element:

<p></p>

Description

The p element is one of the most used elements in HTML today. It is the element used to split up your document into arbitrary pisions. The p element has no default styling. These pisions could be for placement, styling, or any other reason. A p element does not affect the semantic meaning of the document. It should only be used when no other element suits your requirements.

Here is an example:

<p>
    You can put whatever you want in here!
    <p>
        More elements.
    </p>
</p>

main

The syntax of the main element is as follows:

<main></main>

Description

The main element should have the main content of the document inside it. You cannot have this element as a descendant of the article, aside, footer, header, or nav elements. This differs from an article, in that, an article should be a self-contained element.

Here is an example of the main element in use:

<main>
    This is the main content of the document.
    <article>
        Here is the article of the document.
    </article>
</main>