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.

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  tag also makes the text italic; however, it doesn't have a semantic meaning. If you want to add emphasis, you should use the  tag.

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  can impact search results. This element is typically rendered in bold form. The  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  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.

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.