To make your pages usable and findable by search engines, you can do two important things: provide clear, descriptive titles, and structure your pages with HTML headings.
HTML Headings
Headings are one of the primary tools available in HTML to establish an information hierarchy in a web page. Headings range from h1 (most important) to h6 (least important) and tell the reader, search engines, and assistive technologies how information is organized in a page.
HTML headings operate much like an outline. H1, the highest level of heading, would encompass all of the headings and is generally reserved for the page title. For example, the title of this page is “Document Structure”, and all of the information and headings on this page fall within that description.
In this example, notice how sub-headings are supporting information for the level above.
- <h1>Document Structure</h1>
- <h2>HTML Headings</h2>
- <h3>Guidelines for Effective Headings</h3>
- <h4>Coding practices</h4>
- <h4>Organization</h4>
- <h3>Additional Resources</h3>
- <h3>Guidelines for Effective Headings</h3>
- <h2>HTML Headings</h2>
Guidelines for Effective Headings:
Coding practices
- Don’t use headings to manage font size. Headings are structural, not design elements.
- Use headings to improve readability. Breaking up content and adding appropriate headings makes content more scannable, search engine friendly, and improves accessibility.
- Do not hide or remove page titles from pages. This negatively impacts the user experience, search engine optimization, and accessibility.
- Page titles on site homepages are removed by default and the name of the site is used as the h1 heading. All internal pages and posts use the page title as the h1 heading.
Organization
- Organize your content in a top-down structure, the most important information at the top and the supporting details at the bottom.
- Don’t skip heading levels. Organize your content to fit h1 through h6, in order.
Additional Resources:
- Header Hierarchy (One Mighty Roar)
- Using h1-h6 to identify headings (W3C)
- HTML & CSS (W3C)
- Heading Elements (Mozilla)