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.

Only <li> tags (which is short for “list item”) can be nested directly inside the <ul> tag, which is used to indicate list elements or items: 

<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 <ul> elements are highlighted with markers of the same color as the text color.

Ordered list

The <ol> tag (which is short for “ordered list”) is used when order in which the elements are presented in this list is important. 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 and only item</li>
  <li>I am not me if I am not the second item</li>
  <li>Am I just third after all of these years? Always!</li>
</ol>

The sequence number is always placed in front of <ol> elements by default. <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 (which is short for “description list”). The description list is used to mark up questions and answers, terms and definitions, as well as categories and topics. 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 (which is short for “preformatted text”). It is used to display sample code, and it is also used to display ASCII Art. The browser will preserve and display all spaces, linebreaks and hyphens that are found inside the <pre> tag.

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

The tag<code> is used to present code snippets.

This tag can be used to mark up any text fragment that is recognized by a computer, including software code, markup, the file name, and so on. By default, browsers display text in the tag <code> using a monospaced font.

The <code>ul</code>tag, which is used to present an unordered list.

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

Quotes

Short quotes

The <q> tag (which is short for “quote”). It is designed to call out quotes 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 It is intended to indicate long quotes, 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>Intelligence is highly valued when power is held cheap.</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

Mnemonic characters

These are special strings that begin with an ampersand (&) and end with a semicolon (;). For example, the less than sign can be inserted into a page using the &lt; (less than) mnemonic name, where as the greater than sign is represented by the &gt; (greater than) mnemonic name:

Some of the characters in HTML are reserved, meaning that the browser will interpret them as HTML code. For example, any text after the less than sign (<) in the browser will be interpreted as a tag and will not be displayed on the page. To use special characters in the text of the page as ordinary characters, they must be replaced with mnemonic names.

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

Line break

The <br> tag (which is short for “break”). It is used to insert a line break in the text without creating a paragraph. For example, it is used to mark up poems or song lyrics.

Superscript and subscript

The <sup> and <sub> tags. The names are derived from the words “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. You can use it to describe the dates for a person and a machine at the same time. We have the attribute datetime to specify the date in the machine-readable format ISO 8601, and it looks like this:

<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 Saturday</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 tags <em> and <i>. The names are formed from the words “emphasis” and “italic”. They are intended to draw attention to the word or phrase. Visually, both tags look the same. They are used to italicize text.

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. Such text is usually is usually marked by changes in speech intonation:

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

Highlighting and assigning importance

The <strong> and <b> tags. The name <b> is derived from the word “bold”. Both tags display text in the same way. They make text 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. The names of these tags are taken from the words “delete” and “insert”. They are intended to describe changes in the document.

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. These are “clean” elements, and usually they work great as a wrapper for styling or grouping other elements. It is recommended that you use these tags in situations where you cannot find any other suitable semantic tags.

The <div> tag is typically used to group structural elements, such as multiple paragraphs, or as a subordinate container for creating page layouts.

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