Search

HTML要素テキストレベルの意味付け

  1. a〔リンクおよびアンカー〕
  2. q〔インラインレベルの短い引用〕
  3. cite〔引用元〕
  4. em〔強調〕
  5. strong〔論理的に強調〕
  6. small〔文字を小さく〕
  7. mark HTML5～〔＊〕
  8. dfn〔定義語〕
  9. abbr〔省略語・頭字語〕
  10. time HTML5～〔日付･時刻〕
  11. progress HTML5～〔処理の進捗〕
  12. meter HTML5～〔測定〕
  13. code〔プログラムのソースコード〕
  14. var〔変数、引数〕
  15. samp〔プログラムの出力結果のサンプルテキスト〕
  16. kbd〔キーボードの入力テキスト〕
  17. sub〔下付文字〕
  18. sup〔下付文字〕
  19. span〔インライン要素のグループ化〕
  20. i〔イタリック体〕
  21. b〔太字〕
  22. bdo〔テキストの表記方向〕
  23. ruby〔ルビの範囲〕
  24. rt〔ルビの内容〕
  25. rp〔ルビを囲む記号〕

a
リンクおよびアンカー

2009/8/26

構文

<a id="anc_name" name="anc_name">アンカー</a>
<a href="リンク先URL">リンクテキスト</a>

a要素は、ハイパーリンクを表します。
a要素を入れ子にすることはできません。

属性

HTML4.01にあったcharset/coords/name/rev/shape属性は、HTML5で廃止されました。
HTML5からmedia/ping属性が追加されました。

a要素の属性
属性値説明
グローバル属性-全要素共通の属性。
hrefURLリンク先のURIを指定。
targetフレームターゲットリンクをどう開くか指定。href属性があるリンクの場合のみ使用可。
pingURLユーザーがハイパーリンクに従うとき通知される半角スペース区切りのURLを指定。href属性があるリンクの場合のみ使用可。
relリンクタイプ現在の文書とhref属性で指定したリンク先URLの関係を指定。href属性があるリンクの場合のみ使用可。
mediaメディアタイプリンク先のメディアタイプを指定。デフォルトは「all」。href属性があるリンクの場合のみ使用可。
hreflang言語コードリンク先の言語を指定。
typeMIMEタイプhref属性で指定したリンク先の文書型を指定。HTML文書の場合は、「text/html」を指定。

サンプル

<!-- リンク -->
<a href="http://www.google.co.jp/">Google</a>

<!-- ページの先頭へのアンカー -->
<a name="pagetop" id="pagetop"></a>
･･･（略）･･･
<p><a href="#pagetop">▲ページの先頭へ</a></p>

q
インラインレベルの短い引用

2009/8/26

構文

<q>~</q>

q要素は、インラインレベルの短い引用文を表します。

引用元を明示する場合は、cite属性（任意）に引用元の文書のあるURIを指定します。
ブロックレベルの引用の場合は、blockquote要素を使用してください。

属性

固有の属性はありません。

q要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

『<q>無知の知</q>』とは、ギリシャの哲学者<cite>ソクラテス</cite>が唱えた言葉です。知らないことを知っているということは、知らないということを知らない人にくべてまだましというような意味です。

cite
引用元

2009/8/26

構文

<cite>~</cite>

cite要素は、引用元（URI）を表します。

属性

固有の属性はありません。

cite要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

このページは、<cite><a href="http://www.w3.org/TR/xhtml1/">W3CのXHTML&trade; 1.0 The Extensible HyperText Markup Language</a></cite>を参考にしています。

em
強調

2009/8/26

em要素は、テキストを強調するのにしようします。

em要素は、一般的なブラウザにおいてイタリック体（斜体）で表示されます。

属性

固有の属性はありません。

em要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

仕事で分からないことがあったら、素直に聞くのが一番かも。
<em>聞くは一時の恥、知らぬは一生の恥</em>っていうし。
何でもかんでも聞くのはどうかと思うけど、知ったかするよりはまだよいよい。

strong
論理的に強調

2009/8/26

strong要素は、テキストを論理的に強調するのに使用します。

strong要素は、一般的なブラウザにおいて太字で表示されます。

属性

固有の属性はありません。

strong要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

XHTMLでは、<strong>文書構造と見栄えを分離</strong>するために、スタイルシートは全て外部CSSに記述します。

small
文字を小さく

2009/8/26

HTML4においてsmall要素は、一回り小さなテキストとして表示されていました。 HTML5においてsmall要素は、小さいテキストを表し、向こう側はコメントとして、より小さなテキストとして表示されます。

属性

固有の属性はありません。

small要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

通常のテキスト<small>一回り小さいテキスト</small>通常のテキスト

mark HTML5～
＊

2009/8/26

mark要素は、マークされたテキストを表します？

属性

固有の属性はありません。

