Ian Marshall logo

Ian Marshall

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

Short, but incomplete answer: nothing. They're both logical grouping containers that have display: block CSS 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, generic 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.

Keep your HTML simple, shallow, and semantic.

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. <div>s are not semantic. <section>s are.

Ian