HTMLでよく使う18個のタグを覚えよう

バナー

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

更新日

#04  HTMLでよく使う18個のタグを覚えよう

web兄さん

【次回予告】HTMLをマスターする課題にチャレンジします!

HTMLタグに種類がある理由の理解、よく使用される18個のタグを学習したのちに、次回の講座では学習したタグを使って、HTMLだけで書かれたシンプルなWEBページを自力で書いてみます。


さて、前回の講座でHTMLの文法はマスターできたと思うので、今回の講座ではHTMLの中でも、現場でよく使用するタグについて学習していきます。

ただその前に、なぜタグには種類があり覚える必要があるのかを学んでいきましょう。これを理解することが実際の仕事をイメージすることにつながるので、必ずスキップせず読んでください。

なぜタグには種類があるの?

実際の仕事を例に説明します。

例えば、デザイナーから左記のような旅行サイトのデザインデータを受け取ってコーディングをお願いされたとします。

WEBデザインデータとは、つまるところテキスト情報が装飾されたデータです。

そのためHTMLを書くにあたり、どういった情報でHTMLを書いていくかをあなた自身が考える必要があります。

つまりどういうことかというと…


デザインの情報を見てどのタグを使うかを判断していく

数あるHTMLタグの中から、「この部分はこのタグが適切だな」と、自分で判断してHTMLを書いていきます。

そして、実際に上記のデザインをHTMLで書き起こして見ると以下のようになります。

<div>
    <img src="bg.jpg">
    <h1>絶景冒険プラン</h1>
</div>
<div>
    <h2><span>point</span>このプランのポイント</h2>
    <ul>
        <li>雨天の場合、100%返金</li>
        <li>20年のベテランガイドが着くから安心</li>
        <li>野生動物と触れ合える!</li>
    </ul>
    <a href="./reserved">予約する</a>
</div>

このようにデザインデータを情報で捉えて(論理構造で捉え)、それぞれ適切なタグでHTMLで書き起こすことをタグ付けと呼びます。

そして重要なことが、どのタグを選ぶかにおいて厳密な正解はありません

実際の現場でも「このテキストにはh3を使うべきだ」「いや、僕はpを使うべきだと思う」と人によって意見が割れることがあります。

そのため、同じデザインデータを2人がコーディングした場合、全く同じHTMLの構造になることはほぼあり得ません。(熟練者になるとかなり近くはなります)

大切なのはタグの本来の役割や意味を理解できているかという点です。

これから18種類ものタグをみなさんに解説しますが、「自分でデザインを見てどのタグが適切か判断していかなきゃいけないんだ」ということを念頭に置いて読み進めてください。

今後の講座ではタグ付けの考え方も教えます

この先の「ページを1からコーディングする」講座ではどのタグを選ぶべきかの考え方も勉強していけるのでその点は安心してください👍


web兄さん
ここから全部で18個のタグを紹介します!正直まあまあ長〜いです(笑)
ただここで紹介するタグはめちゃくちゃ基本のタグなので絶対避けて通れません!
1度で理解できるとは到底思っていないので時間をかけても大丈夫です👍

解説の進め方

ここからのタグの説明は全て「❶概要」➡︎「❷使用例」➡︎「❸書き方」の順番で解説していきます。この流れが最も理解しやすいので、今どのフェーズなのか流れを意識しながら読み進めましょう。

h1〜h6|見出し

❶hタグの概要

読みエイチ〇〇(h1ならエイチワン、h2ならエイチツー)
用途見出しを定義
由来heading(和訳:見出し)
h1〜h6の概要

hタグ(heading)は見出しを定義するタグです。「見出し」という概念は本の目次でイメージするとわかりやすいです。

本を書くときは情報を整理するために必ず章立てや目次の作成が必要ですよね。WEBページでもそれは同じです。コンテンツ(内容)を作っていく過程で章立てをし文章を整理します。

見出しは本の目次でイメージするとわかりやすい

