Why should I prefer HTML5 to HTML4 in this case?

Question

HTML 5

<section>
    <article></article>
    <article></article>
</section>

HTML 4

<div>
    <div></div>
    <div></div>
</div>

Both of these have to be aligned by CSS. What exactly is the use of HTML 5? Yes there are form tags in HTML 5 that are very useful, but I'm concerned with the above.

Answer 1

One word: semantics.

See http://www.webmonkey.com/2010/02/building_web_pages_with_html_5/#Semantic_structure_at_last

EDIT: To paraphrase the article, by request (and rightly so), HTML 5 has added a set of new tags, such as article, section, nav, header, footer, and others that have, traditionally, been created manually in HTML 4 by using div tags and semantic ID values (eg. <div id='header'>.

By creating these new semantic tags, it allows for easier to understand markup for humans, as well as being easier to parse semantically by machines. For example, it will be easier to write code that crawls web pages looking for article content (think blog search) with a standardized tag, rather than having to search pages full of divs.

Answer 2

A few reasons off the top of my head:

1) It's more explicit and space saving to separate specific components of your website Example:

<section>
    <article>
    </article>
</section>

vs.

<div class='section'>
    <div class='article'>
    </div>
</div>

It's also takes up less space to directly reference each of these parts in CSS or JavaScript.

2) Similarly, it can be easier for screen readers and the like to extract useful information from a page for those who are blind or visually impaired.