HTML Text and Semantic Elements

This post covers something I meet for the first time or have forgotten about HTML text tags after reading HTML text fundamentals on MDN.

The Importance of Text Structure and Meaning

One of HTML’s main jobs is to give text structure and meaning (also known as semantics) so that a browser can display it correctly.

For structure, I mean not put 2 <h1> tags in a single page, while for meaning, I mean not use bold <block> to represent heading.

Give your html file the best structure, because:

  • Search engines indexing your page consider the contents of headings as important keywords for influencing the page’s search rankings. Without headings, your page will perform poorly in terms of SEO (Search Engine Optimization).
  • Severely visually impaired people often don’t read web pages; they listen to them instead. This is done with software called a screen reader. This software provides ways to get fast access to given text content. Among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. If headings are not available, they will be forced to listen to the whole document read out loud.

Semantics

We use right HTML elemnt to really talk to people.

Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of an everyday object is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean “stop”, and a green traffic light to mean “go”. Things can get tricky very quickly if the wrong semantics are applied (Do any countries use red to mean “go”? I hope not.)

Emphasis

In HTML we use the <em> (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice.

Browsers style this as italic by default, but you shouldn’t use this tag purely to get italic styling. To do that, you’d use a <span> element and some CSS, or perhaps an <i> element (see below).

In HTML we use the <strong> (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn’t use this tag purely to get bold styling. To do that, you’d use a <span> element and some CSS, or perhaps a <b> element (see below).

Italic, bold, underline

  • <i> is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought…
  • <b> is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence…
  • <u> is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling…

A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the Web, it’s best to underline only links. Use the <u> element when it’s semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web.

A example when using <u> with css to seperate it from <a>:

1
2
3
4
5
6
7
<p>
Someday I'll learn how to
<u style="text-decoration-line: underline; text-decoration-style: wavy;"
>spel</u
>
better.
</p>