A heading is a bold word or phrase set apart from surrounding text to name a page or part of a page. Headings make long content easier to scan and give the page a clear content hierarchy. section 3.2.7 section 3.0
For most pages, use one first-level heading for the page title, second-level headings for major sections, and third-level headings for subsections. In HTML, these levels use the h1, h2, and h3 tags. section 3.2.7 section 3.5
Control the visual treatment separately from the heading level:
- Set the page title in h1. Its default size is 32 px, though a short or prominent title may use 48 px, 72 px, or more. section 3.2.7
- Use h2 for major sections. Its 24 px default can be increased to 28 px or 32 px when the design calls for it. section 3.2.7
- Use h3 for subsections. Because its roughly 18.2 px default is close to 16 px body text, making it 20 px or 24 px may improve distinction. section 3.2.7
- Choose heading fonts that work with the body-text font, and include the chosen heading font and sizes in a code-generation prompt. section 3.2.5 section 3.2.8
A personal home page
A page can begin with a header title and subtitle, then an introductory paragraph followed by h2 headings such as “What I Do (for Work)” and “What I Do (for Fun).” Ask for the heading sizes, colors, and fonts along with the rest of the CSS. After code is generated, change only the text between an opening and closing h2 tag to rename a section; keep the tags themselves intact. section 3.2.8 section 3.4
<main>
<article>
<h2>Travel Guide to Narnia</h2>
<!-- Article content goes here -->
</article>
</main>
Use the article skeleton to see an h2 title inside an article before adding section content beneath it. section 12.2.4
When adding an article section by hand, create a section element, place an h3 heading inside it, and then add its paragraphs. Repeat the pattern for additional sections. For small visual changes, adjust a CSS font-size number but retain the px unit; rem values offer an accessibility-oriented alternative because they scale from the browser’s default font size. section 12.2.4 section 3.4
