Text Formatting in HTML: Headings, Paragraphs, Lists, and Semantic Elements

Text Formatting – General Concepts

One of the main tasks of HTML is to provide structure and meaning to text (also known as semantics), so that a browser can display it correctly. I will explain how HTML can be used to structure a text page by adding headings and paragraphs, emphasizing words, creating lists, and much more.

It’s time to explore the individual elements that allow us to format the content of an HTML document. As previously mentioned, HTML is a markup language, which means it uses tags to mark (identify) the elements within a document.

Now we need to see which tag can be used to achieve a specific result and what other options exist to obtain a similar outcome. In HTML, CSS, JavaScript, etc., the same thing can often be done in different ways. It’s important to choose the best method—the most recommended method—to reach the desired result. In the following example, we’ll review some of the things learned earlier, as well as a few new concepts:

🔧 Example: HTML Tags

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<!--Unformatted text-->
  What am I?
  <br>
  I am unformatted text!
  <br>
  And yet I seem to look like a paragraph!?
  <br>
  That’s true. But not for all browsers!
  <br>
  Some browsers won’t know what I am and won’t display me at all!
  <hr><br> 
  
<!-- <pre> tag --> 
  <pre>
    What 
          am 
                  I now?
                  
      now?
But 
 
  Whatever I am, I look different than above, because now I’m surrounded by
    the "pre" tag (preformatted text), and this tag is most often used to display code snippets,
            using a monospace font (usually Courier).
  Preformatted     text     will     be   displayed   in           the browser
          exactly as     it     is     written, preserving
              spaces
                  and line breaks.
  </pre>
  <hr>
  
  <!-- <h4> tag -->
  <h4>But what am I now?</h4>
  <hr>
  
  <!-- <h1> tag -->
  <h1>What about now?</h1>
  <hr>
  
  <!-- <h6> tag -->
  <h6>What about now?</h6>
  <hr>
  
  Before CSS became very popular, programmers used to choose the heading tag based on the text size they needed. If they needed large text, they chose the H1 tag. If they needed smaller text, they chose H5 or H6. This was completely wrong!
  The strategy behind using heading tags (H1–H6) is entirely different, and we’ll discuss this later.
  <br>
  <br>
  With CSS, an H6 tag can be styled to look like an H1 tag. In other words, a set of CSS properties can be used to achieve the desired effect.
  <br>
  <br>
  However, what we see now in the browser—the way these lines of text appear—is due to the default rendering mode used by each browser.
  <br>
  <br>
  Every web browser has its own stylesheet and will display page elements according to the instructions in that stylesheet.
  <br>
  <br>
  With CSS, the styles applied by browsers can be overridden (modified), but in the absence of a custom stylesheet to do so, the browser will use its own default stylesheet.
  <br>
  <br>
  <hr>

<!-- <p>, <i>/<em>, <b>/<strong> tags -->
  <p>Now I’m a paragraph. <i>But</i> <b>I’m not alone!</b> There’s someone inside me :))</p>
  <br>
  I have the "i" and "b" tags alongside me. These are nested inside me :)).
  These two tags were deprecated in HTML 4 because they were considered presentational (design-related).
  <br>
  <br>
  With HTML5, the "i" and "b" tags are no longer deprecated—in fact, they are considered semantic (meaningful).
  <br>
  <br>
  We also have the <em>"em" (emphasis)</em> tag and the <strong>"strong" (important)</strong> tag, which do the same thing but carry different meanings.
  <br>
  <br>
  Regarding accessibility, there is an important difference. Screen readers will ignore the "i" and "b" tags, but they will not ignore the "em" and "strong" tags, and thus will convey to users with certain disabilities (e.g., blindness) that a particular text segment is italicized or important in context.
  <br>
  <br>
  A screen reader is a form of assistive technology (AT), essential for people who are blind, as well as for those with impaired vision, illiteracy, or learning disabilities.
  <br>
  <br>
  Screen readers are software applications that attempt to convey what’s on screen to users through non-visual means, such as text-to-speech, sound icons, or a Braille device.
  <br>
  <br>
  They do this by applying a wide range of techniques, including interacting with dedicated accessibility APIs, using various operating system functions (such as inter-process communication and querying user interface properties).
