HTML勉強5日目。略語abbr、title属性、cite、住所address

プログラミング

本日は、略語・名前の特記・住所の表現について勉強しました。

覚えるタグは以下の4つです。

略語 abbr

abbrタグを使ってこの部分は略語である、という事を示すことができます。

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

<!doctype html> 
<html> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<p>
			<abbr>WBC</abbr>は4年に1回行われる。
		</p>
	</body>
</html>

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

abbrタグで囲った「WBC」という文書に特に変化はありません。

ただし、何かの略語であるという事が示せたことになります。

title属性

先ほどのabbrタグにtitle属性を加えることで、何の言葉の略なのかという事を伝えることができます。

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

<!doctype html> 
<html> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<p>
			<abbr title="World Baseball Crassic">WBC</abbr>は4年に1回行われる。
		</p>
	</body>
</html>

<abbr>の中にtitle属性を加えました。

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

「WBC」という文字に薄くアンダーラインが表示され、そこにマウスを合わせると「World Basball Classic」と表示されました。

これによって、その略語が元々どういったものなのかが一目でわかるようになりました。

名前を特記する cite

citeタグを使うことで、これは何かの名前である、という事を特記する事が出来ます。

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

<!doctype html> 
<html> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<p>
			私は<cite>ライオンキング</cite>という映画が好きです。
		</p>
	</body>
</html>

 住所 address

文章の一部分が住所であることを示したいときにaddressタグを使います。

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

<!doctype html> 
<html> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<p>
			私の会社の住所はこちらです。<br>
			<address>
				愛知県豊田市1丁目2番地
			</address>
		</p>
	</body>
</html>

 

コメント

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