（できるだけ）正しい HTML を書くために ～概要編～
皆さん HTML 書いてますか？
HTML ってタグで囲うだけなので、PHP や JavaScript みたいなプログラミング言語と比べて簡単ですよね。
しかし、簡単故に適当にネットでググって身につけた知識で正しくない HTML を書いている人がそこそこいます。
……残念ながら私の周りでも信じられないぐらい適当なHTMLを書く人が少なくありません。
HTML は簡単ですが ”正しく” 書こうとすると、実は結構難しい言語です。
私自身、完全に正しく書けてるかと言われると自信がないですが、少しでも皆さんが正しい HTML を書くための足がかりとなれれば幸いです。
この記事の対象者
・「HTML？とりあえず <div> とか <span> とかで囲っとけばいいんでしょ？」と思ってる人
・「HTML とはマークアップ言語である」← この文の意味をきちんと説明できない人
・HTML を書くときにアウトラインを意識してない人、または「アウトライン？なにそれ、美味しいの？」状態の人
HTML とは？
HTML は略さずに書くと Hyper Text Markup Language といいます。
「ハイパーテキスト」とは簡単に言うとリンク機能のある文書のことです。
「マークアップ」は調べると一番に「値上げ」という意味が出ますが、この場合は「印を付ける」という意味の方が合ってますね。
上記のことを踏まえて、すごいざっくり意訳すると
リンク機能のある文書を実現するための印を付ける言語
となるでしょうか？（英語めちゃくちゃ苦手なので間違ってたら指摘ください）
HTML にはバージョンがあり、執筆時点（2020年2月）では HTML5 が最新のバージョンです。
HTML5 が出たのは 2014 年ぐらいなので稀に調べていると HTML4 の情報が見つかったりするので、HTML についてググってるときは書かれた時期を確認してどのバージョンの情報なのか注意してください。
もし、
俺は HTML を極めて HTML 界の神になる！！
という方がいらしたらぜひ W3C の仕様書を読んでください！
W3C という団体が HTML について仕様をまとめてるので、ここに HTML のすべてが詰まってます。
HTMLの特徴
本文中に「<」と「>」で囲まれた「タグ」と呼ばれるデータを埋め込むことで、文書の構造やデータの意味などを記述することができます。
例えば、下のような <p> で囲まれた部分は段落を意味します。
<p>これは段落です。</p>その他にも、HTML を使うことで
・見出し、表、リストの表現
・画像の埋め込み
・リンクの設置
・フォームの設置
・ビデオ、音声の埋め込み
が可能になります。
先程、
本文中に「<」と「>」で囲まれた「タグ」と呼ばれるデータを埋め込むことで、文書の構造やデータの意味などを記述することができます。
と書きましたが、文字の大きさや配置など見た目に関することは HTML の範疇ではありません。HTML は文書構造を表すための言語です。（プログラム言語でもありません！！）
稀に「文字の大きくしたいなら h2 や h3 とかで囲うといいよ」みたいなことを言っている人がいますがそれは間違いです。
HTML 文書の見た目は CSS という言語で記述します。
見た目を変更したい場合は CSS で変更するようにしましょう。
HTML の書き方のルール
HTML 文書では「タグ」を使って文書構造を表現すると説明しました。基本的には以下のように書きます。
終了タグはタグ名の前に必ずスラッシュが入ります。
また、開始タグから終了タグまでのひとかたまりを「要素」と呼びます。
どの要素も基本的には「開始タグ」と「終了タグ」を記述する必要がありますが、一部例外が存在します。
<br><hr><img><input>これらは空要素型と呼ばれ終了タグを記述してはいけません。
タグは大文字で記述しても小文字で記述しても仕様上は問題ありませんが、小文字で記述するようにしましょう。
<P></P> ← ✕
<p></p> ← ○また、多くの要素に置いて終了タグの記述を省略しても仕様上は問題ありませんが、省略せずに記述するようにしてください。
HTML は要素の中に別の要素を入れることができます。
<p>
<span>テキスト</span>
</p>要素の中に要素を入れることを入れ子（ネスト）と呼び、よく使われる記述です。入れ子をする場合はタグの閉じる順番に注意しましょう。
<p><span></p></span> ← ✕
<p><span></span></p> ← ○各要素には属性を設定することができます。
例えば以下のように書くことで「class」という属性を設定しています。
<p class="aaa">テキスト</p>属性は必ず「属性名="値"」の形式です。また、属性名は大文字でも小文字でも仕様上問題ありませんが、小文字で記述するようにしましょう。
値が特定の条件を満たせばダブルクォーテーション（"）で囲う必要はありませんが、ややこしいので必ずダブルクォーテーションで囲うようにしましょう。
半角スペースを入れることで複数の値を設定できます。
<p class="aaa bbb2">テキスト</p>HTML では「<」や「>」、「&」などいくつかの文字が特別な文字として扱われます。
例えば「<」と「>」はタグを囲うものとして利用されるので、それと誤解される可能性を回避するためにも、テキスト中で使用する場合には（ダブルクォーテーションで囲まれた属性値としてでもあっても）実態参照で記すべきです。
「<」を実体参照で表すときは
<と書きます。また、「>」の実体参照は
>と書きます。
例えば
<p>日本の面積 < ロシアの面積</p>という要素は
<p>日本の面積 < ロシアの面積</p>このように記述するべきです。
また、「&」についても、実体参照の開始文字と誤解される可能性を回避するために
&という風に記述するように注意してください。
例えば
<p>ラブ & ピース</p>は
<p>ラブ & ピース</p>と記述します。
コメント
HTML 文書内にコメントを書くことができます。
コメントとして記述した内容はレンダリングされないのにで単なるメモ書きとして利用することができます。コメントを記述したい場合は以下のように記述します。
<!-- コメント -->
<!-- 複数行にわたって
コメントを書くことも可能です。-->「<!--」でコメントを開始し、「-->」でコメントを終了できます。
コメントの中に連続したハイフンを入れるとコメントが終了したと認識される可能性があるため、2つ以上の連続したハイフンを含めないようにしましょう。
HTML 文書の構造
HTML 文書は
・HTML バージョンを含む行
・宣言的ヘッダの部分
・文書の実際のコンテンツを含む本体
の 3 つの部分から成り立ちます。
・HTML バージョンを含む行
DOCTYPE 宣言と呼ばれます。この宣言はその文書が HTML 文書であり、かつどのバージョンの HTML で記述されたかを明示するために文書の先頭に記述するものです。
<!DOCTYPE html>という風に記述します。このように記述した場合、使用されるバージョンは自動的に HTML5 になります。
・宣言的ヘッダの部分
head 要素を指します。head 要素内にはその HTML 文書についての情報（メタデータ）を記述します。
具体的には
・文書の文字コード
・文書のタイトル
・検索エンジン向けの情報
・表示の仕方に関する情報
などを記述します。
多くのメタデータは省略することが可能ですが、title 要素については必ず記述する必要があります。
・文書の実際のコンテンツを含む本体
body 要素を指します。
body 要素の中にテキスト、画像、表といったコンテンツを記述します。
実際にこの 3 つの部分を満たした必要最低限の HTML は以下のようになります。
1 つ 1 つ詳しく見ていきましょう。
HTML バージョンを含む行である、DOCTYPE 宣言です。
この HTML 文書が HTML5 で書かれていることを表しています。
html 要素です。
一番外側の要素として必ず書かなければいけない "おまじない" のようなものです。また、この画像では lang 属性を記述することでこの HTML 文書は全体的に日本語の文書であることを明示しています。
宣言的ヘッダの部分、head 要素です。
この画像ではメタデータとして、 HTML 文書の文字コードと、HTML 文書のタイトルを記述しています。
文書の実際のコンテンツを含む本体、body タグです。
HTML 文書の本文を記述する部分になります。この画像では body タグの中身は無いので、本文が無い文書となります。
実際にこの必要最低限の HTML を書いた HTML ファイル用意してブラウザで開くと真っ白なページが表示されると思います。
また、ブラウザのタブには title 要素の中身が表示されているはずです。
長くなりましたが以上で ～概要編～ を終わりにします。
次回は ～基礎編～ としてよく使う要素や属性について説明していこうと思います。
もし間違っていることを書いていたら Twitter で DM ください。
もし、恵んでやってもいいかなと思ってくださったらぜひお願いします