HTML勉強4日目。引用blockquote、一部引用q、引用元表記cite=”URL”。

プログラミング

HTML勉強4日目となりました。

本日勉強したのは、以下の3つです。

引用 blockquote

そのブロック全体をまとめて引用する、というときに使います。

エディタに記述すると以下のようになります。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<blockquote>
			<p>
				芸術は爆発だ。
			</p>
		</blockquote>
		<p>
			ゲーテは言った。前進をしていない人は後退しているのだ。
		</p>
	</body>
</html>

blockquoteタグで「芸術は爆発だ」という文章ごと引用している事を示しています。

これをブラウザに表示すると以下のようになります。

blockquoteで囲った部分だけ、他の文章に比べてインデントされています。

これで、「芸術は爆発だ。」という文章だけ、何か別の意味を持ったものである、という事を示すことができます。

一部引用 q

文章の一部だけ、引用している文書であることを示したいときに使います。

エディタに表示すると以下のようになります。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<blockquote>
			<p>
				芸術は爆発だ。
			</p>
		</blockquote>
		<p>
			ゲーテは言った。<q>前進をしていない人は後退しているのだ。</q>
		</p>
	</body>
</html>

「前進をしていない人は後退しているのだ。」という名言のみ引用であることを示すため、qタグで囲いました。

これをブラウザに表示すると以下のようになります。

qタグで囲ったところがブラウザでは「」で囲われました。

これで、この文書が引用である、という事を示すことができます。

なお、エディタの<html lang=”ja”> というコードを<html>に変更してみます。

<!doctype html> 

<html> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<blockquote>
			<p>
				芸術は爆発だ。
			</p>
		</blockquote>
		<p>
			ゲーテは言った。<q>前進をしていない人は後退しているのだ。</q>
		</p>
	</body>
</html>

これをブラウザに表示すると以下のようになります。

先ほど、「」だったところが ” ” に変わりました。

こちらの方が引用っぽいですね!

引用元表記 cite=”URL”

先ほどの文章の引用元を表現する際に、cite属性を使います。

エディタに表示すると以下のようになります。

<!doctype html> 

<html> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<blockquote cite="http://www.kashikorogu.com">
			<p>
				芸術は爆発だ。
			</p>
		</blockquote>
		<p>
			ゲーテは言った。<q cite="http://www.kashikorogu.com">前進をしていない人は後退しているのだ。</q>
		</p>
	</body>
</html>

blockquoteタグ、qタグにそれぞれ 引用元を表記しました。

これをブラウザに表示すると以下のようになります。

見た目は何も変わっていません。

ただ、構造上は引用元が表記された状態になっています。

必要でああれば、これを見ている人がこの情報を辿る事が出来ます。

コメント

タイトルとURLをコピーしました