Webサイトを形作っている言語「HTML」「CSS」「JS」。
この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。
書ける前に読む！*2と、いうことでコードを読むために理解しておくといいHTML、CSS、JSの基本書式をまとめる。
第２回は「HTMLの基本」編。Webサイトの文書構造を司る「HTML」の書式を理解する！
連載一覧：
- 【Webの基礎知識】書ける前に読む！HTML、CSS、JSの書式-1
- 【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2（←いまココ）
- 【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3
- 【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4
- 【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5
目次：
第1回（Webの基礎知識）にも書いたようにHTMLは文書に「タグ」という印を付けて構造化する「マークアップ言語」だ。いきなりこのタグの解説に入りたいところだが、まずはその前に「コメント」について解説する。
コメント
HTMLのコードにはコメント（メモ）が付けられる。コメントはブラウザの処理では無視されて、画面にも表示されない。
<!--コメント-->
テキストテキストテキストテキストテキストテキストテキストテキストテキスト……
<!--と-->の間に入っているテキストがコメントだ。山カッコ< >の中にある感嘆符!とハイフン2つ--でコメントと認識される。
例：
<!--コメントだよ〜〜〜〜ん。テヘヘ-->
今日の国際化社会における世界平和を実現する為には、各国の協調が必要であり、経済と外交と戦争の云々云々云々……
上記はコメントが本文のトーンと全く違うが、ブラウザには表示されないので問題ない。
コメントの主な使用法
- コード修正時にわかりやすくなる件名をメモする。（
<!--左カラム-->など） - 途中経過や問題をメモする。（
<!--ここまで完了-->、<!--表示がおかしい-->など） - すぐに戻す予定の一時的な修正が生じたとき、元のコードをコメントに入れて無効化する。
タグと要素
「タグ」はコンテンツ（テキスト、画像など）を「要素」に変えてくれる印。
<!--通常の要素--> <要素名>コンテンツ</要素名> <!--空要素--> <要素名>
山カッコ< >に要素名を入れた「開始タグ」<要素名>と、スラッシュを加えた「終了タグ」</要素名>でコンテンツを囲うのが基本形。
ブラウザはこのコンテンツとタグの全体を「要素」と認識する。
また、囲うべきコンテンツがない単独の要素もある。こちらはコンテンツが空なので「空要素」と言う。
例：
<h1>吾輩は見出しである</h1> <p>段落や、ああ段落や、段落や<br> ここに改行、入るのである</p>
前回（Webの基礎知識）の「テキスト原稿サンプル」が改行すら再現してないことに驚いた方もいるのではないだろうか。そんなん、メモ帳以下やん！と。
HTML はこのタグがあって初めて動いてくれる言語で、それが無いと改行すらしてくれないのである。
要素のネスト構造
正しいネスト構造
HTMLは複数の要素を「ネスト（入れ子）」構造にできる。ネストにするとき、開始タグと終了タグの位置はとても重要だ。
下記は正しいネスト構造になっている例。
<!--無問題なネスト--> <section> <h1>吾輩は見出しである</h1> <p> 段落や、ああ段落や、段落や<br> ここに改行、入るのである </p> </section>
親要素（section要素 *6：節）の中に子要素（h1要素、p要素）がネストになっている。
このように子要素のタグの前にはタブや半角スペースなどでインデント（字下げ）しているとネスト構造がわかりやすい。
問題があるネスト構造
よくあるのは終了タグの「入れ替わり」「抜け」「ダブり」だ。
「入れ替わり」の例：
<!--section要素とp要素の終了タグが入れ替わってるYo！--> <section> <h1>吾輩は見出しである</h1> <p> 段落や、ああ段落や、段落や<br> ここに改行、入るのである </section> </p>
「抜け」の例：
<!--p要素の終了タグが抜けてるYo！--> <section> <h1>吾輩は見出しである</h1> <p> 段落や、ああ段落や、段落や<br> ここに改行、入るのである </section>
「ダブり」の例：
<!--p要素の終了タグがダブってるYo！--> <section> <h1>吾輩は見出しである</h1> <p> 段落や、ああ段落や、段落や<br> ここに改行、入るのである </p> </p> </section>
コードを何度も修正しているとこういうことがよく起こる。開始タグと終了タグの位置は常に意識したい。
属性
属性の基本形
タグの中には要素に対する様々な「属性（設定）」を入れられる。
<!--通常の要素--> <要素名 属性名="属性値">コンテンツ</要素名> <!--空要素--> <要素名 属性名="属性値">
要素名のあとに半角スペースを空け、属性名="属性値"という風に属性名と属性値をイコール=で繋ぐ。属性値はダブルコーテーション" "で囲う。*7
例：
<!--通常の要素--> <a href="setsumei.html">コチラ</a> <!--空要素--> <img src="face.jog">
複数の属性
一つの要素には複数の属性を設定できる。
<!--通常の要素--> <要素名 属性名="属性値" 属性名="属性値">コンテンツ</要素名> <!--空要素--> <要素名 属性名="属性値" 属性名="属性値">
属性と属性の間は半角スペースを空ける。
例：
<!--通常の要素--> <a href="setsumei.html" target="_blank">コチラ</a> <!--空要素--> <img src="face.jog" alt="顔写真">
id名とclass名
使用回数
「属性」の中で特に重要なのは「id属性」と「class属性」だ。いずれも要素に命名ができる。
HTMLは同じ種類の要素がいくつも存在し得るが、命名することで要素の識別がしやすくなる。*14
<!--id属性--> <要素名 id="id名"> <!--class属性--> <要素名 class="class名">
id属性とclass属性の違いは使用回数だ。
id名はページ内に一度しか使えないため、固有な名前を付ける。class名はページ内に何度でも使えるため、汎用的な名前を付ける。
例：
<!--ダメな命名：idが2個あるYo!--> <p id="name">イイダリョウ</p> <p id="name">ヤマダタロウ</p> <!--改善例：複数になりそうな要素はclassでOK！--> <p class="name">イイダリョウ</p> <p class="name">ヤマダタロウ</p>
複数のclass名
一つの要素には複数のclass名を設定できる。
<!--複数のclass名--> <要素名 class="class名 class名 class名">
class名とclass名の間は半角スペースを開ける。半角スペースを開けるところは先ほどの「複数の属性」と似ている。
例：
<!--複数のclass名--> <img src="face.jpg" class="face l_size">
img要素にclass名が 2つ（"face"と"l_size"）付いている。
命名ルール
id名、class名には以下の命名ルールがある。
- 使える文字は半角英数とハイフン
-、アンダースコア_のみ。 - 一文字目はアルファベットから開始する。数字や記号は使えない。
- アルファベットの大文字、小文字は区別される。
下記はこれまでの内容を反映した例。
例：
<p>赤点は以下の3名である。</p> <ul id="akaten"> <li id="iida" class="name booby">イイダリョウ</li> <li id="yamada" class="name">ヤマダタロウ</li> <li id="kawata" class="name">カワタジロウ</li> </ul>
ul要素*15（リスト）に"akaten"というid名が付いている。- その中に
li要素*16が入っていて、それぞれに固有のid名が付いている。 - 全ての
li要素に"name"というclass名が付いている。 - 一つ目の
li要素にだけ"booby"というclass名が付いている。
パス（URL）
次は「属性値」の中でHTMLのリンク（ハイパーリンク）を特徴付ける「パス（URL）」の書式を解説する。 ページやファイルのパスには「絶対パス」と「相対パス」がある。
絶対パス
絶対パスは主に外部サイトのページやファイルを指定する書き方。
例えばa要素（リンク）の場合は下記のような書式になる。
<!--絶対パス--> <!--Topページへのリンク--> <a href="http://ドメイン/ページ名">コンテンツ</a> <!--下層ページへのリンク--> <a href="http://ドメイン/ディレクトリ/ページ名">コンテンツ</a>
絶対パスはドメイン（http:〜）からページ名まで全てを書く。*17
例：
<!--絶対パス--> <!--Topページへのリンク--> <a href="http://idr-zz.hatenablog.com/index.html">コチラ</a> <!--下層ページへのリンク--> <a href="http://idr-zz.hatenablog.com/entry/toukou.html">コチラ</a>
なお、ページ名がindex.htmlの場合は省略することができる。
例：
<!--絶対パス--> <!--index.html表記--> <a href="http://idr-zz.hatenablog.com/index.html">コチラ</a> <!--index.html省略（同じ挙動）--> <a href="http://idr-zz.hatenablog.com/">コチラ</a>
相対パス
相対パスは同一サイト内のページやファイルを指定する書き方。
見ているページを基準として相対的な位置を指定する。
例えばimg要素（画像）の場合は下記のような書式になる。
<!--相対パス--> <!--同一階層の画像--> <img src="ファイル名"> <!--子階層の画像--> <img src="子ディレクトリ/ファイル名"> <!--親階層の画像--> <img src="../親ディレクトリ/ファイル名">
- 相対パスはドメイン（
http:〜）部分を省略できる。*18 - 同一階層はそのままファイル名を書けば良い。
- 子階層を指定する場合はディレクトリ（フォルダ）名の後にスラッシュ
/を書く。*19 - 親階層を指定する場合は、ディレクトリ名の前にドットを2つとスラッシュ
../を付ける。*20
例：
<!--相対パス--> <!--同一階層の画像--> <img src="face.jog"> <!--子階層の画像--> <img src="img/face.jog"> <!--親階層の画像--> <img src="../img/face.jog">
- 同一階層「ページと同一階層にある画像
face.jpgを表示」という意味になる。 - 子階層「ページと同一階層にある
imgディレクトリの中の画像face.jpgを表示」という意味になる。 - 親階層「ページの親階層にある
imgディレクトリの中の画像face.jpgを表示」という意味になる。
ページ内リンク
a要素（リンク）は通常はページの先頭にジャンプするが、id名が付いた要素を指定するとその要素の頭にジャンプする。
これを「ページ内リンク」という。スクロールに時間がかかる縦長ページなどでよく使われる。
<!--ページ内リンク--> <!--同一ページのid--> <a href="#id名">コンテンツ</a> <!--別ページのid--> <a href="ディレクトリ/ページ名#id名">コンテンツ</a>
- id名の前にハッシュ
#を付けるとid名指定の意味になる。 - 別ページのid名を指定する場合はページ名の後ろにハッシュ
#とid名を続ける。
例：
<!--ページ内リンク--> <!--同一ページのid--> <a href="#iida">コチラ</a> <!--別ページのid--> <a href="about/profile.html#iida">コチラ</a>
- 同一ページ「ページ内の
iidaというid名が付いている要素にジャンプする」という意味になる。 - 別ページ「
aboutディレクトリ内のprofile.htmlページ内のiidaというid名が付いている要素にジャンプする」という意味になる。
HTMLの必須要素
下記はどのWebページにも必ず入っているHTMLの必須要素。
<!DOCTYPE html> <html> <head>ページの設定</head> <body>ページのコンテンツ</body> </html>
<!DOCTYPE html>は一番先頭に入る必須要素で「DOCTYPE宣言」という。- その下の
html要素も必須要素で、この中にhead要素とbody要素が入っている。 head要素にはページの様々な設定がある。body要素には画面に表示されるコンテンツがある。
HTMLサンプル
最後に、前回（Webの基礎知識）に用意した「テキスト原稿サンプル」を下記のように打ち替えてみた。
例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>イイダリョウ | クモのようにコツコツと</title> <meta name="description" content="Webデザイナー。神奈川県在住。 丹沢山地と相模湾の自然に囲まれて暮らしています。"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="css/gaibu.css"> <script src="js/gaibu.js"></script> </head> <body> <section id="profile"> <h1>イイダリョウ</h1> <p class="detail">Webデザイナー。神奈川県在住。 丹沢山地と相模湾の自然に囲まれて暮らしています。</p> <p class="link">さらに詳しい情報は<a href="http://idr-zz.hatenablog.com" target="_blank">コチラ</a></p> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/305282/profile/profile-512.jpg" alt="顔写真"> </section> </body> </html>
属性の詳しい説明は省くが、要素を上から順番に解説する。
head要素の内容
上記に書いたようにhead要素はページの様々な設定が入る。
meta要素は文書情報。charset属性は文字コード。*21文字化け対策のためhead要素の一番最初に書く。WebブラウザではUTF-8が推奨されている。title要素はページ名。ブラウザのタブやブックマーク、Google検索結果などに表示される。- その下の
meta要素はページの説明文（discription）。こちらもGoogleの検索結果などに表示される。 - さら下の
meta要素にはレスポンシブ（スマホ表示）の切り替え（viewport）を設定している。 link要素で外部CSSファイルを読み込んでいる。script要素で外部JSファイルを読み込んでいる。
body要素の内容
body要素にはこれまで出てきた主要な要素を入れた。*22
section要素の中に、h1要素、2つのp要素、img要素が入っている。section要素には"profile"というid名が付いている。p要素には"detail"、"link"というclass名が付いている。class名"link"のp要素にはa要素（リンク）が入っている。img要素で画像を表示している。
上のコードのブラウザ表示のサンプル。
「Result」タブが実際のブラウザでの表示だ。「HTML」タブにはHTMLコードがある。*23
HTMLだけだとまだ味も素っ気も無く、プレーンテキストに近い表示だ。
しかし、見出しは大きな太字になり、段落に改行も効いた。 リンクも効いて、画像も表示されている。
GitHubにソースコードを公開（2020/07/24追加）
※参考：HTML_CSS_JS_formats/index.html at master · ryo-i/HTML_CSS_JS_formats · GitHub
最後に：次回はCSS編！
「読めるぞ！私にもHTMLが読める！！*24」と、なっていただけただろうか。
次回は第二の言語、Webサイトの見た目を彩る「CSS」の書式を解説する。
※次回： 【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 idr-zz.hatenablog.com
本連載は、これからWebサイト制作を始めてみたい方を念頭に、当ブログの記事中に出てくるWeb系の単語の「出発点」になることを目指して書きました。
なるべく平易な言葉で、段階的な説明を心がけたつもりです。（書きながら自分自身の復習にもなりました）
もし内容に不明点、おかしい点などあれば（優しく）ご指摘いただけると幸いです。
※参考：【HTML、CSS、JSの書式】まとめ
qiita.com
*1:ソースコード。人が書いたコンピュータへの命令のこと。
*2:某胃腸薬
*3:h1要素のhはheader（見出し）の略。h1〜h6までの段階がある。
*4:p要素はparagraph（段落）の略
*5:br要素はbreak（改行）の略。
*6:section要素は見出しと内容を「節」としてセクショニング（グループ化）する要素。
*7:属性値がない単独の属性もある
*8:a要素はanchor link（アンカーリンク）でリンクを設定する。
*9:hrefとはなんだろう。調べたらHypertext Referenceの略とのこと。わかるかい！って気分だ。属性値がリンク先のURL。
*10:img要素はimageの略で画像を表示する。
*11:src属性はsource（ソース）の略。属性値が表示する画像ファイルのURL。
*12:taeget属性はリンク先の設定で_blankは別タブで開く
*13:alt属性のaltはalternateの略で画像の代替テキストのこと。
*14:そして、CSSやJSの設定の自由度が増す。
*15:箇条書きの要素。ul要素はunorderd listの略で番号無しのリスト。他にol要素（ordered list：番号付きリスト）、dl要素（definition list：項目付きリスト）もある。
*16:listの略ね
*17:セキュリティ設定（SSL/TLS）を強化したページのURLには「https:」と「s」が付いている。
*18:ドメインに変更があった時に影響を受けないメリットがある。
*19:孫階層は「子ディレクトリ/孫ディレクトリ/ファイル名」
*20:祖父階層は「../../祖父ディレクトリ/ファイル名」となる。
*21:「あ」「a」などの文字と、機械が理解できる二進法コードを紐付ける決まりで、いくつかの種類がある。
*22:他にtable要素（表）、form要素（フォーム）、div要素（division：汎用的ブロック）、b要素（bold：テキストの強調）、span要素（汎用的インライン）などもよく見られる。
*23:CodePenの仕様上、body要素のみ入れている
*24:赤い彗星
