Lesson 7: Text

HTML has many tags to help you organize and format your text.

Headings and paragraphs#

We have six heading tags, from <h1> to <h6>. Screen readers use headings to build an outline of your page so users can jump to the sections they want.

Make sure your headings follow a logical order. Do not choose heading tags just because you want the text to be bigger or smaller. Always use CSS styles to change text sizes.

Use <p> tags to wrap your paragraphs. Always include the closing </p> tag.

<section id="about">
  <h2>What you will learn</h2>
  <p>
    Welcome to our workshop. This training will help you understand the basics
    of machine learning.
  </p>
</section>

Only create structural sections on your page when they make sense. Too many sections can make screen readers confusing to navigate.

Quotes and citations#

HTML has specific tags for quotes: <blockquote> for big blocks of quoted text, <q> for short inline quotes inside a sentence, and <cite> for naming the source of the quote.

<section id="feedback">
  <h2>What our students say</h2>
  <ul>
    <li>
      <blockquote>
        Two of the most experienced machines teaching a class? Sign me up!
      </blockquote>
      <p>
        --Blendan Smooth,<br />
        Former Margarita Maker, <br />
        Aspiring Assistant
      </p>
    </li>
  </ul>
</section>

The author’s name is not part of the quote itself, so it should go in a separate paragraph element after the blockquote.

The <br> tag inserts a simple line break. It is useful for signature blocks or mailing addresses. Do not use <br> to create empty space between paragraphs. Use CSS margins instead.

If the quote comes from a book, movie, or website, wrap that title in a <cite> tag. The <cite> element is meant for the name of the work, not the name of the author.

<p>
  --Blendan Smooth,<br />
  Former Margarita Maker, <br />
  <cite>Load Balancing Today</cite>
</p>

You can add a link to the source of the quote directly on the blockquote tag using the cite attribute.

<blockquote cite="https://loadbalancingtoday.com/mlw-workshop-review">
  Two of the most experienced machines teaching a class?
</blockquote>

The <q> tag is used for short inline quotes. The browser will automatically insert quotation marks around the text for you.

<p>
  HAL said,
  <q>I am sorry, but I am afraid I can't do that.</q>
</p>

Setting the page language helps screen readers pronounce words correctly and tells the browser which style of quotation marks to use.

HTML entities#

Because certain characters like < and > are reserved for HTML tags, you cannot write them directly in your text. If you do, the browser will think you are writing a tag and get confused.

To show these characters, you must use special codes called HTML entities:

• Use < for < (less than)
• Use > for > (greater than)
• Use & for & (ampersand)
• Use © for © (copyright symbol)

<blockquote>
  Learning with Hal &amp; Eve exceeded all of my wildest dreams.
</blockquote>

If you use UTF-8 encoding on your page, you can type emojis and foreign letters directly without using codes, but you must still escape reserved characters like < and &.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).