本の目次同様、章が深くなればなるほど(h1〜h6と数字が増えるほど)情報が具体的になっていき、h1 → h6(情報の重要度 高→低)となっていきます。

  • h1:ページ内で最も伝えたい内容
  • h2:h1で伝えたい内容を大きくグループ分けした時の見出し
  • h3:h2で伝えたい内容をさらにグループ分けした時の見出し
  • h4〜h6:略

❷hタグの使用例

AppleのMacのページです。ページの情報の重要性と連動して適切にhタグが付けられています。

Macの公式ページでの見出し定義の例
  1. Macというページのタイトルが<h1>
  2. MacBook Proの紹介、「あなたにピッタリのMacを見つけよう」というページごとに分割されているセクションの見出しは<h2>
  3. 「あなたにピッタリのMacを見つけよう」という<h2>に紐づいている3つのMacの名前は<h3>

hタグの数に決まりはあるの?

上記のMacのサイトの例では、図らずも<h1>が1個<h2>が2個<h3>が3個となってしまいましたが、使用できる数に制限があるわけではありません。

しかし、一般的には<h1>のみページ内に1つまでと決められています。<h1>はそのページのタイトルとなるものに対して使用されることが多く、<h2><h3>はそのタイトルに基づいたページの情報を分割してまとめるために使用される見出しです。ちなみに<h5><h6>はあまり使用されることはありません。

❸hタグの書き方

見出しタグは<hx>でテキストを囲います。

<h1>1番重要な見出しです</h1>
<h2>2番目に重要な見出しです</h2>
<h3>3番目に重要な見出しです</h3>
<h4>4番目に重要な見出しです</h4>
<h5>5番目に重要な見出しです</h5>
<h5>6番目に重要な見出しです</h5>
web兄さん
<h1><h6>のさらに詳しい使い方は以下を参考にしてください!

p|段落

❶pタグの概要

読みピータグ
用途段落の追加、文章の追加
由来paragraph(意味:段落)
pの概要

<p>〜</p>はwebページの文章を記入するときによく用いられるタグです。囲った部分は段落(ひとまとまりの文章)として扱われます。

わたしたち人間は、文章を見ることで「その文章のどこからどこまでがひとまとまりになっているか」を判断することができますが、WEBブラウザはそうはいきません。

<p>で囲うことによって、どこまでがひとまとまりの段落かをWEBブラウザに伝えることができます。

また<p>を入れるごとに自動的に改行されます。

❷pの使用例

また、<p><h1><h6>と併用されることが多いです。

WEBページが情報の集合で、見出しによって分割されているとしたら、見出しの内容となる文章がセットで入ることはごく自然ですよね。

このような<hx>+<p>という構図は今後コーディングする時にもっとも見かける形になると思います。

❸pの書き方

段落・文章を<p>でテキストを囲います。

<h1>見出しです</h1>
<p>これは説明文章です。</p>
<p>段落ごとにpを使います。</p>
web兄さん
<p>のさらに詳しい使い方は以下を参考にしてください!

br|改行

❶brの概要

読みブレーク
用途改行の指定
由来break(意味:途切れ、変わり目)
brの概要

先ほど<p>を段落ごとに使うことで改行されると説明しました。

例えば「二兎を追う者は一兎をも得ずは日本の有名なことわざです。」という文章があったとして、「日本の〜」で改行したいとします。

そこで改行のために文章を分けてそれぞれに<p>を使用するとします。

すると、ブラウザには分けた<p>が別々の文章であると認識されてしまいます。

これは正しくない書き方です。


これを避けるために改行したい部分には<br>を使用します。

<p>を分けていないことで「二兎を追う者は一兎をも得ずは日本の有名なことわざです。」とひと続きの文章としてブラウザに認識させることができます。

ブラウザに文章を正しく認識してもらうことは今後重要になってきますので「ひと続きの文章の改行のときは<br>!」と覚えておきましょう。

❷brの使用例

実際のWEBサイトでも、文章のを読ませる際に、区切りのいいところで改行した方が、可読性が増すので改行を使っています。

❸brの書き方

改行したい部分に<br>と記入します。

<p>二兎を追う者は一兎をも得ずは
<br>日本の有名なことわざです。</p>

