Lesson Overview

This lesson focuses on the HTML elements that allow you to format and add meaning to text in a page/application. For example, you might want to identifiy a portion of text as a date and time for screen readers and so that the date/time can be captured by a script or calendar application, or you might want to display a quote or poem on a page with specific spacing and line formatting. Most of these elements are semantic, so keep in mind that they'll also be useful in identifying the meaning of text to screen readers.

Prerequisites

It's important that you understand the syntax of HTML, and the minimal HTML code for valid web documents, the basics of HTML elements, and how to create valid HTML code.

Elements for Text-Level Semantics

Text-Level Semantics is just a fancy phrase for formatting text. These elements are in-line elements that give some kind of meaning or formatting to a bit of in-line text. For example, you might wish to style a word or phrase, you might wish to define a word or phrase as a quote or definition, or you might want a word or phrase to be a clickable hyperlink.

Here are the elements covered in this and later tutorials:

- the line break or new-line element, we learned about in the lesson on HTML Basics.
<a> - the anchor element, which creats a hyperlink or clickable link within the document/application. We briefly looked at the <a> element in the lesson on HTML Basics and we'll learn more about how it works in the lesson on Links.
and - the bold element makes its content appear in bold and STRONG is the semantic version of the bold element: it displays its content in bold by default but you can change this with CSS. The element adds importance to its content. We learned about both the and elements in the lesson on HTML Basics.
and - the italics element makes its content appear in italics and EM is the semantic version of the italics element: it displays its content in italics by default but you can change this with CSS. The element adds emphasis to its content. We learned about both the and elements in the lesson on HTML Basics.
and - these elements allow you to create supertext and subtext. Supertext and Subtext example:
See the Pen SuperText and SubText by Wendi Jollymore (@ProfWendi) on CodePen.
- this semantic element is used to highlight one or more pieces of text in a document that are relevant in some contents. A very common example is when you perform a search for a word or phrase on a page: if you go to your browser's menu and perform a search on this page for a specific word or phrase (e.g. "HTML", each occurrence of the word/phrase is highlighted so you can find them easily). Google's search engine also does this when you search for something - if you click one of the snippet results, you'll be taken to the page and the relevant bit of text will be highlighted. For example, I performed a search for "how does the scoville scale work" and I clicked the snippet at the top of the search results. This took me to a page with a passage of text highlighted (the colour of my highlight might be different from yours, this is determined by your browser settings):

A relevant passage of text is marked or highlighted

This highlighting or marking can be done using the element. Typically the mark element is applied with scripting, and you can change its default appearance using CSS. Here's an example, but the effects of marked text might appear differently in different browsers. If you're interested, you can go to the CSS tab for this example and see how you can change the appearance of marked text.
See the Pen The Element by Wendi Jollymore (@ProfWendi) on CodePen.
Another common use for the element is when you're displaying a passage of text or a quote on your page, and you want to highlight a certain word or phrase without using bold or italics (using bold or italics is confusing in this case because then your reader isn't sure if the bold/italics are yours or if they were part of the original passage/quote to begin with).
<abbr> - the semantic abbreviation element, which indicates that its content is an abbreviation for something. The global attribute title is used to define the full description or expansion of the abbreviation. The title value appears as a tooltip in most browsers when the user hovers over the term, and is read by a screen reader. Note that if you attach a title attribute to a specific <abbr> for a specific term, that title is not automatically attached to other <abbr> elements with the same term. Examples of how you might use the <abbr> element:
See the Pen The <abbr> Element by Wendi Jollymore (@ProfWendi) on CodePen.

Accessibility

WCAG Success Criteria 3.1.4: Abbreviations is a Level-AAA criteria, so you only need to meet this SC in specialized documents where a lot of abbreviations are used or where abbreviations are a vital part of the understanding of the content.

Abbreviations can be difficult for users with cognitive disabilities, particular those who have a hard time with reading, memory, or understanding context. They can also be difficult for low-vision users or screen reader users.
In professional documents, the standard is that the full expansion of an abbreviation be provided when the abbreviation is first used. This can be done via several techniques described in the success criteria for 3.1.4, including using the <abbr> element (H28).
The default styling of the <abbr> content varies from browser to browser, but this can be altered using CSS. If you're feeling adventurous, I left an example of this in the above CodePen.
<dfn> - the definition element, this is used to indicate that the content inside the element is being defined in its parent element. The global title element can be used optionally to contain the term being defined, in which case the <dfn> element's contents specify an alternate word for the term. You can also use the <dfn> element to link back to definitions that were made previously in the document (more on the details about how that part works in the lesson on Links). Here are some examples:
See the Pen The <dfn> Element by Wendi Jollymore (@ProfWendi) on CodePen.

Accessibility

WCAG Success Criteria 3.1.3: Unusual Words is a Level-AAA criteria, so you only need to meet this SC in specialized documents where a lot of unusual terminology is used or where unusual terminology is a vital part of the understanding of the content.

Unusual words can be difficult for users with cognitive disabilities, particular those who have a hard time with reading, memory, or understanding context. They can also be difficult for low-vision.
To assist users with unusual words, there are several techniques you can follow that present the defintion of the word to the user. Using the <dfn> element is technique (H54).
Note that by default, the content of <dfn> appears in italics, but you can change this with CSS (I left you an example inside the CSS tab, if you want to give it a look, but you don't have to).
<cite> - this element is used when you need to cite a source. For example, if you quote a paper or article, you can cite the source using the <cite> element. We'll talk more about this element in the lesson on Quotes and Code.
<q> - the quote element is used for quotes that are displayed inline (as opposed to <blockquote>). Both <q> and <blockquote> are discussed in the lesson on Quotes and Code
<code> and <samp> - these are both semantic elements that are used to display samples of code and resulting output. We'll learn more about these in the lesson on Quotes and Code.
<data> - this is an element that allows you to define extra machine-readable data (e.g. a device or script). We won't be using this element in this course but I will probably use it in an upcoming JavaScript lesson. It's helpful if you want to display something to the user in one way but want a data value to be used in computer code. For example, you might display a product name, but have the data element set to the actual product's code so that when the product is selected by the user, the code is what the "machine" reads. Here are a couple of basic examples of how you might use it:
See the Pen The <data> Element by Wendi Jollymore (@ProfWendi) on CodePen.
Note that both examples use the value attribute: this is mandatory. The value attribute must always contain the machine-readable value.
<time> - this semantic element represents a specific point in time or amount of time, and allows you to display a time to the user in one way and provide a machine-readable date/time using the datetime attribute. An example of use would be to provide the date and time for an event with a machine-readable value that can be understood by a browser, causing it to provide a means to add the event to the user's linked calendar.
- The datetime attribute can only accept a certain set of valid values. You can find a complete list in the MDN entry.
- The datetime element is useful when you need to pass a date/time using a standard format to a script/program but you want to display something more user-friendly to the user. Examples in the CodePen below.
See the Pen The <time> Element by Wendi Jollymore (@ProfWendi) on CodePen.
<var> - this element is used when displaying mathematical formulas. We'll cover it in detail in the lesson on Quotes and Code.
- this is the non-semantic inline version of the <div> element. It is used when you just need a generic container to hold some text content. It's used for CSS styling and scripting and we won't be using it much in these tutorials.