戻る

論理要素と物理要素、その他のテキスト要素

論理要素と物理要素について

要素には、その内容に「意味を持つ」「論理要素」と「意味を持たない」「物理要素」があります。

●論理要素
タグで囲まれた内容に機能としての意味を持たせる要素で、例えば見出し(h1~h6)や文字の強調(em、strong)などがこのタイプになります。
●物理要素
タグで囲まれた内容に意味を持たず、見た目の変更だけを目的とした要素で、例えば太字(b)や斜体文字(i)などがこのタイプの要素になります。

その他のテキスト要素

abbr要素

abbr要素は、"lnc"や"etc"などの省略語を示します。スペルチェッカーや音声読み上げソフト、翻訳システム、検索エンジンなどがこの要素を理解することで、効率を上げることを目的として作られました。

表示

WWW
		<abbr title="World Wide Web">WWW</abbr>
		

acronym要素

acronym要素は、"NATO"や"F.B.I"などの頭文字を示します。

表示

NATO
		<acronym title="North Atlantic Treaty Organization">NATO</acronym>
		

button要素

button要素は、汎用的なボタンを作成します。input要素のボタンと機能は変わらないため、一般的にはinput要素のボタンが使われる機会が多いです。

表示

		<button type="submit">送信</button>
		

cite要素

cite要素は、そのテキストの内容が本や雑誌のタイトルなど図書目録、またはその他のリソースからの引用であることを示します。ブラウザによっては、斜体で表示します。この要素は、その文書の参考文献を抽出するためのものであり、ハイパーリンクの機能はもちません。ハイパーリンクをもたせたい場合はa要素を用いましょう。

表示

昨日、学校長の日記スギヤマスタイルを読みました。とても面白かったです。

興味のある方は、スギヤマスタイルでチェックしてみてください。

		<p>昨日、学校長の日記<cite>スギヤマスタイル</cite>を読みました。とても面白かったです。</p>
		<p>興味のある方は、<a href="http://www.sugiyama-style.tv" /><cite>スギヤマスタイル</cite></a>でチェックしてみてください。</p>
		

code要素

code要素は、それが何かしらのソースコードであることを示します。多くのブラウザはこれを斜体で表示します。

表示

javascriptでそのウィンドウを閉じるときはwindow.closeと書きます。
		javascriptでそのウィンドウを閉じるときは<code>window.close</code>と書きます。
		

ins要素とdel要素

テキストを追加や削除の文として示すことで、文書の中で改変されたテキストをユーザに伝えられます。追加はins要素、削除はdel要素を使用します。

表示

ハリウッド・カフェの英語表記:hollywood cafehollywood cafe
		ハリウッド・カフェの英語表記:<del>hollywood cafe</del><ins>hollywood cafe</ins>
		

dfn要素

dfn要素は、引き続きそのテキストについての例があることを示します。多くのブラウザはこれを斜体で表示します。

表示

いろいろなの種類
		いろいろな<dfn>雲</dfn>の種類
		<ul>
			<li>積乱雲</li>
			<li>層雲</li>
			<li>巻層雲</li>
		</ul>
		

kbd要素

kbd要素は、それがユーザのキーボードから入力されるものであることを示しています。多くのブラウザはこれを等幅フォントで表示します。

表示

メインメニューに戻るときはmenuと入力してください。
		メインメニューに戻るときは<kbd>menu</kbd>と入力してください。
		

samp要素

samp要素は、それがプログラムやスクリプトなどの出力例であることを示します。同じような機能を持つ要素としてpre要素があります。

表示

javascript:nowDateを実行すると2008.01.01 Happy New Yearと出力されます。
		javascript:nowDateを実行すると<samp>2008.01.01 Happy New Year<samp>と出力されます。
		

var要素

var要素は、それが変数の値やプログラム引数のインスタンスであることを示します。多くのブラウザはこれを斜体で表示します。

表示

変数cafeDataには、カフェの情報が代入されています。
		変数<var>cafeData</var>には、カフェの情報が代入されています。
		

pre要素

pre要素は、ソースコード上の改行やスペースによる字下げをそのまま表示させます。同じような機能をもつ要素としてsamp要素があります。この要素は物理要素に分類されます。

表示

javascriptを次のように入力します。

<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features){
	//v2.0
	window.open(theURL,winName,features);
}
//-->
</script>

		<p>javascriptを次のように入力します。
		<pre>
		&lt;script type="text/javascript"&gt;
		&lt;!--
		function MM_openBrWindow(theURL,winName,features){
			//v2.0
			window.open(theURL,winName,features);
		}
		//--&gt;
		&lt;/script&gt;
		</pre>
		</p>
		

sup要素とsub要素

sup要素は、上付きの添え字で表示させるのに対し、sub要素は、下付きの添え字で表示させます。この二つは、物理要素に分類されます。

表示

上付き文字です。 下付き文字です。
		上付き<sup>文字</sup>です。
		下付き<sub>文字</sub>です。
		

blockquote要素

blockquote要素は、それが長文引用であることを示します。同じ引用要素として、q要素があります。

表示

ここに引用文

		<blockquote cite="引用先のURL">
		<p>ここに引用文</p>
		</blockquote>
		

q要素

q要素は、それが引用であることを示します。ブラウザによっては、これをダブルクォーテーション("~")で囲みます。長文引用するときは、blockquote要素を使用しましょう。

表示

ここに引用文

		<p><q cite="引用先のURL">ここに引用文</q></p>
		

br要素

br要素は、段落内で強制改行させます。終了タグがない空要素です。

表示

おはようございます
こんにちは
こんばんは
おやすみなさいませ

		<p>
		おはようございます<br>
		こんにちは<br>
		こんばんは<br>
		おやすみなさいませ
		</p>
		

div要素

div要素はブロックエレメントを作り、要素をグループ化する際に使用します。div要素は、単体ではとくに意味属性を持たない要素です。スタイルシートで属性を与えるたえめの箱と考えるとよいでしょう。ゆえに「スタイルコンテナ」と呼ばれています。今回の製作でも、後でdiv要素を使用します。

表示

何もスタイルを指定しないdiv要素は論理的に意味がないのでなるべく避けましょう。

		<div id="content">
		<p>何もスタイルを指定しないdiv要素は論理的に意味がないのでなるべく避けましょう。</p>
		</div>
		

span要素

span要素は、インラインエレメントを作ります。先述したdiv要素のインライン版で、単体ではとくに意味属性をもちません。使用する際は、かならずスタイルを適用することを忘れないようにしてください。

表示

なにもスタイルを適用しないspan要素には意味がありません。 span要素はスタイルシートを使うときに有効です。
		なにも<span>スタイル</span>を適用しないspan要素には意味がありません。
		span要素は<span style="color:red;font-size:50px;">スタイルシート</span>を使うときに有効です。
		
inserted by FC2 system