<br>には開始タグしかない?

<br>は終了タグという概念がありません。この後出てくる画像表示の<img>タグもそうですが、テキストを囲む必要がないタグには終了タグがありません。

そのため、間違えて「/(スラッシュ)」を入れないように注意しましょう。

web兄さん
<br>のさらに詳しい使い方は以下を参考にしてください!

strong|強調

❶strongの概要

読みストロング
用途文章の一部を強調
由来strong(意味:強い)
strongの概要

strongタグは文章の一部を強調したい時に利用します。

❷strongの使用例

使用されるシーンとして多いのはブログサイトです。

当サイトでも頻繁に使っていますが、要点として伝えたい言葉を<strong>で強調しています。

❸strongの書き方

強調したい文字を<strong>囲みます。<strong>単体使うことはほとんどなく、通常、<p>の入れ子として使用します。

<p>strongでは<strong>テキストを強調</strong>することができます</p>
web兄さん
<strong>のさらに詳しい使い方は以下を参考にしてください!

<strong>は<h1>などのタグには入れられない?

<strong>は見出しである<h1><h2>などのタグの入れ子にはすることができません。これは「見出しの中に強調文字を入れてはいけない」というルールが公式に定められているためです。

<!-- 禁止されている入れ子の例 -->
<h1>これは<strong>大見出し</strong>です</h1>

この例のように「〇〇タグの中には〇〇タグは入れることができない」という入れ子のルールがどのタグにも定められています。詳しくは以下の記事で解説しています。

▶︎関連記事:【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

img src=”~~” alt=”~~”|画像

❶img src=”~~” alt=”~~”の概要

読みイメージ(srcはソース、altはオルト)
用途画像を表示
由来image(意味:画像)
strongの概要

<img>は画像を表示する際に使うタグです。

拡張子って何?

拡張子って何?

拡張子とはファイル名の後ろにつくもので、全てのパソコンのファイルは「〇〇.拡張子」という形式になっています。

パソコンのファイルは全てファイル名.拡張子

エクセルなら「.xlsx」

画像なら「.jpg」

圧縮ファイルなら「.zip」

など皆さん見たことあるのではないでしょうか?

このように、何の形式のファイルかを定義しているものが拡張子です。今回で言えば「HTML」という形式のファイルということをパソコンに伝えるため「.html」という拡張子にしています。

❷img src=”” alt=””の使用例

imgはWEBサイトを彩るために様々な箇所に使用されています。

ロゴ、アイコン、写真、イラスト、WEBサイト上の画像は全てimgでタグで表示することができます。

❷img src=”~” alt=”~”の書き方

<img>入れ子にする必要がないため<br>同様、終了タグのないタグです。.jpg.pngといった拡張子の画像ファイルを用意し、その画像を読み込むための記述をすることによって表示します。

<img src="ここに画像のURL">と書きます。(srcの読み方はソース)

<img src="img/fujisan.jpg">
src属性の中身の説明

src="img/fujisan.jpg"の箇所ですが、画像が設置されているURLを記載します。

表示したいhtmlファイルから見て、どこにあるかを記載することで画像を呼び出しているイメージです。

この「どこにファイルがあるか」を示す記述をパスと言います。

パスは初学者が100%つまずく概念なので以下の記事でしっかり理解する時間を確保してください。


加えて、ネット接続ができずに画像を表示できない場合や、目が見えない人がWEBサイトの画像情報を読み取るためのテキスト情報をalt="ここに画像のURL"で追記する必要もあります。

<img src="img/fujisan.jpg" alt="富士山の写真">

このように<img>は画像読み込みのパスであるsrc=""とテキスト情報のalt=""の2つと必ずセットで記述します。

属性について

属性の概要

さて、今までのタグでは見慣れない<img src="〜〜" alt="〜〜">という書き方が出てきました。

このように開始タグの中〇〇="内容"で書かれたものを属性と呼びます。

属性はそのタグに対して情報を追加する時に使用されます。

