3.2 HTML Text

When you write HTML code, you write text. But what is usually displayed in the browser is also text.

Although images, videos, and music have grown in popularity, websites still mostly comprise text content, such as this particular paragraph you are currently reading.

Paragraphs

Paragraphs <p> are the most used HTML element, as they act as the default block-level element and are quick to write.

<p>
  Rank grass, waist high, grows upon the plain of Phutra—the gorgeous flowering grass of the inner world, each particular blade of which is tipped with a tiny, five-pointed blossom—brilliant little stars of varying colors that twinkle in the green foliage to add still another charm to the weird, yet lovely, landscape.
</p>

Lists

Lists come in 3 variations:

• <ul> are unordered lists
• <ol> are ordered lists (whose items are automatically numbered)
• <dl> are definition lists

HTML lists require a specific structure:

• <ul> and <ol> must include and be direct parents of <li> which stands for list items.
• consequently, <li> elements can not be used on their own, and must be direct children of either a <ul> or a <ol>.

Unordered lists

They are the most commonly used types of lists. They are meant to group together a list of indiviudal items, in no particular order.

<p>My shopping list:</p>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Chocolate</li>
  <li>More chocolate</li>
</ul>

List items are displayed with bullet points.

Ordered lists

Ordered lists are used when the order of its items is relevant.

<ol>
  <li>Step one</li>
  <li>Step two</li>
  <li>????</li>
  <li>PROFIT!!!</li>
</ol>

Ordered lists are automatically numbered by the browser. You don’t need to include the numbers in your HTML.

Definition lists

Definition lists are for items that come in pairs. They must include pairs of <dt> definition terms and <dd> definition descriptions as direct children.

<dl>
  <dt>Web</dt>
  <dd>The part of the Internet that contains websites and webpages</dd>
  <dt>HTML</dt>
  <dd>A markup language for creating webpages</dd>
  <dt>CSS</dt>
  <dd>A technology to make HTML look better</dd>
</dl>

Definition lists are rarely used because their use cases are very specific, and only happen when the key changes every time. Tables with 2 columns are the more popular alternative.

Blockquotes

Blockquotes are used to identify a citation.

<p>Sir Tim Berners-Lee said:</p>
<blockquote>
  “The original idea of the web was that it should be a collaborative space where you can communicate through sharing information.”
</blockquote>

Headings

There are 6 levels of headings available, ranging from <h1> to <h6>, 1 being the most important one.

Headings are meant to be used along with paragraphs and lists, to draw a natural structure to your document. As headings carry more semantic weight, be careful to keep the balance between important and “normal” content.

Only using headings in a HTML document wouldn’t make sense: if everything feels important, nothing really is. You need to provide depth in your structure.