HTML5 - Text markup elements
Tags: beginners, html, webdev
Published: 2023-09-14 15:01:59

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:

```html
<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:

![HTML rendered with `p` element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glnz6fyui8evjahgxeus.png)

## `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:

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

The result of this code is:

![HTML rendered with `small` element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9c12o5xk7epojm7b81o.png)

### `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:

```html
<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:

![HTML rendered with `strong` and `b` elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0geqphjc6yfxbspmu9hn.png)

### `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:

```html
<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:

![HTML rendered with `em` and `i` elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kwvzd3xv4xhpyioihpl.png)

### `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:

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

The result of the code snippet is:

![HTML rendered with `mark` element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhqmq425dzvg62yh65qm.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1lsbu6b7nbdy3petk98.png)

Some headings in another tree view:

![Headings in another tree view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rzi5s4tzeb2775ycwzw.png)

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:

```html
<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:

![HTML rendered for heading elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbjoeataofc7n0xt6ie1.png)

## 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](https://highlightjs.org).

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:

```html
<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:

![HTML rendered for `pre` and `code` elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twye1tpcoftb0shrydke.png)

## 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:

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

The result of the code snippet is:

![HTML rendered for `a` element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxpio6jtfk08gwrb1sz8.png)

## 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:

```html
<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:

![HTML rendered for `blockquote` and `cite` element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4h592woaj9e4gvokgr2w.png)

### 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.