HTML

HTML5

HTML ( HyperText Markup Language ) は、Webマシンが配給するコンテンツを Google にとって分かりやすくするためのマークアップタグ。

CSS や JavaScript と併用すればコンテンツの見栄えは芸術の域にまで昇華する。

主な目的

Web文書にタグ付けして文書全体を意味的にキレイに整理する。

1. Google など検索エンジンに文書構造を正しく伝える
2. HTMLタグに CSSを適用して文書全体をデザインする

文書構造や意味付けがしっかりした（セマンティックな）Web文書を作成すると、そのWeb文書は構造的には W3C標準に準拠した素晴らしいものとなる。

多種多様なコードによって的確な意味付けをすると、そのWeb文書は Googlebot から見て意味の豊富なものとなり、サイバー世界をキレイに整理したがっている Google からも好かれることになる。

加えて、CSS を利用して人間学的にも良いデザインをすると、その Web文書は多くの人たちにとっても素晴らしい印象や説得力を与えるものとなる。

メインルート

html	HTML文書においてルート（起点）となるトップレベル要素。ルート要素とも呼ばれる。他のすべての要素はこの要素の子孫として配置される

文書メタデータ

meta	他のメタ要素で表すことができないメタデータを定義。charset、http-equiv、name ( description、author、googlebot、robots を含む ) など
title	ページの題名を定義。ブラウザのタイトルバーやページのタブに表示される
base	ページ内に含まれるすべての相対URL の基点となる URL を定義。アンカータグなどが参照する
link	現在のページと外部リソースとの関係を定義。ナビゲーションの関係構造の定義など。スタイルシートをリンクするためによく利用される
style	ページ全体あるいは一部分のスタイル情報を定義

セクショニングルート

body	HTML文書のコンテンツを表す。ページ内に一つだけ配置する

コンテンツセクショニング

論理的に大まかなアウトラインを作成するためのタグ。

header	導入的なコンテンツ、特にロゴやナビゲーションなどのグループを表す。タイトルや <h1>見出し以外に、検索フォーム、作者名なども含めることができる
nav	サイトの主要なナビゲーション機能を提供しているセクションを表す。一般的な例としてはグローバルメニュー、目次、索引など。ページ内で複数利用が可能。ただし <footer> などによく含められるリンク等に使う必要はない
main	そのページの主要な内容を表す。主要な内容とはページの中心的な話題、またはアプリケーションの中心的な機能に関係すること。ゆえに、他ページで繰り返されているものは除くべき。１つのページに１つ
article	ページ内で自己完結しており、フィードなどで個別に配信や再利用できる構成物を表す。例えば、新聞や雑誌の記事、ブログ記事、フォーラムの投稿など。ゆえに、このセクションは見出し情報などを含んでいるべき
<h1>~<h6>	セクションの見出しを6段階で表す。 <h1> が最上位で <h6> が最下位。見出しレベルをスキップしてはいけない
aside	そのページのメインコンテンツと間接的な関係しかない部分を表す
footer	ページの終端を表す。通常はサイト全体あるいは特定のセクションの著者情報、連絡先、関連サイトへのリンク、コピーライト表示などを含める
address	そのページやセクションを提供しいている個人、団体、組織の連絡先（SNSアカウントも可）の提供を表す。タグ内に必ず連絡先の名称を含める。一般的には <footer> 内に配置される。一行利用ではなく <p> と同じように文章でも利用できる
section	一つのまとまりを表す。意味的に他に妥当なタグがない場合に利用。例えば、検索結果の一覧、地図の表示など。ゆえに、通常は見出しが含まれる。そのセクション単独で配信して意味がある場合は <article> を利用すべき。スタイル付の目的のみで区切る場合は <div> を利用すべき

ブロックコンテンツ

論理的により細かい意味付けをするためのタグ。

