Modern HTML 1-1｜Modern HTMLとは？現在のWeb制作に合わせてHTMLを学び直す

Modern HTMLシリーズの第1回では、個別のタグを細かく覚える前に、現在のHTMLをどのように捉えるのかを整理します。

この回ですべてを使いこなす必要はありません。

まずは、これまで知っているHTMLを現在のWeb制作へどうアップデートしていくのか、その全体像をつかむことを目標にします。

このシリーズの前提

このModern HTMLシリーズは、HTMLを初めて触るための入門シリーズではありません。

HTMLの基本を一度学び、

「HTMLのタグはある程度分かるけれど、現在のWeb制作ではどのように考えればよいのか」

を整理したい人を想定しています。

このシリーズと一緒に読みたい本

PR

Modern HTMLの学び直しと相性が良い本として、このシリーズでは次の書籍を紹介します。

『HTML解体新書 ― 仕様から紐解く本格入門』

Modern HTMLとは？

最初に確認しておきたいのは、

「Modern HTML」という新しいHTMLの正式バージョンが存在するわけではない

という点です。

このシリーズでは、現在のHTML Living Standardや現在のブラウザ、アクセシビリティ、Webアプリケーション開発などを前提に、HTMLの知識を学び直すという意味で「Modern HTML」と呼んでいます。

以前はHTMLを、

「Webページの骨組みを作るもの」

と説明することがよくありました。

もちろん、それが完全に間違っているわけではありません。

ただ、現在のHTMLを考えると、それだけでは少し足りません。

このシリーズではHTMLを、

コンテンツやUIの意味・構造・基本動作をブラウザへ伝えるレイヤー

として捉えていきます。

HTMLは「ページの骨組み」だけではない

HTMLには、ページの内容を並べるだけでなく、

「この部分は何なのか」

をブラウザへ伝える役割があります。

例えばページの中には、

• サイトの導入部分
• ナビゲーション
• ページの主要コンテンツ
• 独立した記事
• テーマを持ったまとまり
• 本文を補足する情報
• 操作するためのボタン

など、さまざまな役割があります。

HTMLには、それぞれの意味を表すための要素が用意されています。

ページ構造の簡単な例を下記で確認します。

<header>
  <nav aria-label="メインナビゲーション">
    <!-- ナビゲーション -->
  </nav>
</header>

<main>
  <section>
    <h1>Modern HTMLを学ぶ</h1>
    <p>現在のWeb制作に合わせてHTMLを学び直します。</p>
  </section>
</main>

<footer>
  <!-- フッター -->
</footer>

<header>
  <nav aria-label="メインナビゲーション">
    <!-- ナビゲーション -->
  </nav>
</header>

<main>
  <section>
    <h1>Modern HTMLを学ぶ</h1>
    <p>現在のWeb制作に合わせてHTMLを学び直します。</p>
  </section>
</main>

<footer>
  <!-- フッター -->
</footer>

コードを見たときに注目してほしいのは、タグの数ではありません。

「なぜこの場所に、この要素があるのか」

という点です。

Semantic HTMLという考え方

Semanticは、日本語では「意味」に近い言葉です。

Semantic HTMLでは、見た目ではなく、

そのコンテンツが何を意味しているのか

を考えてHTML要素を選びます。

例えば、ページの中に単なるグループがあるからといって、すべてを同じ要素で囲む必要はありません。

独立したコンテンツなのか、テーマを持った区切りなのか、それともCSSでレイアウトするためだけの箱なのか。

その役割によって選択肢が変わります。

ここで注意したいのは、

divを使うこと自体が悪いわけではない

ということです。

レイアウトやスタイルを適用するためだけの汎用的なコンテナであれば、divが適切な場面もあります。

「何でもdiv」をやめて「何でもsection」にすることがModern HTMLではありません。

意味があるところには意味のあるHTMLを使い、意味を持たせる必要がないところでは汎用要素を使う。

この判断をModern HTML 1-2で詳しく確認します。

Native HTML Firstという考え方

Modern HTMLシリーズでは、もう一つ大切にする考え方があります。

それが、

Native HTML First

です。

これはHTML仕様の正式名称ではなく、このシリーズで使う設計上の考え方です。

何かUIや機能を作るとき、すぐJavaScriptを書くのではなく、まず次の順番で考えます。

1. HTML標準だけで実現できないか
2. CSSで実現できないか
3. それでも足りなければJavaScriptを使う

例えば、ユーザーがクリックする「開く」ボタンを作る場合を考えてみます。

汎用的な要素をボタン風に装飾し、JavaScriptでクリック処理を追加することもできます。

しかし、その要素の意味が「ボタン」であれば、最初からHTMLのbutton要素を使う選択肢があります。

下記で違いを確認します。

<!-- 見た目だけをボタン風にした例 -->
<div class="button-like">
  開く
</div>

<!-- 操作の意味がボタンならbuttonを検討 -->
<button type="button">
  開く
</button>

<!-- 見た目だけをボタン風にした例 -->
<div class="button-like">
  開く
</div>

<!-- 操作の意味がボタンならbuttonを検討 -->
<button type="button">
  開く
</button>

HTML標準の要素には、ブラウザが最初から提供してくれる意味や基本的な操作があります。

そのため、必要のない処理を自分で作り直さずに済むことがあります。

HTMLだけで動くUIもある

現在のHTMLには、ブラウザ標準で基本動作を持っている要素や機能があります。

例えば、

• details / summary
• dialog
• popover
• button
• label

などです。

