Semantic Organization

With HTML5's return to a language of structure, a new collection of tags was added for marking up the high-level organization of a page. These include the following:

An oversimplified layout that uses these elements might look something like this:

Tree visualization of HTML document

No browser or web police force will require you to use these elements. Using them will increase the semantic value of your page, making it easier for folks who use screen readers and for search engines to understand the content.

There will be situations in which you want to group content together for readability and for applying styles, but none of the tags above are a good semantic fit. In such occasions, you may use two semantically neutral tags: div and span. Neither imposes a particular meaning on the content they wrap. Browsers by default will render a div as a block element and a span as an inline element.