HTML Text and Grouping

The text and grouping tags in HTML5 deal with the displaying of text, including the organisation of text into bulleted or numbered lists.

<h1>, <h2>, <h3>, <h4>, <h5> and <h6>

These tags all come in pairs, with an opening and closing tag, and are used to display text as headings. With the default styling in web browsers, the 'h1' tag is the largest of the headings, with the text size getting progressively smaller as you go down to the 'h6' tag. CSS can be used to override the default styles, and in fact two different heading tags can be assigned the same size.

<h1>This is the largest heading</h1>

Further Reading

<ul>, <ol> and <li>

The 'li' tag is used in conjunction with the 'ul' and 'ol' tags to create unordered and ordered lists respectively. An unordered list is a bulleted list, whereas an ordered list is one that uses numbers or letters to denote the order. Both types of list can be styled with CSS to specify the type of bullet or numbers/letters to be used.

Below is an example of a bulleted list in HTML and how it will look, followed by an example ordered list.

<ul>
   <li>First list item.</li>
   <li>Second list item.</li>
   <li>Third list item.</li>
</ul>
  • First list item.
  • Second list item.
  • Third list item.
<ol>
   <li>First list item.</li>
   <li>Second list item.</li>
   <li>Third list item.</li>
</ol>
  1. First list item.
  2. Second list item.
  3. Third list item.

Further Reading

<dl>, <dt> and <dd>

These tags are used in conjunction with one another to create a description list, with the open and closing 'dl' tags encompassing the list, the 'dt' tag is used to display a list term and the 'dd' tag is used for the description of the term. Below is an example of how the HTML of a description list should look like, together with how it is displayed.

<dl>
  <dt>List term 1</dt>
  <dd>Term 1 description.</dd>
  <dt>List term 2</dt>
  <dd>Term 2 description.</dd>
</dl>

List term 1
Term 1 description.
List term 2
Term 2 description.

Further Reading

<sub> and <sup>

The 'sub' and 'sup' tags deal with displaying text in subscript and superscript. Subscript is where text is displayed half a character lower than normal text, whereas superscript is text that appears half a character above normal text. In both cases the text is sometimes displayed using a small font than normal text. The following HTML and text shows how the tags can be used and what the resultant text will look like.

<p>This paragraph contains both <sub>subscript</sub> and <sup>superscript</sup> text.</p>

This paragraph contains both subscript and superscript text.

Further Reading

Other Text and Grouping Tags