HTMLタグでよく使う要素や属性をわかりやすく解説

contents

1.HTMLタグ・要素・属性一覧

１．HTMLタグでよく使う要素や属性をわかりやすく解説

HTMLタグ一覧です。ホームページ作成の際やちょっと忘れてしまった時に有効です。各要素ごとにまとめてありますので、非常に便利です。

a インライン要素　href属性　　targe属性
リンク(アンカー）文書と他のリソースを結びつけて参照できるようにすることをリンクを張るといいます。

リンクを張った文字列や画像（イメージ）をクリックすると別のウェブページや別のウェブサイトを表示（ジャンプ）することができます。この機能をハイパーリンク(Hyperlink)と呼び、このような機能をもつ文書をハイパーテキスト(HyperText)と呼びます。

address ブロック要素
連絡先(問い合わせ先)とは、一般的に文書制作者の氏名やメールアドレスなどを記したり、会社の場合は会社の現住所や電話番号などを記すのに使用

blockquote ブロック要素　cite属性
ブロック要素を含む（比較的長い）文章の引用であることを示します。HTML4.01 strict, XHTML1.0 strict, XHTML1.1では、テキストやインライン要素をblockquote要素の直下に置くことができません。

必ず直接の子要素には、p要素やdiv要素などのブロック要素を内容にしなければなりません。このためインラインの内容だけを引用する場合には、インライン内容（行内容）だけを含んでいる（比較的短い）文章の引用を示す q要素を使用します

body html要素
文書の本体を表します。最大の親要素（ルート要素）である html要素の第一の子要素であり、文書の基本情報を定義するhead要素とは兄弟要素にあたる。body要素には当該ページ全体の背景色・背景画像・文字色・各リンクアンカーの色を指定できる属性がありますが、これら見栄えに関する属性は全て推奨されない属性として、CSS による代替指定が推奨されています。

また、HTML4.01 strict, XHTML1.0 strict, XHTML1.1ではテキストやインライン要素をbody要素の直下に置くことができません。必ず直接の子要素には、p要素やdiv要素などのブロック要素を内容にしなければなりません。 alink属性やbackground属性は非推奨

br インライン要素
文書中のテキスト（文章）やイメージなどのインライン内容を強制的に改行します。段落の表示の途中でどうしても強制的に改行を入れる必要があるという場合に指定する区切りとして使用します。終了タグはなく、内容をもたない空要素です。

citeインライン要素
出典元や引用元など他のリソース（情報資源）の参照を明示します。出典元や引用元のリソースはウェブ上のものだけを示すのに限らず、書籍や論文など紙媒体の書籍名・著者名を示す場合にも使われます。視覚環境のUAにおけるデフォルトの表示は要素内のテキストをイタリック体（斜体）で表示します。

dd dl要素の子要素
dl要素内で定義型リスト（説明付きリストともいう）の項目の定義（説明）部分を指定

del インライン要素　cite属性　　datetime属性
（ブロック要素を含めることができる特殊型）
修正履歴を残すときに指定範囲が削除されたことを示します。del要素は挿入・追加を示す ins要素と組み合わせて使うことで、何を削除して代わりに何を挿入・追加したか、その修正履歴の内容をはっきり示すことができます。

del要素はインライン要素だけでなくブロック要素も内包することができるので、ブロックレベル・インラインレベルの両方を取ることができる要素型に分類されます。ただし、両方同時は不可能なため、ブロック要素の中で使われた場合は、インライン要素として扱われます。

また、body要素やブロック要素のみを内包できる要素の直接の子要素として、その直下に置くこともできる特殊な要素型です

div ブロック要素
区切りを意味するブロック要素　この要素自身が特に意味を持っているわけではなく、他の要素をグループ化（含まれた内容を一つの単位とする）し、文書に構造を付加することで文書の情報的価値を高めます。

dl ブロック要素
定義型リスト（説明付きリスト）を作ります。定義型リストは項目とその内容から成り立ち、dt要素に用語をdd要素にはその用語の定義（説明）を記述する場合等に用いられます。

dt dl要素の子要素
dl要素内で定義型リスト（説明付きリスト）の項目部分を指定します。定義型リストは項目部分のdt要素とそれを定義（説明）するdd要素で構成します。

em インライン要素
要素内の語句を強調していることを示すインライン要素　なお、より強い強調を示す場合は strong要素を使います。em要素や strong要素は視覚的な表示の効果だけでなく、強調という付加情報をもっているので音声出力・点字出力の非視覚環境においても強く表現する（読み上げる）ことが期待されます。
Netscape Navigator の独自機能　ウェブページ内に音声や動画などのデータを埋め込みます。ただし、独自機能であるため仕様では embed要素に代わって、HTML3.2 の規格から取り入れられている object要素を使用することが推奨共通属性以外はすべて非推奨

fieldset ブロック要素
関連するフォームのコントロール部品（テキスト入力欄、チェックボックスなど）を囲んでグループ化（意味的なまとまりを構成）

form ブロック要素　accept属性　　accept-charset属性　　action属性　enctype属性　method属性
フォーム全体を定義するブロック要素　form要素だけでは、データを入力したり受け取ることもできません。form要素の間にテキスト入力欄や選択欄などのコントロール（フォームを構成するオブジェクトのこと）を指定し、入力されたデータの送信先を action属性で指定します。

h1-h6 ブロック要素
見出しを指定します。見出しを見れば文書の内容すべてに目を通さずとも内容が一目でわかるように記述します。見出しを示す要素は全部で h1, h2, h3, h4, h5, h6 の6段階

head head要素の中には1つだけ必ず title要素を含める必要がある
head要素（document head）はタイトル、文字コード、キーワード、要約文、関連文書、スタイルシート、スクリプトなど文書に関する各種の情報を記述　XHTML1.0 には head要素に id属性がありますが、HTML4.01 と XHTML1.1 にはありません。

hr ブロック要素
hr要素（horizontal rule）は水平方向に罫線（区切り線）を表示させます。同一ページ内で複数の話題を扱う場合に途中で話題を変える時の目印となる区切り線として用いられます。

html要素（HTML document root element）は DOCTYPE宣言（文章型宣言）の後に続けて HTML（XHTML）で記述された文書であることを定義します。html要素はルート要素と呼ばれる最大の親要素で文書全体の内容を包含します。

必ず head要素と body 要素を一つずつ記述しなければいけません。ただし、フレーム設定型DTD（Frameset）（HTML 4.01, XHTML1.0）では body要素の代わりに frameset要素を記述します。

img インライン要素　ismap属性　longdesc属性

img要素（image）は指定した部分にイメージ（画像）を埋め込みます。終了タグはなく内容をもたない空要素です。src属性は必須属性で画像ファイルの所在となる URI を指定します。

さらに、何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境においても画像の表現する情報を取得できるように必ず alt属性で代替テキスト（altanative text）を記述する必要があります。
[class][dir] [id] [lang] [style] [title] [xml:lang]

input インライン要素　 accept属性　alt属性　checked属性　disabled属性　maxlength属性　ismap属性　readonly属性　size属性　src属性　type属性　usemap属性　value属性
input は入力という意味でテキスト入力欄、送信・リセットの各種ボタン、チェックボックスなどのフォームのコントロール部品となる入力用オブジェクトを作ります。終了タグはなく、内容をもたない空要素です。どのコントロール部品を作成するかは、type属性で種類を指定します。

入力されたデータの送信先は、コントロール部品をまとめる form要素の action属性で指定します。HTML4.01 strict, XHTML1.0 strict, XHTML1.1 では form要素の直下にインライン要素である input要素を直接記述することはできません。必ず p要素や div要素などのブロック要素に内包させた形で記述しなければなりません。

ins インライン要素
（ブロック要素を含めることができる特殊型）
修正履歴を残すときに指定範囲が新しく追加・挿入されたことを示します。視覚環境の UA では要素内のテキストは下線を引いた表示になります。ins要素は指定範囲が削除されたことを示す del要素と組み合わせて使うことで、何を削除して代わりに何を追加・挿入したか修正履歴の内容をはっきり示すことができます。

ins要素はインライン要素だけでなくブロック要素も内包することができるので、ブロックレベル・インラインレベルの両方を取ることができる要素型に分類されます。ただし、両方同時は不可能なため、ブロック要素の中で使われた場合は、インライン要素として扱われます。また、body要素やブロック要素のみを内包できる要素の直接の子要素として、その直下に置くこともできる特殊な要素型です。

label インライン要素　for属性
label要素（form field label text）はフォームのコントロール部品の各部が何であるかを示す・説明するラベルを指定します。任意のコントロール部品の id属性の値に対して label要素の for属性の値を一致させる必要があります。これによりラベル部分のテキストを選択するだけで対応するテキスト入力欄にフォーカスが移ったり、チェックボックスにチェックが入るようになります。

li [dir要素の子要素]
[menu要素の子要素]

[ol要素の子要素]

[ul要素の子要素]
含むことのできる要素に　ブロック要素・インライン要素がある。li要素（list item）は箇条書きリストを作成する ul要素、番号順リストを作成するol要素の中に並べて個々のリスト項目を作ります（古い HTML ではディレクトリリストを作成するdir要素、メニューリストを作成する menu要素の中で使われていていました）。

HTML では終了タグ（）部分を記述内容を減らし、またページの軽量化のためにも習慣的に省略されてきた傾向がありますが、XHTML では終了タグを省略することはできません

link head要素の子要素　charset属性　 href属性 hreflang属性 media属性　rel属性 rev属性 type属性
link要素（media-independent link）は複数にわたるページがあるサイト内における現在観覧しているページのポジション（位置）を示すなど、文書と他のリソース（情報資源）との関連性（リンク）を定義します。複数指定することも可能です

marquee 独自機能のため不明

marquee要素は自動的に文字や画像を表示域内で行って帰ってとスクロールさせるマーキーを作成します。Internet Explorer2.0 の時に独自に採用された機能で、テキストや画像などのインライン内容だけでなく、ブロック要素自体も marquee要素の内容となったものは何でもスクロールさせることができるようです。多くの属性が定義されており、スクロールの動きをいろいろとコントロールすることができます。

meta head要素の子要素　content属性は必須属性 content属性　http-equiv属性　　name属性
空要素 meta要素（generic metainformation）は文書の制作者、制作年月日、説明、キーワードなどの文書の付加情報を記述したり、閲覧時に文字化けを防ぐ文字コード（符号化方法）などの HTTPヘッダの追加情報を設定したりと当該文書に関する様々な情報（メタ情報）を示します。終了タグはなく、内容をもたない空要素です。

object インライン要素　 archive属性　classid属性　　codebase属性　　codetype属性　　data属性　　declare属性　height属性　　name属性　standby属性　type属性　usemap属性　width属性
（ブロック要素） object要素（generic embedded object）は Javaアプレット、画像（イメージ）、音声（サウンド）、動画（ムービー）などのオブジェクト（外部アプリケーション）全般をウェブページ中に埋め込んでユーザーエージェントで操作できるようにします。

object要素はインライン要素だけでなくブロック要素も内包することができるので、ブロックレベル・インラインレベルの両方を取ることができる要素型に分類されます。ただし、両方同時は不可能なためブロック要素の中で使われた場合は、インライン要素として扱われます。　

ol ブロック要素
ol要素（order list ?? numbered styles）は序列・順番を示す番号順リストを作成します。番号順リストの各項目は li要素（list item）を並べて作ります

p ブロック要素
p要素（paragrap）は段落を示します。段落とは、ひとつの文章の内容的なまとまりを示す単位であり、この文章のまとまりの集合体がひとつの文書として構成　p要素内にブロック要素を含んだり、p要素を入れ子にすることはできません。

pre ブロック要素
pre要素（preformatted text）は要素内のテキストが整形済みであることを示します。通常、半角スペースや水平タブ、行送りなどの空白類文字が連続しても、それらを1つの半角スペースにまとめて表示しますが、pre要素内では連続する空白類文字をそのまま表示に反映します。

また、pre要素内では行末での折り返しが抑制されているためソース内で改行の指定をしない限り、延々と横長に表示され表示域をはみ出して横スクロールを生じさせることがあります。

pre要素内の内容は文字の幅を一定に揃えた等幅フォント（固定幅フォント）を確保するために、画像などを埋め込んだり、フォントのサイズを変えることを目的としたインライン要素（applet要素, basefont要素, big要素, font要素, img要素, object要素, small
要素, sub要素, sup要素）については内包することができません。

q インライン要素　cite属性
q要素（short inline quotation）はインラインレベルの（比較的短い）文章の引用　文章の引用であることを示す場合には blockquote要素　Netscape, Firefox, Opera（, Safari）のデフォルトスタイルシートには、q要素をセレクタに CSS の quotesプロパティでダブルクォーテーション（”）が初期値に設定されています。

このため、q要素の内容の先頭と最後に引用符が追加された状態でレンダリング（描画）されることになります。しかし、Windows版Internet Explorer 6, Windows版Internet Explorer 7, Macintosh版Internet Explorer 5 においては引用符は追加されません。

ruby インライン要素
ruby要素はルビの全体を定義します。ルビは主に読みがな (発音ガイド) をつけるために使われ、ベーステキストとルビテキストから構成されます。ルビを振る対象となる本文部分がベーステキストと呼ばれ、読みがなの部分がルビテキストと呼ばれます。

ベーステキストは rb要素で、ルビテキストは rt要素で記述します。XHTML1.1 で Ruby Annotation として W3C より正式に勧告されたため HTML4.01 や XHTML1.0 のバージョンではルビを使用することができません。

rb [インライン要素（ruby要素を除く）]
rb要素（ruby base）は ruby要素の中でルビを振る対象となるベーステキストを記述します。ルビは主に読みがな (発音ガイド) をつけるために使われ、ベーステキストとルビテキストから構成されます。

ルビの部分となるルビテキストは rt要素で記述し、ベーステキストについての短い注釈をつけるために使われます。

例として仙人掌（さぼてん）と記入した場合　IE以外のブラウザでは、うしろにさぼてんという文字が出るがIEでは独自の表示方法でルビが上にのっかるように見える独自のレンダリング機能を採用XHTML1.1 で Ruby Annotation として W3C より正式に勧告されたため HTML4.01 や XHTML1.0 のバージョンではルビを使用することができません。

rt [インライン要素（ruby要素を除く）]
rt要素（ruby text）は ruby要素の中でベーステキスト（ルビを振る対象）に短い注釈をつけるためのルビテキストを記述します。ルビは主に読みがな (発音ガイド) をつけるために使われ、ベーステキストとルビテキストから構成されます

samp インライン要素
samp要素（sample output）はプログラムやスクリプトの出力結果であること（実行するとどのように表示されるのか）を示すインライン要素です。たとえば、「このプログラムを実行するとERROR MESSAGEを表示します」のように使います。

script [head要素の子要素][body要素の子孫要素（インライン要素）]　charset属性 defer属性 language属性 src属性　type属性
script要素（script statements）はページ内にクラインアントサイド・スクリプト（client-side script）を組み込みます。head要素内、または body要素内のどちらに何度でも定義可能です。src属性でスクリプトファイルを外部から参照させることも、また直接 script要素内にスクリプトコードを書くこともできます　内包としてかけるのはスクリプト言語となります。スクリプト言語には、主に JavaScript が使用されています。

ただし、JavaScript にも ECMA が策定した ECMAScript と ECMAScript に Microsoft社が自社技術を追加して拡張した Windowsスクリプト言語の JScript があります。さらに JavaScript の他にも、Microsoft社によって開発されたスクリプト言語で、同社のウェブブラウザである Internet Explorer 上でのみ動作する VBScript があります。

select インライン要素　disabled属性　multiple属性　　name属性　　size属性
select要素（option selector）はフォームのコントロール部品の1つとして選択メニューを作ります。選択項目（選択肢）は option要素で作成し、option要素1つの定義が1つの選択肢となります。

さらに複数の選択肢をoptgroup要素でグループ化することもできます。通常は、選択メニューの中で1つの選択肢しか選択できませんが、multiple属性を加えることで複数選択が可能になります。

span インライン要素
span要素（generic inline container）は特に意味を持っているわけではなく、行内容（インライン要素やテキスト）をグループ化（含まれた内容を一つの単位とする）し、文書に構造的意味合いを付加・補強することで文書の情報的価値を高めます。

span要素がインライン（行内）レベルでのグループ化を示すのに対し、div要素はブロックレベルの範囲のグループ化を示します。div要素も span要素を単体で使用することはなく、id属性や class属性を割り振ってスタイルシート（CSS）のセレクタにしたり、言語情報に関するlang属性（XHTML では xml:lang属性）、書字方向に関するdir属性などを併用して効果を発揮します。

strong インライン要素
strong要素（strong emphasis）は要素内の語句を強く強調していることを示すインライン要素です。視覚環境の UA では要素内のテキストは太字（ボールド体）表示になります。単に強調を示す場合は、em要素を使い、em要素よりもより強く強調を示したい部分に strong要素を使います。

em要素や strong要素は視覚的な表示の効果だけでなく、強調という付加情報をもっているので音声出力・点字出力の非視覚環境においても強く表現する（読み上げる）ことが期待されます。なお、strong要素は、その内容を強く強調しているという情報を付加するものであって、テキストを太字表示するための視覚的な表示の操作に使用してはいけません。

style head要素の子要素　media属性　type属性
style要素（style sheet information）は head要素内に当該ページ内にのみ有効な制作者スタイルシートを組み込みます。HTML では style要素の内容は解析されない文字データ（Character DATA）だったのですが、XHTML では style要素の内容は解析対象となる文字データ (Processed Character DATA) になったため、マークアップ区切り文字は意味を持ち、文字実体参照などは展開されます。

たとえば、HTML4.01 では style要素に対応していない古い UA（style要素には Netscape Navigater 4.0, Internet Explorer 4.0 より対応）のための後方互換として“” のコメント宣言を使うことが常套手段とされていましたが、現在では style要素に対応していないような環境で閲覧しているユーザーは皆無なので、いちいち “” を使ってコメント・アウトする必要はありません。

ましてや XHTML では “” を使ってスタイルシートをコメント・アウトしてしまうと、UA によっては本当にコメントとみなして、スタイル情報を無視してしまい、働かない可能性があります。XHTML では style要素内に記述するスタイルシートは “<![CDATA[ ]>” の CDATAセクションを使うことで解析されない文字データ（Character DATA）にすることが可能ですが、現状では CDATAセクションをサポートしていない環境も多いため、

XHTML では文書内に直接スタイルシートを記述するのではなく、別にスタイルシートファイルを用意して link要素で外部から参照させる手法が推奨

table ブロック要素　border属性　　cellpadding属性　spacing属性　frame属性　　rules属性　　summary属性　　width属性
table要素は表（テーブル）を定義するブロック要素です。一覧表、数表、年表などのように表の形にまとめて提供する必要がある情報の場合に使います。原則、レイアウト（ウェブページのデザイン・装飾）目的に使ってはいけません。

　table要素内は、表題を示す caption要素、列・列グループを定義する col要素と colgroup要素、行グループのヘッダを示す thead要素, 行グループのフッタを示す tfoot要素, 行グループの本体を示す tbody要素の順番で内包されます。さらに、行グループの thead要素, tbody要素, tfoot要素には行を定義する tr要素を並べます。

tr要素内には、表の内容となるセルを示す td要素、またはセルの中で見出しとなるセルを示す th要素を並べます。

ただし、HTML4.01 では tbody要素の開始タグと終了タグを省略可能で、XHTML では tbody要素の代わりに tr要素を記述できるため、table要素の直下に tr要素を直接記述することができます。

また、表の情報の流れはどうしても複雑になってしまう傾向にあるため、音声出力や点字出力などの非視覚環境に配慮して表全体が表現している情報の要約を示す summary属性を指定することが強く推奨されています。その他にも、特に音声出力環境に対する機能（属性）が数多く定義されてます。

textarea インライン要素　 cols属性　　disabled属性　name属性　　readonly属性　　rows属性　　wrap属性
textarea要素（multi-line text field）は複数行のテキスト入力欄を作成します。要素内のテキスト（テキストのみ内包可能）が初期値としてテキスト入力欄内に表示されます。データの送信は、入力した内容が値として送信されます。入力欄の行数を cols属性で、列数を rows属性で指定します。この2つの属性は必須です。なお、入力するデータ量が短く、テキスト入力欄が1行で済む場合は input要素（type=”text”）を使います。　

title head要素の子要素

title要素（document title）は文書の表題（タイトル）を示します。視覚環境の UA では、このタイトルがウインドウ上部のタイトルバーに表示されると共に、ブックマークの名称としても利用されます。さらに、検索エンジンの検索結果においても title要素の内容がウェブページへのリンク部分となりユーザーがアクセスする際の重要な判断材料となります。

このようにタイトルは重要な役割をすることから必ず指定する必要があり、省略することは許されません。タイトルには文書の内容を具体的に理解できるものを記述します。frame要素で指定される個々のフレーム内の文書であってもタイトルの記述は必須です。XHTML1.0 には id属性がありますが、HTML4.01 と XHTML1.1 にはありません。

ul ブロック要素
ul要素（unordered list ?? bullet styles）は項目を並列的に列挙する箇条書きリスト（記号付きリストともいう）を作ります。箇条書きリストの各項目は li要素（list item）を並べて作ります。項目の順序があまり大きな意味を持たず、並列的に列挙する情報の場合に適しています。

このページを見た人は、下記のページも読んでいます！