Text-Level Semantics
On a website, you may want to highlight certain words or add a link to certain words. In this case, you can use tags with text-level semantics. If you want to just style those words, you can use CSS. By using tags with text-level semantics, you can add meanings to the elements.
Here are some examples.
<em>
This element represents a span of text with emphatic stress, like when you'd read the emphasized text in a different tone of voice. This element is typically rendered in italic form. The <i> tag also makes the text italic; however, it doesn't have a semantic meaning. If you want to add emphasis, you should use the <em> tag.
<strong>
This element represents a span of text with strong importance, seriousness, or urgency. The keywords under these elements are important for search engines, and the text in <strong> can impact search results. This element is typically rendered in bold form. The <b> tag also makes the text bold; however, it doesn't have semantic meanings. If you want to add strong importance to the text, you should use the <strong> tag.
<a>
This element is used to add hyperlinks. It is typically rendered with an underline with a different font color as default styling. We'll explain the <a> tag in detail later.
<small>
This element represents the so-called "fine print" or "small print", such as legal disclaimers and caveats. This element is typically rendered in small font sizes.
You can see how these elements are rendered in a web browser below. The important thing to know here is that text-level semantics don't only define how elements are rendered, but also convey their own meanings, so that web browsers or search engines can understand the text better.
There are also other tags with text-level semantics such as <code> used for inline code and <abbr> for abbreviation.