要素136個（有効107、廃止29）。グローバル属性32個（有効26, 非推奨6)。
情報源
全136個（有効107個、廃止29個）。
| 要素 | 概要 |
|---|---|
<a> |
リンク |
<abbr> |
略語 |
<address> |
メアドや電話 |
<area> |
イメージマップのクリック可能な領域 |
<article> |
自己完結し個別に配信・再利用を意図した構成物 |
<aside> |
メインコンテンツと間接的な関係しか持っていない部分 |
<audio> |
音声 |
<b> |
太字（注意を惹きたい場合、他の特別な重要性が与えられないもの） |
<base> |
基底URL |
<bdi> |
書字方向分離要素 |
<bdo> |
双方向文字列上書き要素 |
<blockquote> |
ブロック引用 |
<body> |
文書の本文 |
<br> |
改行 |
<button> |
ボタン |
<canvas> |
グラフィックキャンバス |
<caption> |
表キャプション |
<cite> |
引用元（作品タイトル） |
<code> |
コンピュータ言語のソースコード |
<col> |
表の列 |
<colgroup> |
表の列グループ |
<data> |
コンテンツ断片に機械可読な値を与える |
<datalist> |
他のコントロールで利用可能な値のセット |
<dd> |
詳細説明 |
<del> |
削除済み文字列 |
<details> |
折りたたみ |
<dfn> |
定義（用語） |
<dialog> |
ダイアログ |
<div> |
コンテンツ区分 |
<dl> |
説明リスト |
<dt> |
説明用語 |
<em> |
強調 |
<embed> |
埋め込み外部コンテンツ |
<fieldset> |
コントロールをグループ化する |
<figcaption> |
図キャプション |
<figure> |
図 |
<footer> |
フッター（関連文書リンク、著作権等） |
<form> |
サーバに送信するコントロールを含める |
<head> |
文書のメタデータを含める |
<header> |
ヘッダ（ナビ、ロゴ、検索フォーム等） |
<h1>〜<h6> |
見出し |
<hr> |
水平線 |
<html> |
文書のルート |
<i> |
英語圏の風習で、慣用句、技術用語、分類学上の呼称などにマークアップする。イタリック体。 |
<iframe> |
インラインフレーム |
<img> |
画像 |
<input> |
入力欄 |
<ins> |
追加されたテキスト |
<kbd> |
キーボード入力 |
<label> |
<input>のキャプション |
<legend> |
<fieldset>のキャプション |
<li> |
リストの項目 |
<link> |
外部リソースへのリンク |
<main> |
<body>の主要な内容 |
<map> |
イメージマップ (クリック可能なリンク領域) を定義する。 |
<mark> |
関連性を表すテキスト |
<menu> |
コマンドのグループ |
<meta> |
メタデータ |
<meter> |
メーター |
<nav> |
ナビゲーション部分（メニュー、目次、索引） |
<noscript> |
スクリプトに対応していない場合に表示する HTML を定義する |
<object> |
外部オブジェクト |
<ol> |
順序付きリスト |
<optgroup> |
<select>内の<option>をグループする |
<option> |
<select>, <optgroup>, <datalist>内で項目を定義する |
<output> |
サイトやアプリの計算結果 |
<p> |
段落 |
<param> |
<object>の引数 |
<picture> |
画像（レスポンシブ対応） |
<portal> |
ポータル（他のHTMLを現在のページに埋め込み、移動がスムーズにできるようにする） |
<pre> |
整形済みテキスト |
<progress> |
進捗表示 |
<q> |
行内引用 |
<rp> |
ルビ代替表示用括弧 |
<rt> |
ルビ文字列 |
<ruby> |
ルビ |
<s> |
すでに適切または正確ではなくなった事柄 |
<samp> |
プログラムからのサンプル出力 |
<script> |
スクリプト |
<section> |
文書の自立した一般的な区間を表す。見出しを含む。 |
<select> |
選択の入力 |
<slot> |
<template>に任意値を挿入する所 |
<small> |
附随コメント（著作権表示や法的表記など） |
<source> |
画像、音声、動画ファイルソース |
<span> |
行内コンテナ（<div>の行内版） |
<strong> |
強い重要性があるテキスト |
<style> |
文書内スタイル |
<sub> |
下付き文字 |
<summary> |
<details>のキャプション |
<sup> |
上付き文字 |
<table> |
表（テーブル） |
<tbody> |
テーブル本体 |
<td> |
表データセル |
<template> |
テンプレート |
<textarea> |
複数行テキスト入力欄 |
<tfoot> |
表フッター |
<th> |
表セルヘッダ |
<thead> |
表ヘッダー |
<time> |
機械可読な形式の日付 |
<title> |
文書題名 |
<tr> |
表の行 |
<track> |
埋め込みテキストトラック（<audio>,<video>に含む） |
<u> |
非言語的注釈 |
<ul> |
順序なしリスト |
<var> |
変数 |
<video> |
動画 |
<wbr> |
改行可能位置 |
廃止された要素
| 廃止 | 代替 |
|---|---|
<acronym> |
<abbr> |
<applet> |
<object> |
<basefont> |
CSSのfont,font-family,font-size,color |
<bgsound> |
<audio> |
<big> |
CSSのfont-size |
<blink> |
CSSのanimation, @keyframes |
<center> |
CSSのtext-align: center; |
<content> |
<slot> |
<dir> |
<ul> |
<font> |
CSSのフォント |
<frame> |
<iframe> |
<frameset> |
<iframe> |
<hgroup> |
- |
<image> |
<img>,<picture> |
<keygen> |
- |
<marquee> |
CSSのanimation,@keyframes |
<menuitem> |
- |
<nobr> |
CSSのwhite-space: nowrap; |
<noembed> |
<object>のinnerHTML内 |
<noframes> |
- |
<plaintext> |
<pre>,<code> |
<listing> |
<pre>,<code> |
<rb> |
<ruby>のinnerText |
<rtc> |
<ruby> |
<shadow> |
<template>,<slot> |
<spacer> |
CSSのtext-indent, margin, padding, border |
<strike> |
<del>, <s> |
<tt> |
<code>,<kbd>,<samp>,<var>,<pre> |
<xmp> |
<pre>,<code> |
有効だがあまり使わない要素
| 要素 | 理由 |
|---|---|
<hgroup> |
セクションの解析に悪影響を及ぼしかねない |
<u> |
代替：<em>,<strong>,<mark>,<cite> |
<bdi>, <bdo> |
書字方向がちがう言語を使わないかぎり不要。日本語や英語だけなら不要 |
<b> |
重要、深刻、緊急でもないのに注意を引きたいテキストとは？ 意味付けできていなくない？ 見た目だけなら<span>とCSSだけでもよいのでは？ |
<i> |
声や用語などに使う。でも用語なら<dfn>のほうがよいはず。声を<i>で区別する必要性がわからない。日本語なら<p>内のプレーンテキスト内で「」,（）,『』,【】等で囲えばよいのでは？ |
<var> |
<code>で統一する。使い分ける必要性がわからないから。 |
<sup>,<sub> |
Unicode文字の上付き、下付き文字を使えばいいのでは？ |
<s>,<del>,<ins> |
修正箇所は消してしまえばよいのでは？ 残す意味あるの？ |
<wbr> |
日本語圏では使わないと思う |
<map>,<area> |
レスポンシブにできない。<svg>なら可 |
<menu>,<dialog> |
実装されているか怪しい。UIはJSライブラリを使ったほうがリッチで統一感ある。 |
<style>, style属性 |
CSSは外部ファイル化したほうがよい。HTMLは文書構造のみにしたほうが役割分担できて可読性があがる。 |
グローバル属性一覧
グローバル属性はすべての要素で使える属性。
| 属性 | 概要 |
|---|---|
aria-* |
ARIA。アクセシビリティを向上のために使う |
on* |
イベントハンドラ。JavaScriptで動的処理を行う |
ARIAは視覚障害者向けに読み上げソフト（スクリーン・リーダー）に対応するように実装したアプリのこと。ひとまず基礎をすべて終えてからにする。後回し。
イベントハンドラはJavaScriptで実装する。今回はHTMLの範囲を超えるので省く。
| 属性 | 概要 |
|---|---|
autocapitalize |
ユーザー入力されたとき、先頭大文字化が自動的に行われるかどうかを制御する。 |
autofocus |
自動的にフォーカスされる。 |
class |
CSSのクラスを指定する。 |
contenteditable |
ユーザは指定HTML要素にテキストを入力できるようになる |
data-* |
カスタムデータ属性。JavaScriptやCSSと情報交換できる。*以降は好きな名前をつけれる。 |
dir |
書字方向を示す。 |
draggable |
ドラッグ操作の指定。 |
enterkeyhint |
スマホなどのソフトウェアキーボードに表示される Enter キーのアイコンを指定する。enter,done,go,next,previous,search,send |
hidden |
要素を隠す。<form>要素の送信対象などで使われる。 |
id |
その要素を特定する一意の識別子をつける。 |
inputmode |
ユーザが入力するときのデータ型ヒント。 |
is |
カスタム内蔵要素のように振舞うよう指定する。 |
itemid |
識別子の形でマイクロデータを提供する。 |
itemprop |
アイテムにプロパティを追加する。 |
itemref |
アイテムと関連付けする。 |
itemscope |
メタデータのスコープを定義する。 |
itemtype |
itempropの語彙URLを指定する。 |
lang |
要素の言語を指定する。 |
nonce |
特定のフェッチを続行できるか決定する。 |
part |
<template>要素におけるclass。CSSの::part疑似要素を介して要素を選択してスタイルを設定する。 |
slot |
<template>要素の一部を置き換える。 |
spellcheck |
スペルミスのチェックを行うか否か設定する。 |
style |
CSSを書ける。ふつうは外部ファイル化したほうがよい。 |
tabindex |
フォーカスを持てることと、キーボードの順次ナビに加わるかどうか、どの位置に加わるかを示す。（0,-1） |
title |
マウスオーバーすると表示される短いテキスト。 |
translate |
翻訳すべきかいなか（yes,no） |
以下は非推奨のグローバル属性である。
| 非推奨 | 理由 |
|---|---|
accesskey |
ショートカットキーを生成するためのヒントを与える。多くの問題があるため使わぬほうがよい。キーアサインが重複しうる（OS、ブラウザ、スクリーンリーダ等）。国際化したときキーが存在しない可能性がある。などなど。 |
xml:lang |
廃止されたXHTMLから継承したもの。後方互換のために残してあるだけ。 |
xml:base |
廃止されたXHTMLから継承したもの。後方互換のために残してあるだけ。 |
contextmenu |
今後、すべてのブラウザーから削除される予定。JavaScriptのcontextmenuイベントで代用する。 |
x-ms-acceleratorkey |
非標準。IE, Edgeブラウザ固有。 |
x-ms-format-detection |
非標準。標準化の予定もない。 |
このほか、要素特有の属性がある。それは今後学習することとする。
とりあえず、HTMLの属性というのは、CSSやJSと連携したり、詳細なメタデータの設定をするときに使用するものである。
省略形
| 省略パターン | タグ |
|---|---|
| 閉じタグをつけてはいけない | br, hr, img, input, meta, area, base, col, embed, keygen, link, param, source |
| 閉じタグを省略できる | p, dt, dd, li, option, thead, tfoot, th, tr, td, rt, rp, optgroup, caption |
| タグ自体を省略できる | html, head, body, tbody, colgroup |
HTML要素の書き方は４種類ある。閉じタグが必要な要素と、つけてはいけない要素と、省略できる要素、さらにタグ自体を省略できる要素だ。それらを識別し、場合に寄って書き方を使い分けるのは、とてつもなく面倒くさいし、コードの統一性も失いやすい。可読性がさがる要因になったり、思わぬバグの原因にもなりかねない。それなら省略せず、すべてのタグに閉じタグをつければいい、と覚えたいところだが、逆に閉じタグをつけてはいけない要素があるため、それも叶わない。HTMLが簡単だと思っているなら、それは間違いだ。要素ごとに統一性のない記法を覚えねばならないのである。覚えられるわけがない。
パフォーマンスに関しても、省略すべきかどうか迷う。テキスト量が減ることで高速化するのか、それとも省略されてしまったためにタグを補足する処理が実行されて遅くなるのか。どちらにしてもパフォーマンスに与える影響は軽微であろう。それより確実に動作するほうを優性すべきである。
閉じタグをつけてはいけない要素の場合、<br>, <br/>, <br />のような書き方がある。どれも同じ意味だが、それを使い分けるのが面倒くさい。
タグを省略できる要素の場合、それぞれに省略できる条件がある。そんなものを各要素ごとに把握して使い分けるくらいなら、面倒でもきっちり閉じたほうが想定外バグを確実に回避できて楽である。
タグ自体を省略できる要素の場合、そもそもそんな要素を用意するんじゃねーよと殺意を抱く。消えてくれ。
省略形。さもすばらしいかのようだが、ムダに複雑な罠となっているようにしか思えない。pugなどのHTMLテンプレートエンジンのありがたみがここでもわかる。
文書をつくる
HTML文書をつくるときは以下のような工程になるだろう。
- 雛形をつくる（html, head, body, title, base, meta, link, script, noscript, header, footer, main, aside, article, nav, address, section, div）
- メタデータを入力する（title, base, meta, link, script）
- 文書をつくる
- テキスト
- 基礎（p, br, hr, pre, h1〜h6）
- リンク（a, portal）
- 強調（em, strong, mark（b, i, u））
- 訂正（s, del, ins）
- 文脈
- 引用（q, blockquote, cite）
- 細目（small）
- コンピュータ環境（code, var, samp, kbd）
- 語
- 用語（dfn, abbr）
- ルビ（ruby, rt, rp）
- 字
- 下付き、上付き（sup, sub）
- データ構造
- リスト（ol, ul, li, dl, dt, dd）
- テーブル（table, caption, thead, tfoot, tbody, colgroup, col, tr, th, td）
- テキスト
- 入力フォームをつくる（form, fieldset, legend, label, button, input, select, textarea, progress, meter, optgroup, option, datalist, output）
- インタラクティブ（details, summary, dialog, menu）
- マルチメディアを埋め込む
- スクリプティング（noscript, script, canvas）
学習予定
- ざっくり文書を作れるようになる（主だった要素の使いどころを把握する）
- 要素の取捨選択をする（どれを使い、どれを使わないか。その理由を考える）
- 要素をひとつずつ詳細に学ぶ（属性も含めて）
できることなら以下もやりたい。
- HTMLファイルの雛形を作成する
- HTMLファイルの雛形を生成するアプリを作成する
さらにCSSとJSを学んだ後で複合的な使い方を知る。
そこまでやって、ようやく仮想DOMやWebComponent、サードパーティ製フレームワークについて学習をはじめられる。
上記が終われば「どんなサイトをどうやって開発するか？」と考え始めることができる。
先が長すぎて死ねる。
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux
