One of the principal purposes of HTML is to give structure and meaning to text content. This way, browsers know how to display text as intended.

We can format text the same as we do when using word processing software like Microsoft Word or Google Docs.

We can add headings and paragraphs, emphasize words, highlight and underline text create lists, and much more.

Much of the text formatting you will learn in this section should be done in the modern-day with CSS. Nevertheless, it is useful to know it exists and understand why it is still valid HTML.

SECTIONS

• Headings and Paragraphs
• Structural Hierarchy
• Formatting for style
• Emphasis & Importance
• Underline
• Highlighting
• Sub-Script & Super-Script
• Strikethrough
• Quotations
• Computer Code
• Summary
• Resources

HEADING & PARAGRAPHS

The most basic form of structure that you will encounter in written documents comes from headings and paragraphs. This structure is familiar to all of us, and you will find it in newspapers, administrative forms, and magazines.

HTML paragraphs are created with the <p< element:

Headings are marked up with one of six levels of heading element:

Each heading represents a different level of content in the document.

The <h1> represents the main heading from the page, <h2> elements typically represent subheadings, and <h3> represents tertiary headings, and so on.

We usually only use <h1> to <h4> headings. Using <h5> and <h6> is much rarer.

In fact you will see that the default text size in the browser for <h5> and <h6> elements is actually smaller than the default font size for <p> elements.

STRUCTURAL HIERARCHY

In a book, for example, the <h1> element would represent the title of work, the <h2> elements would represent chapter titles, and the <h3> elements would represent sub-sections within chapters.

On your web pages, you should only use one <h1> element per page. The <h1> is the top-level heading, and all others sit below it in the hierarchy.

Of the six heading levels available, you should use no more than three per page unless necessary.

Documents with a deep heading hierarchy are difficult to navigate. It is better to spread content over multiple pages if possible.

Users looking at a web page tend to scan text content while finding the content relevant to them. Often users will initially read only the headings.

Headings are also considered keywords by modern search engines. Your page's SEO will suffer without proper use of headings.

Visually impaired people that use screen readers listen to web pages rather than read them. Screen readers can outline a document by reading out the headings only.

This feature of screen readers allows users to find the required information quickly. If headings are absent from the page, the user might have to listen to the whole document, which is poor accessibility.

FORMATTING FOR STYLE

We can also use HTML elements that will stylistically format text:

EMPHASIS & IMPORTANCE

Emphasizing words can alter the meaning of a sentence, and we often want to mark certain words as significant or different in some way.

HTML gives us various elements that allow us to mark up text with such effects.

Emphasis

When speaking, we stress certain words when we want to emphasize them in some way. In written language, we stress words by italicizing them.

To do this in HTML we use the <em> element. Interestingly, screen readers recognize the <em> element, and words marked up by it are read in a different tone.

In the browser, words marked up with the <em> tag are italicized.

Strong

Important words are also stressed when spoken and written in bold.

The HTML <strong> element is used for this, and again, it is recognized by screen readers and read in a different tone.

In the browser, the <strong> tag gives words in bold styling.

It is much better practice to use CSS to style both bold and italic text. We can do this with font-based CSS properties:

You can also nest strong and emphased text inside each other:

UNDERLINE

To underline text in HTML we can use the <u> element which is non-semantic.

The <u> element, much like <em> and <strong>, was required in an early period where CSS was poorly supported online. Originally, it was the only way text could be underlined.

You can still use the <u> element if and when it is semantically appropriate to do so. It is perfectly valid HTML.

But again, as with all of the text formatting that we are seeing, it is best to use CSS to do this job:

Do be careful when underlining text as users associate it with hyperlinks.

HIGHLIGHTING

It is also possible to highlight text in HTML using the semantic <mark> tag.

<mark> represents text which is highlighted for notation or reference. It acts in the same way as a luminous highlighter pen does on paper.

SUBSCRIPT & SUPERSCRIPT TEXT

Superscript text is slightly smaller and elevated from the baseline, whereas subscript text is set below the baseline.

We use the <sup> element to create superscript text, and the <sub> element creates subscript text. Both of these elements have opening and closing tags.

This paragraph has some ^superscript text given by the <sup> element

This paragraph has some _subscript text given by the <sub> element.

STRIKETHROUGH

Striking through the text: The <del> element strikes through the text marking the part as deleted. It also has an opening and a closing tag.

QUOTATIONS

If you want to quote some text from a source like a book, or another website, you can use the HTML <blockquote> tag.

Blockquotes have indented left and right margins, along with some extra space above and below.

Blockquotes can include a cite attribute that denotes the information source quoted. The cite attribute points to information explaining the context or the reference for the quote.

You can also use a <cite> tag inside of a blockquote. The cite tag can include the title and author of a work. It can also contain a URL to a source.

For short inline quotations, you can use the HTML <q> tag. These will display in the browser with quotation marks surrounding the text. Here's an example:

COMPUTER CODE

The inline <code> element is used for displaying text content styled with the appearance of written computer code.

The <code> element's purpose is to show that the enclosed text is a short fragment of code. Although, no rule says that this has to be the case.

Text wrapped by the <code> element is displayed using the browser's default monospace font.

SUMMARY

We can use HTML to format text in several ways. We can structure and order our text with hierarchical headings and paragraphs, and we can emphasize words by making them bold, underlined, or italic. We can highlight text as if with a luminous highlighter pen.

We can also format our text in HTML by creating lists, which we will come to in a later section.

Again, it is better to do much of the text formatting we covered in this section with CSS. In web development, it is useful to separate the concerns of structure and styling. So wherever possible, styling should be the job of CSS.

FURTHER RESOURCES

• MDN: Headings <h1> - <h6>
• MDN: The paragraph <p> element
• W3Schools: The emphasized text <em> element
• MDN: The Strong <strong> element
• W3Schools: The underline <u> tag
• Tech On The Net: The mark <mark> tag
• GeeksforGeeks: Subscript <sub> and superscript <sup> tags
• HTML.com The strikethrough <del> tag
• MDN: The block quotation <blockquote> element
• W3Docs.com: The inline code <code> tag