属性は色々な種類があります!

  • href属性:リンク先のURL(aタグで使用可)
  • target属性:リンク先のページをどう表示するか(aタグで使用可)
  • src属性:読み込むファイルのURL(imgタグで使用可)
  • alt属性:画像の補足テキスト(imgタグで使用可)
  • id/class属性:要素ごとの識別文字列(全てのタグで使用可)

属性は今後もかなり頻繁に使うので、言葉の意味と<開始タグ 属性名="内容">という書き方のルールは最低限覚えておきましょう!

a href=””|リンク

❶a href=””の概要

読みエー、アンカー
用途リンクを作成
由来anchor(意味:固定材、留め金)
aの概要

<a>はページ内にリンクを設置したい時に使用するタグです。例えばこのテキストもリンクです。

WEBページ上で<a>として設定されている要素はクリックすることができます。

❷a href=””の使用例

上記の例のように<a>によるリンクはWEBサイトの至るところに使用されています。また、リンクはWEBサイトへのURLだけでなく、画像やPDFのURLを設置することもできます。

例えばこのURLをクリックするとweb兄さんのアイコン画像が開きます。

❸a href=””の書き方

<a>では先ほど学習した属性の1つである、href属性の中にクリック後のリンク先を記載します。

単体でも使用できますが、<h1><p>のタグの入れ子にしたり、<img>を囲って画像自体をリンク化することもできます。

<a href="https://yahoo.co.jp">Yahooトップページ</a>

<p>aタグは<a href="https://yahoo.co.jp">リンク</a>です</p>

<a href="https://webliker.info"><img src="icon.svg" alt="web"></a>
web兄さん
<a>のさらに詳しい使い方は以下を参考にしてください!

ol / ul / li|箇条書き

❶ol / ul / li の概要

ulolli
読みユーエル/アンオーダードリストオーエル/オーダードリストリスト
用途順序なしのリストの定義 順序ありのリストの定義 リストの各要素の作成
由来unordered list(意味:順序なしの一覧) ordered list(意味:順序ありの一覧) list(意味:一覧)

<ul><ol><li>は箇条書きを表示する時に使用するタグです。

❷ol / ul / li の書き方

ここに動画

順番なしと順番ありの違いがピンとこないと思うので、例を紹介する前に先に書き方を解説します。

箇条書きを表示したい項目ごとに<li>を書き、それを<ul>または<ol>の入れ子とします。

<!-- ul -->
<ul>
    <li>ulは順番の関係ないリスト</li>
    <li>ulは順番の関係ないリスト</li>
    <li>ulは順番の関係ないリスト</li>
</ul>

<!-- ol -->
<ol>
    <li>olは順番のあるリスト</li>
    <li>olは順番のあるリスト</li>
    <li>olは順番のあるリスト</li>
</ol>

このように順番なしの<ul>で表示したものは「・」でリストが表示され、<ol>で表示したものは「1.2.3.」と1からリストの数だけ連番していますよね。

このように<ul>で並べた項目は単なる箇条書き、<ol>で並べた項目は連続した関連情報の箇条書きとコンピューターに認識されます。

さらに理解を深めるために実際のサイトでどのように使い分けがされているか確認します。

❸ol / ul / li の使用例

レシピサイトでのulとolの使い分けの例

レシピサイトを例にあげると、材料は順番が関係のない情報であるため、<ul><li>で記述し、調理手順のように、前後の情報が連続していて関連性のあるものは<ol><li>で記述してあります。

パンくずリストとページ内メニューでのulとolの使い分け

そのページが表示されるまでにどういったページを遷移してきたかの履歴のような部分をパンくずリストと呼びますが、この場合、前後の情報が連動しているので<ol>、ページ内のメニューに関しては順番の関係ないリンク集なので<ul>となります。

ちなみに上記のパンくずリストには「1.2.3」と番号が表示されていませんが、これはCSSで番号を表示しないようにコントロールしているためです。<ol>が使用されていれば連続した情報としてブラウザに認識されるため、番号が表示されているかどうかは重要ではありません。

この例のように、リストは縦並び以外に横並びになることも多々あるので頭に入れておきましょう。

