【HTML】何気なく使っているタグについてまとめてみた。divとか。pとか。
タグ -Tag-
標識札や付箋を意味する。
HTMLにおけるタグとは< >で囲まれた部分。
<p>テキスト</p>上記の場合、<p>と</p>がタグ。
タグ一覧
ドキュメントタイプ宣言
Document type definition
<!DOCTYPE html>
ドキュメントタイプを宣言。
上記の場合、HTML5で作成されたことを宣言。
根本となる要素
The root element
<html>～</html>
HTML文書であることを示す。
文書のメタデータ
Document metadata
①<head>～</head>
文書のヘッダ情報を表す。
メタデータ(☆1)を記述。
☆1…文書に関する情報。
②<meta>
メタデータを指定する際に使用。
③<title>～</title>
文書にタイトルをつける際に使用。
一つの文書に一つだけ<head>～</head>の中に配置。
④<link>
リンクする外部リソースを指定する際に使用。
⑤<script>～</script>
文書にJavaScriptなどのスクリプトやデータブロックを組み込む際に使用。
例
①<head>
②<meta charset=“UTF-8”>
②<meta name=“viewport” content=“width=device-width, initial-scale=1”>
③<title>ページのタイトル</title>
②<meta name=“description” content=“ページの内容を説明する文章”>
④<link rel=“stylesheet” href=“CSSファイルのパス”>
⑤<script src=“JavaScriptファイルのパス”></script>
①</head>セクション
Sections
<body>～</body>
文書の本体を表す。
<section>～</section>
ウェブページ内のその部分が、一つのセクション(⭐︎1)であることを示す際に使用。
⭐︎1…セクション：文書やアプリケーションの一部分となる意味や機能のひとまとまりのこと。
<article>～</article>
内容が単体で完結するセクションであることを示す際に使用。
例：雑誌、新聞の記事、コメント
※<article>を入れ子にして使用する場合、内側の<article>の内容は、外側の<article>の内容に関連していることが原則。
<nav>～</nav>
ナビゲーションであることを示す際に使用。
主要なナビゲーションとなるセクションのみを示すのに適している。
例：メニュー
<aside>～</aside>
その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用。
あくまでも本文から外れる余談・補足情報。
<h1>-<h6>
<h1>・<h2>・<h3>・<h4>・<h5>・<h6>
見出しを付ける際に使用。
数値が小さいほど高いランクの見出し。
<header>～</header>
イントロダクションやナビゲーショングループであることを示す際に使用。
<footer>～</footer>
直近のセクションのフッターであることを示す際に使用。
そのセクションに関する情報のことで、誰が書いたのか、関連文書へのリンク、著作権などの情報が含まれる。
<address>～</address>
連絡先・問合せ先を表す際に使用。
article要素の中に配置されている場合には、直近のarticle要素の内容の作者への連絡先情報を表す。
あくまでも内容に関する連絡先・問合せ先を表す要素。
コンテンツの分類
Grouping content
<main>～</main>
メインコンテンツであることを示す。
<p>～</p> paragraph
ひとつの段落(paragraph)であることを表す際に使用。
段落よりもふさわしい要素がある場合には使用すべきではない。
例：連絡先にはaddressタグを使用すべき。
<hr>～</hr> horizontal rule
段落レベルのテーマの区切り、セクション内における話題の区切りを表す際に使用。
例：物語におけるシーンの変わり目、参考書のセクション内で別の話題に移る箇所。
※セクション同士の区切りとなる </section>と<section> の間については、すでにそれ自体でテーマの区切りを表している。
<pre>～</pre> preformatted text
半角スペースや改行をそのまま表示する際に使用。
日本語では「フォーマット（整形）済みのテキスト」という意味。
<pre>～</pre>で囲まれた範囲のソースは、半角スペース・改行などがそのまま表示される。
<blockquote>～</blockquote>
他の情報源からの引用・転載セクションであることを表す際に使用。
cite属性には、引用元のアドレスが存在する場合にそのURLを指定。
<ol>～</ol> ordered list
順序のあるリストを表示する際に使用。
<ul>～</ul> unordered list
順序のないリストを表示する際に使用。
<li>～</li> list item
ol要素・ ul要素・ menu要素 のいずれかの子要素として使用した場合には、その親要素のリスト項目となってお互いに関連するが、それ以外に配置された場合には他のli要素とは無関係となる。
<dl>～</dl> description list
<dt>タグで定義・説明される言葉を <dd>タグでそれに対応する説明を配置してリストを作成。
例：用語の定義リスト
<dt>～</dt> description term
定義・説明される言葉を表す際に使用。
<dd>～</dd> definition description
定義用語や言葉の説明をする際に使用。
<figure>～</figure>
図表であることを示す際に使用。
図表とは、文書の本文（メインフロー）から参照されるようなイラスト・図・写真・ソースコードなどのこと。
本文に影響を与えることなく、ページの端・専用ページ・別表にして切り離すことができる。
<figcaption>～</figcaption>
図表のキャプションを示す際に使用。
<figure>～</figure>の中に配置すると、図表にキャプションを付けることができる。
<div>～</div>
ひとかたまりの範囲として定義する際に使用。
<div>には特別な意味はない。
<div>～</div>で囲まれた範囲を一つのグループとしてまとめることができる。
CSSを適用するためのコンテナ要素として使用されることの多いタグ。
他に適切な要素が無い場合の最終手段として使用することが強く推奨されている。
テキストの意味
Text-level semantics
<a>～</a> anchor
ハイパーリンクを指定する際に使用。
日本語では、“船の錨・つなぎ止めて固定する”といった意味。
<em>～</em> emphasis
アクセントを付ける箇所を表す際に使用。
<em>～</em>を入れ子にすることで、コンテンツの特定個所が持つ強勢の度合いを指定。
<strong>～</strong>
強い重要性を表す際に使用。
<strong>でテキストの一部の重要性を変更しても文自体の意味は変更されない。
HTML5では<strong>～</strong>の中の一部を、 さらに<strong>～</strong>で囲むことで、重要性の強さの程度を指定し分けることができる。
<small>～</small>
免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表す際に使用。
その箇所が重要であるという意味や強調する役割、反対に重要性を弱める意味などはない。
メインコンテンツではなく、あくまで注釈や細目などの短いテキストに使用する要素。
<s>～</s>
すでに正確ではなくなった、すでに関係なくなった内容を表す際に使用。
※推奨要素。
<cite>～</cite> citation
作品のタイトルを表す際に使用。
人の名前に使用することはできない。
例：本、楽譜、ミュージカル
<q>～</q> quotation
他の情報源からの引用句・引用文であることを表す際に使用。
cite属性には、引用元のアドレスが存在する場合にそのURLを指定。
引用符を挿入させることを目的に、引用句・引用文ではない内容に<q>を使ってはいけない。
<dfn>～</dfn> definition
用語が使用されていることを示す際に使用。
直近の親要素となる<p>・<dl>・<section> などの中には用語の定義内容を一緒に入れる必要がある。
title属性は様々な要素で使用できる汎用的な属性ですが、<dfn>にtitle属性を指定した場合には特別な意味を持つ。
<dfn>のtitle属性には、定義される用語の正式な名称を指定。
<abbr>～</abbr> abbreviation
略語や頭字語であることを表す際に使用。
<abbr>のtitle属性には、略語や頭字語の正式な名称を指定。
<time>～</time>
日付や時刻を表記する際に、グレゴリオ暦による日付や24時間表記の時刻で正確に示す際に使用。
日時を記述するのに、必ず<time>を使用しなくてはならないわけではない。
コンピュータやブラウザが理解できるように日時を示すことが目的。
<time>タグは、正確に特定できない日付や時刻に対して使用するべきではない。
<code>～</code>
プログラムなどのコードであることを示す際に使用。
<var>～</var> variable
変数であることを示す際に使用。
数式、プログラムの中の変数そのものや文章中に変数名が出てくる場合などに使用できる。
<samp>～</samp>
プログラムやコンピュータシステムによる出力結果のサンプルであることを示す際に使用。
例：プログラムを実行した際の何らかの出力結果の例。
<kbd>～</kbd> keyboard
ユーザーが入力する内容であることを示す際に使用。
<samp>～</samp>の中に<kbd>を配置した場合には、システムによって返された入力内容を表す。
<kbd>～</kbd>の中に<samp>を配置した場合には、呼び出しメニューなどのシステム出力からの入力内容を表す。
<kbd>～</kbd>の中にさらに<kbd>を配置した場合には、キーボードのキーなどの入力の一単位を表す。
<sub>～</sub> subscript
下付き文字を表す際に使用。
特定の意味を持つ表記方法のために使用する要素。
単に文字が下付きになるという表示の見栄えを目的として<sub>を使用してはいけない。
この要素が無ければ意味が変わってしまう場合にのみ使用。
<sup>～</sup> superscript
上付き文字を表す際に使用。
特定の意味を持つ表記方法のために使用する要素。
単に文字が下付きになるという表示の見栄えを目的として<sub>を使用してはいけない。
この要素が無ければ意味が変わってしまう場合にのみ使用。
<i>～</i>
声や心の中で思ったことなど、他と区別したいテキストを表す際に使用。
より適切な要素がないか検討することが推奨されている。
<b>～</b> bold
文書内のキーワードや製品名など、他と区別したいテキストを表す際に使用。
他により適切な要素が存在しない場合の最終手段として使用すべきもの。
<mark>～</mark>
文書内の該当テキストをハイライトして目立たせる際に使用。
ユーザーが参照しやすいように目立たせることが目的。
者が重要と考えている箇所ではなく、ユーザーの操作に関連している箇所に使用。
<ruby>～</ruby>、<rt>～</rt>、<rp>～</rp>
ルビをふる際に使用。
<rt>：Ruby Text
ルビのテキストを囲む括弧等の記号を指定。
<rp>：Ruby Parentheses
ルビのテキストを囲む括弧等の記号を指定。
<rt>と<rp>は、<ruby>～</ruby>の中で子要素として使用。
<bdo>～</bdo>
文字表記の方向を指定する際に使用。
右から左に記述する言語を表記する際などに使用。
例：アラビア語
文字表記の方向は、dir属性で指定。
dir属性の値
表記方向が左から右：ltr（left-to-right）
表記方向が右から左：rtl（right-to-left）
<bdo>をスタイリング目的で使用するのは誤り。
<span>～</span>
ひとつの範囲として定義する際に使用。
<span>はそれ自身では何も意味を持っていないが、style属性・class属性・lang属性・dir属性などの属性と一緒に使用する場合に便利な要素。
属性と組み合わせることで<span>～<span>で囲まれた範囲にスタイルシートやスクリプトを適用したり、その範囲の言語や表記方向を指定したりすることができる。
<br> break
改行する際に使用。
<wbr> Word Break
改行しても良い位置を示す際に使用。
1行文字数がブラウザやテーブルの横幅以上にある場合、自動的に次の行に改行されてしまい意味がおかしくなってしまうことがある。
文章や英単語、固有名詞などを改行させたくない場合に<nobr>～</nobr>と合わせて使用。
コンテンツの埋め込み
Embedded content
<img>
画像を表示する際に使用。
必須属性のsrc属性で画像ファイルのURLを指定。
alt属性には、画像が利用できない環境向けのテキストを指定。
<iframe>～</iframe>
インラインフレームを作る際に使用。
インラインフレームとは、文書内に別の文書などの閲覧コンテンツを入れ子に配置したもの。
src属性は、文書内に別の文書をフレーム表示する際に使用。
src属性の値には、フレーム表示する文書のURLを指定。
<embed>
外部アプリケーションやインタラクティブなコンテンツのプラグインを必要とするデータをHTML文書に埋め込む際に使用。
例：Flash
データを埋め込むには、src属性でリソースのURLを指定してtype属性でMIMEタイプを指定。
<object>～</object>
プラグインデータを埋め込むと、そのデータの種類に応じてプラグインが呼び出される。
<object>～</object>の中に<param>を配置しておくと、 呼び出されるプラグインのパラメータを指定することができる。
<param>
<object>タグでプラグインデータを埋め込んだ際に呼び出されるプラグインのパラメータを指定する際に使用。
<param>タグは、<object>～</object>の中に子要素として配置。
<param>だけで使用しても何も意味を持たない。
name属性でパラメータの名前を、value属性でその値を指定。
<video>～</video>
動画を再生する際に使用。
<video>タグを使用することで、ユーザーにFlashなどのプラグインをインストールしてもらうことなく、標準のHTMLからシンプルに動画を扱えるようになる。
動画ファイルの指定には<video>タグのsrc属性か、<video>～</video>の中で<source>タグを使用。
<audio>～</audio>
音声を再生する際に使用。
再生する音声ファイルはsrc属性で指定。
<audio>～</audio>の中には、<audio>タグがサポートされていない環境で表示させるメッセージを記述することができる。
<source>
動画や音声などのメディアファイルのURLや種類を指定する際に<video>～</video>などのメディア要素の中で子要素として使用。
<source>は、それ自身では何も表さない。
メディアファイルのURLは、必須属性のsrc属性で指定。
<canvas>～</canvas>
図形を描く際に使用。
<canvas>の幅と高さはwidth属性とheight属性で指定することができる。
初期値は300×150。
<map>～</map>
イメージマップを作成する際に使用。
マップとは、画像や外部リソースの特定領域に四角形・円形・多角形などの形状でリンクを設定したもの。
イメージマップを作成するには<map>～</map>の中に、子要素として<area>を配置する。
<area>のhref属性でリンク先URLを、shape属性でリンク領域の形状を、coords属性でリンク領域の座標を指定。
<area>
イメージマップのハイパーリンク領域を設定する際に使用。
<area>は<map>～</map>の中に配置。
href属性は、ハイパーリンク先のURLを指定する際に使用。
href属性を指定する場合には、alt属性が必須。
alt属性にはハイパーリンクのテキストを指定。
href属性を指定しない場合には、alt属性も省略。
テーブル
Tabular data
<table>～</table>
テーブルを作成する際に使用。
テーブルの基本的な構造
<table>～</table>の中に<tr>～</tr>で表の横一行を定義。
<tr>～</tr>の中に<th>～</th>や<td>～</td>でセルを定義。
テーブルは行（横行）とカラム（縦列）を持つが、空の行やカラムを持つことはできない。
<caption>～</caption>
テーブルにキャプションをつける際に使用。
<table>～</table>の最初の子要素として配置。
<figure>～</figure>の子要素に<figcaption>と<table>しか存在しない場合、 <figcaption>がテーブルのキャプションとして機能するため<caption>は省略すべき。
<colgroup>
表の縦列（カラム）をグループ化する際に使用。
表の１つ以上の縦列をグループ化して、その縦列グループに対して同じ属性やスタイルをまとめて指定することができる。
span属性には、グループ化する縦列の数を指定。
<table>～</table>の中の<caption>より後、<thead>・<tbody>・<tfoot>・<tr>より前に配置。
span属性を持つ場合には空要素となり、子孫要素を含むことはできない。
<col> column
表の縦列に属性やスタイルを指定する際に使用。
表の縦列をグループ化はしないが、複数の縦列に対して同じ属性やスタイルをまとめて指定することができる。
span属性には、属性やスタイルを適用する縦列の数を指定。
必ず<colgroup>～</colgroup>の中に配置。
<colgroup>がspan属性を持っている場合には<col>を配置することはできない。
<tbody>～</tbody>
テーブルのボディ部分を定義する際に使用。
<tbody>はテーブルの本体となる行グループを表す要素。
データセルなどで構成される。
<table>～</table>の子要素として<caption>・<colgroup>より後に配置。
<table>～</table>の子要素として複数配置することができる。
<thead>～</thead>
テーブルのヘッダ行を定義する際に使用。
<thead>はテーブルのヘッダとなる行グループを表す要素。
カラムのラベル（名前）で構成。
<table>～</table>の子要素として<caption>・<colgroup>より後に配置。
<thead>は<tbody>・<tfoot>よりも前に配置。
<thead>は複数配置するこはできない。
<tfoot>～</tfoot>
テーブルのフッタ部分を定義する際に使用。
テーブルのフッタとなる行グループを表す要素でカラムの要約で構成。
<table>～</table>の子要素として<caption>・<colgroup>より後に配置。
<tfoot>は複数配置するこはできない。
<tr>～</tr> table row
テーブルの横一行を定義する際に使用。
<th>～</th> table header
テーブルの見出しセルを作成する際に使用。
<td>～</td> table data
テーブルのデータセルを作成する際に使用。
ユーザーによる操作
Interactive elements
<menu>～</menu>
操作メニューを作成する際に使用。
サブメニューをメインメニューで入れ子にして階層メニューにすることもできる。
type属性は、宣言するメニューの種類を指定。
指定できるメニューの種類：context、toolbar
type属性を省略した場合にはlist（リスト状態）となり<menu>要素がコマンドの単なるリストに過ぎないことを示す。
参照
この記事が気に入ったらサポートをしてみませんか？