How to Properly Structure Website Content

Audience

This article is intended for people who use a content management system like WordPress to blog or create & maintain your website, but the overall concepts apply to all web design, regardless of what platform you use to create/manage your website.

Goals

1. Create an ideal webpage structure for easy reading
2. Maintain style consistency throughout entire site
3. Help search engines understand what the web page is about

Structure your Web Page Like a Newspaper Article

Think about how a newspaper article is structured as opposed to a novel or short story. In a newspaper article, if you were to read only the headings and subheadings you would have a clear idea of what the story is about. A newspaper article is also structure in a way to where you can stop reading at any point in the article. The most important information is presented first, and the further you read, the more detailed it becomes. This allows the reader to control the depth to which they consume the material; they can scan it to get the big picture or dive deeper into the details.

Use Heading Tags for SEO & Readability

Search engines look at your web page in a similar way – they assume if you put something in a heading tag (h1, h2, etc) then it’s probably important, and is a good indicator on what your web page is about.

If you use a content management system like WordPress, and you just make some words a different color and bigger, that doesn’t make it a heading (as far as a web designer or search engine sees things).  You must actually declare it as a heading tag, which is usually available under the ‘Format’ menu in the editor.

To create a heading tag:

1. Highlight the words you want to make a heading
2. Go to ‘Format’
3. Select the desired heading tag

WordPress Users: To see the format button WordPress users may have to click on the ‘Show/Hide Kitchen Sink’ button, typically the last button in the top row of the editor.

Which Heading Tag Should I Use?

Most content management systems will automatically make the title of the page an H1 (Heading 1) tag. Since you should typically only have one H1 tag per page, use the H2 tag as the top-level heading for the content of your page, and use a typical hierarchy as follows:

H1 (page or blog post title)

H2 (subheading 1)

paragraph text

H2 (subheading 2)

paragraph text

H3 (subheading of h2)

paragraph text

H3 (subheading of h2)

paragraph text

H2 (subheading 3)

paragraph text

Why Using Heading Tags vs Manually Styling is Better

• Search engines won’t recognize it as being important text in relation to other paragraph text surrounding it.
• Far more effort involved up front
• Far more effort involved if you decide to change the color of every heading site-wide
• Sloppy HTML

But How Can I Change the Color/Font/Size of the Headings?

Typically, that is a web designer’s job.  The font, color, size, etc of headings are declared in the cascading style sheets for the website.  A style sheet is a separate file that’s included on every page of your website that says, for example: “style all H1 tags as Times New Roman, 20px and blue”.

If you wrap all your main headings and subheadings in heading tags, your web designer can quickly & easily change the color, size, etc of all the heading tags for your entire site in one place, which is certainly easier than going through every single page of your website.