LOCKYOUで学ぶ

HTMLタグ一覧

戻る


 心 か 


 いきなりなんなのよ


 あはは……背景が白いとつい言いたくなっちゃって……
というわけでHTMLのタグ一覧を表にしてみたよ

タグプレビュー用法要素名意味由来5/非その他
メインルート
htmlhtml文書にて全部の要素の親になるやつHTML文書/ルート要素超文書組版指定言語hyper-text markup language実は省略可能だったりする
文書メタデータ
base文書の中の相対リンクの基点を指定する文書の基底URL要素土台base文書内に一個のみ そりゃそーだ
headHTML文書のメタデータ要素を入れる文書メタデータ(ヘッダー)要素head文書メタデータ要素はだいたいこの中にいれる
linkよそのページのリソースを持ってくる外部リソースへのリンク要素連結linkCSSとかfaviconとか
meta他の文書メタデータではかけないことを書くときにつかう文書レベルメタデータ要素高次情報metainformation文字のエンコード方式とか
styleCSSを直接書くときにつかうスタイル情報要素様式styleCSS = Cascading Style Sheets
連鎖的様式台紙
titleブラウザのタイトルバーに書きたい文書を指定する文書題名要素題名title文書内に一個のみ そらそうよ
セクショニングルート
bodyHTML文書の本体を入れる文書の本文要素bodyheadと対になるやつ
コンテンツセクショニング
address
メアド
メールアドレスとかの問い合わせ先連絡先要素住所address見た目は斜体(iと同じ)
しかしdisplay:blockなので後ろで改行される
article文書の中で一つにまとまってて他のサイトにまるごと再利用できるやつ記事コンテンツ要素記事article5
aside本文とはそんなに関係ない話をするやつ余談要素余談、さておきaside5
footerコンテンツの一番最後にあるやつフッター要素?ページ下部footer5なんかうまい日本語が見つからん
headerコンテンツの一番最初にあるやつヘッダー要素?見出し部header5
h1

見出し1

見出しのやつ見出し要素?見出しheadingなんかマージンが意外とでかい……
h2

見出し2

見出しのやつ見出し要素?見出しheading
h3

見出し3

見出しのやつ見出し要素?見出しheading
h4

見出し4

見出しのやつ見出し要素?見出しheading
h5
見出し5
見出しのやつ見出し要素?見出しheading
h6
見出し6
見出しのやつ見出し要素?見出しheading
hgroup見出しをまとめたいとき見出しグループ要素?見出し + 集団heading + group5/非5で案が出てたけど結局取りやめになった
main文書の中心的な内容を書きたいときメイン要素?主要main5中心的なやつ
nav他の文書へのナビゲーションを書きたいときナビゲーションセクション要素航海術navigation5メニューとか目次とか索引とか
section区間を表したいとき汎用セクション要素節、一部分section5
テキストコンテンツ
blockquote
引用
引用文を表したいときブロック引用要素かたまり + 引用block + quote上下に間隔が空きインデントがつく
display:block
dddlを参照定義リストの説明部分を書きたいとき詳細説明要素定義 + 解説definition + descriptiondl、dtと一緒に使う
div
分割
とりあえず文を囲っておきたいときコンテンツ分割要素分割divisionとりあえず色んな所で使われがち
dl
用語1
説明1
用語2
説明2
定義リストを書きたいとき説明リスト要素定義 + 一覧表definition + listdt、ddと一緒に使う
dtdlを参照定義リストの用語を書きたいとき説明用語要素定義 + 術語definition + termdl、ddと一緒に使う
figcaption図の表題や説明を書きたいとき図キャプション要素図 + 字幕figure + caption5figureの中で使う
figure図を書きたいとき任意のキャプション付きの図要素figure5画像以外にもプログラムコードとかいろいろ
hr
節内で話題を切り替えたいとき主題分割 (水平線) 要素地平線horizon
liolやulを参照リストの項目を書きたいときリスト項目要素?一覧表 + 項目list + itemolかulと一緒に使う
ol
  1. 項目1
  2. 項目2
  3. 項目3