mark要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<article>
	<style>
		blockquote mark, q mark {
		font: inherit; font-style: italic;
		text-decoration: none;
		background: transparent; color: inherit;
	}
	.bubble em {
		font: inherit; font-size: larger;
		text-decoration: underline;
	}
	</style>
	<h1>She knew</h1>
	<p>Did you notice the subtle joke in the joke on panel 4?</p>
	<blockquote>
		<p class="bubble">I didn't <em>want</em> to believe. <mark>Of course on some level I realized it was a known-plaintext attack.</mark> But I couldn't admit it until I saw for myself.</p>
	</blockquote>
	<p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it explains everything neatly.</p>
</article>

dfn
定義語

2009/8/26

dfn要素は、定義語を表します。

属性

固有の属性はありません。

dfn要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

mixiは、日本最大の<dfn title="社会的ネットワークをインターネット上で構築するサービス">ソーシャル・ネットワーキング・サービス</dfn>です。

abbr
省略語・頭字語

2009/8/26

abbr要素は、「XHTML（エックスエイチティーエムエル）」のように、単語の先頭の頭文字を組み合わせて、そのまま頭文字を発音する省略語を表します。

title属性に、省略語の説明文を指定します。 一般的なブラウザでは、abbr要素でマークアップしたテキストに破線が表示され、abbr要素のに指定した内容がツールチップ表示されます。

HTML4では、「Ajax（エイジャックス）」のように、単語の先頭の頭文字を組み合わせてつづり読みにし、1つの単語として発音する頭字語を表す場合はacronym要素でマークアップしていましたが、 acronym要素はHTML5では廃止されたためabbr要素で代替してください。

属性

固有の属性はありません。

abbr要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<blockquote cite="http://ja.wikipedia.org/wiki/AJAX">
	<p>
		<abbr title="Asynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript + XML">Ajax</abbr>（アジャックス、エイジャックス）は、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。
	</p>
</blockquote>

<blockquote cite="http://ja.wikipedia.org/wiki/XHTML">
<p>
	Extensible HyperText Markup Language （エクステンシブル・ハイパーテキスト・マークアップ・ランゲージ、<abbr title="Extensible HyperText Markup Language">XHTML</abbr>, エックスエイチティーエムエル） は、
	<abbr title="Standard Generalized Markup Language (SGML、文書記述言語SGML)">SGML</abbr>で定義されていた<abbr title="HyperText Markup Language">HTML</abbr>を
	<abbr title="Extensible Markup Language">XML</abbr>の文法で定義しなおしたマークアップ言語である。
	その仕様は<abbr title="HyperText Markup Language">HTML</abbr>と同じくW3Cによって勧告されている。
</p>
</blockquote>

time HTML5～
日付･時刻

2009/8/26

time要素は、時間または日付、あるいは両方を表します。

属性

time要素の属性
属性値説明
グローバル属性-全要素共通の属性。
datetimedatetime要素の日付あるいは時間を指定。省略する場合は、要素内に時間あるいは日付を定義する必要があります。

サンプル

We open at <time>10:00</time> every morning.

I have a date on <time datetime="2008-02-14">Valentines day</time>

progress HTML5～
処理の進捗

2009/8/26

progress要素は、処理の進捗を表します。

progress要素は、ダウンロードなどJavaScriptにおける時間のかかる処理の進捗を表示するために使用します。

属性

progress要素の属性
属性値説明
グローバル属性-全要素共通の属性。
max数値完了価を指定。
value数値進捗の現在値を指定。

サンプル

The object's downloading progress:
<progress><span id="objprogress">76</span>%</progress>

meter HTML5～
測定

2009/8/26

meter要素は、測定を表します。

既知の最小値と最大値の測定のために使用されます。
要素のテキストあるいは、min/max属性で測定範囲を指定する必要があります。

属性

meter要素の属性
属性値説明
グローバル属性-全要素共通の属性。
min数値最小値を指定。デフォルトは0。
max数値最大値を指定。デフォルトは1。
height数値最大の測定値を指定。
low数値最小の測定値を指定。
optimum数値どんな測定値がベストかを指定。この値がhigh属性より高いなら、よりよい値であることを意味します。逆にlow属性より低いなら、より低い値であることを意味します。
value数値測定値を指定。

サンプル

<meter min="0" max="10">2</meter>

<meter>2 out of 10</meter>

<meter>20%</meter>

code
プログラムのソースコード

2009/8/26

code要素は、プログラムのソースコードを表します。

code要素は、一般的なブラウザにおいて等幅フォントで表示されます。

属性

固有の属性はありません。

code要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

JavaScriptでアラートを表示する場合は、<code>alert("文字列");</code>と記述します。

var
変数、引数

2009/8/26

var要素は、変数または引数であることを表します。

var要素は、一般的なブラウザにおいて斜体で表示されます。

属性

固有の属性はありません。

var要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<code>c = a + b;</code>という式があった場合、変数<var>a</var>に100、変数<var>b</var>に200を代入すると、変数<var>c</var>の値は300になる。

