普段制作では横着して使用をしなくても済んでしまうものなども多々ありますが、用途別にタグは色々と別れています。
まずは過去出題された引用に関するタグについての解説をし、その後、似たように用途別に使用できるタグを紹介いたします。
基本的にHTML5で使用できるものを紹介しておりますが、記事を見ているタイミングによっては廃止されているもの等あるかもしれませんので、別途調べていただけたら嬉しいです。
引用のタグ
blockquote 要素
- 用途: 長い引用文やブロックレベルの引用に使用されます。
- 表示: 引用文全体を独立したブロックとして表示します。
<blockquote>
この中にブロックレベルで引用する内容を入れる。
</blockquote>q 要素
- 用途: 短い引用文やインラインレベルの引用に使用されます。
- 表示: 引用文が文の中に埋め込まれる形で表示され、通常は引用符（ダブルクォート）で囲まれます。
<q>文章の間の一か所などの場合はインラインレベルのタグを使用します。</q>出典や著作物のタイトル
cite 要素
- 用途: 出典や著作物のタイトルをマークアップするための要素です。
<p><cite>吾輩は猫である</cite> 著・夏目漱石</p>強調のタグ
strong 要素
- 用途: 重要性の強調
<strong>重要性がある文言等</strong>em 要素
- 用途: 文章の一部の強調
<p>文章の中の<em>強調する部分</em>ようのタグです。</p>テキスト装飾のタグ
pre 要素
- 用途: 整形済みテキスト
- 説明:
pre要素は、プレーンテキストをそのままの形で表示するために使用されます。この要素内のテキストは、改行や空白がそのまま表示されます。
<pre>
これは整形済みテキストです。
改行やスペースがそのまま表示されます。
</pre>用途の具体例
- コードスニペットの表示: ソースコードを表示する際に、改行やインデントを保持するために使用します。
- 詩の表示: 詩や歌詞など、改行が重要なテキストを表示するために使用します。
code 要素
- 用途: ソースコードの一部
<code>コード</code>samp 要素
- 用途: 出力結果のサンプル
- 説明:
samp要素は、プログラムやシステムの出力結果を表示するために使用されます。この要素は、ユーザーがシステムから受け取る出力を示します。
<p>次のようなエラーが表示されました: <samp>File not found</samp></p>用途の具体例:
- エラーメッセージの表示: プログラムやシステムのエラーメッセージを表示する場合に使用します。
- コマンドライン出力の表示: コマンドラインインターフェースの出力結果を示すために使用します。
kbd 要素
- 用途: ユーザーの入力
- 説明:
kbd要素は、ユーザーがキーボードから入力する文字やキーを示すために使用されます。通常、キーボードショートカットやコマンドを示す際に使われます。
<p>保存するには <kbd>Ctrl</kbd> + <kbd>S</kbd> を押してください。など</p>用途の具体例:
- キーボードショートカットの表示: 特定の操作を行うためのキーボードショートカットを示す際に使用します。
- コマンド入力の説明: ユーザーがコマンドラインに入力すべきコマンドを示す場合に使用します。
テキスト強調のその他のタグ
b 要素
- 用途: 重要ではないが太字にしたい場合
<b>太字</b>i 要素
- 用途: 重要ではないが斜体にしたい場合
<i>斜体</i>まとめ
上記に挙げたすべての要素は、HTML5で使用可能です。
これらの要素を適切に使用することで、ウェブページの構造と意味をより明確に伝えることができます。
HTML5では、これらの要素を利用して、意味論的にリッチなマークアップを実現することができます。
実際にブログを書かれている方は意識をされていたり、その中でもコードに関する記事であったり操作に関する記事などを制作されている方などはすでに知っているものばかりかと思いますが、普通にWEBデザイナーをしているとこういったタグを知らない人なども多々見かけます。
ウェブデザイン技能検定でも普段あまり使用しないようなタグで出題される事も見受けられるので、実際に使わなくても理解しておけるようにしましょう。
