【初心者向け】HTMLタグの種類や使い方の基本をわかりやすく解説

HTMLでWebサイトを作りたいけどタグの使い方がわからない……とお悩みの方に向けて、本記事では初心者でもわかるHTMLの基本を解説します。

よく使うタグの種類と使い方、HTMLの基本的な設定までご紹介しますので、ぜひHTMLを使ってWebサイトを作成してみましょう。

HTMLとは？

HTMLは、Hypertext Markup Languageの略称で、Webページを作成するための標準的なマークアップ言語です。この言語は、インターネット上でWebページを表示する際の基礎となる重要な役割を担っており、ブラウザがWebページの構造と内容を正確に理解し、適切に表示するために使用されます。

HTMLでは、特殊なタグを用いることで文書内のさまざまな要素を定義し、テキスト、画像、リンク、表などのコンテンツを体系的に構造化することができます。これにより、Webデザイナーやデベロッパーは、情報を整理し、視覚的に魅力的で機能的なWebサイトを効率的に作成することが可能となるのです。

以上のように、HTMLはWebの世界において欠かすことのできない基盤技術であり、その習得はWebに関わる全ての人にとって重要な意味を持っています。

HTMLを構成するタグ・要素・属性

HTMLの基本構造は、タグ、要素、属性です。以下で詳しく解説します。

タグ

タグとは、テキストの意味や内容をコンピュータに理解させる目印のことです。例えば、下記のように開始タグ（例：<h1>）と終了タグ（例：</h1>）でテキストを挟み込み、「見出し」や「強調」など、該当するテキストをどのように表示させたいのかをコンピュータに指示します。

【使用例】

• 例1：<h1>HTMLとは？</h1>
  →hタグの使用で「HTMLとは？」が見出しになる
• 例2：<strong>HTMLとは？</strong>
  →strongタグの使用で「HTMLとは？」が太文字になる
  

タグは他にもさまざまな種類が存在し、中には改行を表す<br>や画像を表示する<img>のように終了タグが不要なもの、リストを表示する<li>のように終了タグを省略できるものもあります。

なおコンピュータが読み取った後、Webページ上に<h1></h1>のようなタグは表示されません。指示により文字の大きさや太さなどが調整されたテキストが表示されます。

要素

要素とは、開始タグと終了タグで囲まれた範囲全体のことを指します。下記の例であれば、<h1></h1>タグとタグに挟まれたテキストも含めて、「<h1>HTMLとは？</h1>」のひとかたまり全てが要素です。

【使用例】

• 例：<h1>HTMLとは？</h1>
  開始タグ：<h1>
  終了タグ：</h1>
  テキスト：HTMLとは？要素：<h1>HTMLとは？</h1>
  →見出しとして、Webページ上に「HTMLとは？」が表示される
  

また、タグで囲っている要素をさらに別のタグで囲う、「入れ子構造」にすることも可能です。ただし、HTMLにはルールがあり、中には別のタグで囲えない要素もあるため、よく確認しておきましょう。

属性

属性とは、タグに特定の性質や動作を追加するための情報のことです。例えば、リンクを挿入するaタグに「href属性」を追加すると、文字や文章にURL情報を挿入できます。また、画像を挿入するimgタグに「alt属性」を追加すると代替えテキスト（画像の内容を文字にしたもの）の指定や、クリック後の動作の設定が可能です。

記述する際は「<開始タグの要素名 属性名=”属性値”>」に当てはめて属性を指定します。また半角スペースで「属性名=”属性値”」部分をつなげることで、複数の属性を追加することも可能です。

【使用例】

• 例1：<a href=”https://〇〇〇〇.com”>HTMLとは？</a>
  →「HTMLとは？」をクリックすると、指定したURLに飛ぶ
• 例2：<img src=”https://〇〇〇〇.com” alt=”HTMLとは、Webページの作成に使われる言語です。”>
  →alt属性で指定した画像に代替テキストが指定されることに加え、src属性も併用して指定したURLに飛ばすこともできる

HTMLとCSSの役割の違い

CSSとは、Webサイトの見た目や文字サイズ、色などを指定するためのスタイルシート言語です。HTMLとCSSはそれぞれ役割が異なり、HTMLがWebページの骨組みを作る役割があるのに対し、CSSはHTMLで作られた骨組みの「見た目を装飾する」役割があります。

また、HTMLは単独で使用できますが、CSSは通常HTMLと組み合わせて使用されます。
下記で、HTMLとCSSの具体的な役割の違いをご覧ください。

