「HTML5って結局なにから覚えればいいの？」——そんなふうに最初の一歩で立ち止まってしまう方、けっこう多いのではないでしょうか。
WEB制作に携わってかれこれ25年になりますが、いまだに「むずかしい用語をずらっと並べられると、それだけでやる気がしぼむ」という気持ちはよくわかります。私自身、HTML5が出はじめたころは右も左もわからず、少しずつ情報を集めながら手探りで勉強していました。最初から全部を理解しようとして、何度も挫折しかけたものです。
この記事では、そんな初心者のころの自分に教えるつもりで、HTML5マークアップの「心得」と「作法」を、できるだけ専門用語を噛みくだきながらやさしく解説していきます。
難しい理屈は後まわしでかまいません。まずは「なんとなく雰囲気がつかめた」と思ってもらえれば十分です。細かい暗記よりも、全体のイメージをつかむほうがずっと大事です。気になったところから、自分のペースで読み進めてもらえれば十分です。
ちなみに、この記事のもとになったのは、私がかつて参考にした「HTML5マークアップの心得と作法」という分かりやすいスライドでした。当時はそれを見て「なるほど、こういうことか」と少しずつ霧が晴れていったのを覚えています。あらためて自分の言葉で整理し直してみたので、当時の私と同じように迷っている方の取っ掛かりになればうれしいです。
そもそもHTML5ってなに？まずはここから
HTMLは「HyperText Markup Language」の略で、WEBページの中身（文章・画像・リンクなど）に「これは見出し」「これは段落」といった意味づけをするための言語です。MDNでも「HTMLはWebの最も基本的な構成要素で、Webコンテンツの意味と構造を定義する」と説明されています。
その中でも「HTML5」は、2010年前後から広まったバージョンの呼び名です。動画や音声を扱う<video>や<audio>、入力フォームの便利な機能など、それまでより表現の幅がぐっと広がったのが特徴でした。
「あれ、いまも”HTML5″でいいんですか？」——じつは現在、HTMLは「○○というバージョン」という考え方ではなくなっています。このあたりは後ほどくわしく触れますね。
ここでお伝えしたいのは、HTML5以降のマークアップは「見た目」ではなく「意味」を大切にする方向に進んでいる、ということです。この感覚さえつかめれば、細かいタグの暗記に追われなくても、ぐっと書きやすくなります。
参考: MDN / WHATWG HTML Standard
心得その1：見た目ではなく「意味」でタグを選ぶ
初心者のころにいちばんやりがちなのが、なんでもかんでも<div>で囲んでしまうことです。私もそうでした。とりあえず<div>で組んで、あとはCSSで見た目を整える……という書き方ですね。
もちろんそれでも表示はできます。ただ、HTML5のマークアップでは「このかたまりは何を表しているのか」をタグで示すこと（=セマンティックなマークアップ）がとても大切にされています。
MDNでは、意味を持たせたマークアップの利点として、検索エンジンが内容を理解しやすくなる（SEO面）、スクリーンリーダーが目印として使えてアクセシビリティが上がる、そしてコードが読みやすくなる、といった点が挙げられています。<div>だらけの中から目的の場所を探すより、意味のある名前のタグのほうが断然わかりやすい、というわけです。
たとえば、こんな使い分けが代表的です。
<header>はページや記事の冒頭部分、<nav>はメニューなどのナビゲーション、<main>はそのページの主役となる中身を表します。
さらに、<article>はそれ単体で完結する記事、<section>は意味のまとまりごとの区切り、<aside>は補足や余談、<footer>は締めの部分、というふうに役割が決まっています。
はじめのうちは「どのタグを使えばいいか迷う」場面も多いと思いますが、それでまったく問題ありません。迷ったら「このかたまりを声に出して説明するとしたら何と言うかな？」と考えてみると、しっくりくるタグが見つかりやすくなります。
ポイントは「見た目をどうしたいか」ではなく「これは内容として何なのか」でタグを選ぶこと。見た目はCSSの担当、意味づけはHTMLの担当、と役割を分けて考えると整理しやすくなります。
参考: MDN（セマンティクス）
関連記事：「読み方のわからないHTMLタグとCSSプロパティ」ベスト5！正しい読み方は？
心得その2：ページの先頭の「おまじない」を正しく書く
HTMLファイルの一番上には、かならず<!doctype html>という一行を書きます。初心者のうちは「謎のおまじない」に見えるかもしれませんが、これにはちゃんと意味があります。
MDNによれば、このdoctype宣言の役割は、ブラウザを「互換モード（quirks mode）」に切り替えさせないことだと説明されています。つまり、ブラウザに「最新の仕様にきちんと従って表示してね」と伝えるためのスイッチなんですね。
もしこの一行を書き忘れると、ブラウザが昔のページ向けの特殊な表示モードになってしまい、レイアウトが思わぬ形で崩れることがあります。「CSSがなぜか効かない」「余白がおかしい」といったトラブルの原因が、じつはdoctypeの書き忘れだった、というのは初心者あるあるです。私も昔、原因がわからず小一時間悩んだ末にこれだった、という苦い経験があります。
うれしいことに、HTML5での書き方はとてもシンプルになりました。昔は長くて複雑な宣言を正確に書く必要がありましたが、いまは<!doctype html>の一行だけでOK。大文字小文字も問われないので、<!DOCTYPE html>と書いても同じです。
難しく考えず「HTMLファイルの先頭には必ず <!doctype html> を書く」と覚えてしまえば十分です。
参考: MDN（Doctype）
心得その3：いまのHTMLは「バージョン」ではない
ここで、冒頭で少しだけ触れた「HTML5って今もそう呼ぶの？」という話に戻りますね。これは知っておくと、ほかの解説記事を読むときに混乱しなくて済む大事なポイントです。
もともとHTMLの仕様は、W3CとWHATWGという2つの団体がそれぞれ作っていた時期がありました。ところが2021年1月28日、W3Cは独自のHTML5仕様を廃止し、WHATWGが継続的に更新している「HTML Living Standard（HTMLリビングスタンダード）」へ一本化されました。
「Living Standard」を直訳すると「生きている標準」。その名のとおり、HTML5・HTML6……とバージョンで区切るのではなく、ひとつの仕様を常に最新の状態へ更新し続ける、という考え方です。だから「次のバージョンはいつ出るんだろう」と待つ必要はもうないんですね。
とはいえ、「HTML5」という呼び名がいきなり間違いになったわけではありません。世間ではいまも、ざっくり「最近のHTML」を指す言葉として広く使われています。ですから初心者のうちは、「HTML5＝今どきのHTMLの総称。正式にはHTML Living Standardとして一本化されている」くらいの理解でまったく問題ありません。
大事なのは、用語の正確さに気を取られすぎないこと。まずは手を動かして、意味のあるタグでページを組む練習を重ねるほうが、ずっと力になります。
参考: WHATWG HTML Standard / Wikipedia（HTML5）
まとめ：難しく考えず「意味」から始めよう
最後に、今日の内容をふりかえっておきましょう。
HTML5マークアップでいちばん大切な心得は、なんといっても「見た目ではなく、内容の意味でタグを選ぶ」こと。これさえ意識できれば、<div>だらけのコードから一歩抜け出して、検索エンジンにも、画面読み上げを使う方にも、そして未来の自分にもやさしいページが作れます。
あわせて、ファイルの先頭には<!doctype html>の一行を忘れずに。これだけでブラウザがきちんと標準モードで表示してくれて、思わぬレイアウト崩れを防げます。たった一行ですが、効果は絶大です。
そして、いまのHTMLは「HTML Living Standard」として常に更新され続けている、ということも頭の片すみに置いておいてください。バージョンを暗記する必要はもうありません。気が向いたときにMDNや公式仕様をのぞいてみると、新しい発見があるはずです。
私自身、25年この仕事をしていても、HTMLの世界は少しずつ変わり続けていて、いまだに学ぶことばかりです。だからこそ、最初から完璧を目指さなくて大丈夫。まずは小さなページをひとつ、意味のあるタグで組んでみる——その一歩が、いちばんの近道だと思います。たとえば自己紹介ページなら、見出しを<h1>、本文のかたまりを<section>、ページ末尾を<footer>に置きかえるだけでも、意味で組む感覚はつかめます。今日の3つの心得を、次に作るページで一つでも試してみてください。
