html5 outline with a title an a text

Question

I try to apply the new html5 elements. If the page is very simple with an h1 and a text I am not sure what is the best way to do it from a semantic point of view, how to reflect correctly the structure of the page.

1. If the text is for instance the philosophy of the company (or the about page or the team...) I suppose it is not correct to use article, is that ok? (as this is not intended to be independently distributable or reusable, e.g. syndication) in this case, should it be just a div?

2. Makes any sense to wrap the h1 and the div with a section? It does not seem very useful if there would be just one section in the page.

So, what is the most correct way to outline a page with just a title and a text ?

<h1> Title </h1>

<div id="content">
    <p> text, text, text... </p>
</div>

Answer 1

I would drop the div completely and only use them when needed. This would give the most semantically correct representation of a simple title and paragraph(s).

<h1>Title</h1>

<p>Some text...</p>

I'd look at starting with the most simple HTML semantics and then research each HTML5 layout element and think about how it could be applied to your pages. Don't try to put everything in a new HTML5 element. Certain things like navigation bars, articles, asides, quotes, etc. are easy to spot and add some semantic sugar to.

If you're building dynamic pages that can leverage layouts or master pages, then you can put your main layout in the master page (header, footer, navigation, etc.), this can allow your pages to be very simple.

You could use divs for a multi-column layout, or maybe look into one of the dynamic grids provided by a front-end framework like Bootstrap or Foundation.