2023年4月6日木曜日

HTML備忘録: HTML文書の基本

HTML文書の基本

前書き

このページは、HTML (Standard)に関する情報を備忘録的にまとめたもののひとつです。
専門家がまとめたリファレンスページと違い、専門的かつ高等な情報はありませんのでご注意ください。

HTML文書とは

HTML文書は、テキストデータの一種です。

何も指定しなければプレーンテキスト(文字のみの平文)のように表示されますが、「改行」や「水平タブ」といった文書の整形に使われる特殊な処理が無効となるため、すべての文字が1行で羅列される結果となります。
(画面からはみ出した行が見切れるか折り返されるかは文書閲覧に使用したアプリによる)

プレーンテキストと異なり、文書のレイアウトや装飾、画像挿入などといった指示を「タグ」と呼ばれる専用書式の文字列で指定し、それを再現できる専用のソフトウェア(Webブラウザ等)で開くことにより、リッチテキストのような文書表現が可能となります。
元々はマークアップ文書作成用に生まれた文書形式でしたが、現在ではマルチメディア方面に機能が拡張され、外部のスクリプトやプラグイン等と連携すれば動画や音楽を配信するメディアページや動的アプリケーションなども作成できるようになっています。

HTMLタグとは

HTMLタグは、半角の「<」から始まり、半角の「>」で終わる文字列です。

この2つの記号の間に特定の文字列(要素)を記載することにより、HTML文書の構造や装飾等を表す専用文字列として機能するようになります。
なお、この仕様によりHTML文書内に直接「<」「>」を記述する事はできないため、これらの記号は対応する文字コードに置き換える必要があります。

通常、HTMLタグは「開始タグ」と「終了タグ」のセットで使用されます。
開始タグはHTMLタグの基本書式に沿って「<ABCD>」などと表し、終了タグは「<」の後に「/」を挿入した「</ABCD>」などと表します。
要素の適用範囲を明確にするため、開始タグと終了タグは通常ワンセットで用いられます。
例外的に、開始タグだけで完結する一部の要素は終了タグなしで用いても良いことになっていますが、現在では要素が完結していることを明確化するため、「>」の前に「/」を挿入した「<EFGH ...... />」などの書式を用いる場合が多いようです。

HTML文書の基本構造

良く用いられるHTML文書の基本構造は、おおむね以下のとおりです。

<html>
<head>
<title>HTML文書</title>
</head>
<body>
これはHTML文書です。
</body>
</html>

実際には、これらの行の前に「!DOCTYPE」のタグ情報が挿入されます。

これはHTMLに複数のバージョンがあった時代、表示互換性の問題を解決するためバージョン情報を明示する目的で使用されていた、古い仕様に基づく文書宣言です。
現在はバージョンが統合されているため、一般的に省略しても表示に問題は生じないとされています。
しかし最近までこの情報を読み込んでHTMLバージョンを切り替えていたWebブラウザアプリがあったとも言われており、現在でも意図しない表示になる事を予防するために最初に記述するのが通例となっているようです。

html

「html」で囲んだ範囲は、HTML文書として取り扱ってほしい部分の明示になります。
現在は、音声読み上げなどのユニバーサル機能に対応するため最初に「言語」を明記する事が推奨されており、その情報をhtml要素内に記述するケースが増えています。

head

「head」で囲んだ範囲は、HTML文書の付随情報(メタデータ)として扱ってほしい部分の明示になります。
元々は「ページタイトル」「使用した文字コード」「前後ページとの関係性」など、複数のHTMLページを文書として取り扱う際の文書構成に関わるデータをまとめるエリアでしたが、現在では「検索エンジン」「各種SNSサービス」などの外部サービスと連携するための情報を記載する目的でも使用されています。
また、HTML文書の装飾やレイアウトを指定する「スタイルシート」、動的な表示切替に使用されるJavascript等の「スクリプト」を外部データからインポートする際にも使用されています。

body

「body」で囲んだ範囲は、HTML文書として実際に表示してほしい部分の明示になります。
Webブラウザアプリ等で実際に表示される内容は、この部分に記述された文書を整形したものになります。

0 件のコメント: