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

【次回予告】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を使うべきだと思う」と人によって意見が割れることがあります。

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

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

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

web兄さん

ここから全部で18個のタグを紹介します！

正直まあまあ長いです。

ただ、ここで紹介するタグはめちゃくちゃ基本のタグなので絶対避けて通れません！

１度で理解できるとは到底思っていないので時間をかけても大丈夫です👍

h1〜h6｜見出し

❶hタグの概要

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

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

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

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

❷hタグの使用例

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

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>１番重要な見出しです</h1>
<h2>２番目に重要な見出しです</h2>
<h3>３番目に重要な見出しです</h3>
<h4>４番目に重要な見出しです</h4>
<h5>５番目に重要な見出しです</h5>
<h5>６番目に重要な見出しです</h5>

web兄さん

<h1>〜<h6>のさらに詳しい使い方は以下を参考にしてください！

p｜段落

❶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の概要

先ほど<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>を単体で使うことはほとんどなく、通常、<p>の入れ子として使用します。

<p>strongでは<strong>テキストを強調</strong>することができます</p>

web兄さん

<strong>のさらに詳しい使い方は以下を参考にしてください！

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

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

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

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

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

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

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

<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="img/fujisan.jpg"の箇所ですが、画像が設置されているURLを記載します。

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

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

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

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

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

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

属性について

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

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

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

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

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

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

a href=””｜リンク

❶a href=””の概要

<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>

Yahooトップページ

aタグはリンクです

web兄さん

<a>のさらに詳しい使い方は以下を参考にしてください！

ol / ul / li｜箇条書き

❶ol / ul / li の概要

<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>と<li>で記述し、調理手順のように、前後の情報が連続していて関連性のあるものは<ol>と<li>で記述してあります。

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

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

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

web兄さん

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

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

❶table / tr / th / tdの概要

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

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

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

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

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

表を作成するときは、全体を見出しである<th>と対になる内容を<td>で記述し、それを一行として<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>

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

しかし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.コメントアウトの書き方は？

<!-- -->