DEV Community

César
César

Posted on

HTML Text Formatting

#html #tutorial #beginners #webdev

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. This can also be a refresher for advanced developers.

You can find the code and guide on my GitHub html-guide-github & for this article's code and guide on html-text-formatting. 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.

<p>This paragraph has a bold <b>word</b> in it.</p>
Enter fullscreen mode Exit fullscreen mode

We use <strong> tags to make texts bold. It targets how important the text is so you have to emphasise its importance.

<p>
  This paragraph has a bold <strong>word</strong> in it because it is very
  important.
</p>
Enter fullscreen mode Exit fullscreen mode

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.

<p>This paragraph has an italicized <i>word</i>.</p>
Enter fullscreen mode Exit fullscreen mode

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

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

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.

<p>This paragraph has a <em>word</em> in italics.</p>
Enter fullscreen mode Exit fullscreen mode

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.

<p>This paragraph has an underlined <u>word</u> in it.</p>
Enter fullscreen mode Exit fullscreen mode

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.

<p>This paragraph has an underlined <ins>word</ins> in it.</p>
Enter fullscreen mode Exit fullscreen mode

5. Strikethrough

We use <s> tags to strike a text through. This tag stands for strikethrough.

<p>This paragraph has a crossed <s>word</s> in it.</p>
Enter fullscreen mode Exit fullscreen mode

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

<p>This paragraph has a crossed and deleted <del>content</del> in it.</p>
Enter fullscreen mode Exit fullscreen mode

The distinction between both of them, we use <s> 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.

<p>This paragraph has a highlighted <mark>word</mark> in it.</p>
Enter fullscreen mode Exit fullscreen mode

7. Small Texts

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

<p>This paragraph has a small <small>word</small> in it.</p>
Enter fullscreen mode Exit fullscreen mode

8. Subscript Texts

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

<p>We all know about CO<sub>2</sub>.</p>
Enter fullscreen mode Exit fullscreen mode

9. Superscript Texts

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

<p>What about 2<sup>3</sup>?</p>
Enter fullscreen mode Exit fullscreen mode

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.

<p><samp>Please enter a number</samp></p>
Enter fullscreen mode Exit fullscreen mode

11. Keyboard Keys

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

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy a text</p>
Enter fullscreen mode Exit fullscreen mode

12. Variables

We use <var> tags to enclose mathematical variables.

<p>look at this equation <var>x</var> = <var>y</var> * 30</p>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
kyawzawhtet profile image
Kyaw Zaw Htet •

Good Bro. Thanks.

Read next

respect17 profile image

How to Record an Outstanding Interview Video for Company X

Kudzai Murimi -

madsstoumann profile image

Any web developers or designers in Lanzarote? I’m up for a chat and a coffee next week (PDC or Arrecife) ☕️

Mads Stoumann -

rayechos profile image

Sass vs. SCSS: What's the Difference and Which One Should You Use?

Raymond ADEBISI -

random_ti profile image

7 Secret UI Libraries No One Talks About 🔥

Random -