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.
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>
To place a strong importance on a piece of text, use the
<p><strong>Attention:</strong> Please leave the door open.</p>
You can place an emphasis on text by using the
<p>Strawberries are absolutely <em>delicious</em>!</p>
You can force a line break by using the
<p>Here is a <br>line break.</p>
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>
Unordered (un-numbered) List
<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
Ordered (numbered) List
<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol>
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.