In that last Tutorial (A Basic HTML5 Page) we saw how to structure an entire web page, from top to bottom.

In this lesson, I want to introduce to you ideas around how you should structure your content for the people actually reading your page.

Thinking Like A Newspaper

Whether in print or online, thinking about your content the way the newspapers do is a good approach when considering how your page should be laid out. This can be thought of as your visual hierarchy. When you pick up a newspaper you’ll notice some or all of the following:

• An attention-grabbing headline.
• A gripping visual – often a photo.
• The actual news story writeup.
• Some sub-headings to break up long articles
• A “call to action” – e.g. “Do you have a story to share? Call Us”, “To donate to this cause text DONATE to 01234”.
• Some of the article’s main points in their own box, or highlighted in larger text, to grab your attention.

These aspects show the reporter’s main points, and their priority, but varying how different things are presented.

The H1, H2, H3 Tags

The same principles apply when building a website. What are your priorities and how should these be presented?

The H1 Tag

The <h1> </h1> tag pair effectively denote the headline of your page. Unlike <title> (which is mostly for search engines and other bots), H1 is visual – your users can see it on the page. So write your H1 for users.

Because this is the headline for the page, each page should have no more than one H1 Tag. Before you learn how to style it, the H1 tag will appear ‘naturally’ in a much larger font size than the text around it.

H2, H3 etc

For subsequent sections of your page content, you can break it down further. For sub-headings you can use other numbers after the H. So a section might be entitled with a <H2>A New Section Begins...</h2>. Any other sections underneath your H2 can be further sub-divided with <h3>Further Clarification</h3>.

Unlike H1, you can use multiple H2, H3, H4 (however many levels your content has) on the page. There’s no restriction apart from to make sure your content is divided up logically.

Pro Tip: Some content management systems or website builders use the H1 to display your logo across the website. This defeats the object of the H1 being the ‘headline’ of the page. It also means the same H1 appears across your website, which can cause SEO (Search Engine Optimisation) issues later on. Keep H1’s unique on all pages and you’ll be doing yourself a lot of favours.

Paragraph Tags – <p>

Once you’ve worked out your page structure you can then begin to add paragraphs of text. This is easily done through the <p> </p> tag pair. Simply type the text you want to appear within that paragraph between the open and close tags to mark it up as one paragraph.

Pro Tip: because you are writing HTML from scratch here, simply pressing ‘return’ or ‘enter’ will not start a new paragraph. Sections have to be divided up with HTML markup. The paragraph tag is one of these ways.

Making Your Point – Bold and Italic Text

As with writing a word processor document, sometimes phrases need to be emphasised. So you may want to make some text bold or italic.

Bold Text: <strong> and <b> Tags

To make text bold you can surround it with either <strong>Your Text Here</strong> or <b>Your Text Here</b> tags. Visually speaking both will do the same. However there are fundamental differences in why you would choose one over the other.

There is another interesting post on this subject here, but if you want to convey to screen readers (think: the visually impaired) or to search engines, that your bold text is of a higher importance than the surrounding paragraph text, then use <strong>

Italic Text: <em> and <i>

As with bold text, there are two ways to mark up italic text. The first is <em>Your Italic Text</em> and the second is <i>Your Italic Text</i>. <em> conveys a higher importance for italic text, the way that <strong> does for bold text.

Page Structure Example

Here’s an example structure showing the use of all these tags, but feel free to repurpose it, or to write your own. Remember to put your code in between the <body> </body> tags. And as this is the page content, I suggest you put it between your <article> </article> tags.

<h1>Warning: Earth to Explode Within 5 Years</h2><p> A new government report released today warns that if action is not taken soon to distance ourselves from the sun, it may spontaneously explode within 5 years.</p><h2>Expert Reaction</h2><p> A number of experts in astrophysics and from within the space industry have given their reactions to the report.</p><h3>"What a Stupid Remark"</h3><p> Dr <strong>A N Other</strong>, a professor for the University of Space has denounced the report as 'a waste of taxpayers' money:</p><p> <em>What a stupid remark,</em> he began, <em>We have managed this close to the sun for billions of years. Why would that suddenly change in 5 years?</em></p><h3>"Get Off While You Can"</h3><p> On the opposite side of the argument, the Committee for Planetary Home Movers, have given this stark warning.</p><p> <em>With this report, we can finally start colonising Mars. Get off while you can before being turned into a fireball</em></p>

This would make your full page look something like this, in your code editor:

<!DOCTYPE html><html><head> <title>Structuring Your Page</title> <script type="text/javascript">  function exampleFunction(){   //do nothing  } </script> <style type="text/css"> </style> <link rel="stylesheet" href="/link/to/css.css"></head><body> <header>  Site Header </header> <article>  <h1>Warning: Earth to Explode Within 5 Years</h2>  <p>   A new government report released today warns that if action is not taken soon to distance ourselves from the sun, it may spontaneously explode within 5 years.  </p>  <h2>Expert Reaction</h2>  <p>   A number of experts in astrophysics and from within the space industry have given their reactions to the report.  </p>  <h3>"What a Stupid Remark"</h3>  <p>   Dr <strong>A N Other</strong>, a professor for the University of Space has denounced the report as 'a waste of taxpayers' money:  </p>  <p>   <em>What a stupid remark,</em> he began, <em>We have managed this close to the sun for billions of years. Why would that suddenly change in 5 years?</em>  </p>  <h3>"Get Off While You Can"</h3>  <p>   On the opposite side of the argument, the Committee for Planetary Home Movers, have given this stark warning.  </p>  <p>   <em>With this report, we can finally start colonising Mars. Get off while you can before being turned into a fireball</em>  </p> </article> <aside>  Useful for sidebars, or other less-important content </aside> <footer>  Indicates a footer, of a page or a section </footer></body></html>

Save your file, either replacing your old one, or save it to a new file so you can see your progress. Then open it up in a browser:

Structuring Your Content: Conclusion

Always write your content for human beings. That means breaking it up into manageable chunks, giving appropriate sub-headers and emphasising relevant text in bold or italic. And please remember you should Only have one H1 Tag per Page.

More HTML5 Tutorials

Spread the Word