Content sections

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>

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>

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

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>

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

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>

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

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>

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

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.

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>

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

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>

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

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>

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

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>

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

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>

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

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>

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

The div element is one of the most used elements in HTML today. It is the element used to split up your document into arbitrary divisions. The div element has no default styling. These divisions could be for placement, styling, or any other reason. A div 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:

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

The syntax of the main element is as follows:

<main></main>

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>