Lesson 18: Inline Text

HTML was originally made for sharing documents, so it has many inline tags to format individual words and phrases inside your paragraphs.

Code and variables#

Use the <code> tag for code snippets. By default, browsers display code in a monospace font. If you are writing a multi-line code block, wrap it in a <pre> tag to keep your formatting and spacing.

<p>
  To print a message to the screen, use the
  <code>console.log()</code> command.
</p>

The <data> tag links a piece of text to a machine-readable value. The computer can read this value behind the scenes, even if the text shown to users is different.

If your data is a date or time, use the <time> tag instead. You can add the datetime attribute to write the date in a standard format that search engines and calendar tools can read easily.

The <samp> tag is for showing computer output, and <kbd> represents keys on a keyboard. The <var> tag is for writing math variables or programming variable names, while <sup> and <sub> are for superscript and subscript text.

To show edits, use <del> to indicate deleted text and <ins> to show inserted text. The <s> tag is for text that is no longer accurate but should not be completely removed.

Definitions and languages#

When using abbreviations, write out the full term on first use, then wrap the acronym in an <abbr> tag.

To define a new term, wrap the word in a <dfn> tag. If the term is in a foreign language, add a lang attribute to identify the language.

For text that runs in different directions (like right-to-left Hebrew or Arabic next to left-to-right English), we have <bdi> and <bdo>. To show pronunciation keys above East Asian characters, we use <ruby>, <rt>, and <rp> tags.

Emphasizing text#

Regular text styling is done with CSS. But HTML has tags to emphasize text based on their meaning.

• <em> adds stress emphasis (which screen readers read with voice volume changes).
• <strong> is for important text.
• <mark> highlights words (like matching search terms).
• <cite> is for titles of books or websites.

We also have <i>, <u>, and <b> tags. We should only use these as a last resort since they just change the look of the text without adding any meaning. CSS is always better for design adjustments.

<i>#

The <i> element can be used for technical terms, foreign words, or thoughts. It separates text from the surrounding layout for specific reasons. Do not use it just to make text italic.

<u>#

The <u> element is for spelling errors or non-textual annotations. For example, you can use it to highlight misspelled words.

<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. It has no semantic meaning.

Whitespace#

Use <br> to insert a line break. This is useful for writing poetry or formatting physical addresses.

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

Use <hr> to insert a thematic break or separator between sections.

Use <wbr> to suggest where the browser can optionally break a long word or URL to prevent horizontal overflow.

<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 />01100102</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 do not have end tags.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).