HTML Formatting and Semantics

Here, we look at formatting and semantics within HTML documents.

HTML provides the structure of the document (consisting of all the individual HTML elements on the page).

HTML also provides the semantics of an HTML document. Elements are generally used for a particular meaning. For example, a heading level 1 is more important than a heading level 2.

Most formatting and styling on web pages is done using CSS. However, browsers format certain HTML elements in a standard way without the need for CSS. CSS is therefore only for enhancing the presentation of an element from the default way the browser presents it.

Below are examples of common HTML elements, with an explanation of their usage, as well as an example of their basic format when applied to an HTML document.

Headings

There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from <h1> for the most important, to <h6> for the least important.

Here they are:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Try it with the Online Editor

The <strong> Element

To place a strong importance on a piece of text, use the <strong> element.

<p><strong>Attention:</strong> Please leave the door open.</p>

Try it with the Online Editor

The <em> Element

You can place an emphasis on text by using the <em> element.

<p>Strawberries are absolutely <em>delicious</em>!</p>

Try it with the Online Editor

Line Breaks

You can force a line break by using the <br> element.

<p>Here is a <br>line break.</p>

Try it with the Online Editor

Thematic Break

You can create a paragraph-level thematic break by using the <hr> element. Therefore, this element allows you to separate different topics into logical groups.

In early versions of HTML, this element represented a "horizontal rule". However, HTML5 gave it a specific semantic meaning (it represents a paragraph-level thematic break).

<p>Here's one topic... <hr>
Here's another topic.</p>

Try it with the Online Editor

Unordered (un-numbered) List

To create an unordered list, use the <ul> element to define the list, and the <li> element for each list item.

<ul>
	<li>List item 1</li>
	<li>List item 2</li>
	<li>List item 3</li>
</ul>

Try it with the Online Editor

Ordered (numbered) List

To create an ordered list, use the <ol> element to define the list, and the <li> element for each list item.

<ol>
	<li>List item 1</li>
	<li>List item 2</li>
	<li>List item 3</li>
</ol>

Try it with the Online Editor

Ordered List or Unordered List?

You may find occasionally find yourself wondering which list is the best one to use. Here's some info you can use as a guide.

Ordered Lists

Ordered lists should be used for when the order is important. They should be used only in cases where, if you were to change the order, it would change the meaning.

For example, a list of step by step instructions should be placed in an ordered list if the order of the steps are important (i.e. the steps need to be carried out exactly in the same order that is presented in the list.

Another example could be a list ordered by ranking, such as a "top 10" list.

Unordered Lists

Unordered lists should be used whenever the order is not important. A grocery list is a typical example of an unordered list (as long as it doesn't matter which order you get each item).

Ordered lists are often used in website navigation to present menu items. These are usually styled with CSS to make them look more like navigation than a list.

We will be covering more HTML elements throughout this tutorial, but before we do that, you should know about attributes.