【初心者必見】よく使うHTMLタグ22選！正しく使いこなす必要性も解説

HTMLのタグは100種類以上あります。とはいえ全てのタグを覚える必要はなく、よく使われるタグに絞って、用途や役割を少しずつ覚えていけば大丈夫です。

そこで今回はよく使うHTMLタグを22種類紹介します。この記事で扱うHTMLタグの使い方が身につけば、より効率的にサイト制作を進められるようになります。

無料で30日間、Web制作が学べる『ZeroPlus Gate』
プログラミングに関する質問をエンジニアへ、し放題のサービス！

• 正しいコードの書き方が身につく
• 50本以上の動画教材でサイト制作を学べる
• 30日間に4回の学習サポート面談がある
• わからないことはSlackでエンジニアに質問し放題

公式サイトを見る

ZeroPlus Gate（ゼロプラスゲート）は怪しい？評判・口コミを運営がエゴサしてみた

タグはHTMLの構造を検索エンジンに伝える目印

Webページの見た目を構成するテキストや画像などの「要素」は、HTMLを使って書かれています。「タグ」の役割は、Webページがどのような構造をしているか、検索エンジンに伝える目印です。

たとえば一言にテキストといっても、見出しや本文など役割は異なる場合があります。

人間は見た目でテキストの役割の違いを判別できます。しかし、検索エンジンは視覚的に役割の違いを理解できません。そのため見出しを意味する「hタグ」や、段落を意味する「pタグ」などを使って、役割の違いを明確に示す必要があるわけです。

以下の事例をご覧ください。

<h2>HTMLタグとは？</h2>
<p>HTMLタグとは、HTMLの構造をブラウザや検索エンジンに伝える目印です</p>

このようにHTMLタグを活用することで、どのテキストがどんな役割を持つのかを明らかにできます。

通常は「<>（開始タグ）」と「</>（終了タグ）」で、対象となる要素を挟んで記述します。しかし、中には画像の挿入に使う「imgタグ」のように、終了タグで挟まずに開始タグのみを書いて使用するタグもあるため、区別して覚えましょう。

HTMLタグを正しく使う技術はSEOに取り組むうえで欠かせない

Web制作の案件に取り組む中では、顧客からSEOに関する相談を受ける機会が多くなります。

HTMLタグを正しく使いこなす技術は、SEOに取り組むうえで欠かせません。

適切なタグを使ってページを構成すれば、検索エンジンはHTMLの構造を理解して内容を適正に評価できます。とはいえSEOの結果には多くの要因が関係しており、HTMLタグを正しく使えるだけで、成果が保証されるわけではありません。

HTMLタグを正しく活用する技術は「SEOで上位を取るための技術」ではなく、「SEOで評価される下地を作るための技術」と捉えておくとよいでしょう。

サイトの見た目を構成するためのタグ15選

この章ではテキストや画像など、サイトの「見た目を構成する際に使うタグ」を15種類紹介します。紹介するタグは以下のとおりです。

h1〜h6タグ｜見出しを作成する際に使用するタグ

「h」とは「heading（ヘディング）」の略で、見出しを作成する際に使用します。<h1>が大見出しで1番大きく、サイトのメインとなる見出しに使われます。<h2>〜<h6>となるにつれ、小さな見出しになっていきます。

かめるん先生

h1タグは、よくtopページのロゴや、下層ページのページ名が記載されているところに使いますね！

<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
<h5>見出し</h5>
<h6>見出し</h6>

pタグ｜テキストの段落を作成する際に使用するタグ

「p」とは「paragraph（パラグラフ）」の略で、テキストの段落を作成する際に使用します。pタグで囲ったテキストの前後に1行の改行が生まれますが、改行の目的で使用することはありません。文章中に改行する場合はbrタグを使用します。

<p>完全0から始める</p>
<p>Webデザイン/プログラミング</p>

aタグ｜リンクを埋め込む際に使用するタグ

「a」とは「anchor（アンカー）」の略で、リンクを埋め込む際に使用します。

href属性の中にURLを書き、リンク先の指定をします。target属性に書かれている_blankは、リンク先のドキュメントを新しいタブやウィンドウで開くための指定です。

<a href="https://zero-plus.io" target="_blank">ZeroPlus</a>

ul / ol / liタグ｜リストを作る際に使用するタグ

ulタグ

「ul」とは「unordered list（アンオーダードリスト）」の略で、順序のないリストを表示する際に使用します。type属性を指定することで、先頭の「・」を変更することができます。

かめるん先生

ulタグには直下におけるタグが決まっているので注意しましょう！

olタグ

「ol」とは「ordered list（オーダードリスト）」の略で、順序のあるリストを表示する際に使用します。type属性を指定することで、先頭につく記号の種類を変更できます。

liタグ

「li」とは「list item（リストアイテム）」の略で、リストの各項目を記述する際に使用します。ulタグもしくはolタグの入れ子として使用します。

