アイキャチ画像：Online illustrations by Storyset
HTMLの基礎知識
HTML5が標準仕様から廃止され、HTML Living Stndardが標準仕様となった現在でもHTMLのマークアップ言語はHTML5を使用して文法を記述してくことが可能です。HTML（ハイパーテキストマークアップランゲージ）はタグを使って文書内の要素を定義することで、ページ内の情報を構造化し見出しや本文、サイドバーなどを明確にする役割を担っています。一方でCSSの役割は装飾（デザイン）を担当します。
基本的な書式
HTMLはテキストのコンテンツ各部分をタグで囲って、その部分が文章の構成要素としてなんであるのかを（情報）ブラウザに伝える言語です。文章内の各構成要素のことをHTMLでは要素（Element）と言い、要素の前につけるタグを開始タグ（Start Tag）、後につけるタグを終了タグ（End Tag）と言います。
HTMLではタグで囲った範囲が要素となる
要素の中には、タグで囲うコンテン（要素内容）がない開始タグだけでブラウザに情報を伝える要素があり、これらの要素を空要素（Void Element）と言います。空要素には終了タグは指定出来ませんので注意が必要です（HTML構文の場合）。
例としてbr要素の場合どちらの書き方をしても可能です。
コード
<br>
<br />開始タグの要素名の後には、空白文字で区切って属性（Attrbutre）を指定することができます。順不同で複数指定することが可能です。値を空にしても可能です。
例としてimg要素の場合
HTMLの全体構造
最初に、DOCTYPE宣言（文書方宣言）をHTML文書の先頭に記述（配置）します。次にDOCTYPE宣言のあとにhtml要素を配置し、その中にhead要素とbody要素を順に配置します。head要素にはその文章自身に関係する情報を示す要素を入れます。文章のタイトル（表題）となるtitle要素もこのhead要素内に必ずひとつ記述します（例外を除く）。body要素内にはブラウザで表示させるコンテンツとなる要素を記述します。DOCTYPE宣言はブラウザの表示モードを「標準モード」にする目的で指定する。
HTMLの構造
＊DOCTYPE宣言は大文字で書いても、小文字で書いても可能。
コード
<!DOCTYPE HTML>
<!doctype html>コメント
コメントとは、ソースコードの中に書き込んでおくことのできるメモのようなものです。<! – – と – – >で囲んだ範囲がHTMLのコメントとなります。
コード
<!-- コメント -->HTML5のコンテンツモデルとカテゴリ
HTML5より以前のHTML/XHTMLでは、要素は大きく分けて2種類のインライン要素とブロックレベル要素に分類されていました。HTML5からは、このインライン要素かブロックレベル要素かという大きな分類は廃止され、次のコンテンツモデルで示す7つのカテゴリが定義されました。
HTML/XHTMLの正式な文法（Strict）では、ブロックレベル要素以外の要素をbody要素の直下に記述（配置）することは基本的にはできませんでした。HTML5からはブロックレベル要素かどうかという分類はなくなり、従来のインライン要素に該当する要素でも、body直下に配置できるようになりました。インライン要素という分類は、HTML5のフレージングコンテンツ（Phrasing content）とほぼ同じになります。
HTML5要素のコンテンツモデルとカテゴリ
トランスペアレント
HTML5では親要素のコンテンツモデルがそのまま自分のコンテンツモデルになる特別な要素が定義されていて、それらはトランスペアレントと呼ばれています。
トランスペアレント（Transparent）の要素のコンテンツモデルはその親要素とまったく同じになり、コンテンツとして親要素に入れられる要素であれば、それはそのまま自分の内容として入れることができます。
HTML5では次の9つの要素がトランスペアレントとして定義されています。
- a要素
- ins要素
- del要素
- object要素
- audio要素
- video要素
- canvas要素
- map要素
- noscript要素
グローバル属性
グローバル属性とは、すべてのHTML要素に共通して指定できる属性のことを言います。
HTML5のグローバル属性
| 属性名 | 属性値 | 説明 |
|---|---|---|
| accesskey | 文字 | ユニコード1文字よるアクセスキー |
| autocapitalize | none | 自動的な大文字化は行わない |
| off | 自動的な大文字化は行わない | |
| on | 文章の最初の文字を大文字化する | |
| sentences | 文章の際の文字を大文字化する | |
| words | 単語の最初の文字を大文字かする | |
| charactors | すべての文字を大文字化する | |
| class | 文字列（空白文字で区切って複数の名前を指定可能） | 要素に指定するクラス名 |
| contenteditable | true | 編集できる |
| false | 編集できない | |
| dir | auto | 自動 |
| ltr | 左から右に文字を書く | |
| rtl | 右から左に文字を書く | |
| draggable | true | ドラックができる |
| false | ドラックができない | |
| hideen | 論理属性（属性名だけで指定が可能）hideen | 要素を表示しない 要素の内容が関連性がないことを表す |
| id | 文字列「テキスト（空白文字を含むことはできず、必ず1文字以上必要）」 | 要素に指定するID名 他の要素と重複しない固有の名前を指定 |
| inputmode | none | ソフトウェアキーボードを表示しない |
| text | ユーザーの地域に適切なテキストの入力 | |
| tel | 電話番号の入力 | |
| url | URLの入力 | |
| メールアドレスの入力 | ||
| numeric | 数値の入力 | |
| decimal | 実数の入力 | |
| search | 検索用の入力 | |
| is | カスタム要素を識別するための名前（ハイフンが必要） | 要素にカスタム要素を指定する |
| itemid | URLまたはURNで指定 | マイクロデータにおけるアイテムのグローバル識別子を指定します。 |
| itemprop | 通常はアイテム型で定義されているプロパティ名、半角スペース区切りで複数指定可能 | マイクロデータにおけるプロパティ名を指定します。 |
| itemref | プロパティを含む要素に指定したID、半角スペース区切りで複数指定可能 | アイテムの範囲外にあるプロパティを、アイテムと関連付けるために指定します。 |
| itemscope | 値は省略可能 | マイクロデータにおけるアイテムの範囲を示します。 |
| itemtype | 半角スペース区切りで複数指定可能 | マイクロデータにおけるアイテムの型（語彙を定義した仕様）を指定します。 |
| lang | BCP47言語タグ（ja,enなど） | 言語（日本語や英語）の種類 |
| nonce | 自動生成されたランダムな文字列 | コンテンツセキュリティポリシー（CSP）で使用する暗号ノンスを示します。 |
| slot | スロットを識別するための名前 | Shadow DOM内に置かれたスロット（slot要素）との関連付けを指定します。 |
| spellcheck | true | スペルおよび文法のチェックを有効にできる |
| false | スペルおよび文法のチェック無効にできる | |
| style | <p style=”color: #FF0000;”> | スタイルシート（表示方法の指定） |
| tabindex | 整数 | タブキーによる移動の順序 |
| title | テキスト（文字列） | 補足情報（要素にカーソルをあてた時にツールチップとして表示される。） |
| translate | yes | 機械翻訳の対象とする |
| no | 機械翻訳の対象としない |
HTML Living Standardのグローバル属性については、こちらを参照ください。
列挙属性/列挙型属性
hidden、dir、translate、spellcheck、draggable属性は列挙属性になります。
あらかじめ決められたキーワードの中から値を選択する方式の属性のことを「列挙属性」または「列挙型属性」と言います。
＊HTML Living Standardでは、hidden属性は列挙属性に変更になりました。
論理属性/論理型属性
HTMLの属性は「属性名=”値”」の書式で指定しますが、「属性名」だけで指定できる属性もあり、そのような属性のことを「論理属性」または「論理型属性」と言います。例えば、hiddenは表示しないと意味なので、値を指定しなくても表示されなくなります。
コード
hidden=""
hidden="hidden"class属性
CSSでスタイルを適用する要素のグループを指定する、要素が属する種類、分類を示すための属性になります。空白文字で区切って複数指定できます。
コード例
<aside class="advertisement small">
・・・
</aside>id属性
要素に固有の名前をつけるための属性になり、同じページ内の他のid属性に同じ値を指定することはできません。ページ内の特定の場所（要素）にリンクさせたり、JavaScriptやCSSの指定で、特定の1つの要素を対象としたい場合などに使用できます。
コード例
<ul id="navlist">
・・・
</ul>lang属性
HTML側で、webページがどの言語で書かれているかをwebブラウザに伝達したい場合lang属性を使用します。
コード
<!DOCTYPE html>
<html lang="ja">
・・・
</html>
title属性
その要素に関連する補助的な案内や助言的な情報を提供するための属性になりなます。パソコンのWebブラウザではマウスオーバー操作でツールチップとして内容が表示されます。
コード
<p>
<a href="webareba.com" title="webarebaのトップページへ">HOME</a>
</p>dir属性
要素内容のテキストを表記する方向を示す属性になります。値として指定できるキーワードは「ltr（left-to-right）左から右へ」、「rtl（right-to-left）右から左」です。
コード
<p dir="ltr">
今日から、2泊三日で友人と福島県の猫啼温泉に旅行です。
感想は、後日伝えます。
</p>tabindex属性
tabindex 属性は、TAB キーなど、キーボード操作によるフォーカス移動 （Sequential focus navigation） の優先順位を指定します。
コード
<label>First in tab order:<input type="text" /></label>
<div tabindex="0">Tabbable due to tabindex.</div>カスタムデータ属性
カスタムデータ属性は適当な属性や要素がない場合、コーダが任意の要素に独自の属性を追加することのできる属性になります。値は自由に設定ができ、1つの要素にいくつでも指定ができます。
属性名は必ず「data-」という文字列で開始し、その後に1文字以上の文字を設定しなければなりません。
使用例
<article>
<header>
<h1>福島県に友人と2泊三日の旅行に行ってきました。</h1>
<p><time>2024-08-15</tim></p>
</header>
<p data-travel-time="2024-08-15">・・・・・・</p>
<p data-travel-time="2024-08-16">・・・・・・</p>
<p data-travel-time="2024-08-17">・・・・・・</p>
<p data-travel-time="2024-08-15">・・・・・・</p>
</article>表示
福島県に友人と2泊三日の旅行に行ってきました。
・・・・・・
・・・・・・
・・・・・・
・・・・・・