samp
プログラムの出力結果のサンプルテキスト

2009/8/26

samp要素は、プログラムの出力結果のサンプルテキストであることを表します。

samp要素は、一般的なブラウザにおいて等幅フォントで表示されます。

属性

固有の属性はありません。

samp要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

JavaScriptで<code>document.write('Hello! Internet!');</code>と記述すると、<samp>Hello! Internet!</samp>と出力されます。

kbd
キーボードの入力テキスト

2009/8/26

kbd要素は、キーボードの入力テキストであることを表します。

属性

固有の属性はありません。

kbd要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<style type="text/css">
kbd {
	margin:0 2px; padding:1px 3px;
	border-width:1px 2px 2px 1px;
	border-style:solid;
	border-color:#cfcfcf #999 #999 #cfcfcf;
	text-align:center;
	background-color:#eee;
	font-size:10px;
	font-weight:bold;
}
</style>
<p>現在閲覧中のWebページを印刷するには、<kbd>Ctrl</kbd>＋<kbd>P</kbd>を同時に押してください。</p>

現在閲覧中のWebページを印刷するには、Ctrl＋Pを同時に押してください。

sub
下付文字

2009/8/26

sub要素は、テキストを下付き文字を表します。

属性

固有の属性はありません。

sub要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

水の元素記号は、「H<sub>2</sub>O」です。
水の元素記号は、「H2O」です。

sup
下付文字

2009/8/26

sup要素は、テキストを上付き文字を表します。

属性

固有の属性はありません。

sup要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

二酸化炭素の元素記号は、「CO<sup>2</sup>」です。<br>
2<sup>2</sup> = 4
二酸化炭素の元素記号は、「CO2」です。
22 = 4

span
インライン要素のグループ化

2009/8/26

span要素自体に意味はありませんが、class、dir、langなどの属性と共に使用することで有用になります。 例えば、class属性を指定して、任意のテキストを装飾したりするのに使用します。

属性

固有の属性はありません。

span要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<style type="text/css">
	span.i { font-style:italic; }
	span.b { font-weight:bold; }
</style>

<span class="b">太字、<span class="b i">太字＋斜体</span></span>

i
イタリック体

2009/8/26

i要素は、テキストをイタリック体（斜体）で表示します。

日本語のテキストを斜体にすると読みづらくなるため、日本語には使用しないようにしましょう。

属性

固有の属性はありません。

i要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

通常テキスト<i>タリック体テキスト</i>通常テキスト

b
太字

2009/8/26

b要素は、テキストを太字で表示します。

それ以外の部分より、より重要であるテキストの部分を定義するのに使用します。

属性

固有の属性はありません。

b要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

通常テキスト<b>太字テキスト</b>通常テキスト
通常テキスト太字テキスト通常テキスト

bdo
テキストの表記方向

2009/8/26

bdo要素は、テキストの表記方向を制御するのに使用します。

日本語、英語などのように「左→右」に記述する言語の場合は「ltr」、
アラビア語のように「右→左」に記述する言語の場合は「rtl」を指定します。

属性

bdo要素の属性
属性値説明
グローバル属性-全要素共通の属性。
dirltr
rtl		テキストの表記方向を指定。
左→右の場合は「ltr」、右→左の場合は「rtl」を指定。

サンプル

<p>
	<bdo dir="ltr">PHP & JavaScript Room</bdo><br>
	<bdo dir="rtl">PHP & JavaScript Room</bdo>
</p>
<p>
	<bdo dir="ltr">左から右へ</bdo><br>
	<bdo dir="rtl">右から左へ</bdo>
</p>

PHP & JavaScript Room
PHP & JavaScript Room

左から右へ
右から左へ

ruby
ルビの範囲

2009/8/26

ruby要素は、フリガナを表します。

属性

固有の属性はありません。

ruby要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

阪急京都線の駅名「<ruby><rb>西院</rb><rp>（</rp><rt>さいいん</rt><rp>）</rp></ruby>」と、
京福嵐山線の駅名「<ruby><rb>西院</rb><rp>（</rp><rt>さい</rt><rp>）</rp></ruby>」は読み方が異なります。


<ruby>
 漢 <rt> かん </rt>
 字 <rt> じ　 </rt>
</ruby>

rt
ルビの内容

2009/8/26

rt要素は、フリガナを表します。

属性

固有の属性はありません。

rt要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<ruby>
	<rb>西院</rb>
	<rp>（</rp>
	<rt>さいいん</rt>
	<rp>）</rp>
</ruby>

<ruby>
 漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
 字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

rp
ルビを囲む記号

2009/8/26

rp要素は、フリガナを囲む記号を表します。

属性

固有の属性はありません。

rp要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<ruby>
	<rb>西院</rb>
	<rp>（</rp>
	<rt>さいいん</rt>
	<rp>）</rp>
</ruby>

<ruby>
 漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
 字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2025 PHP & JavaScript Room All Rights Reserved.

pagetop