<ul>
  <li>HTML/CSS</li>
  <li>JavaScript</li>
  <li>Design</li>
  <li>WordPress</li>
</ul>

<ol>
  <li>HTML/CSS</li>
  <li>JavaScript</li>
  <li>Design</li>
  <li>WordPress</li>
</ol>

imgタグ｜画像を表示させる際に使用するタグ

「img」とは「image（イメージ）」の略で、画像を表示する際に使用します。

src属性は必須の属性でファイル名（jpgやpng形式など）を指定します。
alt属性は必須ではありませんが、代替テキストを設定することができアクセシビリティのために記述するようにしましょう。

代替テキストとは、ページ上で画像の表示がされなかった際に表示されるテキストです。

かめるん先生

imgタグはdivタグで囲っておくと便利です！

<img src="logo.jpg" alt="ZeroPlusのロゴ" />

table / tr / th / tdタグ｜表を作成する際に使用するタグ

tableタグ

tableタグは表を作成する際に使用し、trタグ、thタグ、tdタグと併せて使用します。

かめるん先生

tableタグもulタグと同様に、直下に使えるタグが限られていますので、注意しましょう！

trタグ

「tr」は「table row（テーブルロー）」の略で、表のなかの行を作成する際に使用します。trタグを使用した分だけ、行の数が追加されていきます。

thタグ

「th」タグ「table header（テーブルヘッダー）」の略で、表のなかの見出しのセルとして使用します。

tdタグ

「td」は「table data（テーブルデータ）」の略で、表のなかの見出し（th）に対するデータのセルとして使用します。

<table>
  <tr>
    <th>氏名</th>
    <td>山田 太郎</td>
  </tr>
  <tr>
    <th>年齢</th>
    <td>25歳</td>
  </tr>
</table>

sectionタグ｜文書の章や節目、区間であることを表現する際に使用するタグ

「section」には「節」や「章」という意味があり、見出しを伴う文書の章や節目、区間であることを表現する際に使用します。sectionタグ内には、見出し要素（h1〜h6）を含む必要があります。

<section>
  <h2>ZeroPlusの特徴</h2>
  <p>ZeroPlusで6ヶ月学習すれば確実にエンジニアへの1歩を踏み出せます。</p>
</section>

articleタグ｜サイト内で独立しており、意味が完結しているコンテンツに使用するタグ

「article」には「記事」や「論説」という意味があり、サイト内で独立したコンテンツを囲む際に使用します。articleタグ内に、見出し要素（h1〜h6）を含む必要があります。

<article>
  <h2>プログラミング学習のモチベーション維持に大事な8つのこと</h2>
  <p>重要なのは、「自分がなぜプログラミングを学んでいるのか」という目的をはっきりさせることです。</p>
</article>

divタグ｜複数の要素をグループ化する際に使用するタグ

「div」とは、「division（ディビジョン）」の略で、特別な意味はなく、要素をグループ化する際に使用します。

divタグはブロック要素としてグループ化を行うので、下に積まれていきます。

<div>
  <p>あいうえお</p>
  <p>かきくけこ</p>
</div>

spanタグ｜インライン要素としてテキストの一部をグループ化する際に使用するタグ

spanタグは、divタグと同様に特別な意味はなく、要素をグループ化する際に使用します。

ただし、spanタグはインライン要素としてグループ化されるため、下に積まれずに横に並びます。テキストの一部分をグルーピングする際に使えるのが大きな特徴です。

<span>あいうえお</span>
<span>かきくけこ</span>

headerタグ｜サイトのヘッダー部分を示す際に使用するタグ

headerタグは、サイトのヘッダー部分を構造化する際に使用します。
具体的には、サイトのタイトルやナビゲーションなどを囲います。

<header>
  <!-- サイトのタイトルやナビゲーションが入ります -->
</header>

navタグ｜サイトのナビゲーション部分を示す際に使用するタグ

「nav」とは「navigation（ナビゲーション）」の略で、サイトのメニュー部分を示す際に使用します。navタグの中には、ul、liタグなどを用いてメニューを作ります。

<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#feature">Feature</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

mainタグ｜ページ内で一番伝えたいことや重要箇所を示す際に使用するタグ

mainタグは、ページ内で1番伝えたいこと・重要な部分を示す際に使用します。mainタグの中には、articleタグやdivタグなどを用いてページの主となるコンテンツを構造化します。

<main>
  <!-- 主要コンテンツが入ります -->
</main>

asideタグ｜ページの補足的な情報を示す際に使用するタグ

asideタグは、正確には余談要素といい、ページの補足的な情報を示す際に使用します。

かめるん先生

サイトのサイドバー部分を構造化する際によく使います！

<aside>
  <!-- ページの補足的なコンテンツが入ります -->
</aside>

