TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTML5でacronymタグの代わりにabbrタグを使って略語を表す方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTML5でacronymタグの代わりにabbrタグを使って略語を表す方法を現役エンジニアが解説【初心者向け】

初心者向けにHTML5でacronymタグの代わりにabbrタグを使って略語を表す方法について解説しています。acronymタグとabbrタグはどちらも略語を示すものですが、HTML5ではabbrタグを使用します。書き方と利用例を見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTML5でacronymタグの代わりにabbrタグを使って略語を表す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

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

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

acronymタグの代わりにabbrタグを使って略語を表す方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

acronymタグとは

acronymタグは略語を表す要素です。HTML5では廃止されているため使用できません。acronymタグについて、詳しくは以下の記事も参考にしてください。

MDN – <acronym>

 

[PR] Webデザインで副業する方法とは

abbrタグとは

acronymタグの代わりに使用されるのがabbrタグです。abbrタグは略語や頭字語を表します。abbrタグの記述方法は以下のようになります。

<abbr title="正式名称">略語</abbr>

abbrタグについて、詳しくは以下の記事も参考にしてください。

MDN – <abbr>：略語要素

 

活用場面

それぞれの専門分野では略語が多く使われています。例えばCSSは「Cascading Style Sheets」の略です。

略語は慣れてくれば分かりやすい反面、専門外の人や初心者にとってはとっつきづらいものです。そのような略語をWebページに書く場合、abbrタグを利用することで、ユーザーに配慮した記事にすることができるでしょう。

abbrタグは読み上げソフトにも対応しており、積極的に利用したいタグの1つです。

 

abbrタグを使ってみよう

今回のサンプルプログラムではabbrタグの使い方について確認します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample</title>
</head>
<body>
  Webページは<abbr title="Hyper Text Markup Languate">HTML</abbr>と
  <abbr title="Cascading Style Sheets">CSS</abbr>で作成されます。
</body>
</html>

実行結果は以下のようになります。略語の上にマウスカーソルを乗せるとtitle属性で指定した正式名称が表示されます。

 

まとめ

今回の記事ではHTML5でacronymタグの代わりにabbrタグを使って略語を表す方法について学習しました。

 

監修してくれたメンター

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLでページ内リンクがずれる原因を解消する方法を現役エンジニアが解説【初心者向け】

HTMLでページ内リンクがずれる原因を解消する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLでよく使う数学記号を現役デザイナーが解説【初心者向け】

HTMLでよく使う数学記号について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTML...
HTML

HTMLでvalue属性を使って入力初期値を指定する方法を現役エンジニアが解説【初心者向け】

value属性を使ってHTML内の入力初期値を指定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
HTML

HTMLのキャッシュを無効にする方法を現役エンジニアが解説【初心者向け】

HTMLのキャッシュを無効にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
HTML

HTML5でdfnタグを使って用語を定義する方法を現役デザイナーが解説【初心者向け】

HTML5でdfnタグを使って用語を定義する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLのフォントサイズで最大値・最小値を指定する方法を現役エンジニアが解説【初心者向け】

HTMLのフォントサイズで最大値・最小値を指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