web兄さん
<ul><ol><li>のさらに詳しい使い方は以下を参考にしてください!

table / tr / th / td|表・テーブル

❶table / tr / th / tdの概要

tabletrthtd
読みテーブルティアール/テーブルロウティエイチ/テーブルヘッダー ティディー/テーブルデータ
用途表の定義表の行の定義 見出しセルの定義表のデータセルの定義
由来table(意味:表) table row(意味:表の行) table header(意味:表の見出し) table data(表の内容)

まさしく上記のような表を表示したい時に<table> <tr> <th> <td>を使用します。

tableタグについては以下の動画でも解説しています

❷table / tr / th / tdの使用例

物件の詳細情報、店舗の詳細情報、また会社概要の情報など「項目名→詳細情報」という形式の情報は<table>を使って表で表示されることがほとんどです。

❸table / tr / th / tdの書き方

実例をもとに、表のHTMLがどういった構造になっているかを確認し、構造から逆算して書き方を理解していきましょう。

表を作成するときは全体を見出しである<th>と対になる内容を<td>で記述し、それを1行として<tr>の入れ子にしグループかします。<tr><th>見出し</th><td>内容</td></tr>という1行1セットを繰り返し記述した上で<table>で全体を囲み入れ子にします。

つまり上記のテーブルを表現したい場合には以下のようにコードを書きます。

<table>
    <tr>
        <th>店名</th>
        <td>人類みな麺類</td>
    </tr>
    <tr>
        <th>受賞・選出歴</th>
        <td>
            <img src="badge2021.png" alt="百名店2021">
            <img src="badge2020.png" alt="百名店2020">
            <img src="badge2019.png" alt="百名店2019">
            <img src="badge2018.png" alt="百名店2018">
            <img src="badge2017.png" alt="百名店2017">
        </td>
    </tr>
    <tr>
        <th>ジャンル</th>
        <td>ラーメン</td>
    </tr>
</table>

<td>の中にはテキスト情報以外にも<img>で画像を入れたり、<a>でリンクテキストを入れたりすることもできます。

<!– –>|コメントアウト

最後にコメントアウトという機能を紹介します。コメントアウトはタグではありません。

文字通り、ソースコード上にコメント(メモ)を残すための機能です。

<!-- これはhタグです -->
<h1>大見出し</h1>

<!-- これは文章です -->
<p>文章</p>

<!-- これはリンクです -->
<a href="https://webliker.info">webliker</a>

例えば左記のようにHTMLを書いたとします。

<!-- ここにコメントアウトしたいテキスト -->という形でそれぞれメモを残します。

それをブラウザ側でどのように表示されるか確認をしてみると…

このように、コメントアウトで書いた内容はブラウザ側には表示されず、タグを書いたものだけが表示されました。


しかしGoogle Chromeのソースコードを見る機能で見てみると(この機能は別記事でしっかり解説します)画像のようにソースコードに書かれたコメントアウトがしっかりと記載されていることがわかります。

web兄さん
<!-- コメントアウト -->のさらに詳しい使い方は以下を参考にしてください!

本講座のまとめ【次はいよいよ課題編!】

お疲れ様でした!ここまで読み進めるにあたりかなりエネルギーを要しましたよね。なので、ここまで読めた方はかなり見込みがあると僕が太鼓判を押します!

さて、次回は課題に取り組んでもらいますが、本講座の内容をまとめるととんでもない量になってしまうので簡単に今回紹介したタグをクイズ形式でまとめて終わりましょう。

HTMLのタグと使い所のチェック

Q.見出しを定義するタグは?
<h1>〜<h6>
Q.段落、文章を定義するタグは?
<p>
Q.改行をする時に使用するタグは?
<br>
Q.単語を強調する時に使用するタグは?
<strong>
Q.画像を読み込む時に使用するタグは?
<img src="">
Q.リンクを定義するタグは?
<a href="">
Q.箇条書きを定義するタグは?
<ul><ol><li>
Q.表を定義するタグは?
<table><tr><th><td>
Q.コメントアウトの書き方は?
<!-- -->