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.