あわせてよく読まれている記事

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

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの略語・名前の特記・住所表現 について解説します。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 略語を表現する方法について詳しく説明していくね！ 大石ゆかり お願いします！   略語・名前の特記・住所表現 ・略語 abbreviation <abbr>〜</abbr> 主にtitleタグと共に使われ、abbrタグで囲まれた部分が略語であることを指示します。 略語の正式名称はtitleタグで表記しましょう。 <abbr title=”Hypertext Markup Language”>HTML</abbr>を学ぼう 見た目は変わりありませんが、HTMLの部分にカーソルを重ねるとtitleで入力したものが表示されます。titleタグは文書にタイトルをつけ、検索エンジンの検索結果に反映させる大事なタグですが、abbrタグ以外にも、タグの補足情報を付け加える場合に使われます。   大石ゆかり 略語ってたくさんあると思うんですけど、全部に書くんですか？ 田島悠介 必ずしもabbrタグで囲む必要はないけど、読者になじみの無い略語を使う場合は使用が推奨されているね。 大石ゆかり なじみが無いっていわれても～。例えば、どんなのがありますか？ 田島悠介 専門用語で書かれた仕様書とか、もっとくだけた感じではフォトショップをフォトショのような感じで略する場合に使ってもいいかもね。   ・名前を特記する cite <cite>〜</cite> cite：引用する、引き合いに出す という意味から、映画・本・新聞・サイトなど作品のタイトル名を表記する際に使われます。 映画<cite>The Imitation Game</cite>はコンピューター科学の祖であるアラン・チューリングの物語です。 citeタグは人物名などにも使われていましたが、最新バージョンのHTML5では、作品のタイトル名に使われることが推奨されています。     ・住所の表現 address <address>〜</address> 住所や連絡先、問い合わせ情報を表示する際に使われます。 <address>東京都渋谷区恵比寿1-25-1 NAGAHAMAビル5F</adress> addressタグで囲った部分が斜体になりました。   citeダグや、addressタグまたはemタグも、ブラウザ上で表示される見た目は同じですが、HTML上ではそれぞれのタグで囲まれた語句は意味合いが異なるものとして認識されます。タグを正しく使い分けることでサイトのつくりが整理されると、コンピューターが認識しやすい質の高いサイトとみなされやすくなります。   適切なタグを使って整理されたページは、ページの価値が高くなるということを覚えておきましょう。   今回の記事は以上です。 さらにHTMLを学びたい場合は、HTMLで強調タグと区切り線を使う方法も合わせてご覧ください。   大石ゆかり citeタグやaddressタグの使いどころってわかりづらいんですけど！ 田島悠介 大切なのは自分のサイトやページに適しているかどうかだよ。 大石ゆかり 自分のサイトやページ？ 田島悠介 例えば企業サイトだとaddressタグは必須だよね。自分のサイトが何かの作品の紹介を多用しているならciteタグも重要になります。 大石ゆかり なるほど！ TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
HTML

HTMLでdfn要素を使って用語を定義する方法を現役エンジニアが解説【初心者向け】

HTMLでdfn要素を使って用語を定義する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 dfn要素を使って用語を定義する方法について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 dfnで用語を説明するには（用語定義について） dfn要素とは dfn要素を使って用語を定義してみよう   dfnで用語を説明するには（用語定義について） 文章に使用される予定の用語を定義するためにdefinition（ディフィニション）の略語であるdfnタグを使用できます。略語や語源を説明するための文書や用字用語を扱われているWebサイトでは、頻繁に活用されることが期待できます。   [PR] Webデザインで副業する方法とはdfn要素とは 単純に用語や略語を定義するために用意されています。dfnタグとabbrタグのtitle属性を用いて、言語と略語の説明文も定義できます。以下に、使用例としてのサンプルコードを掲載していますので、参考までに留めておきましょう。   HTML <p>この文書には、<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>を用いて、dfnタグの説明が掲載されてあります。</p>   表示結果 See the Pen 2020-07-15-sample01 by YOHEI INAI (@yohei_inai) on CodePen.   dfn要素を使って用語を定義してみよう dfnタグのtitle属性の値に用語を定めてから、略語を用いて説明を述べることもできます。以下に、使用例としてのサンプルコードを掲載していますので、参考までに留めておきましょう。   例文のHTML <article> <section> <h2>KGI</h2> <p><dfn title="Key Goal Indicator">KGI</dfn>とは、会社の『重要目標達成指標』です。会社の事業が目指す売上高や利益、そして、利潤も含めてから、数字や文章にて目標に定めて持続化させるための指標として扱われています。</p> </section> <section> <h2>KPI</h2> <p><dfn title="Key Performance Indicator">KPI</dfn>とは、会社の『重要業績評価指標』です。KGIを達成するためにも、具体的な業務（実務）を構成して、その過程（プロセス）や行為に生じる数字や、それの反復によって関係性のある結果などが指標として扱われています。</p> </section> </article>   表示結果 See the Pen 2020-07-16-sample01 by YOHEI INAI (@yohei_inai) on CodePen.   監修してくれたメンター 井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
HTML

まずはここから！HTMLの書き方【初心者向け】現役デザイナーが解説