</body>
</html>

  html {
    font-size: 1.2rem;
    height: 200rem;
  }

Why Do We Need Semantics?

Semantics are all around us — we rely on past experiences, for example, we know that a red traffic light means “stop.” Things can get complicated very quickly if the wrong semantics are applied. Is there any country where a red traffic light means something else? I hope not.

Similarly, we need to make sure we use the correct elements, giving our content the appropriate meaning, function, or appearance. In this sense, the <h1> element is also a semantic element, which gives the text it wraps the role (or meaning) of a “top-level heading on the page.”

<h1>I am the most important heading on the page</h1>

By default, the browser will give it a large font size so it looks like a heading (although you could style it however you want using CSS). More importantly, its semantic value will be used in various ways — for example, by search engines and screen readers. On the other hand, you can make any element look like a top-level heading:

<span style="font-size: 32px; margin: 21px 0; display: block;">Is this an H1 heading???</span>

Above, we have a <span> element. It has no semantics. You use it to wrap content when you want to apply CSS (or manipulate it with JavaScript), without giving it any additional meaning (you’ll learn more about this later in the course). We applied some CSS properties to make it look like a top-level heading, but since it has no semantic value, it won’t receive any of the benefits mentioned above. It’s a good idea to use the appropriate HTML element for each specific situation.

🔧 Example: H1 Title and Span Element Styled Like an H1

  <h1>I am an H1 element.</h1>
  <span>I am a span element.</span>

span {
  font-size: 32px;
  font-weight: bold;
  margin: 21px 0;
  display: block;
}

Next, we’ll discuss in more detail the most important tags used in HTML.

Headings and Paragraphs

Most structured text consists of headings and paragraphs. To better visualize this, think of a newspaper article. It has a title, followed by the actual article made up of subheadings and a whole series of paragraphs.

Well-structured content makes the reading experience easier and more enjoyable.

In HTML, each paragraph is wrapped in a <p> element, like this:

<p>I am a paragraph.</p>

Each heading is wrapped in a specific heading (h1–h6) element, like this:

<h1>I am the main heading.</h1>
<h2>I am a subheading.</h2>

Headings (H1–H6)

This group of elements plays a crucial role in establishing the hierarchy within an HTML document, as well as in optimizing (on-page) content for search engines.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

🔧 Example: H1–H6 Headings

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Heading Example</title>
</head>
<body>
  <h1>Heading 1</h1>
    <h2>Heading 2</h2>
      <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
          <h6>Heading 6</h6>
</body>
</html>

The H1 tag should be used for the main title (preferably only once per page), followed by the H2 tag, then the less important H3 tag, and so on. Do not use these tags just to make text appear larger and bolder. That’s not their purpose!

The title formatted with the H1 tag should contain the most relevant target keywords for the page’s content. The H2 tag acts as a subtitle for H1 and should contain similar keywords. The H3 tag is a subtitle for H2, and so on.

These tags are important because they provide search engines with essential information about the page’s content—or at least, that’s how it should be. For search engines, these tags are among the most important and will be read with priority as long as they’re not used excessively or chaotically. Avoid using multiple H1 headings on the same page.

The importance of these tags should not be exploited by inserting random text, using meaningless keyword strings, or formatting all headings and subheadings in a document with the H1 tag just because it’s highly relevant for search engines. Such practices will lead to penalties from search engines.

In conclusion, headings and subheadings should contain both short-tail and long-tail keywords that are highly relevant to the page content as well as the entire site, and they should be written in grammatically correct language.

Let’s imagine we’re writing an article that explains the correct use of heading tags. This article could have the following headings:

(H1) The Importance of H1, H2, H3 Tags for SEO
(H2) Why Are H1, H2, and H3 Tags Important for SEO?
  (H3) 5 Tips for Proper Use of H1, H2, H3 Tags
(H2) Incorrect Use of H1, H2, and H3 Tags
  (H3) 5 Common Mistakes in Using H1, H2, H3 Tags

☞ As you can see, in each of the headings above, the phrase H1, H2, H3 tags is repeated frequently in different contexts. This was done to clearly demonstrate the correct and effective use of keywords in headings and subheadings—important and highly relevant words for the page.

