Summary of “Text markup”

Lists

Unordered List

The <ul> tag (which is short for “unordered list”) is used when the order of the elements is not important. For example, to mark up the list of links in the menu, the benefits of the product, and the ingredients that make up the product.

An unordered list contains list items, each marked up with <li> (short for “list item”). Only <li> elements belong directly inside <ul>. For example:

<ul>
  <li>I am a list item, and I can be positioned in any place.</li>
  <li>And I also am a list item, and the order in which I am listed is also not important</li>
</ul>

By default, items in a <ul> list have bullet markers in the same color as the text.

Ordered list

The <ol> tag (short for “ordered list”) is used when the order of the list items matters. Ordered lists are suitable for marking up algorithms, instructions, recipes, competition results, and so on.

The items in an ordered list are also marked up with the <li> tag. Code example:

<ol>
  <li>I am the first item</li>
  <li>I would not be myself if I were not second</li>
  <li>Still third after all these years? Always!</li>
</ol>

By default, each item in an <ol> list is numbered. <ol> may have several attributes: start, reversed and type.

The start attribute changes the starting number in the numbered list of items. It can be negative.

The reversed attribute reverses the numbering direction. This attribute does not require a value.

You can use the type attribute to assign different types of markers: lowercase and uppercase Latin letters or Roman numerals.

Description list

The <dl> tag (short for “description list”) marks up questions and answers, terms and definitions, or other name-and-value groups. It is created using three tags:

  • <dl> indicates the description list itself;
  • <dt> (which is short for “description term”) indicates the term;
  • <dd> (which is short for “description definition”) indicates the description or definition.

The <dt> and <dd> tags are written inside <dl>. Each <dl> list can contain one or more terms and one or more descriptions for each term. Code example:

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dd>A language for formatting the presentation of HTML documents</dd>
</dl>

By default, the browser adds a small indent to the left of the definitions.

Preformatted text and code

The <pre> tag (short for “preformatted text”) is used to display sample code or ASCII art. The browser preserves the spaces and line breaks inside it.

<pre>Example
                of preformatted
        text     with preserved spaces
                     and line breaks</pre>

The <code> tag represents code snippets.

This tag can mark up fragments of computer code, including program code, markup and filenames. By default, browsers display text in the <code> tag using a monospaced font.

The <code>ul</code> tag is used to mark up an unordered list.

The <code> tag can be nested inside the <pre> tag.

Quotes

Short quotes

The <q> tag (short for “quote”) marks up a quotation within a sentence. The browser automatically frames the text inside the tag with quotation marks. Therefore, you don’t need to add quotation marks manually.

Source of quotations

The <cite> tag. In addition to providing the address of the quotation source, you can also use this tag to indicate the name of the work that the text is quoted from as well as the name of the author or organization to which the text can be attributed. The contents of the <cite> tag are formatted in italics in the browser.

<p>According to <cite>Charles Bukowski</cite>, <q>An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.</q></p>

The <cite> tag can be used independently, and it does not have to be used with a quote:

<p>Who is your favorite doctor (in the series <cite>Doctor Who</cite>)?</p>

Long quotes

The <blockquote> tag marks up block quotations, which may consist of several paragraphs. This tag highlights a quote not simply as a segment of text within a sentence. Rather, it formats the quote as a separate block of text with indents.

<blockquote>
  <p>Wits gain value when strength loses it.</p>
  <cite>Jason Statham</cite>
</blockquote>

An additional left and right margin is usually added to the content enclosed by the tag <blockquote> when displayed in the browser.

Marking up the text segments

HTML character references

Named character references begin with an ampersand (&) and end with a semicolon (;). For example, &lt; (less than) represents the less-than sign, whereas &gt; (greater than) represents the greater-than sign:

Some characters have a special meaning in HTML. For example, a less-than sign (<) can begin a tag. If you write <h1> directly in page text, the browser may treat it as markup rather than display it. To display characters that could be interpreted as markup, write them as character references.

&lt;ul&gt;
&lt;/ul&gt;

Line break

The <br> tag (short for “break”) inserts a line break without creating a new paragraph. For example, it is used to mark up poems or song lyrics.

Superscript and subscript

The names of the <sup> and <sub> tags come from “superscript” and “subscript”.

The <sup> tag displays the text as superscript, and the <sub> tag displays the text as subscript.

They are used to indicate units of measurement or to write simple formulas:

20m<sup>2</sup>
H<sub>2</sub>O
X<sup>3</sup>+X<sup>2</sup>=1

To create more complex formulas, these tags can be nested one inside the other.

Date and time

The <time> tag provides a date or time for both people and machines. The datetime attribute holds a machine-readable value, while the text inside the tag is what people see:

<time datetime="2016-11-18T09:54">09:54 AM</time>

<time datetime="2015-11-18">November 18, 2015</time>

<time datetime="2018-09-23">last Sunday</time>

<time datetime="2017-04-20">yesterday</time>

The browser will only display the contents of the tag; the contents of datetime will not be displayed.

Focusing attention

The names of the <em> and <i> tags come from “emphasis” and “italic”. Both display text in italics by default, but they have different meanings, as the examples below show.

The <em> tag is used to mark text that is specially emphasized and changes the meaning of the sentence.

I <em>simply adore</em> cold winter days!

The <i> tag is used to mark up text that is different from the surrounding text, but which is not considered to be more important. For example, you can use <i> to enclose names, terms, and foreign words. In addition, you can use this tag to enclose the thoughts of characters. When spoken aloud, such text is often distinguished by a change in tone:

He looked out the window and thought, <i>This simply cannot be true</i>!

Highlighting and assigning importance

The <strong> and <b> tags both display text in bold by default. The name <b> comes from “bold”.

The <strong> tag indicates that the marked text is important. It can be used to highlight warnings or parts of a document that the user should see before continuing with the rest of the text. In this case, enclosing part of the text with the <strong> tag should not change the meaning of the sentence.

<strong>Please note!</strong> There is a pitfall here. <strong>You may fall into the pit</strong> if you get too close to the edge.

The <b> tag is intended to highlight text in order to attract attention to it, but in a way that does not attribute any other significance to it. You should use it only in cases where other highlighting tags are not appropriate. A typical example is the way in which the introductory sentence of an article is highlighted.

You enter a small room. Your <b>sword</b> becomes brighter. A <b>rat</b> runs swiftly along the wall.

Description of changes

The <del> and <ins> tags describe changes in a document. Their names come from “delete” and “insert”.

The <del> tag is used to highlight text that has been deleted in the new version of the document. This text is displayed as being crossed-out in the browser.

The <ins> tag is used to highlight text that has been added in the new version of the document. This text is displayed as being underlined in the browser.

<ul>
  <li>Clean the dishwasher</li>
  <li><del datetime="2009-10-11T01:25-07:00">Take a walk</del></li>
  <li><del datetime="2009-10-10T23:38-07:00">Take a nap</del></li>
  <li><ins>Buy a printer</ins></li>
</ul>

Content grouping

The <div> and <span> tags are generic containers for grouping and styling content. Use them when none of the semantic elements fits the content you want to group.

The <div> tag is typically used to group structural elements, such as several paragraphs, or as a container in a page layout.

The <span> tag is used to group text elements, highlight individual words or phrases within paragraphs, list items, etc.

<article>
  <div class="highlight">
    <p>…</p>
    <p>…</p>
  </div>
  <p>Text in which <span>a phrase is highlighted</span></p>
</article>

Continue