【HTML：Webページの骨組みを作る】

• タイトルの作成
• 見出しの作成
• 画像の挿入
• リストの挿入
• リンクの設定

【CSS：見た目を装飾する】

• 文字のサイズを変える
• 文字の色を変える
• 背景の色を変える
• 文字や画像の位置を調整する（左寄せ・中央揃え・右寄せ）
• 文字同士の間隔を調整する

【使用例】
<h1>HTMLとCSSは<span style=”color: red”>役割</span>に違いがある</h1>

上記の例では、<span style=”color: red”></span>がCSS、<h1></h1>がHTMLに該当します。Webページ上では「HTMLとCSSは役割に違いがある」という見出しが作られ、そのうち「役割」の文字だけが赤色に表示されます。

HTMLはプログラミング言語ではない

HTMLはテキストの意味や役割をコンピュータに認識させるための「マークアップ言語」であり、プログラミング言語ではありません。

プログラミング言語はコンピュータに指示を出し、計算やデータ処理など動的に実行するために使用されます。一方マークアップ言語であるHTMLは、テキストに印付けをしてWebページの見出しや段落、画像などをどのように表示させるか指示する言語なので、HTMLだけではプログラミング言語のような動的な処理を行うことはできません。

しかし、HTMLはプログラミング言語に比べてシンプルなので、初心者でも簡単なWebページであれば作成可能です。また、CSSと組み合わせることにより見た目を装飾することもできます。

動的な機能を加えたい場合に「JavaScript」のような、WebサイトやWebアプリケーションを作れるプログラミング言語を使用する方法もあります。しかし、使用するためにはある程度の技術的な知識が必要です。

HTMLのタグ一覧｜よく使うタグ10種と使い方

HTMLタグは100以上あると言われていますが、今回はその中からよく使うタグ10種類を使用例とあわせて紹介します。

	タグの種類	機能
1	h	見出しの作成
2	p	段落の作成
3	strong	太文字
4	a	リンクの挿入
5	br	改行
6	li・ul・ol	リストの作成
7	table	表の作成
8	img	画像の挿入
9	div	文章や要素をひとまとまりでグループ化
10	span	文中の一部をグループ化

1. hタグ｜見出しの作成

hタグは見出しを作成する際に使われ、hはHeading（見出し）の頭文字です。hタグは<h1>～<h6>の6種類の見出しを作成でき、数字が大きくなるほど文字の大きさは小さくなります。

【使用例】
<h2>HTMLのタグ一覧｜よく使うタグ10種と使い方</h2>
<h3>1. hタグ｜見出しの作成</h3>

【表示例】

2. pタグ｜段落の作成

pタグは段落を作成する際に使われ、pはParagraph（段落）の頭文字です。文章をまとまりごとに区切れるので、Webページを読みやすくするのに役立ちます。

またpタグはブロック要素であるため、pタグを使うと直接指示を出していなくても自動で改行されます。一方、pタグ内で改行しても、brタグなどで指示を出さない限り改行はされません。下記の例で実際に確認してみましょう。

【使用例】

<p>pタグがどのように表示されるか確認しましょう。</p><p>一見改行していないように見えますが、実際の表示では改行されています。</p>

<p>一方、タグを使わずに文中で改行しても、
実際の表示では改行されません。</p>

【表示例】

タグがどのように表示されるか確認しましょう。

一見改行していないように見えますが、実際の表示では改行されています。

一方、タグを使わずに文中内で改行しても、実際の表示では改行されません。

3.  brタグ｜改行

brタグは改行する際に使われ、brはBreak（改行）の略です。ある地点の改行を指示する意味を持つので、brに終了タグは必要なく開始タグ「<br>」のみが使われます。

また、HTMLのバージョンによりタグが異なります。HTML Living StandardやHTML5の最新版では<br>が推奨されていますが、XHTMLでは<br/>とスラッシュが必要な点に注意しましょう。

【使用例】

<p>改行を多用するのは控えましょう。<br>スマートフォンの小さい画面で見たときに、思わぬところで改行されてしまうこともありえます。</p>

【表示例】

改行を多用するのは控えましょう。
スマートフォンの小さい画面で見たときに、思わぬところで改行されてしまうこともありえます。

このように、<br>タグはテキスト内で改行を指示できる点で便利ですが、過度な使用はレイアウトを崩す恐れがあるので使いすぎないよう注意が必要です。

4. strongタグ｜太文字

strongタグは強い重要性を表すときに使われ、指定された文字や文章は太文字で表示されます。見た目で大事なポイントを示せる他、検索エンジンにも重要性を伝えられるのでSEO効果があることも特徴です。

