Other inline text elements

We've covered most, but definitely not all, the HTML elements. One area we haven't discussed is inline text elements. Contrary to popular belief, HTML was originally intended for sharing documents, and not cat videos. There are many elements that provide text semantics for documentation. There is a module covering links and the <a> element. The rest of these elements will be briefly discussed here.

Code examples and technical writing

When documenting code examples, use the <code> element. By default, the text content is displayed in monospace font. When including multiple lines of code, nest the <code> inside a <pre> element, which represents preformatted text.

<p>Welcome to Machine Learning Institute, where our machine learning training will help you get ready for the singularity,
  and maybe even be responsible for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to assume direct control. </p>

The <data> element links a given piece of content with a machine-readable translation; the element's value attribute provides the machine-readable translation of the content of the element. If the <data> content is time- or date-related, the <time> element, which represents a specific period in time must be used instead.

The <time> element can include the datetime attribute to provide human friendly time and dates in machine-readable format. Being machine-readable, the datetime attribute provides useful information for applications such as calendars and search engines.

When providing sample output from a program, use the <samp> element to enclose the text. The browser will generally render this sample or quoted output in monospaced font as well.

When providing instructions with keyboard interaction, the <kbd> element can be used. It represents textual user input from a keyboard, voice input, or any other text entry device.

The <var> element can be used for math expressions or programming variables. Most browsers present the text content in an italicized version of the surrounding font. If writing a lot of math, consider using MathML, the XML based Mathematical Markup Language for describing mathematical notation.

The power of two in pythagorean theorem used the <sup> superscript element. There is a similar <sub> subscript element that specifies inline text which should be displayed as subscript for solely typographical reasons. Superscripts and subscripts are numbers, figures, symbol, or other annotations that are smaller than the normal line of type and is set slightly above or below the line, respectively.

Use <del> to indicate text that has been removed, or "deleted". Optionally, include the cite set to the resource that explains the change and the datetime attribute with the date or date and time in machine-readable date and time format. The strikethrough element, <s>, can be used to indicate that content is no longer relevant, but not actually removed from the document.

The <ins> is the opposite of the <del> element; it is used to indicate text that has been added, or "inserted", also optionally including the cite or datetime attributes.

Definitions and language support

When including abbreviations or acronyms, always provide the full expanded version of the term in plain text on first use, as you introduce the shortened representation of the term between opening and closing <abbr> tags; unless the term is well-known to the reader, such as "HTML" and "CSS" in this series. Only on this first occurrence, when the abbreviation or acronym is being defined, is <abbr> needed. The title attribute is not necessary nor helpful.

When defining a term that is not an abbreviation or acronym, use the definition <dfn> element to identify the term being defined within its surrounding content.

If the term being defined is not in the same language as the surrounding text, make sure to include the lang attribute to identify the language.

When writing languages of different directions, HTML provides the <bdi> element for treating potentially bidirectional text in isolation from its surrounding text. This internationalization element is especially useful when content of unknown directionality is dynamically inserted into the page. The <bdo> element overrides the current directionality of text, rendering text in a different direction. The W3C provides an introduction to bidirectional algorithms.

Some character sets include small annotations placed above or to the right of characters to provide information on pronunciation. The <ruby> element is the container to use to contain these annotations that make written languages like Korean, Chinese and Japanese easier to read. Ruby can also be used for Hebrew, Arabic, and Vietnamese.

The ruby parenthesis (<rp>) was included in the spec to contain opening and closing parentheses for browsers that do not support display of <ruby>. When browsers support <ruby>, which all evergreen browsers do, the contents of any <rp> elements are not displayed. The ruby text element (<rt>) contains the actual annotations. Both of these are nested within the <ruby>.

Note that the parenthesis are not visible if your browser supports <ruby>.

Emphasizing text

There are several elements that can be used to emphasize text based on the semantic reason for emphasizing the text (rather than for presentational reasons, as that's a job for CSS).

• Use the <em> element to emphasize or stress a span of content. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis. This element has semantic meaning and can be used to inform auditory user agents like screen readers, Alexa, and Siri, to provide emphasis.
• Use the <mark> element to identify or highlight text that is somehow relevant, like highlighting (or "marking") the occurrence of search terms in search results. This enables marked content to be quickly identified without adding emphasis or importance.
• The <strong> element identifies text as having strong importance. Browsers usually render the content with a heavier font weight.
• The <cite> element, covered in text basics, is used to mark the titles of books, articles, or other creative work, or an abbreviated reference or citation metadata for such, like a book's ISBN number.

There are three elements that were temporarily deprecated, but have been added back into HTML. They should be used sparingly, if at all, as they provide little to no semantic value and CSS should always be used for styling over HTML elements.

<i>

The <i> elements can be used for technical terms, foreign words (again, with the lang attribute identifying the language), thoughts, or ship names. The element is used to differentiate inline content from the surrounding text for a specific reason, like idiomatic text, technical terms, and taxonomic designations. This element should not be used simply to italicize text.

MLW uses a <span> element for the weird text at the bottom of Toasty McToastface's workshop review. The <span> element provides for a generic inline container that has no semantics and doesn't represent anything. This would have also been an appropriate use of <i>.

The default style for the <i> element is to render the element in italic font. In this example, we set font-style: normal because the characters used are not available in italic.

<u>

The <u> element is for content that has non-textual annotation. For example, you may want to annotate knowingly misspelled words. By default, the content is underlined, but this can be controlled with CSS, such as by adding a red wavy underline to mimic word processor grammar error indicators.

<p>I always spell <u>licence</u> wrong</p>

<b>

The <b> element can be used to draw attention to text that is not otherwise important. This element doesn't convey any special semantic information and should only be used when none of the other elements in this section fit the purpose. No example is provided as I couldn't come up with a valid use case; that's how "last resort" this element is.

White space

When you want lined breaks, such as when writing poetry or a physical address, the self-closing line break element, <br>, is used to add a carriage-return.

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

To provide a separator, or thematic break, between sections of tangential content, such as between chapters in a book or between the 5,000 word monologue and the recipe your users are actually seeking, include an <hr> element. The HR stands for "horizontal rule". While browsers generally render a horizontal line, this element has semantic meaning. The default role is separator.

HTML also has an element that allows for breaking words. The self-closing <wbr> element provides a suggestion to the browser that if a word might overflow its container, this is a spot where the browser may optionally break the line. This is commonly used to break between words within long URLs. It does not add a hyphen.

For example, in the Hal biography there is text written out in byte code, with each byte separated by a space. Byte code doesn't have spaces. To enable a long string of byte code to break only between bytes if the line needs to wrap, we include the <wbr> element at each break opportunity:

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

The <br>, <hr>, and <wbr> elements are all void elements, meaning they can't have any child nodes – neither nested elements nor text. As none of these have any "insides" where content can be stored, they have no end tag.

Check your understanding

Test your knowledge of inline text.