The Paragraph Tag (`p`)

This tag is probably one of the most commonly used. Paragraphs are usually represented by blocks of text separated from adjacent blocks by empty space or indentation. Paragraphs can also “host” other types of content such as images, forms, etc.

Line Break (`br`)

This element creates a line break in the text. It can be useful when writing a poem or an address where line division is important.

However, using this element should be avoided because it raises accessibility issues. The same result can be achieved using CSS properties.

In the editor, try formatting the text correctly by adding headings, paragraphs, and line breaks.

🔧 Format the text below as correctly as possible:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Content Formatting</title>
  <style>
  
  </style>
</head>

<body>
<p>The task is to insert the most appropriate tags according to the theoretical instructions.</p> 

<p>Tips:</p>

<p>1. HTML5 allows the use of multiple H1 tags on the same page, but although there is no official recommendation regarding the exact number of H1 tags in a document, it’s best to limit yourself to a single H1 tag per page.</p>

<p>2. Do not use tags chaotically. Always follow a logical order: H1–H2–H3 / H2–H3 / H2–H3–H4</p>

<p>Paragraphs.</p>
<p>After adding heading tags, you’ll notice that the page starts to look like it’s fully formatted—even though it’s not.</p> 

<p>This happens because HTML5 is much more “forgiving” than other markup languages, so the remaining text will be automatically formatted by the browser.</p>

<p>But we shouldn’t rely on this and should format the text as we want to avoid unwanted effects.</p>

<p>Spacing between lines of text.</p>
<p>Notice the vertical space between headings and paragraphs. This happens because all HTML elements have a margin above and below them.</p> 
<p>These margins collapse, which means that if an H1 tag has a bottom margin of 20px and below it there’s another element with a top margin of 20px, only one of the margins will be applied.</p>
<p>Thus, the distance between the two elements won’t be 40px but 20px.
Some developers do something like: <p>&nbsp;</p> to add another 20px of space between elements for aesthetic reasons. This is absolutely wrong!</p>

<p>* Paragraphs don’t always require a closing tag, according to current specifications, under certain conditions. 
In practice, it’s best to ensure that all elements are properly closed.</p>
<hr>

<strong>Format the text below as correctly as possible:</strong>
<hr>
HTML essential training  
Page content formatting  
In this series of exercises, we’ll explore how to use HTML elements to format the basic content of a page.  
Adding headings  
Headings define the structure of the page and control the content hierarchy. You can use tags from H1 to H6, where H1 has the highest importance, gradually decreasing toward H6. Although there are various theories about the exact strategy to use when choosing headings, what truly matters is using them intelligently to accurately reflect the importance of the page content. It’s also important to be consistent in how you use headings across the entire site and to have a well-defined plan and strategy from the start.  
Using paragraphs  
This tag (<p>) is one of the most basic formatting tags and you’ll use it very frequently. It indicates a block of text and should be used repeatedly for each individual paragraph.  
Line breaks  
Occasionally, you’ll need to create a new line within the same paragraph. To do this, use the line break tag (<br>). This tag is inline and does not require a closing tag.  
Let’s say you’ve added an address at the end of a document and want to ensure the address text appears on separate lines within the same paragraph.  
Romania  
Iasi  
Str. Balcescu no.2  
Tel: xxx xxx xxx
</body>
</html>

The Tags (i vs em) and (b vs strong)

By default, the visual result provided by these pairs of tags is the same. However, their semantic meaning is different—each tag has a distinct purpose and is intended for use in a specific context.

For example, the "em" tag is used when we want to emphasize a portion of text, while the "i" tag is used to highlight a word with fictional character, a definition, a name, or a part of the text that reflects a change in tone/mood.

"em" could be: Do it faster!
"i" could be: We had to do something.

Similarly, the "strong" tag is used to format a portion of text that is very important, while the "b" tag is used simply to draw attention to a word, to highlight it.

"strong": The knives are very sharp. Use the knife carefully!
"b": The store also had quality knives.

Character Entities

Sometimes we need to use characters or symbols that aren’t directly available from the keyboard, or characters that are reserved in HTML and shouldn’t be used normally. Using these characters could even cause errors and validation issues in the document.