本記事では、HTMLの具体的な書き方について、初心者向けに現役エンジニアが解説していきます。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次acronymタグとはabbrタグとは活用場面abbrタグを使ってみようまとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLについて解説した記事を読むとさらに理解が深まります。 田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLの書き方について詳しく説明していくね！ 大石ゆかり お願いします！   【動画でも解説しています。クリックで見る！】   HTMLタグの書き方 HTMLはWebページに表示したい情報に対し、マークアップするための文章構成を表現する言葉です。 たとえば、タイトルや見出し、本文といった区切りをHTMLでは記述できます。   HTMLはタグ＜＞で囲ったまとまりで、文章構成を表現することが可能です。 タグの中には、どのような種類の文章なのかを示す要素名を記述しましょう。 題名であれば<title>、見出しであれば<h1>、段落であれば<p>などです。   <title> のように要素名から始まるタグは開始タグと呼ばれます。 </title> のように、スラッシュ要素名で始まるタグは終了タグを意味し、要素の記述終了を示すものです。 開始タグと終了タグで囲むことで、開始と終了を表現します。 開始タグから終了タグまでのひとまとまりを要素と呼びます。 図の<title>要素はWebページの題名を示すタグであり、この場合、Webページの題名は「タイトル」になります。   要素とは HTML要素には、現在100を超える種類があります。 Webページで表現したい内容によって適切な要素を選び、タグで囲わなければなりません。 代表的なものをいくつかみていきましょう。 <p> – 段落 paragraph（パラグラフ、段落）の略です。 改行のない文章のひとかたまりを示すために使用します。 文章を改行したいときは、改行のタイミングごとに複数のp要素を作ることで改行が可能です。 <h1>要素 headline（ヘッドライン、見出し）の略です。 以下のように見出しの大小を表現するために使用します。 大見出しはh2 中見出しはh3 小見出しはh4 <a>要素 anchor link （アンカーリンク、リンクの起点）の略です。 他のHTMLなどへのリンクを表現するために使用します。 青文字でアンダーラインのあるリンクの見た目になります。 <div>要素 division （ディビジョン、仕切り）の略です。 四角い枠を作って、様々な要素をひとまとめにします。 <img>要素 image（画像）のことです。 画像ファイルを指定し、画像を埋め込みます。 image要素を始めとするいくつかの要素は、開始タグのみで動作し、終了タグは必要ありません。 <meta>要素 meta（大局的な情報）のことです。 Webページの全体的な設定をします。 文字の種類や検索エンジンの検索結果に表示される文章など、様々な項目があります。   [PR] Webデザインで副業する方法とは属性と値 各要素の細かい動きや働きを設定するための付属情報が属性です。 何の設定かを示すものが属性名、どう設定するかを属性値といいます。 開始タグの＜＞の中、要素名の後にスペースを空けて、属性名=”属性値” の形で記述します。 上記はmeta要素と呼ばれるWebページ全体の設定をするタグです。 charset （キャラクターセット= 文字の種類）をUTF-8という種類の文字に設定しています。   この要素ではこの属性が必要といったように、要素と属性はセットのものが多い傾向です。 たとえば、以下のように記述したうえでTechAcademyという文字をクリックするとtechacademy.jpに飛ぶリンクになります。 <a href="https://techacademy.jp/">TechAcademy</a> <a>要素のリンク先URLを、href (ハイパーテキストリファレンス= HTMLの参照先)という属性に設定しています。   以下の記述は、<img>要素で表示するファイルをsrc（ソース = 情報の源泉）という属性に設定しているものです。 <img src="/image.png">   田島悠介 要素と属性、ぜひ組み合わせて理解してくださいね！ 大石ゆかり タグは全部覚えなければダメなんですか？ 田島悠介 要素は覚える必要はありません。文法はHTMLを書きながら体で覚えましょう。 各要素は、辞書のようなサイトや本で、調べながら読み書きできれば問題ありません。 常に調べながら書いていますよ。 大石ゆかり 今回のタグは、後で覚えてもいいんですね？ 田島悠介 技術は常に移り変わるので、すぐに古くなってしまうためですね。 暗記するよりも、調べ方をマスターして、常に最新の技術を探るのがおすすめです。 大石ゆかり 調べるときはテックアカデミーの記事を参考にしますね！   HTMLを書いてみよう これまでの書き方を踏まえて、実際にコードを書いてみます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの書き方</title> </head> <body> <h1>HTMLの書き方</h1> <p>はじめてのHTMLを作りました</p> </body> </html> 以下ではサンプルコードを解説していきます。   <!DOCTYPE html>はHTMLを示すもの 文頭にある<!DOCTYPE html>は、文章がHTMLであることを示しています。 この記述がなければ、WebブラウザがWebページとして表示できないため必要です。 HTMLの種類によっていくつか書き方のバリエーションはあるものの、今は<!DOCTYPE html>が基本です。   要素の階層構造 要素は、開始タグと終了タグの間に、テキストと他の要素を含めることができます。 以下の例では<body>要素内に<h1>要素と<p>要素を含むものです。 <body> <h1>HTMLの書き方</h1> <p>はじめてのHTMLを作りました</p> </body>   また、以下のように、要素の中に要素を入れる段階構造を入れ子といいます。   HTMLは、様々な要素を入れ子にしていくことでWebページを構成しています。   <head>と<body> <html>の中身は大きく
HTML

