HTML 入門直後だと「どんな HTML 要素あるの？」だったり「どんなツールが必要なの？」だったりは、当然のように湧き上がる疑問だと思う。
わたし自身も、HTML 入門に踏み込んだころに同様のことでモヤついたのを覚えている。
数ある HTML 要素のなかから、どれを優先して覚えればいいのか、ポピュラーな HTML 要素を知りたいと望んだり、HTML を書くにあたって必要とされるツールはどれなのか、プロの立場から入門者の目線に立ってもなお役立つツールを教えてほしいと願ったりしたものだ。
このエントリーでは、そんな悩みに回答させてもらいたい。
HTML 要素を知る
HTML コーディングにおいて HTML 要素の理解は、なによりも要求されるわけだが、WHATWG 勧告の HTML (Living Standard) で 100 個を超える HTML 要素が存在する。それらをあまさず習得すれば最善だろうけれど、実際に HTML コーディングしてみると、そのほんの一部しか使っていないものである。
いずれは全部覚えてもらうとして、これから HTML を覚えようという場合においては、頻出する HTML 要素から始めてみてはどうだろうか。
ここでは、ポピュラーな HTML 要素をピックアップして、お届けしよう。
基本構成
基本的な構成は、DOCTYPE宣言から始まる一連の HTML 要素で作られる。
先頭行の <!DOCTYPE> は、html 文書のバージョンを定義するためのもので必須で配置しなければならない。
<html> は html ファイルの基幹となる要素で、ほかすべての要素を包含している。
<head> は html ファイルに関するメタ情報を含める。つまりタイトルや文字エンコーディング、スタイルなどのことで、目に映らないものを対象とした梱包要素だ。
<body> は html ファイルのコンテンツを含める。つまりテキストや画像、映像など、目に映るものを対象とした梱包要素だ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
</head>
<body>
...
</body>
</html>コンテナタグ
特別意味を持たない包括を表すときに用いる要素だ。それに対して意味を持つ要素として引き合いに出すならば、<main> で、これは主要エリアとして包括する場合に使う。主要エリアを <div> で包括することは可能ではあるけれど不適切とされる。
意味を持たず汎用的な要素であることから <div> だらけにならないよう気をつけたい。
<div>
...
</div>見出しタグ
項目の見出しを表すときに用いる HTML 要素だ。<h1>〜<h6> の 6 段階あって、大見出し（<h1>）、中見出し（<h2>）、小見出し（<h3>, <h4>, <h5>, <h6>）の要領で使い分けよう。
<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
<h5>見出し</h5>
<h6>見出し</h6>段落タグ
段落を表すときに用いる HTML 要素だ。文章を配置したいときに使おう。1 行程度のテキストにおいても段落タグを用いるけれど、単語程度の場合においては、その限りではない。しかし配置レイアウトからして段落タグが無難な場合もある。
<p>この文章はダミーです。</p>画像タグ
画像を埋め込むときに用いる HTML 要素だ。写真や画像を表示したいときに使おう。
<img src="./images/avatar.jpg" width="50" height="50" alt="">リンクタグ
ハイパーリンクを表すときに用いる HTML 要素だ。ページ遷移だったり、ページ内アンカーだったり、外部サイトにリンクさせたりできる。
<a href="./link/">リンク</a>リストタグ
箇条書きリストを表すときに用いる HTML 要素だ。メニューやナビゲーションを構成するときにも使われる。
<!-- 順序なしリスト -->
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>みかん</li>
</ul>
<!-- 順序付きリスト -->
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>テーブルタグ
情報を表形式で表すときに用いる HTML 要素だ。行と列の次元を持ち合わせる情報を表示したいときに使おう。
<table>
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>ツールを用意する
安心安全に作業するには、よい道具は欠かせない – そんな表現を耳にしたこともあると思う。
切れない包丁は危険だし、鮮度を落とすわけで、無論、それは HTML を書く場合においても例外ではなく、良質なツール（道具）は、良質な作業を体験させてくれる。結果的に時短につながりクオリティにつながるわけだ。
ここでは HTML を書くうえで必要な道具を紹介しよう。
ブラウザ
記述した HTML の表示を確認するためにブラウザが必要だ。あなたが Windows ユーザーならば、デフォルトでインストールされている Microsoft Edge で検証作業が行える。そのほかに Google Chrome や Firefox など存在するが HTMLコーディングの時点においては、使い勝手のよいものを使用すればいい。
ちなみにブラウザシェアでみれば世界的にも国内的にも Google Chrome が俄然リードしているわけだが、それは一般ユーザーのものであって、開発者による検証用としてのブラウザシェアにおいてはエビデンスを得られなかったから分からない。たぶん Google Chrome じゃないかな。
とはいえ、あなたの Web サイトを閲覧するユーザーのブラウザは、一律ではないから各ブラウザで検証する必要があることは間違いない。ひととおり揃えておくことを推奨する。
Microsoft Edge
Google Chrome
Firefox
Safari
テキストエディタ
HTML を記述するツール（ソフトウェア）にテキストエディタが必要だ。文章を作成するのに「文章作成ソフトウェア Word」を用いたり、表を作成するのに「表計算ソフトウェア Excel」を用いることと同様に HTML コーディングではテキストエディタが用いられる。
Windows PC に、はじめからインストールされていることからテキストエディタといえば「メモ帳」が思い浮かぶところだろう。無論テキストエディタであるわけだから HTML を記述する機能は備わっている。しかし「メモ帳」はプレーンテキストエディタであって HTML コーディングには向いていない。
そこでオススメするのが「Visual Studio Code」だ。VS Code などと略称されることもある当該ソフトウェアは、コードエディタと銘打つとおり、ほぼすべての言語に対応した強力なエディタとなっている。
なにが強力なのかといえば、HTML タグの補完機能が挙げられる。たとえばキーボードの h キーを入力すると、h から類推される HTML タグがリストアップされて、対象を選択できるというものだ。入力ミスは減るし時短にもつながる、大変助かる機能で、プロの現場でもデファクトスタンダードなツールとなっている。
バリデーションチェック
HTML の記述が正しいか（妥当性）確認することをバリデーションチェックという。これは自身の目視によって行うのではなく、一般的にはツールを介して HTML 構文を検証する。
なかでも代表的なもので「Nu Html Checker」が挙がる。HTML の標準化に貢献してきた W3C や HTML の発展に取り組む WHATWG のサイトからもリンクされる頼りのバリデーターだ。
検証作業にわずらわしさを覚えるかもしれないけれど、バリデーションツールによる警告を解消していくことで、無意識にもよい学びになると思う。恐れずにトライしてみてほしい。
リファレンス
リファレンスとして求めたいことが、正確性と網羅性とするならば、MDN Web Docs の「HTML リファレンス」をオススメしたい。
MDN Web Docs は、
ウェブ技術とウェブを支えるソフトウェア、 CSS、 HTML、 JavaScript などについて学ぶための進化し続ける学習プラットフォームです。私たちはまた、詳細におよぶ初心者向けの学習素材を所有しています。
https://developer.mozilla.org/ja/docs/MDN/About
などと謳っていて、さまざまな Web 開発者向けのドキュメントを管理し、提供してくれている。2005年に Mozilla、Google、W3C、Samsung 各社の協力で開始したプロジェクトだ。
そもそも HTML 関連の情報の正確性という観点でいえば WHATWG のドキュメントに及ばないだろうけれど、「HTML リファレンス」は、それに比類しながらも使用例や付随する情報を示しているところが望ましい。
分からないことがあったとき頼れる参考書足るリファレンスは、そばに置いておきたいものだ。ぜひブックマークしておこう。
チートシート
チートシートとは、早見表のことを指す。イメージしやすいところで、年齢早見表や運行早見表だろうか。情報が一覧されていて、一目でサッと参照できるように構成されているものを思い出せるだろうか。
HTML でも、ありがたいことにチートシート（早見表）として Web に公開してくれていて、なかでも「HTML要素チートシート」と「HTML5 入れ子チートシート」をオススメしたい。
まず「HTML要素チートシート」は、現行 HTML の技術仕様の標準規格である WHATWG Living Standard の内容で構成されている。参考にするならば、やはり現行のものでなければ意味がない。
そして、もう一方の「HTML5 入れ子チートシート」は、対象の HTML タグの親子関係を表してくれる優れものだ。HTML は、仕様のなかで包含する親子関係が定められている。たとえば ul タグの子要素に、<li>, <script>, <template> 以外のタグを配置してはならない。こういったことはドキュメントからは、なかなか読み取りにくい情報だったりする。
閲覧した時点（現在 2021/11/18）では W3C に合わせているとのことで掲載していない HTML 要素もあるようだったが、一部、WHATWG Living Standard の内容も適用しているとのことだそう。重要なところは WHATWG のドキュメントを参照してもらうとして、チートシートとしての役割十分といった具合だ。
まとめ
ここで述べたことは、遅かれ早かれ目にしたり、耳にしたりすることだろうと思う。あるいはすでに知っているものもあったかもしれない。ましてや余計なお世話だったかもしれない。
それでも、ひとつでも気づきを得てもらえたならば嬉しい。あなたの今後の活躍を期待して。
HTML 要素
<div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <img>, <a>, <ul>, <ol>, <table>
ツール
Microsoft Edge
Google Chrome
Firefox
Safari
Visual Studio Code
Nu Html Checker
HTML リファレンス
HTML要素チートシート
HTML5 入れ子チートシート
