つくばホームページ制作アドワークス｜茨城県土浦市

<time>…… 日付や時刻を正確に示す

<time>タグは、日付や時刻を表記する際に、グレゴリオ暦による日付や24時間表記の時刻で正確に示す際に使用します。日時を記述するのに、必ず<time>を使用しなくてはならないわけではなく、コンピュータやブラウザが理解できるように日時を示すことが目的です。

<time>タグは、正確に特定できない日付や時刻に対して使用するべきではありません。例えば、ビッグバンの1ミリ秒後、ジュラ紀の初期、紀元前約250年の冬、といった時を示すのに、<time>タグを使用するのは不適切です。

現在、一般的に利用されている西暦はグレゴリオ暦ですが、グレゴリオ暦は1582年2月にローマ教皇グレゴリウス13世によって制定されたものです。<time>タグは、グレゴリオ暦導入以前の日付には使用しないことが推奨されています。

また、日本では明治5年（1872年）にグレゴリオ暦が導入されていますが、国によって16世紀～20世紀初頭と導入時期が異なります。グレゴリオ暦からの日付や時刻の変換には十分な注意が必要です。

datetime属性は、日付や時刻を指定します。もし、datetime属性を省略する場合には、<time>～</time>の中に日付や時刻を記述します。

pubdate属性を指定すると、<time>で示した日時が親要素の<article>の公開日時であることを表します。親要素の<article>が存在しない場合には、文書全体の公開日時を表しますが、この場合には、文書中の<time>は1つ以下でなければなりません。

■使用できる属性

datetime属性

日付や時刻を指定する

pubdate属性

親要素の<article>、または、文書全体の公開日時であることを表す

■HTML5での使用例

[html]
<p>
ジョンとポールが初めて出会ったのは、よく晴れた
<time datetime="1957-7-6">夏の土曜日</time>
だった。ポールは、教会の夏祭りで歌うジョンをたまたま観て、
歌がうまくてカッコいいと思ったそうだ。
</p>
<p>
私がビートルズを聴くようになったのは、
中学生になった頃だろうか。そのころビートルズは
すでに解散して伝説となっていた。
</p>
<p>
今夜は、<time>23:00</time>からラジオで
ビートルズ特集を放送するらしい。
</p>
[/html]

参考：http://www.htmq.com/html5/time.shtml

<abbr>…… 略語や頭字語であることを表す

<abbr>タグは、略語や頭字語であることを表す際に使用します。title属性は様々な要素で使用できる汎用的な属性ですが、<abbr>にtitle属性を指定した場合には特別な意味を持ちます。

<abbr>のtitle属性には、略語や頭字語の正式な名称を指定します。title属性を指定した場合、一般的なブラウザではマウスカーソルを乗せた際にツールチップとして表示されます。

略語や頭字語は必ず<abbr>～</abbr>で囲まなくてはならないということはありませんが、読者になじみのない略語を使用する場合には、title属性を持つ<abbr>でマークアップするか、その略語が最初に使われるテキストに正式な名称を含めておくことが推奨されています。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01では略語はacronym要素、頭字語はabbr要素でそれぞれ表すことになっていました。HTML5ではacronym要素は廃止され、abbr要素に代替することが推奨されています。

略語（abbreviation）とは、例えば、HTML(Hypertext Markup Language)、XML(Extensible Markup Language)などのことです。一方、頭字語（acronym）とは、例えば、SOHO(ソーホー、Small Office Home Office)、LAN(ラン、Local Area Network)などの、頭文字をとった略語で１つの単語として発音するものを指します。HTML4.01では、略語と頭字語を別の要素として区別していましたが、HTML5ではどちらもabbr要素で表すことが出来るように変更されています。

■使用できる属性

title属性

略称や頭字語の正式な内容を指定

■HTML5での使用例

[html]
<p>
<dfn id=whatwg>
<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
</dfn>
は、2004年にHTML5の仕様策定を開始しています。
</p>
<p>
<a href="#whatwg"><abbr>WHATWG</abbr></a>
は、当時
<abbr title="World Wide Web Consortium">W3C</abbr>
が進めていたウェブ技術の標準化の方向性に満足しなかった
Apple、Mozilla、Operaによって設立されたグループです。
</p>
[/html]