HTML5の非推奨要素/属性を現役エンジニアが解説【初心者向け】

HTML5の非推奨要素/属性について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTML5の非推奨要素/属性について詳しく説明していくね！ 大石ゆかり お願いします！   非推奨要素/属性とは 非推奨要素/属性とは、今後廃止される要素や属性を指します。 例えば、非推奨要素/属性はHTML4では使用禁止となっており、今後も使われる予定はありません。 HTMLはバージョンの進化とともに推奨されているタグも変化していきました。   マークアップとして使われていたタグを構造やテキストなどの中身などに限定し、見た目に関しては公式にサポートをしていかなくなる方向性を示しています。 そのため、HTMLとして、使わせないようにしているタグやHTML５バージョンでは廃止され使えなくなるタグも少なくありません。 そして、見た目に関する要素（タグ）はスタイルシートとして別途CSSファイルの方で記述していくように変化しつつある状況です。 これはHTML５がHTML４とは違い、より構造を明確にする方向性となっているためです。   HMTLを2014年以降から勉強を始めた人には「HTMLの過去のタグ」だと認識している人も多いでしょう。 しかし、過去にマークアップされたHTMLを修繕する場合には、それらのタグを使い続けてよいか判断する必要があります。   主な非推奨要素 acronymタグはHTML5では使われなくなり、代わりに省略語や頭文字を表すabbrタグを使用するようになりました。 appletタグはJavaアプレットの埋め込みに使われていたものの、外部ファイルやコンテンツを埋め込むobjectタグが使われていません。 dirタグはdefinition listであるdlタグが代わりに使えるようになりました。 strikeタグは削除の意味を表していたものの、現在はdelタグで取消線を使用できるようになっています。 frameタグは廃止となり、現状では使われてません。   [PR] Webデザインで副業する方法とは主な非推奨属性 1つの要素にはいくつもの使用できる属性があり、要素自体を修飾可能です。 しかし、要素によって使用できなくなった属性も数多くあります。 なかでもh1タグで使用されていたalignはdivタグやcaptionタグ、thタグ、trタグなどはかつては使用されていました。 しかし、HTML５になってからは完全に使用できなくなっています。   aliginはHTMLでマークアップされた要素を、CSSでtext-align center などとしてCSSに記述するよよに変化しました。 またwidth属性もいまではCSSに記述するものの、以前はcolタグやcolgroupタグ、tdタグ、thタグの属性として記述ができました。 HHTML５となってからは完全に廃止となっています。   非推奨（Deprecated）と廃止（Obsolete）の違い できるだけ使わない方がよいものの、まだ使えるものを非推奨要素といいます。 HTML５が実装された直後にHTML４で使えていたタグを使えなくしてしまうことは実用的ではないため、徐々にサポートしなくなることを示しています。 また、完全に廃止されるものは、CSSに別の代替要素を記述することで同様の画面表示をすることが可能です。 加えて、廃止される要素はほとんど使われない要素やCSSに記述すれば解決する要素です。 W３Cの公式ページなどを確認することで過去のHTML４で記述されたコードの修繕も可能となります。   執筆してくれたメンター 木村勇土 TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。   大石ゆかり HTML5の非推奨要素/属性がよくわかったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
HTML

最初のステップ！HTMLで覚えておきたい頻出タグ15選【初心者向け】現役エンジニアが紹介

