What is the difference between <section> and <div>?

Question

What is the difference between `

` and `

` in HTML? Aren't we defining sections in both cases?

Answer 1

Short, but incomplete answer: nothing. They're both logical grouping containers that have display: block defaults.

Better, more accurate answer: semantics. Before HTML5, the only grouping container we had was a div, so EVERY grouping was inside a div with lots of id and class attributes to tell them apart. This produced a nightmare for code readability, long-term maintenance, accessibility and screen readers, and search-engine optimization. When all content is nested inside generic containers, all content has equal importance, which is to say none whatsoever. HTML5 brought us header, footer, main, nav, aside, article, and others, including section. Section is defined as a standalone container of data, usually given a headline (h1-h6) at its top. Section is NOT GENERIC, while div is completely generic.

I should also point out that using containers solely for the purpose of styling is discouraged, as it creates nonsensical data groupings. HTML pages are searched constantly by machines trying to make sense of them, find publishable material, distribute information, and provide inlinks when applicable. These things allow for better SEO, so it's in your best interest to keep your HTML simple, shallow, and semantic. Divs are not semantic. Sections are.

Ian