太文字で指定箇所を強調できるタグにbタグがありますが、bタグはstrongタグと違って検索エンジンに重要性は伝えられず、文字の見た目のみを強調します。

【使用例】

<p>strongタグは、<strong>強い重要性</strong>を表します。</p>

【表示例】

strongタグは、強い重要性を表します。

5. aタグ｜リンクの挿入

aタグは指定された文字や文章にWebサイトのリンクを貼り付けたい場合に使用され、aはAnchor（アンカー：船のいかり）の頭文字です。テキストや画像とWebサイトを結び付ける役割をしています。

そして、aタグで指定したテキストにURLを設定するために使われるのが「href属性」です。aタグとhref属性を組み合わせることで、対象のテキストをクリックしたときに設定したWebサイトに飛ばせるようになります。

【使用例】

<p><a href=”https://〇〇〇〇.com”>aタグとは？</a></p>

【表示例】

aタグとは？（href属性とともに使うことで、クリックすると指定したWebサイトに飛ぶように設定される）

6. li・ul・olタグ｜リストの作成

li・ul・olタグはリストを作成する際に使われ、liはList Item（リストの項目）、ulはUnordered List（順序がないリスト）、olはOrdered List（順序があるリスト）の略です。

順序がないリスト、すなわち箇条書きにしたい場合は「li」を「ul」で囲み、順序があるリスト、すなわち番号を付けたい場合は「li」を「ol」で囲みます。

【使用例】

<ul>
<li>liタグとは？</li>
<li>ulタグとは？</li>
<li>olタグとは？</li>
</ul>

<ol>
<li>liタグとは？</li>
<li>ulタグとは？</li>
<li>olタグとは？</li>
</ol>

【表示例】

• liタグとは？
• ulタグとは？
• olタグとは？

1. liタグとは？
2. ulタグとは？
3. olタグとは？

このように<ul>タグは箇条書きリストを、<ol>タグは番号付きリストを作成します。

7. tableタグ｜表の作成

tableタグは表を作成する際に使われ「tr・th・td」の3つを組み合わせて表が作られます。trはTable Row（行）、thはTable Header（見出し）、tdはTable Data（データ）それぞれの頭文字です。

【使用例】

<table>
　<tr>
　　<th>タグの種類</th>
　　<th>機能</th>
　</tr>
　<tr>
　　<td>hタグ</td>
　　<td>見出しの作成</td>
　</tr>
　<tr>
　　<td>tableタグ</td>
　　<td>表の作成</td>
　</tr>
</table>

【表示例】

タグの種類	機能
hタグ	見出しの作成
tableタグ	表の作成

なお、<table>タグのみでは表の罫線は表示されません。border属性を追加することで罫線ありの表も作成できます。

8. imgタグ｜画像の挿入

imgタグは画像を表示するときに使用され、imgはImage（画像）の略です。imgタグでは、JPG、PNG、GIFなどの形式が使用できます。imgタグには画像の場所を指定する属性であるsrcタグが必須で、他に使用される属性としてはalt属性、width属性、height属性、title属性などです。

また、imgタグに終了タグは必要ありません。

【使用例】

<img src=”img_html.png” alt=”HTML とは？”>

【表示例】

画像の場所「img_html.png」が指定され「HTMLとは？」の代替テキストが含まれた画像が表示されます。

9. divタグ｜文章や要素をひとまとまりでグループ化

divタグは文章や要素をひとまとまりでグループ化するときに使用され、Division（分割）の略です。divタグはそれ自体に特別な意味を持たないタグですが、ひとまとまりにした部分をブロック要素としてまとめて扱えるので、CSSを使う際にも範囲を一括りにして装飾できる点で役立ちます。

【使用例】

<div class=”block”>
　<h2>divタグとは？</h2>
　<p>文章をひとまとまりでグループ化するタグです。</p>
</div>

【表示例】

※指定した範囲全体がひとまとまりとして認識されます。

10. spanタグ｜文中の一部をグループ化

spanタグは文中の一部をグループ化するときに使用されます。divタグ同様タグそのものに意味を持たないタグですが、divタグがブロック要素であるのに対しspanタグはインライン要素です。そのためspanタグは一部の文字の強調や色の変更に使われます。

【使用例】
　　<p>spanタグは、<span style=”color:red;”>文中の一部をグループ化</span>するタグです。</p>

【表示例】

spanタグは、文中の一部をグループ化するタグです。

※「文中の一部をグループ化」のみ赤色に変更されます。