参考：http://www.htmq.com/html5/abbr.shtml

<dfn>…… 用語が使用されていることを示す

<dfn>タグは、用語が使用されていることを示す際に使用します。<dfn>～</dfn>の中には用語を配置しますが、その直近の親要素となる<p>・<dl>・<section>などの中には用語の定義内容を一緒に入れる必要があります。

title属性は様々な要素で使用できる汎用的な属性ですが、<dfn>にtitle属性を指定した場合には特別な意味を持ちます。<dfn>のtitle属性には、定義される用語の正式な名称を指定します。また、<dfn>～</dfn>の直下に<abbr>を配置した場合には、<abbr>のtitle属性の値が定義される用語の正式な名称を表すことになります。

dfn要素の祖先となる要素にtitle属性を指定しても、dfn要素には影響を与えません。

■HTML4.01からHTML5へのバージョンアップによる変更点

dfn要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。

■使用できる属性

title属性

定義される用語の正式な名称を指定

以下の使用例では、<dfn>の直下に<abbr>を配置して、定義される用語の正確な名称を指定しています。また、二度目に用語が登場する箇所では、最初に用語が登場した箇所へリンクすることで、同じ用語であることを明確に示しています。

■HTML5での使用例

[html]
<p>
いま解説している
<dfn id="sample">
<abbr title="HyperText Markup Language">HTML</abbr>
</dfn>
は、ウェブページを作成するための言語の一つです。
</p>
<p>
<a href=#sample><abbr title="HyperText Markup Language">HTML</abbr></a>
はそれほど難しいものではありません。簡単なウェブページなら
数種類のタグを覚えれば十分に作成することが可能です。
</p>
[/html]

参考：http://www.htmq.com/html5/dfn.shtml

<q>…… 引用句・引用文であることを表す

<q>タグは、他の情報源からの引用句・引用文であることを表す際に使用します。cite属性には、引用元のアドレスが存在する場合にそのURLを指定します。

ダブルクォーテーション（ ” ）などの引用符は、ユーザーエージェントが自動的に挿入することになっているので、<q>～</q>の中やその前後には引用符を入れないようにしてください。最近の一般的なブラウザでは、「　」や“　”などの引用符で囲まれて表示されます。

ただし、引用符を挿入させることを目的に、引用句・引用文ではない内容に<q>を使ってはいけません。 例えば、皮肉を込めた表現の部分を引用符で囲んで表示させるために、<q>～</q>で囲むのは不適切な使い方です。

引用句・引用文は必ず<q>～</q>で囲まなくてはならないということはありません。<q>タグを使用することなく引用符で囲んでも間違いではありません。

■HTML4.01からHTML5へのバージョンアップによる変更点

q要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。

■使用できる属性

cite属性

引用元のURLを指定

■HTML5での使用例

[html]
<p>夏目漱石の<cite>草枕</cite>の中に出てくる
<q cite="http://www.examle.xxx/kusamakura.html">智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。</q>
という表現は大変有名です。</p>
[/html]

参考：http://www.htmq.com/html5/q.shtml

<cite>…… 作品のタイトルを表す

<cite>タグは、作品のタイトルを表す際に使用します。ここでいう作品とは、例えば、本・書類・随筆・詩・楽譜・歌・脚本・映画・テレビ番組・ゲーム・彫刻・絵画・劇場作品・芝居・オペラ・ミュージカル・展覧会・訴訟事件の報告…などのことです。

<cite>は人の名前に使用することはできません。例えば、文中の有名人の名前を際立たせたい場合などには、<b>や<span>のほうが適しているでしょう。

また、作品の内容を引用する場合には、<blockquote>や<q>を使用してください。<blockquote>や<q>のcite属性には引用元のURLを指定します。作品のタイトルを表すcite要素と混同しないように注意してください。

■HTML4.01からHTML5へのバージョンアップによる変更点

