Use Headings to Structure Page Sections

Use heading tags to emphasize important text

Screenshot of HTML code with headings highlighted

HTML code with headings highlighted

Heading tags (not to be confused with the <head> HTML tag or [tippy title=”HTTP Headers” reference=”” header=”on”]In HTTP (HyperText Transfer Protocol), different types of data that are sent off before the actual data itself.[/tippy]) are used to present structure on the page to users. There are six sizes of heading tags, beginning with <h1>, the most important, and ending with <h6>, the least important.

Screenshot of same page, rendered in the browser

Page viewed in browser displays headings

Since heading tags typically make text contained in them larger than normal text on the page, this is a visual cue to users that this text is important and could help them understand something about the type of content underneath the heading text. Multiple heading sizes used in order create a hierarchical structure for your content, making it easier for users to navigate through your document.

Best Practices

Imagine you’re writing an outline
Use headings sparingly across the page

Further Study

Komotion: Typography examples – see how various headings are rendered if using a Komotion Web Pack (try free)

Ready to make an impact online? Let us show you how we can help you succeed. Contact us for a free consultation!