HTMLに慣れる上で欠かせないタグをまとめて紹介しています。 どれも頻出のタグで、最低限覚えておきたいものを選んでいるので、これからHTMLを覚えようと思っている方は最初に覚えておきましょう。 実際に書きながら進めていくと理解しやすいです。 目次 HTMLとは HTMLの基本構造に関するタグ サイトコンテンツの作成でよく使うHTMLタグ   HTMLとは HTMLは、Hyper Text Markup Languageの頭文字を集めたもので、Webサイトの構造を形成するために使用される言語です。 HTMLではタグと呼ばれるマークアップのための目印を使用し、<●●>(開始タグ)～</●●>(終了タグ)という形を作り、その間に命令を書き実行します。 (終了タグは省略できるものや、書かないものも存在します)ここではサイト作成において必ず使用するタグや、よく使われるタグについて紹介します。   [PR] Webデザインで副業する方法とはHTMLの基本構造に関するタグ HTMLの基本的な構造は、以下の通りです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ページタイトル</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <header></header> <main></main> <footer></footer> </body> </html> それでは、ひとつずつ分解して見ていきましょう！   <html> HTML文書であることを示すタグで、(DOCTYPE宣言※のあとの)最初に<html>、最後に</html>と記述します。 すべてのHTMLタグは、この<html></html>の中に記述していきます。 ※DOCTYPE宣言は、その文書がHTMLですよということを表すおまじないのようなキーワードです。   <head> 文書全体の基本的な情報、ヘッダ情報を定義します。 このタグに記述した内容はページには表示されませんが、ブラウザや検索エンジンがその内容を読み取り、そのWebサイトの状態を判定するため、内容はしっかり吟味する必要があります。   <title> このタグはheadタグ内に記述します。 ブラウザのタブで表記される名前、ブックマークされた際に表示される名前になります。 <title>●●通販の△△</title>   <meta> このタグはheadタグ内に記述します。 Webサイトのメタ情報を設定するタグです。 メタ情報とは、検索エンジンやブラウザに伝える情報全般のことで、様々な種類があります。 以下はその中でもよく用いるメタ情報の記述です。 <!-- 文字コードをUTF8に指定する --> <meta charset="utf-8"> <!-- Webサイトの説明を検索エンジンに伝える --> <meta name="description" content="サイトの説明文"> <!-- サイトの表示領域を、閲覧するデバイスの幅に合わせる --> <meta name="viewport" content="width=device-width, initial-scale=1">   <link> このタグはheadタグ内に記述します。 指定した文書を参照するタグです。 外部スタイルシート（CSS）を適用する場合などはこれを使用します。 <!-- style.cssという外部スタイルシートを読み込む--> <link rel="stylesheet" href="style.css" type="text/css">   <body> Webサイトに実際に表示されるコンテンツすべてを囲むタグです。   <header> HTML5※から追加されたタグで、ヘッダー(Webサイトの先頭)部分に使用します(ヘッダー情報を扱う<head>タグとは別のものです)。 主にサイトのタイトルや、ナビゲーション（ヘッダーメニュー）などが入ります。 ※HTML5とは？ HTML5はHTMLの仕様のひとつで、2014年に有効化しました。 それまでのHTML4と比べて全体的に機能が拡充されており、よりリッチなWebサイトの開発がしやすい仕組みになっています。 本記事執筆時点（2021年）では、HTMLといえばこのHTML5のことを指すことが多くなっています。   <footer> HTML5から追加されたタグで、フッター(Webサイトの一番下)部分に使用します。 サイトに関する情報、著作権に関する注記、連絡先などが入ります。   サイトコンテンツの作成でよく使うHTMLタグ 次は、bodyタグの中でコンテンツの作成に使用する頻出タグの紹介です。   <p> 文章を作成する際に最もよく使うタグです。 正確には「段落（paragraph）」を表しており、別々のpタグで囲んだ文章は別の段落とみなされます。 例えば以下の場合、2つの<p>～</p>によって2つの段落に分けられています。 <p>この文は段落その1です。</p> <p>この文は段落その2です。</p>   <h1～h6> 各見出しを設定する際に使用します。 h1タグの内容がそのページで最も重要なキーワードとみなされ、ついでh2, h3と重要度が続きます。 文字の大きさだけを表すタグではなく、検索エンジンにより正しい情報を伝えるためのタグなので、内容には常に注意しましょう。 <h1>h1の見出し</h1> <h2>h2の見出し</h2> <h3>h3の見出し</h3> <h4>h4の見出し</h4> <h5>h5の見出し</h5> <h6>h6の見出し</h6>   <img> 画像を貼り付ける際に使用するタグです。 配置や大きさの設定はCSSで行うことができます。 <img src="img_1.png">   <a> 他のページへのリンクを貼ったり、指定したメールアドレスへの送信を行う際に使用します。 開始タグでリンクしたい内容を属性で指定し、タグ内にはリンクを貼りたいテキストや画像を入れます。 <a href="https://example.com/">リンク</a> リンクを別のブラウザタブで開きたい場合、以下のようにtarget=”_blank”という属性を追加します。 <a href="https://example.com/" target="_blank">リンク</a>   <ol>・<ul>・<li> リストを作成する際に使用する3種類のタグです。 olとliのセット、もしくはulとliのセットで用います。 <ol> リストを作成するタグです。 ordered listの略で、「1,2,3～」「a,b,c～」といった順番のあるリストを作成します。 <ol> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol> <ul> unordered listの略で、順番がないリストを作成します。 <li> list itemの略で<ol>〜</ol>あるいは<ul>〜</ul>内に記述します。 それらのリストの各項目を作成するときに使用します。 コード例は、上記olタグとulタグのサンプルコードを参照してください。   <table>・<tr>・<td>・<th> テーブル(表)を作成する際に使用されます。 <table> 表の開始を示すタグです。 内部に<tr>・<td>・<th>が入ります。 デフォルトでは枠線は表示されず、border属性に”1″を指定することで表示されるようになります。 色や大きさなどの設定はCSSで行います。 <tr> table rowの略で、テーブルの行に使用します。 このタグを使用した分だけ行が追加されます。 画像では全部で3つの行が作成されています。 <td> table dataの略で、テーブルのセルに使用します。 画像内の「内容」の部分にあたります。 <th> table
HTML

