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

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

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

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

code要素

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

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

chromeで表示したとき
f:id:chooringo:20190223215614p:plain

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

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

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

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

var要素

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

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

chromeで表示したとき
f:id:chooringo:20190223222333p:plain

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

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

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

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

samp要素

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

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

chromeで表示したとき
f:id:chooringo:20190223225802p:plain

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

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

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

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

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>