HTMLで略語を表現する方法 – abbr【初心者向け】

HTMLの初心者向けに、略語を表現する方法を解説した記事です。【abbrタグ】をtitleタグと使うことで、正式名称も表記できます。名前を特記する【citeタグ】、住所表現の【addressタグ】も合わせて説明。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。

今回は、HTMLの略語・名前の特記・住所表現 について解説します。そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。

 

本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

略語・名前の特記・住所表現

・略語 abbreviation <abbr>〜</abbr>

主にtitleタグと共に使われ、abbrタグで囲まれた部分が略語であることを指示します。

略語の正式名称はtitleタグで表記しましょう。

<abbr title=”Hypertext Markup Language”>HTML</abbr>を学ぼう

abbrタグ

見た目は変わりありませんが、HTMLの部分にカーソルを重ねるとtitleで入力したものが表示されます。titleタグは文書にタイトルをつけ、検索エンジンの検索結果に反映させる大事なタグですが、abbrタグ以外にも、タグの補足情報を付け加える場合に使われます。

 

20160620

 

略語ってたくさんあると思うんですけど、全部に書くんですか?

 

20163020-2

 

必ずしもabbrタグで囲む必要はないけど、読者になじみの無い略語を使う場合は使用が推奨されているね。

 

20160620

 

なじみが無いっていわれても~。例えば、どんなのがありますか?

 

20163020-2

 

専門用語で書かれた仕様書とか、もっとくだけた感じではフォトショップをフォトショのような感じで略する場合に使ってもいいかもね。

 

・名前を特記する cite <cite>〜</cite>

cite:引用する、引き合いに出す という意味から、映画・本・新聞・サイトなど作品のタイトル名を表記する際に使われます。

映画<cite>The Imitation Game</cite>はコンピューター科学の祖であるアラン・チューリングの物語です。

citeタグ

citeタグは人物名などにも使われていましたが、最新バージョンのHTML5では、作品のタイトル名に使われることが推奨されています。

 

 

・住所の表現 address <address>〜</address>

住所や連絡先、問い合わせ情報を表示する際に使われます。

<address>東京都渋谷区恵比寿1-25-1 NAGAHAMAビル5F</adress>

addressタグ

addressタグで囲った部分が斜体になりました。

 

citeダグや、addressタグまたはemタグも、ブラウザ上で表示される見た目は同じですが、HTML上ではそれぞれのタグで囲まれた語句は意味合いが異なるものとして認識されます。タグを正しく使い分けることでサイトのつくりが整理されると、コンピューターが認識しやすい質の高いサイトとみなされやすくなります。

 

適切なタグを使って整理されたページは、ページの価値が高くなるということを覚えておきましょう。

 

今回の記事は以上です。

さらにHTMLを学びたい場合は、HTMLで強調タグと区切り線を使う方法も合わせてご覧ください。

 

20160620

 

citeタグやaddressタグの使いどころってわかりづらいんですけど!

 

20163020-2

 

大切なのは自分のサイトやページに適しているかどうかだよ。

 

 

20160620

 

自分のサイトやページ?

 

20163020-2

 

例えば企業サイトだとaddressタグは必須だよね。自分のサイトが何かの作品の紹介を多用しているならciteタグも重要になります。

 

20160620

 

なるほど!

 

 

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。