HTMLで強調タグと区切り線を使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの「強調タグ」と「区切り線」について解説します。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次acronymタグとはabbrタグとは活用場面abbrタグを使ってみようまとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 強調タグと区切り線を使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   強調タグ HTMLでは文章を記述する際に、タグを使って重要な部分を強調することが可能です。 強調タグを使うことにより、文章中で何が重要であるかを読み手に伝えることができます。 また、コンピューターやGoogleの検索エンジンなどに対しても、文書のなかで何が重要であるかを認識させることができます。 今回は代表的な強調タグである「emタグ」と「strongタグ」を紹介します。   強調を示すemphasisタグ 主に文脈のなかで強調しておきたい部分を<em> 〜 </em>で囲んで示します。 囲んだ部分は斜体で表示されるようになります。 タグ名の「em」は、「emphasis = 強調」の略語になります。   以下の例を見てみましょう。 <p>TechAcademyでは<em>プログラミング教室</em>を開いています</p> <em> 〜 </em>で囲んだ部分が斜体になっています。   重要性を示すstrongタグ 特定の語句を強調する際に<strong>〜</strong>で囲んで示します。 HTMLでは前述のemタグで囲まれた部分よりも重要であるとみなされます。 囲んだ部分は太字で表示されます。   以下の例を見てみましょう。 <p>語句を強調したい場合には<strong>強調タグ</strong>を使います</p> <strong>〜</strong>で囲んだ部分が太字になっています。   さて、emタグもstrongタグも、ある部分を強調したいときに使うタグですが、その違いはどこにあるのでしょう。 strongタグは語句や文そのものが重要であることを示すものである一方、 emタグはどこを強調するかでニュアンスが異なる文章に使われます。   以下の例を見てみましょう。 <em>TechAcademy</em>は恵比寿でプログラミング教室を開いています。 TechAcademyは<em>恵比寿で</em>プログラミング教室を開いています。 TechAcademyは恵比寿で<em>プログラミング教室</em>を開いています。 1番目の文章は、主催をしている「TechAcademy」という点を、 2番目の文章は、新宿でも品川でもなく「恵比寿」という点を、 3番目の文章は、英会話教室でも料理教室でもなく「プログラミング教室」だという点をそれぞれ強調しています。 用途に応じて使分けてみましょう。   また、emタグもstrongタグもHTML上で強調しておきたい重要な部分とみなされ、斜体や太字で表示されます。しかし、これはブラウザが自動的に解釈し表示しており、文字のデザインとは異なります。 例えば、「重要ではないけれど文字を太くしたい」といった場合にemタグやstrongタグを使用すると、文書の意味づけという本来のタグの役割が成り立たなくなります。 デザインとして文字を装飾したい場合にはCSSで指定しましょう。   大石ゆかり 書いているページがiPhoneの紹介なので、ページ内に出てくるiphoneって単語16個全部をstrongタグで強調してみました♪ 田島悠介 一昔前にあった検索エンジンを誤解させるスパムみたいだね。 大石ゆかり え～！だって重要じゃないですか。 田島悠介 そのページの見出しに関連するフレーズや、ページ内で訴えたいことの中で特に強調したい部分１～３個所に使うのがいいよ。 大石ゆかり 単語全部強調っていうのは、かえってダメなんですね！   区切り線 続いて区切り線を使う方法です。   文章の区切りを示すhrタグ 文章の区切りとなる箇所に<hr>と記述します。 記述した部分には水平線が引かれ、文章の意味的な区切りを示します。 多くのタグは開始タグと終了タグの２つを使用しますが、hrタグは単独で使用します。 hrタグによる水平線はCSS側で色をつけたり太さを変えたり等、装飾することも可能です。   以下の例を見てみましょう。 <p>語句を強調したい場合には<strong>強調タグ</strong>を使います</p> <hr> <p>文章を区切る場合には、hrダグで線を入れることができます</p> <hr>と記述したところに水平線が入っています。   [PR] Webデザインで副業する方法とは様々な意味を持つタグ ここでは主に、文章中の語句に意味づけを行うタグを一覧で紹介します。 タグ名 文章中での意味 使用ポイント em 強調する語句 どこを強調するかでニュアンスが変わる時 strong 重要な語句 emよりも重要性がある時 b 強調ではなく他と区別された語句 商品名やキーワードなど i 強調ではなく他と区別された語句 心の声や思考など small 補足的な語句・文章 免責事項、著作権表示など hr 区切り  テーマや話題が変わる時 かつてこれらのタグは、太字や斜体にするといったデザインとしての装飾目的で用いられることもありました。 HTML5以降では、文章や語句に意味を持たせる目的のみで用いることが推奨されています。   実際に書いてみよう 強調タグと区切り線を用いて実際にコードを書いてみましょう。   HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLで強調タグと区切り線を使う方法</title> </head> <body> <section> <p><em>TechAcademy</em>はオンライン完結のプログラミングスクール。<br> <strong>現役のプロが学習を徹底サポート</strong>するから、ITスキルを実務レベルで習得できます。</p> <hr> <p>何でも聞ける無料相談も実施中。<br> サービスの内容、副業や転職についてなど、なんでもご相談ください。</p> </section> </body> </html>   See the Pen Untitled by nomallica (@nomallica) on CodePen. 解説 上記のコードでは、主催をしている「TechAcademy」という点をemタグで囲んで強調しています。 また、最も伝えたい語句である「現役のプロが学習を徹底サポート」をstrongで囲み強調しています。 無料相談の説明の直前には、話題が変わることを示す意味で区切り線を設けています。   大石ゆかり hrタグをたんさん使って、文章を分けると見やすくなりそうですね♪ 田島悠介 細かいけど、HTML5から若干意味が変わったんだよ。 大石ゆかり hrタグにも文書構造としても意味があるんですか？単に区切る線ではないんですか？ 田島悠介 上で説明しているように、pタグのように段落と段落を分ける線だったり、後はsectionタグ内での区切りとして使うことが推奨されてるよ！   まとめ 今回はHTMLの「強調タグ」と「区切り線」について解説しました。 emタグやstrongタグは記述すると該当部分が太字や斜体で表示されますが、HTML5以降では文章中の語句などに意味を持たせる目的で用いられています。 そのため、決して装飾目的では無いことを覚えておいてください。 これらの強調タグを効果的に用いることで、文章中で何が重要であるかを読み手や検索エンジンに対して伝えられます。 ぜひ適切なタグを用いたマークアップを心がけてみてください。   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTML5でacronymタグの代わりにabbrタグを使って略語を表す方法を現役エンジニアが解説【初心者向け】