HTML5のテキストレベルセマンティクス～b要素とu要素とmark要素～

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

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

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

b要素

文章の概要のキーワード、レビューの製品名、対話型テキスト駆動型ソフトウェアや記事のリードなどのような、特別に重要な意味を持たず単純に注意を引くテキストを表す。
他の要素が適切でない場合に最後の手段として使用する。
例えば見出しはh1～h6要素を使用し、強調はem要素、重要度はstrong要素、マークまたは強調表示はmark要素を使用する。

<p>青森県は<b>りんご</b>の生産地で有名だよ</p>

chromeで表示したとき

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

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

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

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

u要素

中国語の固有名詞やスペルミスなどのテキストを表す。
多くのブラウザでは従来のハイパーリンクのレンダリング（下線）と表示が同じため、混同される可能性のある個所では使用しない。

<p><u>fotter</u>タグのスタイルを修正する。</p>
<!-- 正しくはfooter -->

chromeで表示したとき

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

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

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

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

mark要素

参照するためにマークまたはハイライトするテキストを表す。
引用文に使用する場合は、元々存在していなかったが引用先でハイライトを追加した形になる。

<p>好物は『<mark>チョコパイ</mark>と焼き鳥』。</p>

chromeで表示したとき

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

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

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

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

HTML5のテキストレベルセマンティクス～supとsubとi～

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

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

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

sup要素とsub要素

sub要素は下付き文字を表し、sup要素は上付き文字を表す。
特定の意味づけをする必要があるときのみ使用する。

<p><var>Y<var> = <var>a<var><var>x</var><sup>2</sup></p>
<p><var>Y<var> = log<sub>2</sub> + 5</p>

chromeで表示したとき

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

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

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

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

i要素

代替の音声や気分、分類名、技術用語、別の言語の慣用句、音訳などテキストの質が異なるテキストを表す。
メインテキストと言語が異なる場合は、lang属性をつける必要がある。
ほとんどのブラウザではイタリック体で表示されるが、必ずイタリック体で表示されるわけではない。

<p>りんごは英語で<i>apple</i>だよ</p>

chromeで表示したとき

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

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

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

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

HTML5のテキストレベルセマンティクス～codeとvarとsampとkbd～

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

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

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

code要素

コンピュータコードを表す。
XML要素名やファイル名、コンピュータプログラム、その他コンピュータが認識する文字列が対象。
マークアップされているコンピュータコードの言語を示す正式な書き方はないが、クラス属性に"language-"という接頭辞をつけることができる。

<pre>
    Javascriptのコードを書くよ
    <code class="language-javascript">var test = 'chocopai';</code>
</pre>

chromeで表示したとき

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

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

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

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

var要素

変数を表す。数式やプログラミングの変数や定数、物理量を識別する記号、関数のパラメータなどがある。

<pre>
    Javascriptのコードを書くよ
    <code class="language-javascript">var <var>test</var> = 'chocopai';</code>
</pre>

chromeで表示したとき

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

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

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

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

samp要素

プログラムやコンピュータの出力を表す。

<samp>入力してください</samp>というエラーメッセージが表示されます。

chromeで表示したとき

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

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

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

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

kbd要素

ユーザ入力内容を表す。(通常はキーボード入力だが、音声コマンドなど他の入力を表すのにも利用できる。)
kbd要素がsamp要素の中にネストされている場合、システムによって出力された時の入力を表す。
逆にkbd要素にsamp要素が含まれている場合、システム出力に基づく入力を表す。

<p><kbd><kbd>Shift</kbd>+<kbd>F5</kbd></kbd>を押してください。</p>
<p><kbd>test</kbd>を入力すると、<samp><kbd>test</kbd></samp>と表示されます。</p>
<p><kbd><samp>基本情報</samp>の<samp>都道府県</samp></kbd>を選択してください。</p>

chromeで表示したとき

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

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

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

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

HTML5のテキストレベルセマンティクス～dataとtime～

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

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

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

data要素

value属性値とともにマシンリーダブル(機械やコンピュータで読み取り可能な形式)な情報を表す。
value属性値は必須で、機械が可読可能な形式にしなければならない。
値が日付または時間に関連している場合は、time要素を使う。

<data value="001">あっぷるぱい</data>

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

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

コンテンツ属性
・グローバル属性
・value - マシンリーダブル値

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

time要素

datetime属性値とともにマシンリーダブル(機械やコンピュータで読み取り可能な形式)な情報を表す。
コンテンツの種類は様々な種類の日付、時刻、タイムゾーンオフセット、期間に制限される。

<time>2019-02-17T14:54:39.929+0000</time>
<time>2019-02-17</time>
<time>11:56</time>
<time>2011-W30</time>
<time>PT3H20M3S</time>
<time>3h 20m 3s</time>
<time datetime="2019-02-17">2019年2月17日</time>

・日時の指定
　[YYYY-MM-DD][半角スペースまたはT][HH:MM:SS][Z または +HHMM または +HH:MM または -HHMM または -HH:MM]
・週の指定
　[YYYY-W{週単位の数値}]
・期間の指定
　[{週単位の数値}w {日付単位の数値}d {時間単位の数値}h {分単位の数値}m {秒単位の数値}s]
　[P{日付単位の数値}DT{時間単位の数値}H{分単位の数値}M{秒単位の数値}S]
　

datetime属性がある場合、その値はマシンリーダブル形式、
datetime属性がない場合、time要素のテキストコンテンツをマシンリーダブル形式にする。

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

コンテンツモデル
・datetime属性がある場合：フレージングコンテンツ
・上記以外：テキストだが上記記載の条件を満たす必要がある。

コンテンツ属性
・グローバル属性
・datetime - マシンリーダブル値

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

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>

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

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

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

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