cite要素は、HTML4.01では出典・参照先を表す要素で、作品名だけではなく作者名などにも使用することが認められていました。HTML5では作品のタイトルを表す要素となり、使用範囲がより限定されています。

■HTML5での使用例

[html]
<p><span class="sakusya">夏目漱石</span>の<cite>草枕</cite>は、こんな風に始まります。</p>
<blockquote cite="http://www.xxxxx.xxx/kusamakura.html">
<p>山路を登りながら、こう考えた。<br>
智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。</p>
</blockquote>
<p>この作品の主人公は30歳の洋画家ですが、世間にあまりなじめていない彼の芸術家らしい生きざまがすでに冒頭で表現されています。</p>
[/html]

参考：http://www.htmq.com/html5/cite.shtml

<s>…… すでに正確ではなくなった内容を表す

<s>タグは、すでに正確ではなくなった、すでに関係なくなった内容を表す際に使用します。<s>は、文書の編集を表す際に使用するのは適切ではないとされています。削除されたテキスト箇所を表す場合には、<s>ではなく、<del>を使用してください。

■HTML4.01からHTML5へのバージョンアップによる変更点

s要素は、HTML4.01では「テキストに打ち消し線を引く要素」として定義されていました。HTML5では「すでに正確ではなくなった・関係なくなった内容を表す要素」とされ、単なるスタイリング要素から意味のある要素に変更されています。

以下の使用例は、商品に新しい特別価格が付けられたという内容です。通常価格の部分を<s>～</s>で囲んでいますが、このマークアップは“通常価格がすでに関係無くなっている”という意味を表しています。

■HTML5での使用例

[html]
<p>缶コーヒーがお買い得！</p>
<p><s>通常価格: 1本100円</s></p>
<p><strong>特別価格：1本59円！！</strong></p>
[/html]

参考：http://www.htmq.com/html5/s.shtml

<small>…… 免責・警告・著作権などの注釈や細目を表す

<small>タグは、免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表す際に使用します。その箇所が重要であるという意味や強調する役割、反対に重要性を弱める意味などはありません。

<small>はメインコンテンツではなく、あくまで注釈や細目などの短いテキストに使用する要素です。<small>を複数の段落、複数のリスト、複数のセクションなどの長いテキストに対して使用するべきではありません。例えば、利用規約がメインコンテンツとなるページで、全体を <small> ～ </small> で囲むような使い方は適切ではありません。

■HTML4.01からHTML5へのバージョンアップによる変更点

small要素は、HTML4.01ではテキストを小さく表示する要素でした。HTML5では注釈や細目を表す要素となり、これまでとは意味が変更されています。

■HTML5での使用例

[html]
<footer>
<address>
さらに詳しい情報は、<a href="mailto:info@adworks24.co.jp">info@adworks24.co.jp</a>
までメールでお問い合わせください。
</address>
<p><small>&copy; 2011 Adworks Corp.</small></p>
</footer>
[/html]

参考：http://www.htmq.com/html5/small.shtml

<strong>…… 強い重要性を表す

<strong>タグは、強い重要性を表す際に使用します。<strong>でテキストの一部の重要性を変更しても、文自体の意味は変更されません。

■HTML4.01からHTML5へのバージョンアップによる変更点

strong要素はHTML4.01の定義とほぼ同じですが、HTML5では<strong> ～ </strong> の中の一部を、さらに <strong> ～ </strong> で囲むことで、重要性の強さの程度を指定し分けることができるようになっています。

HTML5での使用例

[html]
<p>
<strong>警告：</strong>
この迷宮は危険です。
<strong>カモをよけてください。</strong>ゴールドを見つけたら取ってください。
<strong><strong>ダイアモンドを取ってはいけません。</strong>それらは爆発して<strong>
10メートル以内のものをすべて破壊します。</strong></strong>警告は以上です。
</p>
[/html]

参考：http://www.htmq.com/html5/strong.shtml

<em>…… 強勢する（アクセントを付ける）箇所を表す

<em>タグは、強勢する（アクセントを付ける）箇所を表す際に使用します。<em> ～ </em>を入れ子にすることで、コンテンツの特定個所が持つ強勢の度合いを指定し分けることができます。

