概要
HTMLの書き方について、IT 初学者向けにまとめた記事。
この記事は、初心者向けHTML解説動画のまとめ記事です。
より詳細な説明を聞きたい方は動画をご覧ください。
HTML は HTML ファイルの中に記載する
拡張子 .html のファイルを用意し、その中に記載する。
ファイル名は、「test.html」など、.html の前がテキトーな名前でも動くが、
トップページになるファイル名は「 index.html 」とするのが世界共通のお作法となっている。
HTML ファイル１つで、１ページ
基本的には、HTML ファイル１つで、Webブラウザ１画面分となる。
つまり、100ページのブログサイトは、100個の HTML ファイルが必要ということになる。
今後、学習する Web 技術の中には、技術的な仕組み上、１ページ分ではないこともあるが、概念としては本来１ファイル１ページである。
HTML の記法（基本）
HTML は基本的に、「タグ」と呼ばれる目印で文字や値をサンドイッチの様に挟み込み、表現する書き方。
<タグ>画面に表示する内容</タグ>
タグを含めた、全体を「 要素（Element）」と言う。
これが画面内の１部品となる。
「タグ」は、世界共通であらかじめ決められた英数字が当てはめられる。
非常にたくさんの種類があるので、実際に画面を作る時に、検索をしながら徐々に覚えていくしかない。
h1, span, div, input, table, button, textarea ...など
開始タグと終了タグ
先頭のタグを「開始タグ」、末尾のタグを「終了タグ」と呼ぶ。
<タグ>画面に表示する内容</タグ>
^^^^ ^^^^
開始タグ 終了タグ
タグの中には、開始タグのみで要素が作れるものもある（終了タグがない）
<タグ 画面に表示する内容・設定>
HTML は見やすく書こう
下記の２つは、実際に画面に表示されると、どちらも同じ結果（表示）になる。
例１）
<タグ>画面に表示する内容</タグ>
例２）
<タグ>
画面に表示する内容
</タグ>
ブラウザに読み込まれる際、改行や空白は無視される（一部の例外あり）。
ブラウザは、ソースコードを解析する際に、タグが正しく書かれてさえいれば、１行に１万文字の HTML が書かれていても、問題なく表示することができる。
ただ、私たち人間が開発をする上で、ソースを見やすくするために、例２）のように、改行 や 「インデント（字下げ）」 を使って見やすく書くのがよい。
属性 （Attribute）
タグには、オプション指定機能が存在し、要素の見た目を変化させたり、表示内容を補足したりすることができる。これを「 属性（Attribute）」と言う。
属性は、開始タグの中に設定し、属性の右側には「値」が設定される。
<タグ オプション(属性)=“ついでに、こんな事もしてほしい(値)”>
画面に表示する内容
</タグ>
どんな属性/値が設定できるかは、タグによって決まっている。
これも、開発しながら徐々に覚えていくしかない。
タグは入れ子にできる
タグによっては、以下の様に「入れ子構造」にすることができる。
入れ子になっている場合、タグの内側にある他のタグも全て含めて「１つの要素」とみなす。
<タグA>
<タグB>
<タグC>内容１</タグC>
<タグD>内容２</タグD>
</タグB>
</タグA>
このように、入れ子のタグもたくさん用意し、ようやく画面１ページ分となるイメージ。
画面表示に最低限必要な４タグ
画面を構成するタグとしては、以下のタグが最低限必要
<!doctype html> 👈 ❶
<html> 👈 ❷
<head> 👈 ❸
ブラウザには表示されないけど、大切な設定情報
</head>
<body> 👈 ❹
実際にブラウザ画面に表示される内容
</body>
</html>
❶ doctype ：HTML の１行目に必ず記載する宣言文（HTML のバージョンと仕様を定義する）、書き方が特殊
❷ html ：中身が HTML であることを宣言するタグ
❸ head ：画面には出ないが、色んな設定をする領域
❹ body ：実際に Web ブラウザ画面に表示される領域
実際に、画面表示に必要なHTMLの中身は以下の通り（それぞれの説明はまた別記事で）。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブ表示テキスト</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<!-- 画面に表示される領域 -->
</body>
</html>
コメント機能
HTML には「コメント」という機能があり、コメント化した部分は画面には表示されない。
<!-- お問い合わせ時の注意事項 --> 👈 ここは画面に表示されない
<p>以下の項目は全て入力してください。</p>
コメントを使って、開発者向けにメモを残す事ができる。
また、これを利用して、画面の要素を非表示にしたりする。
コメント機能を使って、非表示にすることを「コメントアウトする」と言う。
<!-- お問い合わせ時の注意事項 -->
<!-- <p>以下の項目は全て入力してください。</p> --> 👈 ここも表示されない
上記は、一旦画面から消してみるけど、やっぱり後で表示させるかも…といった時に利用する。
以下の様に、複数行まとめてのコメントアウトもできる。
<!--
お問い合わせ時の注意事項
<p>以下の項目は全て入力してください。</p>
-->
コメント機能の用途は以下の通り
- 他の人が見た時のために、わかりやすくメモを残す
- 自分が久しぶりに見てもわかるように、メモを残す
- 表示されない仕様を利用して、一時的に要素を非表示（コメントアウト）にする
参考
この記事は、以下の動画のまとめ記事です。詳細は動画をご覧ください。