Webサイトを制作する前に！HTML作成の基本的な流れを解説

基本的なタグを知ったところで、次はHTML作成の基本的な流れを紹介します。

パソコンに標準搭載されているメモ帳を使用したHTMLの入力から、できあがったHTMLファイルをブラウザに表示させるまでを順番に解説。実際にHTMLを入力して、Webサイトを作成するイメージを膨らませてみましょう。

1. HTMLを書くための「メモ帳」を用意する
   Windows10/11：メモ帳アプリ
   Mac：テキストエディット.app

2. HTMLを書く（下記の基本形式をコピペする）
   
   <!DOCTYPE html>※1
   <html lang=”ja”>※2
   <head>※3
   　<meta charset=”UTF-8″>
   　<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
   　<title>好きなタイトルを入力L</title>
   </head>
   <body>※4
   　<h2>見出しを入力</h2>
   　<p>文章を入力</p>
   </body>
   </html>※5

3. ファイル名を〇〇〇.htmlにして保存する
   ファイルの拡張子が「.txt」だとHTMLが表示されないので「.html」に変更しましょう。

4. ブラウザでHTMLがどのように表示されるか確認
   ブラウザにファイルをドラッグすることで確認できます。Google ChromeやSafari、Microsoft Edgeなどで表示可能です。

※1 HTML文書であることを宣言するDOCTYPE宣言。HTMLより先に入力する必要があります。<!DOCTYPE html>の形式はHTML5以上、バージョンにより異なります。

※2 HTMLのはじまり。「lang=”ja”」は「日本語を使う」という意味です。

※3 headタグ内にはさまざまな設定情報を入力します。metaタグを使って文字化けしないようにコード（UTF-8）を入力したり、ディスクリプションを入力したり、titleタグで「タイトル」を入力したりします。

※4 body内はWebサイトに表示させる内容を入力します。

※5 閉じタグでHTMLのおわり。

なお、HTMLファイルをインターネット上に表示させるためには、テキストエディタやサーバー、そしてサーバーにアップロードするための専用ソフトが必要です。

HTMLを使うメリット

HTMLを使うメリットは、基本的なタグや要素、属性を知っていれば簡単にWebサイトを作れてしまうことです。Web制作ツールを用意する必要もありません。

ルールに従って記述するだけで、文字が並んでいるだけのシンプルな文章にデザイン性を与えたり、リンクを付けたりすることが可能です。表示内容を変更したい場合も、HTMLファイルを直接編集すればすぐにWebサイト上に反映されます。

また、HTMLを理解できれば今見ているWebページがどのような構造で作られているか知ることも可能です。Web制作ツールを使っている場合でも、気になる部分のHTMLを直接編集できるようになるので、ご自分のWebサイトを作るときの参考にもなります。

HTMLを使うデメリット

HTMLを使うデメリットは、HTML単体では静的でシンプルなデザインしか作れないことです。

HTMLだけでは文字の大きさやリンク、画像など、テキストに単純な意味しか与えられません。Webページにアクセスするたびに目にする情報が変わる動的な表現を加えたいなら、JavaScriptのようなプログラミング言語も取り入れる必要があります。

また、少しの記述間違いがWebページの表示に影響を与える場合もあります。例えば<h1></h1>の「/」スラッシュが抜けていたり、開始タグと終了タグが対になっていなかったり、わずかなミスですが想定していた見た目と大きくずれる可能性もあるので注意が必要です。

実際にHTMLコードを使ってWebサイトを作ってみよう

HTMLとは、印付けをしたテキストに意味や役割を与えコンピュータに認識させるためのマークアップ言語です。本記事ではHTMLの基本であるタグ・要素・属性から、CSSとプログラミング言語との違い、よく使うタグの種類まで解説しました。

HTMLの基本的なタグ・要素・属性の知識があれば、Web制作ツールを使わずとも比較的簡単にWebサイトを作成することが可能です。また、すでにWeb制作ツールを使ってWebサイトを運営している方にとっても、HTMLを使って特定の箇所を直接編集できる点で役立ちます。

まずは本記事で紹介した「HTML作成の基本的な流れ」と「よく使うタグ10種と使い方」を参考に、実際にHTMLコードを入力してみることからはじめましょう。

もし「マーケティングを意識したWebサイトを作りたい！」と考えている方は、Web制作の専門サービスに相談してみるのもおすすめです。株式会社ジオコードでは、Webサイトの立ち上げからSEO対策に至るまでサポートしています。是非お気軽にご相談ください。