p	paragraph。段落を表す
ul	unordered list。順不同リストを表す。普通は黒点などの行頭記号を伴って表示される
ol	ordered list。順序リストを表す。普通は連番の数字を伴って表示される
li	リスト項目を表す。<ul>、<lo> いずれかの子要素として配置
dl	definition list。定義リストを表す。<dt> と <dd> の組み合わせをリスト化したもの。一般的な使用例として、用語集、キーと値のペアリストなどが挙げられる。<dt> と <dd> が複数ある場合は、デザイン付のためにそれらを <div> で囲んでも良い
dt	definition term。用語を表す。<dl> の子要素としてのみ利用できる
dd	definition description。<dt> の詳細や定義を表す。<dt> の兄弟要素
blockquote	引用文であることを表す。cite属性によって引用元URL を明示できる。<p> を囲むように使う
hr	horizon。テーマの意味的な区切りを表す。例えば、シーンの移行や話題の区切りなど
figure	画像やグラフ、図表、詩などの自己完結型のコンテンツを表す。多くの場合 <figcaption> を内包するかたちで利用される
figcaption	<figure> の説明、残りのデータやイラストを表す。<figure> の子要素
pre	pre-formatted text。整形前テキスト
div	division。ブロックレベルの汎用コンテナ。主に class属性や id属性を利用したデザイン付のために利用される。<article> や <p> など意味的に適切なタグが他にない場合に限り利用。lang属性を利用して他言語で書かれていることを表すこともできる

インラインコンテンツ

より細かい意味付けをするために <p> や <pre> などのブロックレベル要素内で利用されるタグ。

a	anchor。同一サイト内、あるいは他サイトへのアンカーリンクを表す。Web をWebたらしめている画期的なタグ
b	bold。キーワード、製品名など、読者の注意を引きたいテキストを表す。ただの太字で「重要である」という意味はない。さらに、文字列の装飾のために利用すべきではない。HTMLタグはあくまで意味付けが目的
u	underline。スペルミスの明示など、非言語的な注釈を表す。ハイパーリンクと誤解されるような使用は避けるべきなのでスタイルに「text-decoration: red wavy underline;」などを指定できる
i	italic。外国語のフレーズ、技術用語など、通常の文脈から少し外れるテキストを表す
s	すでに正確あるいは適切ではなくなった事柄を表す。ただし文章を修正する場合は <del> と <ins> を利用
em	emphasize。語調による強調を表す。文章内で声による強調を行いたい部分に利用。読み上げソフトなどはその部分を強調して読み上げることになる
strong	重要性、重大性、または緊急性が高いテキストを表す。いくつかの単語が周囲のコンテンツと比較して重要であることを明示できる
abbr	abbreviation。略語や短縮語など、より完全な説明が必要なテキストを表す。title属性に完全な説明を記述するとマウスホバーでそれが表示される。ただし、あまり普及していないので完全な説明は title属性にではなく文章に直接記述することが望ましい
q	quote。引用であることを表す。最近のブラウザは <q> で囲まれたテキストを自動的に引用符で囲む実装がなされている。cite属性によって引用元を明示できる
cite	書籍、エッセー、映画、Webページ、ツイートなどの創作物を表す。人名は含めないのが無難。<blockquote> や <q> タグで出典を記述するときは cite属性を利用できる
dfn	definition。ページ内で定義されている単語であることを表す。<a>タグを利用してページ内の定義場所へアンカーを貼ることもできる。ただし、このタグの利用範囲はかなり限定的なものだと言える
small	コピーライト表示や法的表記のように注釈として小さく表示される文を表す
time	時刻や日付、タイムゾーンを表す。このタグの目的は機械が読める形式を提供すること。明記されている日時を直接このタグで囲んでも良いし、datetime属性によってより詳細な日時を定義しても良い
data	value属性によってそのテキストが何らかのデータを保持していることを明示する。例えば、商品名に対する商品番号など
code	プログラミングコードであることを表す。短い機能名から複数行に渡るコードまでを明示できる
var	variable。プログラミングコード内の変数名や数式の変数名を表す
samp	コンピュータが出力するような文字列を表す。例えば、コンソール画面に表示されるテキストなど
kbd	<samp> で表示されるテキストの中の、特にユーザによるキーボード入力などによるテキストを表す
ruby	東アジアで利用される「漢字」の発音を表す。発音情報は子要素として <rt> に定義する
rt	発音情報を表す。<ruby> に対応しているブラウザの場合、ルビ文字列は該当テキスト上部に小文字で表示される
rp	の上部表示に対応していないブラウザのために発音情報のコンテナを定義する。通常は「（）」を利用。<ruby> に対応していないブラウザの場合「（）」の中に発音情報が表示されるようになる
rtc	ルビが振られている文字列の意味を表す。 例えば、漢字に対する英語表記など。ただし、多くのブラウザが未対応
sub	脚注番号や、変数、化学式などに利用される「下付き数字」を表す。小さめの数字をテキストのベースラインより下に表示
sup	べき乗、序数などに利用される「上付き文字列」を表す。小さめの文字列をテキストより高いベースラインに表示
bdi	左から右で書かれた文章（日本語など）の中で右から左で書かれた文章（アラビア語など）を表す。スタイル「unicode-bidi: isolate;」でも同様の表示がなされるが <bdi> では意味的にも正しくレンダリングされる
bdo	dir属性によってテキストの書式方向を指定。例えば、rtl（右から左）、ltr（左から右） を指定できる
mark	参照などの目的のためにマーカーで目立たせたいテキストを表す。例えば、検索されたキーワードをハイライトする場合や、引用文の中の特定のテキストをハイライトする場合など
br	break。文中に改行を生成する。 住所や詩の表記など、改行が重要になる場合に便利
wbr	文章中のテキスト内でブラウザが改行しても良い場所を指定する
span	インラインレベルの汎用コンテナ。主に class属性や id属性を利用したデザイン付のために利用される。意味的に適切なタグが他にない場合に限り利用。lang属性を利用して他言語で書かれていることを表すこともできる

