※この記事は、著者がFullStackDeveloperになること、また長年放置してきた基礎知識の復習を真剣に取り組むため、以下のRoadmapに沿って知識をまとめている記事になります
普段エンジニアをやっていると、当たり前のように触れているHTMLですが、具体的なところまではフロントデベロッパーとかでないと中々知らないことも多いかと思います。正直自分も入社後6年、利用はしているものの他者への説明というと、スラスラとは言えないのが現状です。基礎ありきの応用、ということで今回から↑のロードマップに沿う形でエンジニアの基礎を固めなおそうかと思います。
※本記事は一個人が学習目的でまとめているため、内容や記載の解釈に誤りがある可能性があります。もし見つけられましたら、コメント等にてご指摘いただけますと、後学の助けとなりますので幸いです。
目次
HTMLとは
その略称は、業界にいる方であれば皆さんスラスラ言える方も多いのではないかと思います。
以下のサイトが非常にわかりやすい解説でした。
- HTML・・・Hyper Text Markup Language, ハイパーテキスト マークアップランゲージ, ハイパーテキスト マークアップ言語
- HTMLはWebページの構造を表す
- 例えばテーブルの中に何行あるか、とか特定の枠の中にボタンが存在するようにする、とか
- HTMLは一連の要素(HTMLタグ)で構成される
- <html>, <head>,<body>,<title> etc
- HTML要素はブラウザに対しどのようにコンテンツを表示するかを指示する
- 例えば<h1>は「大見出し」として中のコンテンツ(テキスト)を表示するよう、ブラウザに指示する
- HTML要素はコンテンツの断片にラベルを付ける
- 例えば<p>であれば「これはパラグラフ（段落）である」というラベリングがされる
これらをまとめてしっくりきたのが以下でした。
"HTML (HyperText Markup Language) は、ウェブページの構造を指定する記述言語です。"
要素=タグを構成することで、コンテンツを構造的に配置しWebページを作り上げる、そのための言語といったところでしょうか。
HTML要素
ページを作り上げるために、要素を構成することが必要ということを直前に話しましたが、ここではどのような要素で普段ページが構成されているかをいくつか紹介したいと思います。
全量を紹介するときりがないのですが、構成上必須となるものを列挙しようと思います。全量は、現在のところ非推奨を除くと109個(2024/5/25時点)あります。試験勉強みたいに覚えれば意外と覚えられそうな量ですね
<html>
HTML文書(.html)の最上位要素
<head>
文書に関するメタデータ（ex///タイトル: <title>, スクリプト: <script>, スタイルシート: <style>）を含めることができる要素
<title>
ページのタイトルを示す、タブに表示されるページタイトルはこれ
<style>
文書のスタイル情報を含む要素、多くの場合はCSS（Cascade Style Sheet）という形でHTMLから切り離し<link>要素によって参照する形式が多いが、埋め込みも可能
<link>
現在の文書と外部のリソースとの関係性を指定する。URLやファイル名・パス等で関連付ける
<body>
文書における本体部（コンテンツ部）を示す要素
<header>
導入的なコンテンツやナビゲーション等、ページ冒頭にあるべきコンテンツの配置先
<footer>
ページ末尾にあるのが適当なコンテンツの配置先（著作者・著作権情報、関連文書リンク）
<main>
文書の本体の主要な内容を指す、すなわち主題
<h1> ～ <h6>
セクションの見出し、6段階まで用意がある
他にもボタンや入力フィールド、改行やリンク、表などの多様な要素を組み合わせて、ページは作られています。
HTMLの歴史
- 生みの親はティム・バーナーズ・リーさん
- 1990年に概念定義、1991年に形式化し、生まれました。
- 正式な制定はIETF（Internet Engineering Task Force）によって、1993年に正式スタート
- 現在のHTMLバージョンは5.2
- バージョン2.0が1995年
- バージョン3.2が1997年
- バージョン4.0が1999年
- バージョン5.0は2008年にドラフト、2014年に正式リリース
- バージョン5.2は2017年に誕生
といった変遷をたどっています。以外と近年なので衝撃ですよね。
