セマンティクスしたい（semantics）

<!-- div だけで組み立てた例 -->
<div class="header">
    <div class="nav">...</div>
</div>
<div class="main">
    <div class="article">...</div>
    <div class="related">...</div>
</div>
<div class="sidebar">...</div>
<div class="footer">...</div>

<!-- セマンティクスを意識した例 -->
<header>
    <nav>...</nav>
</header>
<main>
    <article>...</article>
    <aside class="related">...</aside>
</main>
<aside class="sidebar">...</aside>
<footer>...</footer>

セマンティクスとは、もともと言語学で「意味」を指す言葉です。 HTML／CSSでは、「そのタグやクラスが何を表すか」を考えてマークアップする手法です。

HTML4までは、<div>や<span>のようなタグを使って「見た目を第一」にレイアウトを組むのが一般的でした。 HTML5で、<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>など、「セマンティクス」に基づいたタグが追加されました。

ウェブサイトは人間だけでなく、ブラウザ・検索エンジン・スクリーンリーダーといった機械も読みます。 こうした機械は見た目（CSS）を理解しないため、意味に合ったHTMLタグを使うことで、構造を認識させる必要があります。

参考

注釈

セマンティクスに唯一の正解はありません。 コンテンツカテゴリーを参考にしつつ、作成者が文書構造をどう捉えるかで決まります。 LaTeXやWordのアウトライン機能で見出しを組むのと同じ感覚です。

メインコンテンツしたい（main）

<!-- セマンティクス -->
<main>
    ...
</main>

mainタグで、そのページの中心的な内容を記述できます。表示されるmainは1ページに1つです。

<!-- div -->
<div id="content">
    ...
</div>

これまでは#contentや#mainのIDを付けるのが一般的でした。

参考

記事したい（article）

<!-- セマンティクス -->
<article>
    <h1>記事のタイトル</h1>
    <p>本文...</p>
</article>

articleタグで、それ単体で完結するまとまり（記事、投稿、商品カード）を記述できます。 タイトルはdivではなく見出しタグ（h1〜h6）を使います。

<!-- div -->
<div class="article">
    <div class="title">記事のタイトル</div>
    <div class="body">本文...</div>
</div>

これまでは.articleクラスを作るのが一般的でした。

参考

章・節したい（section）

<!-- セマンティクス -->
<section>
    <h2>機能一覧</h2>
    <p>...</p>
</section>

sectionタグで、見出しを持つ意味のあるかたまりを記述できます。 見出しを付けられないならsectionではなくdivのままでかまいません。

<!-- div -->
<div class="section">
    <div class="heading">機能一覧</div>
    <p>...</p>
</div>

これまでは.sectionクラスを作るのが一般的でした。

参考

補足したい（aside）

<!-- セマンティクス -->
<aside class="sidebar">
    <section>
        <h2>カテゴリ</h2>
        <ul>...</ul>
    </section>
</aside>

asideタグで、本筋から外れた補足（サイドバー、関連記事、余談）を記述できます。

<!-- div -->
<div class="sidebar">
    <div class="widget">カテゴリ一覧</div>
</div>

これまでは.sidebarクラスを作るのが一般的でした。

参考

div のまま残すもの

<div class="grid">
    <article>...</article>
    <article>...</article>
</div>

意味を持たず、単にCSSのグリッドやFlexboxのためにまとめたいだけならdivが正解です。 すべてを意味のあるタグに置き換える必要はありません。

リファレンス