テーブル

table	行と列によって整理された二次元データを表す
caption	表のタイトルを表す。使用する場合は常に <table> の子要素として配置される
thead	表の項目セクションを表す
tbody	表の本体セクションを表す
tfoot	表の下部項目セクションを表す
tr	table row。表の各行を定義する。通常は <th> や <td> を含む
th	table header。ヘッダーセルを表す
td	table description。スタンダードセルを表す
colgroup	表内にある列をグループ化する
col	column。表内にある列を定義する。<colgroup> の子要素

編集履歴の明示

del	delete。ページから削除された文章であることを表す
ins	insert。ページに追加された文章であることを表す

フォーム

（Webアプリを作るようになったらまとめる）

スクリプト

script	ページ内で実行するコードを埋め込んだり参照したりするために利用。普通は JavaScript が埋め込まれる
noscript	閲覧者のブラウザでスクリプトが無効になっている場合に表示するセクションを表す
canvas	CanvasスクリプティングAPI や WebGL API を利用して、グラフィックスやアニメーションを描画できる

埋め込みコンテンツ

picture	表示デバイスを指定する場合に <img>タグと <source>タグを囲む
img	画像であることを表す。alt属性には必ず画像内容の具体的な説明を入力。画像サイズはピクセルで指定。HTML5 では srcset属性や sizes属性を利用して表示デバイスに合わせた柔軟な画像指定ができる
source	<picture>、<video>、<audio>タグ内で利用され表示デバイスごとに複数のメディアソースを定義できる
video	動画コンテンツであることを表す
audio	音声コンテンツであることを表す
track	<video>、<audio> の子要素として利用。字幕やチャプタータイトルなど、時系列データを kind属性によって複数定義することができる
map	イメージマップ（クリック可能なリンク領域）を作成する。<area> と一緒に利用
area	<map> の子要素。クリック可能なリンク領域を指定する
embed	外部コンテンツの埋め込みを表す
object	Flash動画など、外部リソースを表す
param	<object> の引数を定義する

インタラクティブ要素

details	折りたたみボックスを表す。しかしインタラクティブな動きは通常 JavaScript で実装する
summary	折りたたみボックスのラベルを表す。<summary> を指定しない場合は「詳細」と表示される
dialog	ボタンが押された時などにダイアログボックスを表す

参考資料

W3C、Google、Microsoft、Mozilla 共同文書 MDN Web Docs より

備忘録

• Webページ制作の基本ツール
• Webページの基本的なファイル構成
• 画像の最適化はマシンリソース最適化の要
• 表示デバイスによって表示画像を切り替える
• Google はハイフン ( - ) を単語の区切りとして扱う
• URL はアンダースコア ( _ ) よりもハイフン ( - ) を使う
• meta機能の keywords はもう使われていない
• ブロックレベル要素を <a> で囲むとブロックレベルリンク