To display these special characters as text, we need to use character entities (Named Character Entities).

An HTML entity is a string that starts with an ampersand (&) and ends with a semicolon (;). Entities are commonly used to display reserved characters (which would otherwise be interpreted as HTML) and invisible characters (such as non-breaking spaces).

Character entities can also be used in place of characters that are difficult to type.

Some characters have easy-to-remember entities (© — ©), but for those that are harder to remember, reference tables can be used:

Reference Table

Controlling Whitespace

No matter how much space you add between different elements in an HTML page, browsers will only consider the first space and completely ignore the rest.

To add more space, you can occasionally use the (Non-Breaking Space) entity  .

However, the   entity should not be used to add extra spacing. For that purpose, CSS should be used. The   entity is meant to prevent text from breaking where we don’t want it to.

Creating Lists

Lists are extremely useful for organizing and logically grouping content. In HTML, we can create three different types of lists:

unordered lists,
ordered lists,
description lists (definition lists).

Each type of list has a parent tag that wraps the list, followed by tags that create the actual list, wrapping each list item individually.

🔧 Creating Lists – Unordered Lists

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Creating Lists – Unordered Lists</title>
</head>
<body>
  <h1>HTML – Essential Training</h1>
  <h2>Creating Lists</h2>
  <p>Let’s see how lists can be created in HTML.</p>
  <h3>Unordered Lists</h3>

  <ul><!--parent element-->
    <li>seven</li><!--child elements-->
    <li>two</li><!--child elements-->
    <li>three</li>
    <li>eight</li>
    <li>five</li>
    <li>one</li>
      <ul>
        <li>1.1</li>
        <li>1.2</li>
        <li>1.3</li>
          <ul>
            <li>1.3.1</li>
            <li>1.3.2</li>
            <li>1.3.2</li>
          </ul>
      </ul>
  </ul>  
</body>
</html>

🔧 Creating Lists – Ordered Lists

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Creating Lists – Ordered Lists</title>
</head>
<body>
  <h1>HTML – Essential Training</h1>
  <h2>Creating Lists</h2>
  <p>Let’s see how lists can be created in HTML.</p>
  <h3>Ordered Lists</h3>
  <p>When the order of items in the list matters, we create an ordered list.</p>
  
<!--start="6" reversed-->

  <ol start="6" reversed><!--parent element – reversed order-->
    <li>one</li><!--child elements-->
    <li>two</li><!--child elements-->
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
      <ol type="I">
        <li>1.1</li>
        <li>1.2</li>
        <li>1.3</li>
          <ol type="A">
            <li>1.3.1</li>
            <li>1.3.2</li>
            <li>1.3.2</li>
          </ol>
      </ol>
  </ol>  
</body>
</html>

🔧 Creating Lists – Definition Lists

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Creating Lists – Definition Lists</title>
</head>
<body>
  <h1>HTML – Essential Training</h1>
  <h2>Creating Lists</h2>
  <p>Let’s see how lists can be created in HTML.</p>
  <h3>Definition Lists</h3>
  <p>Definition lists have an extremely semantic and flexible syntax, unfortunately underused and underappreciated by many authors.</p>
  <hr>

  <h4>Basic List Structure</h4>
    <dl><!--definition list-->
      <dt>Unordered Lists</dt><!--definition terms-->
        <dd>Group content without a specific order.</dd><!--definition descriptions-->
      <dt>Ordered Lists</dt>
        <dd>Group content in a specific order.</dd>
      <dt>Definition Lists</dt>
        <dd>Group terms and their corresponding descriptions.</dd>
    </dl>
    
    <hr>
    
    <h4>List with Multiple Terms</h4>
    <dl>
      <dt>DL</dt>
      <dt>Descriptive Lists</dt>
      <dt>Definition Lists</dt>
       <dd>
         <p>This type of list groups content into terms and their descriptions. It is commonly used for FAQ sections, dictionaries, etc.</p>

         <div>This type of list was also frequently used to mark up dialogue. This practice is discouraged in HTML5, but no semantic alternative has been provided, so it continues to be used despite specification recommendations.</div>
       </dd>
    </dl>
    
    <hr>
    
    <h4>List with Multiple Descriptions</h4>
    <dl>
      <dt>HTML Course</dt>
        <dd>HTML essential training</dd>
      <dt>Author</dt>
        <dd>Unknown</dd>
      <dt>Publisher</dt>
        <dd>John Doe</dd>
      <dt>Technical Reviewers</dt>
        <dd>Vasilica</dd>
        <dd>Maricica</dd>
        <dd>Gheorghe</dd>
    </dl>
    
