HTML5 - Text markup elements

In this article, we will learn about text markup, titles, code formatting, links, and citation elements in HTML.

Before the explanation, you need to know that HTML text markup is used to mark the semantic of the text, and it's not for visual formatting (presentation). However, some formatting elements can change the visual format of texts.

HTML tags are for markup (mainly semantically) and not for presentation.

Text Formatting Elements

If you need to indicate text, a word, or character differently, you have some elements:

p Element for Paragraphs

All paragraphs (not all texts) must be inside a paragraph element.

Below, you can see a code snippet:

<p>
    The p tag is used to create paragraphs. It formats content as a paragraph. It does not break lines by default.
</p>
<p>A second paragraph will be on a new line.</p>

The result of this code is:

small Element for Smaller Text

Firstly, I don't recommend using the small element because it doesn't have semantic meaning, and all presentation should be done with CSS.

The small element allows a text inside its opening and closing tags to be smaller than the rest of the text.

Below, you can see a code snippet:

<p>
    It is possible to indicate that a word will be <small>smaller</small> than the others.
</p>

The result of this code is:

strong Element for Important Content

If you have important words or texts, it can be good to use the strong element. Notice that strong is usually bold, but it's not relevant; think only about semantic.

What about the b Element?

The b element is for contents that deserve attention, but it's not more important than the rest of the text, and it's not necessary to change the voice or mood in screen readers. A common use example is keywords in a text.

Below, you can see a code snippet:

<p>
    If I want to indicate that something is <strong>important</strong>, I can use the strong tag.
    <br />But there's also a tag for <b>bold</b>, which is the b tag. What's the difference?
</p>

The result of the code snippet is:

em Element for Emphasis

If you need more emphasis in a particular content, use the em element. This content is not more important than the rest of the text because for importance, we use strong. Notice that em is usually italic, but it's not relevant; think only about semantic.

And i Element?

The i element is for alternate voice or mood for screen readers or specified terms, such as taxonomic designation, a technical term, or an idiomatic phrase from another language. It's important to notice that terms in different languages from the main text usually must be in italic, but italic must be indicated in CSS. In HTML, terms or texts in different languages must be annotated with lang attribute.

Below, you can see a code snippet:

<p>
    If I want to indicate that something is <em>emphasis</em>, I can use the em tag.
    <br />But there's also a tag for <i>italic</i>, which is the i tag. What's the difference?
</p>

The result of the code snippet is:

mark Element for Highlighting Content

The mark element is used to highlight terms in a text without semantic meaning.

Below, you can see a code snippet:

<p>If you want to <mark>highlight</mark> a text, use mark.</p>

The result of the code snippet is:

Title Headers / Headings

For titles in your text, use h1, h2, h3, h4, h5, and h6. Remember that titles are hierarchies, like below figures. Then h2 only exists if there's an h1 before, h3 only exists if there's an h2 before, and so on. I recommend that there should be just one h1 per page/document (or per section or article).

• h1 for the primary title of the page or section;
• h2 for a subtitle;
• h3 for a sub-subtitle;
• h4 for a sub-sub-subtitle;
• h5 for a sub-sub-sub-subtitle;
• h6 for a sub-sub-sub-sub-subtitle;

Some headings in tree view:

Some headings in another tree view:

Notice, each heading appears in a size, but it's not important in HTML; think about semantic and order for each heading. Size can be changed in CSS.

Below, you can see a code snippet:

<h1>Level 1 Title</h1>
<h2>Level 2 Title - h1 sub-title</h2>
<h3>Level 3 Title - h2 sub-title</h3>
<h4>Level 4 Title - h3 sub-title</h4>
<h5>Level 5 Title - h4 sub-title</h5>
<h6>Level 6 Title - h5 sub-title</h6>

The result of the code snippet is:

Code Format

If you need to show codes or text without formatting, you might use pre and code elements.

pre is for a block of preformatted text, so spaces are preserved, and the font can be monospaced. Another element is code for programming codes. Notice that code doesn't offer code highlighting; for this, use JavaScript + CSS code, like Highlight.js.

Generally, inline computer codes are marked with code element, and computer block codes are marked with pre and code elements.

Below, you can see a code snippet:

<p>The function <code>printf</code> prints a message on the user's screen</p>
<pre>
  <code>
int main(){
  printf("Message");

  return 0;
}
  </code>
</pre>

The result of the code snippet is:

Link to Another Page

A very useful element in HTML is the a tag for links to other pages or elements on the web (such as images, texts, files, etc.). A link can be a text, a button, an icon, an image, a section, or any other element.

Below, you can see a code snippet:

<p>
  <a href="https://google.com.br">Google</a>
</p>

The result of the code snippet is:

Citation Elements

We can use cite and blockquote for citation. cite indicates the authors, and blockquote creates quotes.

Below, you can see a code snippet:

<blockquote>
  "The last tag opened should be the first to be closed."
</blockquote>
<cite>Arthur Assuncao, 2023</cite>

The result of the code snippet is:

What Lies Ahead

In upcoming articles, you will delve into Block elements and Semantic web. Stay tuned!

References

WHATWG. HTML Living Standard. Available at: https://html.spec.whatwg.org/multipage/#toc-dom. Accessed on September 14, 2023.