HTML5のテキストレベルセマンティクス～ルビ関連～

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

テキストレベルセマンティクス関連

テキストのマークアップに用いるタグ

<ruby>林<rt>りん</rt>檎<rt>ご</rt></ruby>

林りん檎ご

<ruby><rb>林</rb><rt>りん</rt><rb>檎</rb><rt>ご</rt></ruby>

林りん檎ご

<ruby><rb>林檎</rb><rtc><rt>りんご</rt></rtc><rtc><rt>apple</rt></rtc></ruby>

←FFで表示したとき。

<ruby>林檎<rp>(</rp><rt>りんご</rt><rp>)</rp></ruby>

林檎(りんご)

ruby要素

語句にルビをつける。

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
以下の条件1つ以上から構成される
・1つ以上のフレージングコンテンツまたはrb要素
・rp要素の直前または直後に1つ以上のrtまたはrtc要素

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツを配置できる場所

rb要素

ruby要素のベーステキストを表す。
rb要素の直後にrb、rt、rtc、またはrp要素が続く場合、または親要素にそれ以上の内容がない場合は、rb要素の終了タグを省略することが可能。

カテゴリ
・なし

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・ruby要素の子要素として配置可能

rt要素

ルビテキストを表す。
rt要素の直後にrb、rt、rtc、またはrp要素が続く場合、または親要素にそれ以上の内容がない場合は、rt要素の終了タグを省略することが可能。

カテゴリ
・なし

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・rubyまたはrtc要素の子要素として配置可能

rtc要素

ルビテキストコンテナを表す。
rtc要素の直後にrbまたはrtc要素が続く場合、または親要素にそれ以上の内容がない場合は、rtc要素の終了タグを省略することが可能。
現時点ではFFのみ対応している模様。

カテゴリ
・なし

コンテンツモデル
・フレージングコンテンツ
・rtまたはrp要素

コンテンツ属性
・グローバル属性

タグの記載場所
・ruby要素の子要素として配置可能

rp要素

ルビ未対応のブラウザに表示される代替テキストを表示する。多くのケースでは()で囲む。
ルビ対応しているブラウザでは表示されない。
rp要素の直後にrb、rt、rtc、またはrp要素が続く場合、または親要素にそれ以上の内容がない場合は、rp要素の終了タグを省略することが可能。

カテゴリ
・なし

コンテンツモデル
・フレージングコンテンツ
・rtまたはrp要素

コンテンツ属性
・グローバル属性

タグの記載場所
・rt要素またはrtc要素の直前または直後に、ruby要素またはrtc要素の子としてとして配置可能

HTML5のテキストレベルセマンティクス～その３～

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

テキストレベルセマンティクス関連

テキストのマークアップに用いるタグ

cite要素

クリエイティブ作品への参照を表す。
作品のタイトル、作者の名前（個人、人、組織）、URL参照、または省略形の参照を含める必要がある。
クリエイティブ作品は、本、紙、エッセイ、詩、楽譜、歌、台本、映画、テレビ番組、ゲーム、彫刻、絵画、演劇、演劇、オペラ、ミュージカル、展覧会、訴訟報告書、コンピュータプログラム、ウェブサイト、ウェブページ、ブログの投稿またはコメント、フォーラムの投稿またはコメント、ツイート、書面または口頭による陳述など。

<p>おすすめのブログは<cite>チョコパイを240こ食べたエンジニア</cite>です。</p>

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツを配置できる場所

q要素

他の情報源から引用されたコンテンツを表す。
cite属性を指定した場合、サイトの引用の使用に関する統計を収集するサーバーサイドスクリプトのためのもので、見た目に影響はない。

<p>筆者の説明の箇所を引用すると、
    <q cite="http://chooringo.hatenablog.com/">青森から大都会に出てきてPHPエンジニアとして修行後</q>
になる</p>

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性
・cite - 引用または編集の詳細情報のソースへのリンク先

タグの記載場所
・フレージングコンテンツが配置できる場所

dfn要素

用語の定義を表す。
dfn要素の最も近い先祖であるterm-description group、p、li、またはsection要素に、dfn要素によって与えられる用語の定義が含める必要がある。
title属性がある場合は、その属性値が定義語となる。

<p><dfn title="Cascading Style Sheets">CSS</dfn>とはXXXXXXXXXXXXXXXXX</p>

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ(dfn要素を除く)

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツが配置できる場所

abbr要素

省略形または頭字語を表す。
title属性には省略していない正式名称を記載する。

<p><dfn><abbr title="Thank God Its Friday">TGIF</abbr></dfn>は、日本でいう花金みたいなものらしい。</p>

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツが配置できる場所

HTML5のテキストレベルセマンティクス～その２～

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

テキストレベルセマンティクス関連

テキストのマークアップに用いるタグ

em要素

コンテンツの強調する。
その強調度合いは祖先要素の数によって決まる。強調する箇所によって文の意味が変わる。

