【HTML】HTML・HTML要素・HTML属性とEmeetとは
はじめに
プログラミングを行う上で欠かせないHTML言語について、公式リファレンスをプログラミング初学者でも理解できるようまとめている。
HTMLの歴史[1]
| 年 | バージョン |
|---|---|
| 1990年 | HTML 1.0 |
| 1995年 | HTML 2.0 |
| 1997年 | HTML 3.2 |
| 1998年 | HTML 4.0 |
| 1999年 | HTML 4.01 |
| 2014年 | HTML 5.0 |
| 2016年 | HTML 5.1 |
- 「HTML」は現在（2024年）HTML5.1というバージョンである。
- 「SGML」と言うマークアップ言語の派生である。
- 似たものに「XML」や「XHTML」などがある。
HTML（HyperText Markup Language）とは[2]
人間を例に用いると...
人間の骨格は、「頭蓋骨」「肋骨」「骨盤」「大腿骨」「脛骨」「腓骨」など様々な骨で構成されています。<head></head>要素で定義している部分は、「頭蓋骨」,<body></body>で定義している部分は、「四肢・体幹の骨」というような感じで人体模型を作るようなイメージでWebページの骨組みを作成していく。
ちなみに、cssは軟部組織（筋肉など）を作るようなイメージ。
人間に例えた場合のHTMLのイメージ
まとめるとHTMLは、人間のイメージで言うと骨模型をイメージしながらwebページの「骨組み」を作るとよい。cssは人間の軟部組織等（筋肉、靭帯、神経など）をイメージしながら、webページの「装飾、彩り」を作るとよいことになる。
HTML要素（タグ）とは
HTMLタグの要素構造
要素の使用イメージ
実際のエディタ画面（左）とブラウザの画面（右）
-
<head>要素を用いて、ヘッダー（頭蓋骨）を定義している。 -
<body>要素を用いて、ボディー（脊柱、骨盤、大腿骨など）を定義している -
<h1>要素を用いて、見出し（胸郭など）を定義している。 -
<p>要素を用いて、段落（第〇肋骨）を定義している。
現状イメージが沸いていれば問題ないかと思います。様々な要素がありますので、下記の公式リファレンス（HTML要素の種類と役割一覧）からその他の要素の学習を進めて頂ければと思います。
HTML属性とは
属性の使用イメージ
HMTL要素と属性の使用例
-
<html>という要素に対して、lang属性が使用されている。
＝文書の骨格を決める要素に対して、言語を指定する属性が使用されている。（lang=jaとなっているため日本語の言語指定ということになる） -
<meta>という要素に対して、chartset属性が使用されている。
＝文書のメタデータ(誰が書いたのかや要約など)を記述する要素に対して、文字のエンコーディング（文字コード）を指定する属性が使用されている。
（chartset="UTF-8">となっているため、その文書の文字コードはUTF-8で記述するということになる）
下記の公式リファレンス（HTML属性の種類と役割一覧）からその他の属性の学習を進めて頂ければと思います。
グローバル属性とは
属性は、ある要素に対して必ず付与できるわけではない。
例えば<html></html>という文書の情報を示す要素に対して、srcというURLを埋め込むための属性は使用できない。その文書の言語を指定するlangという属性は使用できる。
# ×
<html src="URL:~~~">
</html>
# 〇
<html lang="ja">
</html>
では、<p>という文章を示す要素に対して、lang属性を付与するとどうなるかというと使用できる。
# 〇
<p lang="ja">
</p>
このように属性は要素によって使用の可否が異なる。lang属性のようにすべての要素に使用可能な属性のことをグローバル属性という。
メタデータ（meta data）とは
文書全体を説明する情報のこと。HTMLでは<head>に記述する。
VScodeでEmmetを用いてHTMLのひな形を作成してみよう
Emmetとは
1:VScodeを開き、!を押してEnterを押す。
2:HMTLの型が表示されるかを確認する。
Emmet チートシートを活用する
チートシートを活用することでコーディングスピードが上がるので活用すると良い。
HTMLリファレンス
おわりに
HTMLは、webページの骨組みの役割があることがわかった。プログラミングを行う上での基本中の基本であるため、リファレンスを見直しながら、使用できる要素や属性の幅を広げていきたい。
Discussion