DEV Community

Cover image for HTML5 - Text markup elements
Arthur Nascimento Assunção
Arthur Nascimento Assunção

Posted on • Edited on

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>
Enter fullscreen mode Exit fullscreen mode

The result of this code is:

HTML rendered with  raw `p` endraw  element

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>
Enter fullscreen mode Exit fullscreen mode

The result of this code is:

HTML rendered with  raw `small` endraw  element

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>
Enter fullscreen mode Exit fullscreen mode

The result of the code snippet is:

HTML rendered with  raw `strong` endraw  and  raw `b` endraw  elements

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>
Enter fullscreen mode Exit fullscreen mode

The result of the code snippet is:

HTML rendered with  raw `em` endraw  and  raw `i` endraw  elements

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>
Enter fullscreen mode Exit fullscreen mode

The result of the code snippet is:

HTML rendered with  raw `mark` endraw  element

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:

Headings in tree view

Some headings in another tree view:

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>
Enter fullscreen mode Exit fullscreen mode

The result of the code snippet is:

HTML rendered for heading elements

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>
Enter fullscreen mode Exit fullscreen mode

The result of the code snippet is:

HTML rendered for  raw `pre` endraw  and  raw `code` endraw  elements

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>
Enter fullscreen mode Exit fullscreen mode

The result of the code snippet is:

HTML rendered for  raw `a` endraw  element

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>
Enter fullscreen mode Exit fullscreen mode

The result of the code snippet is:

HTML rendered for  raw `blockquote` endraw  and  raw `cite` endraw  element

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.

Top comments (0)