Text basics

Similar to how your text editor provides <h1> to <h6> headings, along with a plethora of ways to format sections of text in meaningful and visual ways, HTML provides a very similar set of semantic and non-semantic elements to make meaning of prose.

This section covers the main ways of marking up text, or text basics. We will then discuss attributes, before exploring additional ways of marking up text, such as lists, tables, and forms.

Headings, revisited

There are six section heading elements, <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>, with <h1> being most important and <h6> the least. For many years, developers were told that headings were used by browsers to outline documents. That was originally a goal, but browsers haven't implemented outlining features. However, screen reader users do use headings as an exploration strategy to learn about the content of the page, navigating through headings with the h key. So ensuring that heading levels are implemented as you would outline a document makes your content accessible and is still very much encouraged.

By default, browsers style <h1> the largest, <h2> slightly smaller, with each subsequent heading level being smaller by default. Interestingly, browsers by default also decrement the <h1> font size based on how many <article>, <aside>, <nav>, or <section> elements it is nested in.