Closed5

HTMLタグ

1. セクション

ページを構成するセクションをマークアップするタグ。
セクションはページの構成要素を役割や内容に応じて区切り、それぞれのセマンティクスを明確にする役割を持つ。

<article>
<nav>
<aside>
<section>

<article>

<article>は、ページを構成するセクションのうち、ニュースやブログ記事といった、その部分だけを取り出しても単体で完結したコンテンツのマークアップに使用できる。

<nav>

ナビゲーションの役割を持つセクションのマークアップに使用できる。主要なナビゲーションのみをマークアップすることが推奨されている。

<aside>

補足・関連情報のマークのマークアップに使用できる。

<section>

上記、<article><nav><aside>以外の汎用的なセクションのマークアップに使用できる。

2. セクションに関連した情報

セクションでキーとなるワード(見出し、タイトル)など、セクションに関連した情報をマークアップするタグ

<h1> ~ <h6>
<header>
<footer>
<address>

<h1> ~ <h6>

見出し、タイトルなどのセクションのキーとなるワードのマークアップに使用できる。

<header> / <footer>

ヘッダー、フッターのマークアップに使用できる。

<address>

<address> 要素は、これを含んでいる HTML が個人、団体、組織の連絡先を提供していることを示します。

3. グルーピング / コンテンツ

段落やリストなど、ブロック単位のマークアップするタグ。
ドキュメントをわかりやすく、読みやすい形にする役割を持つ。

<p>
<hr>
<pre>
<blockquote>
<ol>
<ul>
<li>
<menu>
<dl>
<dt>
<dd>
<figure>
<figucaption>
<main>
<div>

p(Paragraph)

パラグラフ(段落、文章)のまとまりのマークアップに使用できる。

hr (Horizontal rule)

パラグラフの区切りをつけるためのマークアップに使用できる。

pre (Preformatted text)

改行、タブ、半角スペースで表示を整えた「整形済みテキスト」のマークアップに使用できる。

blockquote

引用のコンテンツのマークアップに使用できる。

ol(Ordered List) / ul(Unordered list) / li(List item)

<ol>は順番リスト、<ul>は順不同リスト、<li>は<ol><ul>の各項目のマークアップに使用できる。

ツールバーのマークアップに使用できる。(ユーザーが操作するコマンドをリストアップしたものなど)

dl(Definition List) / dt(Definition Term) / dd(Definition Description)

説明リストのマークアップに使用できる。
<dl> = Definition List
<dt> = Definition Term
<dd> = Definition Description

<figure>

完全な文章、プログラムのコード、図面など、自己完結型のコンテンツをマークアップする要素。それ単体で成り立ち、代わりにリンクを貼ることでも対応できるようなコンテンツが適しています。

<figucaption>

<figure>コンテンツのキャプション(説明)を表す要素

<main>

main要素は、主要なコンテンツをマークアップするための要素

<div>

意味を持たないブロック要素。
他により適切な要素がないかを確認するようにしましょう。

4. テキスト / セマンティクス

重要な語句など、テキスト単位のマークアップするタグ

<a>
<strong>
<em>
<small>
<s>
<cite>
<q>
<dfn>
<abbr>
<ruby>
<rt>
<rtc>
<rp>
<data>
<time>
<code>
<var>
<samp>
<sup>
<sub>
<bdo>
<span>
<br>
<wbr>

<a>

HTML の <a> 要素 (アンカー要素) は、 href 属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。

<abbr>

略語要素 (<abbr>) は略語や頭字語を表します。任意で title 属性で、略語の完全形または説明を提供することができます。

<b>

HTML の注目付け要素 (<b>) は、要素の内容に読み手の注意を惹きたい場合で、他の特別な重要性が与えられないものに使用します。

<bdi>

書字方向分離要素 (<bdi>) は、ブラウザーの書字方向アルゴリズムにこのテキストが周囲のテキストから独立していると扱うよう指示します。

<br>


要素 は、文中に改行(キャリッジリターン)を生成します。詩や住所など、行の分割が重要な場合に有用です。

<cite>

引用元要素 (<cite>) は、引用された創作物の参照を表し、作品のタイトルを含む必要があります。参照は、引用メタデータに関する利用場面に合わせた慣習に応じて省略形が用いられることがあります。

<code>

<code> 要素は、コンピューターコードの短い断片の文字列であると識別できるような外見のコンテンツを表示します。

<strong>

強い重要性要素 (<strong>) は、内容の重要性、重大性、または緊急性が高いテキストを表します。ブラウザーは一般的に太字で描画します。

<em>

<em> 要素は、強調されたテキストを示します。<em> 要素は入れ子にすることができ、入れ子の段階に応じてより強い程度の強調を表すことができます。

<small>

<small> 要素は、表示上のスタイルとは関係なく、著作権表示や法的表記のような、注釈や小さく表示される文を表します。既定では、 small から x-small のように、一段階小さいフォントでテキストが表示されます。

<s>

<s> 要素は取り消し線を引いた文字列を表示します。 <s> 要素はすでに適切または正確ではなくなった事柄を表現します。

<q>

<q> 要素 は、その内容が行内の引用であることを表します。最近の多くのブラウザーでは、文字列を引用符で囲むように実装しています。

<dfn>

定義要素 (<dfn>) は、定義句や文の文脈の中で定義している用語を示すために用いられます。

<ruby>

<ruby>要素 はベーステキストの上、下、隣に描画される小さな注釈で、よく東アジアの文字の発音を表すのに使われます。他の種類の注釈にも使われることがありますが、この使い方はあまり一般的ではありません。

<rt>

ルビ文字列 (<rt>) 要素は、ルビによる注釈(振り仮名)のルビ文字列の部分を定義し、東アジアの組版において発音、翻訳、音写などの情報を提供するために使用します。 <rt> 要素は常に ruby 要素の中で使用されます。

<rtc>

ルビ文字列コンテナー (<rtc>) 要素は、 ruby 要素内で使用する rb 要素にルビで与える文字列の、意味を表す注釈を包含します。rb 要素は発音の注釈 (rt) と意味の注釈 (rtc) の両方を持つことができます。

<rp>

ルビ代替表示用括弧 (<rp>) 要素は、 ruby 要素によるルビの表示に対応していないブラウザー向けの代替表示用括弧を提供するために使用します。

<data>

<data> 要素は、与えられたコンテンツの断片を機械可読な翻訳にリンクします。コンテンツが時刻または日付に関連するものであれば、 time 要素を使用する必要があります。

<time>

<time> 要素は、特定の時の区間を表します。

<var>

変数要素 (<var>) は、数式やプログラムコード内の変数の名前を表します。

<samp>

サンプル要素 (<samp>) は、コンピュータープログラムからのサンプル出力を表す行内文字列を含めるために使用されます。

<sup>

上付き文字要素 (<sup>) は、表記上の理由で上付き文字として表示するべき行内文字列を指定します。

<sub>

下付き文字要素 (<sub>) は、表記上の理由で下付き文字として表示するべき行内文字列を指定します。

<bdo>

現在のテキストの書字方向を上書きし、中のテキストが異なる書字方向で描画されるようにします。

<span>

<span> 要素は、記述コンテンツの汎用的な行内コンテナーであり、何かを表すものではありません。スタイル付けのため (class または id 属性を使用して)、または lang のような属性値を共有したりするために要素をグループ化する用途で使用することができます。

<wbr>

<wbr> 要素は、改行可能位置 — テキスト内でブラウザーが任意で改行してよい位置を表しますが、この改行規則は必要のない場合は改行を行いません。

このスクラップは2021/10/17にクローズされました
作成者以外のコメントは許可されていません