同じ文でもどの個所をどの程度の強さで強勢するかによって、ニュアンスが異なってくるでしょう。例えば、「猫はかわいい」という文を、「<em>猫</em>はかわいい」とすれば、（犬などの他の動物じゃなくて…）というニュアンスが出せるかもしれません。また、「猫は<em>かわいい</em> 」とすれば、（猫はかわいくないという意見への反論）というニュアンスが出せるかもしれません。

■HTML4.01からHTML5へのバージョンアップによる変更点

em要素は、HTML4.01では強意（意味を強める）を表す要素でした。HTML5では強勢する（アクセントを付ける）箇所を表す要素となり、これまでとは意味が変更されています。

尚、段落内の一部を際立たせるためにテキストをイタリック体にする場合には、<em>より<i>のほうが適切です。また、<em>には重要性を伝える意味はありません。強意・強調が目的の場合には<strong>を使用してください。

参考：http://www.htmq.com/html5/em.shtml

<a>…… ハイパーリンクを指定する

<a>タグは、ハイパーリンクを指定する際に使用します。ウェブページ内のテキストや画像などを<a>～</a>で囲んで必要な属性値を指定してやることで、ハイパーリンクの始点（出発点）や終点（到達点）とすることができます。

<a>は、anchor（アンカー）の略です。anchorを日本語にすると“船の錨・つなぎ止めて固定する”といった意味になります。<a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。

href属性は、ハイパーリンク先のURLを指定する際に使用します。href属性の値には相対パスと絶対パスのどちらでも指定することができます。

相対パスとは、現在のファイルの場所からの相対的なパスを指定する方法で同じドメイン名のURL同士ならフォルダ階層やファイル名を指定するだけでリンクすることができます。絶対パスとは、http://～で始まるURLを指定する方法で、別のドメイン名のURLにリンクする際などに利用されます。

target属性はハイパーリンク先のターゲット、つまり、リンク先をどのように開くかを指定する際に使用します。target属性の値には以下の4種類、または、任意のターゲット名を指定することができます。任意のターゲット名を指定する際には、リンク先にそのターゲット名を付けておきます。ターゲット名は、一文字目がアンダースコア（ _ ）以外で始まる値でなければいけません。

■使用できる属性

_self

現在のウィンドウでリンク先を開く

_parent

現在のウィンドウの親ウィンドウでリンク先を開く

_top

現在のウィンドウの最上位階層のウィンドウでリンク先を開く

_blank

新しいタブやウィンドウでリンク先を開く

任意のターゲット名

任意の名前を付けたウィンドウでリンク先を開く

rel属性・media属性・hreflang属性・type属性は、リンク先のリソースがどんな性質を持つかを、ユーザーがリンクをたどる前に知らせるための属性です。rel属性は現在の文書とハイパーリンク先との関係性、media属性はハイパーリンク先のメディア、hreflang属性はハイパーリンク先の言語、type属性はハイパーリンク先のMIMEタイプを、それぞれ指定する際に使用します。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML5では、a要素のname属性は廃止されています。HTML4.01におけるname属性は、ウェブページ内の特定個所に名前を付けて、ページ内リンクを作成する際などに使用していました。HTML5で同様の機能を作成する場合にはid属性を使用します。id属性は、ひとつの文書の中では重複して同じ名前を付けることはできないので、ウェブページ内の場所を一意に特定できます。

HTML4.01ではa要素はインライン要素であったため、ブロックレベル要素全体をリンクを指定することはできませんでした。例えば、段落全体を<a>～</a>で囲んでリンクするような指定方法は認められていませんでした。

HTML5では、インライン要素とブロックレベル要素の分類は廃止されており、段落・リスト・表などのセクションに対しても、全体を<a>～</a>で囲んでリンクを指定できるようになっています。ただし、その中に他のリンクやフォームボタンなどのインタラクティブコンテンツが含まれる場合には、リンクを指定することはできません。

参考：http://www.htmq.com/html5/a.shtml