<!-- ノーマル -->
<p>私は焼き鳥が好きです。</p>
<!-- 私を強調。誰かが焼き鳥が嫌いといった後に -->
<p><em>私は</em>焼き鳥が好きです。</p>

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツを配置できる場所

strong要素

重要性、深刻さ、緊急性を表す。
重要性：見出しやキャプション、段落などで、重要な部分とより詳細・定型的な部分とを区別するために使用できる。
深刻さ：警告や注意を促すのに使用できる。
緊急性：他の部分より先に見る必要があるコンテンツを示すために使用できる。

<p>カテゴリ<strong>お菓子</strong></p>
<p>～だと思う。<strong>注意事項：あくまで主観です。</strong></p>
<p>今日のタスク<ul><li><strong>引き継ぎ</strong></li><li>メールチェック</li><li>電話応対</li></p>

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツが配置できる場所

small要素

サイドコメントのような小さい字を表す。
免責事項、警告、法的な制限、または著作権、帰属、またはライセンス要件をマークアップする。
短いテキストをマークアップするためのもので、複数の段落やリスト、テキストのセクションなどには使用できない。

<footer>
    <small>© XXXXXXXX 2019 All rights reserved</small>
</footer>

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツが配置できる場所

s要素

正しくなくなった、または、関連性がなくなったコンテンツを表す。
ドキュメントの編集したことを示すのは不適切。
また、ドキュメントからあるテキストが削除されたことを示す場合はdel要素を用いる。

<p>焼き鳥(ぼんじり)詰め合わせセット</p>
<p><s>小売り希望価格：1000円</s></p>
<p>今だけ！：900円</p>

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツが配置できる場所

HTML5のテキストレベルセマンティクス～その１～

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

テキストレベルセマンティクス関連

テキストのマークアップに用いるタグ

a要素

a要素がhref属性を持っている場合、ハイパーリンクを表す。
a要素がhref属性を持っていない場合、プレースホルダーを表し、target、download、rel、rev、hreflang、type、およびreferrerpolicy属性を省略しなければならない。

<nav>
<ul>
<li><a href="https://XXXXXXXX">XXX</a></li>
<li><a href="https://YYYYYYYY">YYY</a></li>
<li><a>ZZZ</a></li>
</ul>
</nav>

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・href属性がある場合、インタラクティブコンテンツ
・プルパブルコンテンツ

コンテンツモデル
・トランスペアレント(インタラクティブコンテンツとaタグを除く)

コンテンツ属性
・グローバル属性
・href - ハイパーリンクアドレス
・target - ブラウジングコンテキスト
・download - ダウンロードするように指定。ダウンロード時のファイル名も指定できる。
・rel - 現在のドキュメントとリンク先リソースとの関係を表す
・rev - リンク先リソースから見た現在のドキュメントとの関係を表す
・hreflang - リンク先言語
・type - 参照先リソースのMIMEタイプ
・referrerpolicy - リファラの送信

タグの記載場所
・フレージングコンテンツを配置できる場所

HTML5のグルーピングコンテンツ～その３～

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

グルーピングコンテンツ関連

figure要素

自己完結型で、通常はメインフローから参照されるコンテンツを表す。
イラスト、図、写真、コードリストなどに注釈を付けることができる。

<p>コードを表示する</p>
<figure>
    <figcaption>とりあえずvarで宣言</figcaption>
    <pre><code>
    var chocopai='';
    chocopai = 'tabeta';
    </code></pre>
</figure>

カテゴリ
・フローコンテンツ
・セクショニングルート
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ
・figcaption要素

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

figcaption要素

親要素のfigureタグのキャプションや凡例を表す。

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・figure要素の子要素

main要素

ドキュメントまたはアプリケーションのbody要素のメインコンテンツを表す。
セクショニングコンテンツではないのでアウトラインには影響ない。
ドキュメントに固有のコンテンツが含まれ、サイトナビゲーションリンク、著作権情報、サイトロゴ、バナー、検索フォームなど、一連のドキュメントで繰り返されるコンテンツは含めない。

<header>
....
</header>
<main>
<p>メインなコンテンツを書くよ</p>
</main>
<fotter>
.....
</fotter>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツ( article, aside, footer, header, nav要素の中では使用不可)

div要素

他に適切な要素がない場合に用いる。div要素の代わりにより適切な要素を用いることでアクセシビリティが向上する。
スタイル上の目的やセクション内の複数の段落を折り返す場合などに使用される。

<div class="style1">
    <p>何か食べたいなー</p>
</div>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・dl要素の子要素の場合：1つ以上のdt要素とそれに続くdd要素(必要に応じてscript、template要素を含む)
・dl要素の子要素ではない場合：フローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所
・dl要素の中

HTML5のグルーピングコンテンツ～その２～

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

グルーピングコンテンツ関連

ol要素

項目のリストを表し、順序付けられているものに使用する。

