HTML Text Formatting
Tags: html, tutorial, beginners, webdev
Published: 2021-04-24 11:30:11

## Text Formatting sub-guide

- Text Formatting
- Bold
- Italics
- Underline
- Strikethrough
- Highlighting Texts
- Small Texts
- Subscript Texts
- Superscript Texts
- Program Output
- Keyboard Keys
- Variables

This article targets beginners in web development. It is part of my previous post on [html-guide](https://dev.to/cesar_code/html-crash-course-1djc). This can also be a refresher for advanced developers.

You can find the code and guide on my GitHub [html-guide-github](https://github.com/cesarcode-init/html-guide#html-sub-guide) & for this article's code and guide on [html-text-formatting](https://github.com/cesarcode-init/html-text-formatting#highlighting-texts). Enjoy!

Using appropriate HTML tags comes with a lot of advantages. You can't skip these benefits because they are indispensable to you as a web developer and to others like visually impaired people.

### How does it relate to you?

Being a professional web developer requires being adept at what you are doing. It requires keeping your work at the most professional level you can. Professionalism does matter in this case. It is what companies seek in the first place. Trust me! It is what gets you hired, too.

### How is it important to visually impaired people?

Using appropriate semantic tags will help blind people listen to web pages. How does that happen? A software called _screen reader_ does that job. It reads your HTML structural semantics out loud to them and allows them to become aware of what is happening at that moment. It guides them, so you need to be careful how to employ HTML semantics. Misplacing them can sometimes lead to grave consequences.

### 1. Text Formatting

It is not uncommon to think about text formatting tags or exclusively semantic tags as a mere text presentation. Whilst this thought isn't correct, we should keep in mind how important it is to use appropriate HTML tags at the right time and in the right place to render web pages informative, hence, semantically relevant. We often use CSS to achieve great presentations of web pages.

### 2. Bold

We use `<b>` tags to make texts **bold**. This tag stands for `bold`. It targets how the text should _look_.

```html
<p>This paragraph has a bold <b>word</b> in it.</p>
```

We use `<strong>` tags to make texts **bold**. It targets how _important_ the text is so you have to _emphasise_ its importance.

```html
<p>
  This paragraph has a bold <strong>word</strong> in it because it is very
  important.
</p>
```

The distinction between `<b>` and `<strong>` is the level of importance each one contains. Semantically speaking, you should use the `<strong>` tag if you tend to add important text. But, if it's a matter of semi-styling, which infers it's only about making the text **bold**, then we use the `<b>` tag.

Note that experts recommend using `<strong>` over `<b>`. It does matter for visually impaired people. Keep that in mind!

### 3. Italics

We use `<i>` tags to make texts _italic_. This tag stands for `italics`.

```html
<p>This paragraph has an italicized <i>word</i>.</p>
```

We can use `<dfn>` tags to make texts _italics_. It stands for `definition element`. As the name suggests, it defines an element.

```html
<p>
  This paragraph has a <dfn>definition element</dfn> in it because it is
  defining a term.
</p>

<p><dfn>HTML</dfn> stands for HyperText Markup Language.</p>
```

The distinction between `<i>` and `<dfn>`is what kind of representation you are trying to associate with each one of them. We use `<dfn>` when you want to define a term whilst using `<i>` only makes a text _italic_ in the strict sense of the word. Both `<dfn>` and `<i>` make text _italic_ though.

We can use `<em>` to make texts _italic_, too. This tag stands for `emphasise`. You should use this tag if and only if you want to emphasise something.

```html
<p>This paragraph has a <em>word</em> in italics.</p>
```

Note that experts recommend using `<em>` over `<i>`. It does matter for visually impaired people. Keep that in mind, too!

### 4. Underline

We use `<u>` tags to underline a text. The `<u>` tag stands for `underline`.

```html
<p>This paragraph has an underlined <u>word</u> in it.</p>
```

We use `<ins>` tags to underline a specific text. This tag stands for `insert`. We use this tag only when it comes to `inserting` a new piece of information that did not exist before.

```html
<p>This paragraph has an underlined <ins>word</ins> in it.</p>
```

### 5. Strikethrough

We use `
` tags to ~~strike a text through~~. This tag stands for `strikethrough`.

```html
<p>This paragraph has a crossed 
word
 in it.</p>
```

We use `<del>` tags to ~~strike a text through~~, too. This tag stands for `delete`.

```html
<p>This paragraph has a crossed and deleted <del>content</del> in it.</p>
```

The distinction between both of them, we use `
` tags when we want to showcase that a piece of information that might be unnecessary. It doesn't mean it has been deleted permanently. However, using `<del>` tags implies that this piece of information has been literally deleted.

### 6. Highlighting Texts

We use `<mark>` tags to highlight a text. This tag highlights the text as it uses the yellow colour.

```html
<p>This paragraph has a highlighted <mark>word</mark> in it.</p>
```

### 7. Small Texts

We use `<small>` tags to make a text smaller than its usual size.

```html
<p>This paragraph has a small <small>word</small> in it.</p>
```

### 8. Subscript Texts

We use `<sub>` tags to make a text lower and smaller than the main text. This tag stands for `subscript`.

```html
<p>We all know about CO<sub>2</sub>.</p>
```

### 9. Superscript Texts

We use `<sup>` tags to make a text higher and smaller than the main text. This tag stands for `superscript`.

```html
<p>What about 2<sup>3</sup>?</p>
```

### 10. Program Output

We use `<samp>` tags to declare that the text is an output from a computer program. It stands for `sample`. The first you will notice is the font of the text enclosed between this tag changes into `monotype`.

```html
<p><samp>Please enter a number</samp></p>
```

### 11. Keyboard Keys

We use `<kbd>` tags to enclose `keys` that belong to a keyboard.

```html
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy a text</p>
```

### 12. Variables

We use `<var>` tags to enclose mathematical variables.

```html
<p>look at this equation <var>x</var> = <var>y</var> * 30</p>
```

Thank you for your attention. There is more to it. That is why updating regularly would be necessary.

For more, follow me on Instagram [@cesarcode.init](https://www.instagram.com/cesarcode.init/)