</body>
</html>

Advanced Text Formatting

There are many other elements in HTML for formatting text. The elements described in this article are less commonly known, but still useful to be aware of (and this is by no means a complete list of HTML elements).

Quoting

Blockquotes

If a portion of content is quoted from elsewhere, it should be wrapped in a <blockquote> element to indicate this, and you should also include a URL pointing to the source of the quote using a cite attribute.

<blockquote cite="http://example.com">
  <p>The <strong>HTML <code><blockquote></code></strong> element (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

And the result looks like this:

The HTML <blockquote> element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

The browser’s default style makes this quote appear as an indented paragraph. However, there are also some additional styles added by us in the CSS file of this page.

Inline Quotes – <q>

Inline quotes work in the same way, except they use the <q> element.

<p>The <strong>quote</strong> element — <code><q></code> — is <q cite="http://example.com">used for short quotes that don’t require line breaks.</q></p>

Here’s the result:

The quote element — <q> — is used for short quotes that don’t require line breaks.

Abbreviations

Another fairly common element you’ll encounter on some web pages is <abbr> — it’s used to wrap an abbreviation or acronym and provide the full expansion of the term (included in a title attribute). Let’s look at an example:

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure web documents.</p>

The result can be seen below:

We use HTML to structure web documents.

The full expansion of the term appears when the mouse pointer hovers over it (like a tooltip).

Marking Contact Information

HTML has an element for marking contact details — <address>.

<address>
  <p>
    Vasile V. Vasile<br>
    Vaslui<br>
    Str. Unirii<br>
    RO
  </p>
  <ul>
    <li>Tel: 01234 567 890</li>
    <li>E-mail: eu@mail.ro</li>
  </ul>
</address>

The result can be seen below:

Vasile V. Vasile
Vaslui
Str. Unirii
RO

Tel: 01234 567 890
E-mail: eu@mail.ro

Superscript and Subscript

Occasionally, you’ll need to use superscript and subscript when marking elements such as dates, chemical formulas, and mathematical equations, so they carry the correct meaning. The <sup> and <sub> elements handle this:

The chemical formula of caffeine is C₈H₁₀N₄O₂.

<p>The chemical formula of caffeine is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>

If x² is 9, then x equals 3 or -3.

<p>If x<sup>2</sup> is 9, then x equals 3 or -3.</p>

Representing Computer Code

There are several elements available for marking up computer code using HTML:

<code>: for marking generic fragments of computer code;
<pre>: for preserving whitespace, which would otherwise be ignored by browsers;
<var>: for specifically marking variable names;
<kbd>: for marking keys and other types of keyboard input;
<samp>: for marking a sample output from a computer program.

Marking Time and Date

With the HTML <time> element, you can mark dates and times in a format that is machine-readable. For example:

<time datetime="2022-01-20">January 20, 2022</time>

Why is this useful? Well, there are many different ways people write dates. The date above could also be written as:

January 20, 2022
20 January 2022
20/01/22
01/20/22

These different formats are not easily recognized by computers. What if you want to automatically extract all event dates from a page and add them to a calendar? The <time> element lets you attach a date/time that is unambiguous and machine-readable.

The basic example above provides only a simple date, but many other options are possible, such as:

<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>

<!-- Date and time -->
<time datetime="2022-01-20T19:30">7:30 PM, January 20, 2022</time>

<!-- Date and time with timezone -->
<time datetime="2022-01-20T19:30+01:00">7:30 PM, January 20, 2022 is 8:30 PM in France</time>

<!-- Referencing a specific week -->
<time datetime="2022-W04">The fourth week of 2022</time>

🧠 Quiz – HTML: Text Formatting and Entities

Creating Links ➔