HTML Header Tags: More Than Just Big Text
Header tags (<h1>-<h6>) are your page's skeleton, creating a navigable outline for users and search engines. Use a single <h1> for the main title, then nest <h2>, <h3>, etc., for sections.
Why it exists
A webpage without structure is just a wall of text, difficult for anyone to parse. Header tags were created to provide a semantic hierarchy, organizing content into a logical outline that can be understood by browsers, search engines, and assistive technologies like screen readers.
The mental model
Think of header tags as creating a table of contents for your page. The <h1> is the title of the book. The <h2> elements are the chapter titles. The <h3> elements are the main headings within each chapter, and so on. This structure allows a user to quickly scan the page and understand its content at a glance.
How it works
HTML provides six levels of heading elements, from <h1> (the most important) to <h6> (the least important). By default, browsers render these as block-level elements with decreasing font sizes and bold weight. However, their primary purpose is to define structure, not to style text. All visual styling should be handled with CSS properties like font-size and font-weight.
When to use it
Use header tags to give your content a clear, hierarchical structure. Every page should have a single <h1> that accurately describes the page's overall content, much like the <title> tag. Follow this with <h2> elements for the main sections of the page. If a section needs to be broken down further, use <h3> elements, and so on. This logical order is critical for both SEO and accessibility.
When not to use it
Never use header tags simply to make text bigger or bolder. For purely visual changes, use a or tag and apply CSS. The most critical rule is to not skip heading levels. For example, do not jump from an <h1> directly to an <h3>, as this breaks the document's logical outline. Screen reader users, who often navigate by jumping from heading to heading, will become disoriented. Also, avoid using multiple <h1> elements on a single page; it is not a best practice and can confuse search engines about the page's primary topic.
One canonical example
A blog post about electric cars could be structured like this: The <h1> would be "The Rise of Electric Cars". Main sections like "History of EVs" and "Modern Battery Technology" would use <h2> tags. Within "Modern Battery Technology", you might have subsections like "Lithium-Ion vs. Solid-State", which would use <h3> tags. This creates a clear, nested outline: <h1> -> <h2> -> <h3>.
Interview question
Which approach best demonstrates the correct use of HTML header tags according to best practices?
- a.Applying an <h1> tag for the main page title and then using <h2>, <h3>, and so on, in a nested, hierarchical order.Correct
- b.Using multiple <h1> tags on a single page to emphasize several key topics.
- c.Primarily using header tags to make text visually larger and bolder, then adjusting with CSS.
- d.Skipping from an <h1> directly to an 3 when the content is less significant than an 2 would imply.
Why? this is the answer
The card emphasizes using a single <h1> for the main title, followed by nested <h2>, <h3>, etc., to create a logical, hierarchical structure. Using multiple <h1> tags or skipping heading levels explicitly goes against best practices and can confuse users and search engines.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on html — each one lists the topics its interview covers.
See open roles