In this chapter, we will focus on how to use semantic tags for text content in HTML. These tags allow the text to express specific meaning, improving both accessibility and SEO. Tags like <strong>, <em>, <blockquote>, and others help convey the importance or context of the text content.

<strong>: Important or Emphatic Text

The <strong> tag is used to highlight the importance of a text segment. When applying <strong>, the browser shows the text in bold by default, and screen readers often emphasize their reading. This tag is useful for highlighting critical information or warnings.

html

<em>: Emphasis or Accentuating

The <em> tag is used to apply emphasis to a word or phrase. The browser, by default, displays the content in italics, and screen readers often give it a special tone. <em> is ideal for emphasizing a word within a sentence without changing the overall context.

html

<blockquote>: Block Quotes

The <blockquote> tag is used for including extended quotes, generally of multiple paragraphs. HTML also allows attributing the source of the quote using the cite attribute, providing context about the origin of the quote.

html

<q>: Inline Quotes

The <q> tag is used for short quotes that are within a sentence or paragraph. Browsers usually display the content of <q> automatically within quotation marks.

html

<abbr>: Abbreviations

The <abbr> tag is used to indicate abbreviations or acronyms. It is possible to specify the full meaning of the abbreviation using the title attribute, which helps screen readers and improves accessibility.

html

<cite>: References or Sources

The <cite> tag is used to cite titles of works, such as books, articles, or movies. Using <cite> helps contextualize references in the text and improves understanding of the sources.

html

<code>: Code Snippets

The <code> tag is used to display code snippets or commands. It is often used alongside <pre> to maintain the original formatting, especially in multi-line examples.

html

<pre>: Preformatted Text

The <pre> tag maintains the formatting of the content as written, including spaces and line breaks. It is useful for displaying code examples or content where spacing is important.

html

<mark>: Marked Text

The <mark> tag is used to highlight text, usually with a yellow background color by default in browsers. This is useful for signaling key parts of a sentence or paragraph.

html

Complete Text Semantics Example

In this example, we combine various text semantic tags to show how to apply emphasis, quotes, and formatting in an HTML document.

html

Conclusion

In this chapter, we have explored how to apply semantics to text in HTML using tags like <strong>, <em>, <blockquote>, <abbr>, <cite>, <code>, <pre>, and <mark>. These tags help improve the accessibility and presentation of text content, enabling users and search engines to better understand the purpose and structure of the text.

In the next chapter, we will address semantics in forms and how to use tags and attributes to create accessible and clear forms for users.