Modern HTML 1-1では、それぞれを細かく覚える必要はありません。

まずは、

「以前ならJavaScriptから考えていたUIでも、現在はHTML標準でできる場合がある」

ことを知っておけば十分です。

最も分かりやすい例として、detailsとsummaryによる開閉UIを下記のチェック3で確認します。

<details>
  <summary>詳しく見る</summary>
  <p>JavaScriptを書かなくても開閉できます。</p>
</details>

<details>
  <summary>詳しく見る</summary>
  <p>JavaScriptを書かなくても開閉できます。</p>
</details>

ブラウザで確認すること

チェック3をブラウザで表示したら、「詳しく見る」をクリックします。

内容が開閉すれば確認完了です。

この程度の開閉であれば、JavaScriptを追加しなくてもHTML標準の動作を利用できます。

Modern HTML 1-5では、このようなHTMLだけで作れるインタラクションを詳しく扱います。

Accessibilityを後付けにしない

Modern HTMLでは、アクセシビリティもHTMLと切り離して考えません。

完成したページへ最後に何かを追加すればアクセシビリティ対応になる、というものではありません。

最初から内容に合ったHTML要素を選ぶこと自体が、アクセシビリティの土台になります。

例えば、

• 操作するものなら、その役割に適した要素を選ぶ
• 画像なら代替テキストが必要なのか考える
• フォームなら入力欄とラベルの関係を考える

といった判断です。

HTMLとアクセシビリティについては、Modern HTML 1-7で詳しく扱います。

HTML・CSS・JavaScriptの責務を考える

WebページはHTMLだけで完成するわけではありません。

CSSやJavaScriptと組み合わせながら作っていきます。

そこでModern HTMLでは、

「これはどのレイヤーの仕事なのか」

を考えます。

HTML

意味・構造・基本動作

CSS

見た目・レイアウト・視覚表現

JavaScript

動的処理・状態変化・HTMLやCSSだけでは足りない機能

もちろん、実際のWeb制作では3つが完全に独立しているわけではありません。

互いに連携しながら一つのUIを作ります。

大切なのは実装前に、

• これはHTMLの仕事なのか
• CSSでできることなのか
• JavaScriptが本当に必要なのか

を一度考えることです。

実務ではどこで使う？

Modern HTMLは学習用の知識だけではありません。

実際のWeb制作でも、そのまま判断材料になります。

Webサイトのコーディング

ページの見た目だけでなく、コンテンツの役割を考えてHTMLを組み立てると、後からコードを見たときにも構造を把握しやすくなります。

WordPressテーマの確認

WordPressのテーマやテンプレートを見るときにも、

「これは記事なのか」

「ナビゲーションなのか」

「単なるレイアウト用のコンテナなのか」

という判断につながります。

フロントエンド開発

JavaScriptでUIを作り始める前に、HTML標準で提供されている機能を確認する習慣につながります。

保守・コードレビュー

適切なHTML要素が使われていれば、見た目だけでは分からないコンテンツの意図をコードから読み取りやすくなります。

アクセシビリティ

意味のあるHTMLから作り始めることで、アクセシビリティ対応の土台を用意できます。

Modern HTMLシリーズで学ぶこと

このシリーズでは、次の順番で進める予定です。

1. Modern HTMLとは何か
2. セマンティックHTMLとページ構造
3. 見出し・文章・コンテンツの意味設計
4. モダンなフォーム設計
5. HTMLだけで作れるインタラクション
6. 画像・メディア・レスポンシブHTML
7. HTMLとアクセシビリティ
8. head・メタデータ・SEOとの接続
9. Modern HTMLミニ制作
10. ToshiLabへの実装・まとめ

※未公開記事にはリンクを設定しません。公開後に順次リストを追加します。

今回できるようになったこと

Modern HTML 1-1 ミニチェック

ここまでの内容を使って3問考えてみます。

Q1

レイアウトのためだけに要素をグループ化したい場合でも、必ず意味を持つsection要素を使った方がよいでしょうか？

Q2

記事一覧の中にある「1記事分の独立したコンテンツ」は、section・article・divのどれが候補になるでしょうか？

Q3

画像と文章を横並びにするためだけのラッパーは、section・article・divのどれが候補になるでしょうか？

【※回答・解説集は公開後にここへ内部リンクを追加します。】

まとめ

Modern HTMLは、新しいHTMLの正式なバージョン名ではありません。

このシリーズでは、現在のHTML標準やWeb制作を前提として、これまで身につけたHTMLの知識をアップデートするという意味で使います。

今回特に覚えておきたいのは、

• HTMLは単なるページの骨組みではない
• コンテンツの意味・構造・基本動作をブラウザへ伝える
• 見た目ではなく意味からHTML要素を選ぶ
• divを禁止するのではなく適切に使い分ける
• HTML標準 → CSS → JavaScriptの順に検討する
• アクセシビリティはHTMLを書く段階から始まっている

という点です。

最初からすべて判断できる必要はありません。

次回から、実際のHTML要素を使いながら一つずつ判断していきます。

次に読む

次回は、

Modern HTML 1-2｜セマンティックHTMLとページ構造

です。

section・article・div、header・nav・main・aside・footerなどを使い、

「実際のページではどの要素を選べばよいのか」

を具体的に整理します。

ミニチェックの回答はModern HTML 1-2 で掲載

Modern HTML 1-2｜セマンティックHTMLとページ構造｜section・article・divを使い分ける

toshi

フルスタックエンジニア

XFacebookInstagramContact

C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。