Two problems often appear in redesigns: every large piece of text becomes an H1 because of its size, or a team fears SEO rules so much that only one H1 is permitted and even component titles avoid semantic tags.
Heading elements should express content organization. CSS controls visual size, and SEO does not require stuffing keywords into headings.
01 Use H1 for the Page’s Main Topic
On an article page, the H1 is normally the article title; on a service page, the service topic; on a product page, the product name. Reading the H1 alone should reveal the core content.
One clear primary H1 is easiest to maintain. HTML standards allow more complex structures, but a corporate site does not need theoretical complexity.
02 Use H2 and H3 for Section Hierarchy
H2 divides major sections, while H3 identifies a subsection within an H2. Do not jump from H2 to H5 merely to make the text smaller.
A visual label or card name does not always belong in the document outline.
Common Heading-Structure Problems
| Problem | Why It Fails | Fix |
|---|---|---|
| Several keyword-stuffed H1s | Unclear topic and confused component reuse | Keep one primary H1; use appropriate levels elsewhere |
| Every heading is a div | Missing semantics and assistive navigation | Use real heading elements |
| Heading tags chosen by font size | Hierarchy jumps | Separate semantics from CSS |
| Hidden keyword headings | Misleads users and search engines | Keep headings consistent with visible content |
| Every card uses H2 | The outline becomes fragmented | Choose H3 or plain text according to structure |
| Headings say only “More” or “Introduction” | Content cannot be predicted | Use specific descriptive headings |
03 Separate Visual Design From Semantics
An H1 can look relatively small, and an H2 can be visually prominent in context. Control styling through the design system instead of altering the document outline.
Responsive font-size changes should not change heading levels by device.
04 Help Scanning Instead of Stuffing Synonyms
Describe a section naturally. “What determines corporate website design cost?” is more useful than “website design cost price quote how much.”
Body copy, tables, and FAQs cover related terms, so every heading does not need the primary keyword.
05 Account for Context in Component-Based Sites
Hero, card, FAQ, and footer components may appear on different pages. A component should not hard-code H1; its heading level depends on page context.
Inspect the final rendered HTML, not only the design tool or component source.
06 Check With Assistive Technology and Crawling Tools
Review the heading list and keyboard and screen-reader navigation. Confirm there are no empty, meaningless repeated, or skipped headings.
An SEO tool’s “multiple H1” warning needs interpretation in the actual content and should not be fixed mechanically.
Frequently Asked Questions
Can a page have only one H1?
In practice, one clear primary H1 is simplest. Do not add several H1s for keywords.
Should the logo be an H1?
Usually not. The home-page logo is a brand link; the page H1 should express the main topic.
Can an H2 look larger than an H1?
Yes. Semantics and appearance use different mechanisms, although the overall hierarchy should remain understandable.
Does skipping H2 and using H3 harm SEO?
The main concern is unclear structure and accessibility. Use levels according to their relationships.
Can button text be a heading?
Usually not. Headings identify sections; buttons already have interactive semantics.
| Service | View |
|---|---|
| Related service | View service details |
| Project inquiry | Contact JVDS |
| Design and website articles | View all articles |
Link copied