footerタグ｜Webサイトのフッター部分を作成する際に使用するタグ

footerタグは、Webサイトの末尾・最後のフッター部分を示す際に使用します。サイトに関する情報や、著作権に関する表記、連絡先などを構造化します。

<footer>
  <!-- 著者の情報やコピーライトが入ります -->
</footer>

サイト構成の設計に欠かせないタグ7選

「サイト構成の設計に欠かせないタグ」は、HTMLのコーディング作業を始める際に最初に書くことの多いタグです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

いつもは上記のようなコードを形式的に書いているかもしれません。しかしそれぞれのタグは重要な役割を持っているため、この章で理解を深めていきましょう。

!DOCTYPE宣言｜このファイルはHTMLファイルですと宣言するためのタグ

<!DOCTYPE（ドックタイプ）>宣言は、「このファイルはHTMLファイルです」と宣言するためのタグです。HTMLファイルでは最初に書きます。現在のところ最新バージョンであるHTML5では、以下のように記述する決まりです。

<!DOCTYPE html>

この宣言をファイルの冒頭に書くことで、ブラウザにHTML5としてファイルを処理するように指示できます。

htmlタグ｜HTMLファイルの範囲を示すために使用するタグ

htmlタグは、「このHTMLファイルの内容はここからここまでです」と示すために使用するタグです。htmlタグの内部は「head」と「body」の2つのセクションに分かれます。

<html>
  <head>
  </head>
  <body>
  </body>
</html>

headタグ｜Webサイトの内部情報を記述するためのタグ

headタグはWebサイトの内部情報を記述するためのタグです。headタグの中にはページの見た目に直接影響しないメタデータや、外部ファイルのリンクなどを記述します。

<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">             
  <title>初心者向けHTMLガイド</title>
</head>

headタグの中に書かれている内容は、基本的にWebサイトの見た目には直接反映されません。しかしWebサイトを設計するうえで重要な役割を果たしています。次から紹介するtitleタグ、metaタグ、titleタグはすべてheadタグに中に記述するタグです。

headerセクションを作る際に使用する、headerタグと混同しやすいため区別して覚えましょう。

titleタグ｜HTML文書のタイトルを指定するためのタグ

titleタグはHTML文書のタイトルを指定するためのタグです。このタグで指定されたタイトルは、ブラウザのタブや検索結果に表示されます。

<title>初心者向けHTMLガイド</title>

metaタグ｜Webページに関する追加情報（メタデータ）を記述するためのタグ

metaタグは、Webページに関する追加情報（メタデータ）を記述するためのタグです。

文字エンコードの指定やページの説明文、モバイル端末向けの表示設定など、metaタグの内部にはサイトにとって重要な情報を記載します。

<head>
  <meta charset="UTF-8"> <!-- 文字エンコードの指定（文字化けの予防）-->
  <meta name="description" content="このページはHTML初心者向けのガイドです"> <!-- ページの説明文を検索結果へ反映させる -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- スマホやタブレットでサイトを適切に表示させる -->
</head>

linkタグ｜外部リソースとの関連を指定するためのタグ

linkタグは、外部リソースとの連携を指定するためのタグです。主に外部のCSSファイルやWebサイトのアイコン（ファビコンといいます）をHTMLファイルにリンクさせる際に使用されます。

<head>
　 <link rel="stylesheet" href="styles.css"> <!-- 外部CSSファイルをリンク -->
　 <link rel="icon" href="favicon.ico"> <!-- ファビコンを指定-->
</head>

このタグを使ってCSSを適用させたり、ブラウザにファビコンを表示させたりできます。

bodyタグ｜Webページの見た目の部分を記述するためタグ

bodyタグは、Webページの見た目の部分を記述するセクションを示すタグです。

<body>
 <h2>HTMLタグとは？</h2>
  <p>HTMLタグとは、HTMLの構造をブラウザや検索エンジンに伝える目印です</p>
</body>

画像やテキストなど、ページに表示される要素はbodyタグの中に記述します。

まとめ

この記事では、よく使われるhtmlタグを一覧にして紹介しました。

htmlタグは、Webページがどのような構造をしているか、検索エンジンに伝える目印の役割を果たします。正しく使いこなせば「SEOで評価されやすいサイト」を構築できるため、案件に取り組むうえではタグの知識が必要です。

htmlタグには「サイト構成の設計に欠かせないタグ」と「サイトの見た目を構成するためのタグ」の2種類があります。本記事で紹介した「サイト構成の設計に欠かせないタグ」は以下のとおりです。

一方、「サイトの見た目を構成するためのタグ」のうちよく使われるタグは以下のとおりです。

このようにそれぞれのタグが明確に意味を持っていますが、一度に全てを暗記する必要はありません。サイトを何度も作る過程で自然と身についていくものです。使い方を忘れてしまったら、この記事に戻って確認しましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー