作品タイトルを表す<cite>（サイト）タグ、語句単位での引用を表す<q>（クォート）タグ、定義を表す<dfn>（ディフィニション）タグ、略称を表す<addr>（アブリヴィエーション）タグの基本的使用法を掲載。
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| カテゴリー | コンテンツモデル | |
| cite要素（作品タイトルを表す） | ・パルパブルコンテンツ ・フローコンテンツ ・フレージングコンテンツ |
フレージングコンテンツ |
| q要素（語句単位での引用を表す） | ||
| addr要素（略称を表す） | ||
| dfn要素（定義を表す） | フレージングコンテンツ ※dfn要素を子孫要素に持つことを不可 |
グローバル属性（共通）
グローバル属性は、すべての要素に指定できる共通の属性のことです。
accesskey（アクセスキー）
要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。
autocapitallze
入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します
| 値 | 内容 |
|---|---|
| offまたはnone | 自動的な大文字化は指定しない |
| onまたはsentences | 最初の文字を大文字化する |
| words | 各語の最初の文字を大文字化する |
| characters | すべての文字を大文字化する |
class（クラス）
要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。
contenteditable（コンテント・エディタブル）
要素の内容が閲覧者による編集可能かどうか指定します。
| 値 | 内容 |
|---|---|
| trueまたは、空 | 閲覧者による編集可能。 |
| false | 閲覧者による編集不可。 |
data-
カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。
dir（ディレクショナリティ）
要素の内容の書字方向（文字を書き進める方向）を指定します。
| 値 | 内容 |
|---|---|
| ltr | テキストを左から右へ書き進める。「Left to Righ」の略 |
| rtl | 要素は編集不可。「Right to Left」の略 |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
draggable
Drag and Drop APIを使用して要素をドラッグすることができるか指定します。
| 値 | 内容 |
|---|---|
| テキストを左から右へ書き進める。「Left to Righ」の略 | |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
hidden（ヒドゥン）
要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。（商品IDやユーザーID）
id（アイディー）
要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。
空白文字は使用できません。
lang（ランゲージ）
要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。
例：lang=”ja”
spellcheck（スペルチェック）
要素の内容に対するスペルチェックの可否を指定します。
| true | スペルチェックをします。 |
| false | スペルチェックをしません。 |
style（スタイル）
要素に直接スタイルシートを指定します。
※style属性でスタイルを指定する方法はあまり推奨されていません。
tabindex（タブインデックス）
「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。
title（タイトル）
要素に補足情報を加えます
translate（トランスレート）
翻訳対象にするかどうかを指定します。
| 値 | 内容 |
|---|---|
| yes | 翻訳対象とする |
| no | 翻訳非対象とする |
イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。
onclick
要素をクリックしたときにスクリプトを実行します。
oninput
入力コントロールにデータを入力したときにスクリプトを実行します。
onsubmit
入力コントロールからデータを送信するときにスクリプトを実行します。
cite要素
インラインレベル要素
書式・概要
<cite>～</cite>cite要素は、創作物の出典（作品名・作者名・URLなど）を表します。対象とする創作物には、本・新聞・雑誌・論文・映画・絵画・楽曲・演劇などのほか、ブログ記事のコメント、ツィートなども含みます。
使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>cite要素のサンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<p>
江戸川 乱歩の有名な推理小説といえば、<cite>D坂の殺人事件</cite>や<cite>心理試験</cite>などがある。
</p>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
q要素
インラインレベル要素
書式・概要
<q 属性="属性値">～</q>q要素は語句単位での引用を表します。段落単位で引用を表す場合は、blockquote要素を使用します。
使用できる属性
cite（サイト）
引用元がWeb上に公開された文書であれば、そのURLをcite属性の値として使用できます。書籍であればISBNコード（１３桁 or １０桁）が発行されているので、「urn:isbn]ISBNコード」と指定することもできます。
<q cite="https://kcfran.com/">～</q>
<q cite="urn:isbn:9999999999">～</q>使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>q要素のサンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<p>
nginxについて、wikiでは
<q cite="https://ja.wikipedia.org/wiki/Nginx">フリーかつオープンソースなWebサーバである。
処理性能・高い並行性・メモリ使用量の小ささに焦点を当てて開発されており、HTTP, HTTPS, SMTP, POP3,
IMAPのリバースプロキシの機能や、ロードバランサ、HTTPキャッシュなどの機能も持つ。
</q>と書かれている
</p>
<p>
<q cite="urn:isbn:978-4041053287">人間椅子 江戸川乱歩ベストセレクション(1) (角川ホラー文庫) </q>
</p>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
dfn要素
書式・概要
<dfn>～</dfn>dfn要素は、その部分が、用語の意味を定義している部分の対象となる「用語」であることを示します。たとえば、ある文章の中で、初めてその用語が出てくる場合などに使用されます。一般的なブラウザでは、イタリックで表示されます。
使用できる属性
title
属性値が正式な定義語になります。
<dfn title="xxxxxxx">～</dfn>使用方法
title属性で指定しているため、「すなりんのWebサイト」が定義語になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>dfn要素のサンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<p>
あなたが<dfn title="すなりんのWebサイト">いま！アクセスしているWebサイト</dfn>とは・・・
</p>
</body>
</html>実行サンプル
dfnタグの上ににマウスポインターを置くと「定義語」が表示されます。
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
addr要素
書式・概要
<addr title="文字列">～</addr>addr要素は、その部分が略語であることを示す要素です。title属性を使用することで、省略していない状態の元の言葉を示すことができます。
略語部分をすべてaddr要素でマークアップする必要はありません。省略していない状態の言葉がわかるようにしたい場合や、略語の部分にCSSを適用したい場合など、必要な場合にのみ使用してください。
使用できる属性
title
属性値が正式な定義語になります。
<addr title="xxxxxxx">～</addr>使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>addr要素のサンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<p>
この<addr title="スマートフォン">スマホ</addr>の液晶が割れている。
</p>
</body>
</html>実行サンプル
addrタグの上ににマウスポインターを置くと「略語」が表示されます。
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
定義語を略称として表す
dfn要素とaddr要素を組み合わせることにより、定義語を略称として表すことができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>dfn要素+addr要素のサンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<p>
Webサイトを作成するには、まずは<dfn><addr title="HyperText Markup Language">HTML</addr></dfn>言語でページを作成する必要があります。
</p>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント