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で表示したとき
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ
コンテンツモデル
・フレージングコンテンツ
コンテンツ属性
・グローバル属性
タグの記載場所
・フレージングコンテンツが配置できる場所