順序付きのリストを書きたいとき順序付きリスト要素整然した + 一覧表ordered + listliと一緒に使う
p

段落

一個の段落を書きたいとき段落要素段落paragraph
pre
整形済みテキスト
文書をそのままの形で表示したいとき整形済みテキスト要素整形された + 本文pre-formatted + text
ul
  • 項目1
  • 項目2
  • 項目3
順序がないリストを書きたいとき順序なしリスト要素整然していない + 一覧表unordered + listliと一緒に使う
インライン文字列意味付け
aアンカーリンク
アンカーリンク
他の位置やページに移動したいときアンカー要素anchorhrefを設定しないと青文字下線付きにならない
abbr略語HTMLとかの略語を表したいとき略語要素略語abbreviationacronymと統合された
b大胆とりあえず強調したいところ注目付け要素持ってくる + 注意bring + attention 4.01では非推奨だったけど復活した
でも強調したいときはemやstrongを使ったほうが良いみたい
ちなみにもともとはbold(大胆な)という意味で作られたタグだった
bdi双方向文字を右から書く人、左から書く人どっちにでも対応したいとき書字方向分離要素双方向のbidirectional5普通はユニコードの中に文字の読む方向を示す文字が入っていて問題ないけど
数字とかが入ってるとややこしくなるからそれを抑えるためのタグ
ここで説明するのは難しいから詳しくは自分でググってくださいまし
bdo双方向途中で単語の読む方向を変えたいとき双方向文字列上書き要素双方向 + 覆すbidirectional + over-ridebdoは読む向きがわかってる場合に使う
bdiは単語の読む向きがわからない(外部から読み込むとかの)ときに使う……っぽい?
br
改行したいとき改行要素壊す、割るbreak
cite引用引用元を表したいとき引用元要素引用citationblockquoteやqとの違いはあっちは内容、こっちは表題など
英語的な意味でquoteとciteとの違いは、quoteが一文一句そのままでciteは多少加工したもの、らしい
code符号、記号プログラムのソースコードを表したいとき行内コード要素符号、記号code
data資料そのコンテンツが何なのかを機械側に示したいときデータ要素?資料data5value属性を付けてようやく意味がある
機械に教えるのが目的なので見た目は変化ない
dfn定義用語の定義を表したいとき定義要素定義definition使い所がよくわからん
最初に新しい用語を出したときにその用語をdfnで囲っておいて、
文書を続けていくうちにその単語が出たらdfnの部分へのリンクを付けて戻れるようにする……的な?
em強調とりあえず強調したいところ強調要素強調emphasisstrongのほうが強い
iイタリック分類学上の名称、技術用語、他言語からきた慣用句とか
通常の文章とは少し性質の異なる箇所
イタリック要素?イタリックitalic厳密にはイタリック=斜体じゃないけどまあ斜体として考えれば大丈夫
italicの由来はなんだろう?イタリア?
それにしてもIから始まる良さげな単語はなかったのか
kbdキーボードキーボードからの入力を表したいときキーボード入力要素鍵盤keyboardキーボードから以外にも音声入力とかを示したいときにも使う
markとりあえず目立たせたいとき文字列マーク要素mark5ページ検索で検索された部分をマークするときとかに使う
q引用短い引用文を表したいとき行内引用要素引用quotationblockquoteはdisplay:block
こっちはdisplay:inline
rbルビを振りたいときルビベース要素紅玉 + 土台ruby + base5
rpルビを振りたいときルビのフォールバック用括弧要素紅玉 + 括弧ruby + parenthesis5
rtルビを振りたいときルビ文字列要素紅玉 + 文字列ruby + text5
rtcルビを振りたいときルビ文字列コンテナー要素紅玉 + 文字列 + 容器ruby + text + container5ルビ系の要素の中ではこれだけあんまり使われてない
rubyルビを振りたいときルビ要素?紅玉ruby5昔のイギリスは文字の大きさを宝石の名前をつけて呼んでいた
日本で漢字の上にふりがなを振るときに使った文字の大きさがルビーという名前だった
s取り消し線何かを取り消したいとき取り消し要素?取り消し線strikethrough文を修正したいときはdelとinsをセットで使う
sampサンプルプログラムのサンプル出力を表したいときサンプル出力要素見本sample
small小さいちょっとしたことを小さく書いておきたいとき附随コメント要素小さいsmall5でも生き残った
span期間とりあえず文を囲っておきたいとき汎用行内コンテナー要素期間spandivはdisplay:block
こっちはdisplay:inline
strong強い重要な部分を示したいとき強い重要性要素強いstrong4は単純にemより目立たせたいときに使うやつ
5だと内容の強い重要性を表すものとして定義されてる
sub下付き文字下付き文字を書きたいとき下付き文字要素添字subscript原子とか
sup上付き文字上付き文字を書きたいとき上付き文字要素上付き文字superscript累乗とか
timeその時間がいつなのかを機械側に示したいとき時間要素?時間time5datetime属性を付けてようやく意味がある
dataの時刻バージョン
u非言語的注釈非言語的な注釈を示したいとき非言語的注釈 (下線) 要素はっきりと発音されない + 注釈unarticulated + annotation 5でも生き残った
非言語的な注釈ってなんだよスペルミスとかを示したいときに使う
もともとはunderline(下線)という意味で作られたタグだった
var変数変数を示したいとき変数要素変わりやすいvariable5〜〜ableは〜〜できるとか〜〜的なとかそういった感じ
wbr改行していい位置を示す改行可能位置要素?単語 + 割るword break5HTML5で定義されたけどIE5.5からあった
画像とマルチメディア
area画像内にリンクとかつけたいときホットスポット領域要素?領域areamapの中で使う
audio音声を鳴らしたいとき埋め込み音声要素音響audio5ここらへんになると設定がめんどくさい
仕方ないね
img画像を貼りたいとき画像埋め込み要素画像image
map画像内にリンクとかつけたいときイメージマップ要素?地図mapareaと組み合わせて使う
track映像や音声に字幕とかつけたいとき埋め込みテキストトラック要素追跡track5よくわかんにゃい
video動画を貼りたいとき動画埋め込み要素映像video5こっちも設定がめんどくさい
埋め込みコンテンツ
embed外部のコンテンツを貼りたいとき埋め込み外部コンテンツ要素埋め込むembed5音とか動画とか以外のやつ?
iframe外部のHTMLを貼りたいときインラインフレーム要素一線に + 枠inline + frame5でも生き残った
object外部のリソースを貼りたいときオブジェクト要素?物体objectparamと一緒に使う
param外部のリソースを貼りたいときオブジェクト引数要素媒介変数parameterobjectの中で使う
picture状況に応じて画像を表示したいとき画像要素写真picture5sourceと一緒に使う
sourceソースを指定したいときメディアリソース指定要素?起源source5audioとかvideoとかpictureの中で使う
スクリプティング
canvasグラフィックやアニメーションを描画したいときグラフィックキャンバス要素画布canvas5javascriptで頑張って動かす
noscriptスクリプトに対応してないときになにか表示したいときスクリプト無効要素じゃない + 脚本no + script
scriptスクリプトを書きたいときスクリプト要素脚本script
編集範囲の特定
del削除文を削除したいとき削除文字列要素削除deleteinsと対になるやつ
SCPの文書によく取り消し線があるけどああいうように
古い文章を打ち消して新しい文章を追加するのに使う
ins挿入文を追加したいとき文字列追加要素?挿入insertdelと対になるやつ こいつら仲良しだな
テーブル
caption表の表題を書きたいとき表キャプション要素字幕captiontableの中で一番最初に書かないといけない
col表の列を定義したいとき表の列要素?column
colgroup表の列のグループを定義したいとき表の列のグループ要素?柱 + 集団column + group
table表を定義したいとき表要素table「おもて」ではなく「ひょう」……え?分かってる?ですよねー
tbody表の本体を定義したいときテーブル本体要素表 + 体table + body5theadやtfootとちがって一つのtableにいくつでも置いていい
td表のセルを定義したいとき表データセル要素表 + 資料table + data
tfoot表のフッター部分を定義したいとき表フッター要素表 + ページ下部table + footer5
th表のセルのヘッダーを定義したいとき表ヘッダーセル要素?表 + 見出し部table + header
thead表のヘッダー部分を定義したいとき表ヘッダー要素表 + 見出し部table + header5
tr表の行を定義したいとき表の行要素表 + 行table + row
フォーム
buttonボタンを付けたいときボタン要素buttoninput type=buttonと似てるけど
あっちは終了タグなし、こっちはタグで囲うタイプなので
こっちのほうが装飾しやすい
datalistテキストボックスに入力の候補をつけたいときデータリスト要素?資料 + 一覧表data + list5input のlist属性にdatalistのID属性で設定した名前を入れる
fieldset
凡例
フォームの部品をまとめたいときフィールドセット要素野原 + 集合field + setfieldsetのキャプションとしてlegendを使う
formフォームを用意したいときフォーム要素?formフォームとはサーバーに情報を送るためのコントロールをまとめる区間のこと
input入力項目をつけたいとき入力欄 (フォーム入力) 要素入力input色んなタイプがある デフォルトだと左みたいにテキストボックスになる
label入力項目にキャプションを付けたいときラベル要素?貼り紙labelこれを使えばラベルを押したときにもラジオボタンとかが反応する
legendfieldset参照フィールドセットのキャプションを表したいとき表フッター要素凡例legendああ!
meter計量器メーターを付けたいときメーター要素?計量器meter5
optgroupselectを参照セレクトボックスの選択肢をグループ化したいときオプショングループ要素?選択肢 + 集団option + groupoptionをまとめたいとき selectの中で使う
datalistでは使えない
optionselectやdatalistを参照セレクトボックスなどの選択肢を作りたいときオプション要素?選択肢optionselectやdatalistと一緒に使う
output出力計算結果とかの出力をしたいとき出力要素出力output5多分javascriptでつかうやつ
progress進捗進捗具合を図にして表したいとき進捗表示要素進捗progress599%からなかなか動かないとき、あるよね?
select
選択式のメニューを作りたいときセレクトボックス要素?選択selectoptionやoptgroupと一緒に使う
textarea複数行入力できるテキストボックスを用意したいときテキストエリア要素?本文 + 領域text + areainput type=textareaじゃないのは終了タグが必要だからかもしれない
インタラクティブ要素
details
概要詳細
詳細を表したいけど普段は隠しておきたいとき詳細折りたたみ要素詳細(複数形)ditail5最初は隠れてるけどタイトルを押したら詳細部分が表示されるやつ
summaryと一緒に使う
dialogダイアログボックスで表示したいものを書くダイアログ要素対話dialog5javascriptとかでdialog要素を取得してそいつのshowModal()を実行すれば開く
menuコンテキストメニューとかに項目を追加したいときメニュー要素?献立表menu4にあったが非推奨に
5.1で復活したが実験的機能、たぶん今のところまだ非推奨 firefoxなら機能する
summarydetails参照詳細を表したいけど普段は隠しておきたいとき概要明示要素概要summary5全体をdetailsで囲っておいてタイトル部分だけまたsummaryで囲うという使い方
ウェブコンポーネント
contentShadow DOMを入れたいところシャドウ DOM のコンテンツのプレイスホルダー要素内容物contentShadow DOMはHTML文書の中のちょっとした塊を再利用するような感じの技術
web componentsという技術の一部
slotを代わりに使う
elementカスタム要素を使いたいときカスタム要素 (廃止)素子elementこの一覧にないHTMLタグを新しく作りたいときに使うことを考えてた
web componentsという技術の一部
カスタム要素自体はjavascriptで実装する
shadowshadow DOMを使いたいとき廃止されたシャドウルート要素shadowshadow DOMはweb componentsという技術の一部
他のところのDOMを持ってくるような感じらしい
slot他のDOMツリーを入れたいときコンテンツプレースホルダー要素?投入口slot5データベース検索みたいに状況に応じて動的に一定のデータを入れたいとき
templateで入れたいデータを作ってslotの部分に格納する的な感じ?
template他のところに入れるDOMツリーを作りたいときコンテンツテンプレート要素型板template5ひとつ上のslotのところで説明
廃止または非推奨の要素
acronym頭字語HTMLとかの略語を表したいとき頭字語要素?頭字語acronymabbrと統合されて、こっちは非推奨になった
正直使い分け方わからんし
appletJavaアプリケーションを使いたいとき埋め込み Java アプレット要素アプレットappletJava appletがそもそも非推奨 もし使いたいならobject要素で
アプレットは多分プログラミング的な意味しかないから日本語訳はできない
basefont子孫要素の書体を指定したいとき規定フォント要素?土台 + 書体base + fontfontを使った部分の書体はこれで指定した書体が基準となる
今はCSSがあるからこれは使わない
bgsoundそのページを開いてる時の音楽を流したいとき背景音の要素 (廃止)背景 + 音background + soundIE専用 今は音楽を流したいときはaudioを使う
でもページ開いたらいきなり音がなるのはびっくりする
big大きい大きくしたいところ大きめの文字列要素大きいbigbは良くてbigはだめなのか……
blinkまばたき点滅させたいところ点滅文字列要素 (廃止)まばたきblinkネスケ専用
center
中央
中心に寄せたいとき文字列の中央揃え要素 (廃止)中央centerhtmlあるある:中央寄せで色々ドタバタしがち
commandユーザーが実行できるコマンドを書きたいときHTML コマンド要素指揮するcommand5/非メニューバーとかに出てくるらしい
代わりにmenuitem使ってと言われているがそっちも非推奨
contentShadow DOMを入れたいところシャドウ DOM のコンテンツのプレイスホルダー要素内容物contentウェブコンポーネントの欄で
dir
  • ファイル1
  • ファイル2
  • ファイル3
  • ディレクトリを表したいときディレクトリ要素 (廃止)住所氏名録directoryliと一緒に使う
    ulでいいじゃんってことで廃止になった
    elementカスタム要素を使いたいときカスタム要素 (廃止)素子elementウェブコンポーネントの欄で
    fontフォント文字のフォントを変えたいときフォント要素?書体fontこれで変えれるのは文字色とフォントとサイズ
    今はCSSで色々できる
    frame別のHTML文書を表示したいときフレーム要素?frameframesetの内部で使う
    昔のページでよく見るやつ
    今はiframeとかjavascriptで動的にページを書き換えたりとか
    frameset別のHTML文書を表示したいときフレーム包含要素?枠 + 集合frame + setframeと一緒に使うやつ
    ちなみにiframeは単独で使える
    image画像を表示したいとき廃止された画像要素画像image謎 すべてが謎のタグ
    ちなみに今のブラウザは勝手にimgに変換してくれる
    isindex文書内を検索したいとき文書問い合わせ要素?ある + 索引is + index検索フォームのやつ
    今はinput type=textで代用
    IE11だと表示される!
    keygenクライアントとサーバーで公開鍵をやり取りしたいとき公開鍵生成要素?鍵 + 発生key + generationhtml上でやるなってことで非推奨になったのかなぁ
    listing文書記入htmlの文書をそのまま表示したいとき文書記入要素?一覧表への記入listingそのまま表示したいならpreがあるし
    等幅フォントにしたいならCSSで
    marquee(劇場・ホテルなどの)入り口のひさし文字をスクロールさせたいときマーキー要素 (廃止)(劇場・ホテルなどの)入り口のひさしmarquee古臭い 秒あたりの描画回数が低いせいかマジで古臭い(GoogleChromeだとスムーズ)
    javascriptで「完全に」再現しようと思ったら地味に面倒臭い
    でも好き
    menuitemmenu参照コンテキストメニューに項目を追加したいときメニュー項目要素?献立表 + 項目menu + itemコンテキストメニューになんか追加するのってjavascriptでできるの?
    multicol段組みレイアウトを使いたいときHTML 段組みレイアウト要素(廃止)複数の + 柱multi + column文書をテーブルみたいに横に分割するやつ
    CSSで直接できる草案があるけど今はfloatとかflexboxとかつかう
    nextidA要素に使う名前を決めたいとき?次のID要素(廃止)?次 + 身分証明next + identification初期のhtmlタグで最も理解されないタグの一つ(直球)
    a要素のnameに連番を降るときに何番まで振ったかをnextidのn要素に書いてheadの中においておく
    次編集するときにその番号を見れば何番まで振ったかがわかる……みたいな?
    nobr改行しない改行したくないとき無改行文字列要素(廃止)しない + 割るno + breakCSSのwite-space:nowrapが代わりになる
    noembedembedのやつが対応してないときに変わりのものを表示したいとき埋め込みフォールバック要素(廃止)じゃない + 埋め込むno + embedembed自体は空要素なので代わりのやつを書きたいときはこの中に書く
    でも最近はembedの代わりにobjectタグを使うほうがよさそう
    noframesframeに対応してないときに変わりのものを表示したいときフレームフォールバック要素じゃない + 枠no + frameフレームがそもそももう……
    plaintext文章をそのまま表示したいときプレーンテキスト要素 (非推奨)明白な + 本文plain + text終了タグがなく、plaintextタグから最後までが全て生で表示される
    代わりにpreをつかう こっちはlであっちはr
    shadowshadow DOMを使いたいとき廃止されたシャドウルート要素shadowウェブコンポーネントの欄で
    spacer間隔を調整したいときスペーサー要素?間隔を開けるものspacerスペーサーgifとか言うものが昔あったらしいがそれの代わり
    その縦横のピクセルを設定して位置とか間隔とか調整してた
    いまはCSSのマージンとかパディングとかで
    strike取り消し線何かを取り消したいとき打ち消し線要素?取り消し線strikethroughsと被ってる
    ttテレタイプ等幅フォントで書き表したいときテレタイプテキスト要素 (廃止)印刷電信機 + 本文teletype + text TT兄弟 テレタイプ端末はパソコンの先祖、タイプライターの子孫みたいな感じの入出力機械
    xmp用例文書をそのまま書き表したいとき用例要素?examplehtmlをhtmlとして解釈せずそのまま生で表示する あと等幅フォントにする
    preがあるわな
    その他
    comment注釈html上のソースコードにコメントを書きたいとき
    <!--  -->と一緒
    ソースコメント要素?注釈commentIE10以前のみ なので普通に表示される
    IEで互換モードにしても普通に表示される

     参考サイトとしてはこのへんかな?もっとあったかも?わかんない
     MDN Web Docs(このサイト中心に作った)
     とほほのWWW入門
     HTMLクイックリファレンス
     knooto


     参考サイトぐらい控えときなさいよ……
    それで、なんでこのページはこんなに真っ白なの?

     あ、それに関してはプレビューの部分で
    それぞれのタグをスタイルを適用しないで生で表示したらどうなるか?ってことを見てみたかったからだよ
    このページを作ったのもそれが理由だったり
    せっかくだから全部のタグを乗っけたけどね むちゃくちゃめんどくさかった......

     まあでも上の表はボーダーつけないと見づらくなっちゃうし
    ところどころstyleでスタイル指定しているところはあるよ
    みんなもhtmlページを作るときは上のサイトのほうが遥かに詳しいけどこのページを参考にしてみてね