初めてのHTML入門⑧

2021年3月2日 05:40

今回は、略語の表現、そして名前を特記するときの書き方、住所の表現について勉強していきます。

略語表現

略語は、『この部分は、○○という言葉の略語ですよ。』
ということを表すことができます。
タグとしては<abbr>を使います。

<abbr>に対して、”title”属性を追加することによって、何の言葉の略なのかということを伝えることができます。

名前を特記する

何か引用してきた際に、その出どころの名前を特記することがあるかもしれません。例えば、映画のタイトル、雑誌のタイトル、新聞のタイトルやサイトのタイトルなどです。
そういう時には、<site>というタグを利用することで、これは何かの名前であるということを特記することができます。

住所の表現

ここからここまでが住所である、ということを示したい場合、
<address>というタグを使います。

HTMLを書いてみる

次のようなファイルを用意します。

<!docstyle html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>

HTMLは勉強し続けるとわかるし、便利なものだ。


私の好きな映画はターミネーターです。


何かあればこちらまで 
東京都渋谷区○○1丁目2番3号
□□ビル　５階

</body>
</html>

略語表現では、次のように書きます。

<abbr>HTML</abbr>は勉強し続けるとわかるし、便利なものだ。

ただし、ブラウザ上での見た目には何も変わりません。

これに対してタイトル属性を追加してみましょう。

<abbr title="Hypertext Markup Language">HTML</abbr>は勉強し続けるとわかるし、便利なものだ。

これを保存して、ブラウザを更新してみましょう。
見た目にはほぼ変わりませんが、マウスのカーソルをHTMLの上に合わせると”Hypertext Markup Language”という風に表示されます。これによって、この単語の略が元々何なのかということがわかりやすくなりました。

名前を特記する場合

今回の例でいえば”ターミネーター”というタイトルが名前であることを伝えるために<cite>タグを使ってみます。

私の好きな映画は<cite>ターミネーター</cite>です。

これを保存して更新してみると

”ターミネーター”という文字が斜体になり、この部分がほかの部分とは違った意味を持っていることが伝わります。

住所を表現する場合

何かあればこちらまで 
　　<address>
東京都渋谷区○○1丁目2番3号
□□ビル　５階
　　</address>

アドレスタグを追加して保存。そしてブラウザを更新してみましょう。

すると住所の部分が斜体で表現されて、他の部分とは違うということがわかるようになりました。
意図したところで改行がされていませんので タグを追加しましょう。

何かあればこちらまで 
　　<address>
東京都渋谷区○○1丁目2番3号 
□□ビル　５階
　　</address>

今回は、略語の表現の仕方、そして名前の特記の仕方、住所の表現の仕方を勉強しました。

この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/HMdEGGSpjUA
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、簡単なことから継続して徐々にレベルアップしていきましょう。