<p>好きな焼き鳥ランキング</p>
<ol>
    <li>ねぎま</li>
    <li>ぼんじり</li>
    <li>軟骨</li>
    <li>皮(ぱりっぱりのやつ)</li>
    <li>かしら</li>
</ol>

カテゴリ
・フローコンテンツ
・子要素としてli要素が1つ以上含まれる場合は、パルパブルコンテンツ

コンテンツモデル
・ゼロまたは1つ以上のli要素
・script要素、template要素

コンテンツ属性
・グローバル属性
・reversed - 降順(ブール属性。あれば降順、なければ昇順。)
・start - 開始番号(有効な整数値を指定)
・type - リストマーカーの種類(1、a、A、i、Iのいずれかを指定。CSSプロパティ「list-style-type」で表示を変えることも可能。)

タグの記載場所
・フローコンテンツが配置できる場所

ul要素

項目のリストを表し、順序が重要ではないものに使用する。

<p>好きな焼き鳥</p>
<ul>
    <li>ねぎま</li>
    <li>ぼんじり</li>
    <li>軟骨</li>
    <li>皮(ぱりっぱりのやつ)</li>
    <li>かしら</li>
</ul>

カテゴリ
・フローコンテンツ
・子要素としてli要素が1つ以上含まれる場合は、パルパブルコンテンツ

コンテンツモデル
・ゼロまたは1つ以上のli要素
・script要素、template要素

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

li要素

リスト項目を表す。

<p>好きな焼き鳥ランキング</p>
<ul>
    <li value="3">軟骨</li>
    <li value="2">ぼんじり</li>
    <li value="1">ねぎま</li>
</ul>

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性
・ul要素の子要素でなければvalue - リストの番号指定。

タグの記載場所
・ol要素またはul要素の内部

dl要素

0個以上の説明リストを表す。
名前と定義、質問と回答、カテゴリとトピック、またはその他の用語説明ペアのグループなどを表す。

<dl>
    <dt>りんご</dt>
    <dd>赤や青の丸い果物</dd>
    <dt>ぶどう</dt>
    <dl>紫や黄緑色の粒がたくさんぶらさがった果物</dl>
</dl>

カテゴリ
・フローコンテンツ
・1つ以上の名前と値のグループがある場合、パルパブルコンテンツ

コンテンツモデル
・ゼロまたは1つ以上のdt要素とそれに続く1つ以上のdd要素からなるグループを0個以上。(必要に応じてscript要素またはtemplate要素)
または、
・ゼロまたは1つ以上のdiv要素(必要に応じてscript要素またはtemplate要素)

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

dt要素

説明リストの用語を表す。

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ(header要素、footer要素、セクショニングコンテンツ、ヘッディングコンテンツを除く)

コンテンツ属性
・グローバル属性

タグの記載場所
・dl要素内のdtまたはdd要素の前

dd要素

説明リストの説明部分を表す。

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・dl要素内のdtまたはdd要素の後

HTML5のグルーピングコンテンツ～その１～

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

グルーピングコンテンツ関連

p要素

段落を表すタグ。p要素ごとに上下に余白が入る。

<p>汁なし担々麵がおいしすぎる件・・・</p>
<p>醤油ラーメンがおいしすぎる件・・・</p>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

address要素

人や人々、組織への問い合わせ先を表す。
物理的またはデジタルな場所や、連絡先情報、人や組織を識別できる情報を入れる必要がある。

<address>      
組織名をもじゃもじゃ<br>
Tel: XXX-XXXX-XXXX | Fax: XXX-XXXX-XXXX
</address>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ(ヘッディングコンテンツ、セクショニングコンテンツ、 header要素, footer要素, address要素を除く)

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

hr要素

段落レベルの区切りを表す。例えば、ストーリー内で場面が切り替わるときや別のトピックに変わるときに使用する。
ドキュメントのアウトラインには影響しない。
あくまでもセマンティクスな観点で使う。見た目のデザインならばCSSを使用。

<p>あるところにおじいさんとおばあさんがいました。・・・</p>
<hr>
<p>あくる日、金色に輝くりんごが置いてありました。・・・</p>

カテゴリ
・フローコンテンツ

コンテンツモデル
・なし

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

pre要素

書式設定されたテキストのブロックを表す。
電子メール、空白行で囲まれた段落、箇条書きで始まる行で示されるリスト、プログラムコード、ASCIIアートなどの表示に使用する。
プログラムコードを表す時は、code要素やsamp要素、kbd要素を併用して使用する。

<pre><code>
var favorieFood = '汁なし担々麵'
echo favorieFood;
</code></pre>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

blockquote要素

別のソースから引用されたコンテンツを表す。
footerまたはcite要素に含まれる引用を必要に応じて使用できる。

<blockquote>
  <p>引用している内容を表すよ</p>
</blockquote>

カテゴリ
・フローコンテンツ
・セクショニングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性
・cite - 引用元へのリンク

タグの記載場所
・フローコンテンツが配置できる場所