SEOコンサルティングサービスのご案内
専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。
無料ダウンロードする ＞＞
Webサイト運営やコンテンツ制作に欠かせないのが、ページの骨組みを作る「HTML」です。WordPressや生成AIの進化によりコードを直接書く機会は減ったものの、タグの意味や正しい使い方を理解していないと、デザイン崩れやSEO評価の低下を招く恐れがあります。
この記事では、Web担当者が最低限おさえておきたいHTMLの基礎知識と、SEO対策に重要なタグ活用のポイントをわかりやすく解説します。
参考記事：【2025年版】SEOとは？基本の施策や仕組み・目的と上位表示事例を解説
目次
HTMLは、インターネット上のすべてのウェブページを形づくる基礎技術です。ここでは、HTMLの基本的な役割やCSSとの違い、HTMLの種類について解説します。
HTMLとは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略称で、ウェブページを作るための最も基本的な言語です。かつウェブ開発者にとって不可欠なスキルでもあります。
HTMLの「Hyper Text」とは、テキストが単独で存在するのではなく、リンクを介して他のテキストやコンテンツとつながっている状態を指します。「Markup Language」は、文章に構造や意味を与えるために「目印（マークアップ）」を付ける仕組みを表しています。例えば、段落を示す<p>タグ、画像を表示する<img>タグ、リンクを貼る<a>タグなどを用いることで、テキストや画像、リンクをブラウザ上に表示できます。
ブラウザはHTMLコードを直接表示するのではなく、人が見やすいコンテンツに変換することで、ユーザーに快適な閲覧体験を提供します。
HTMLはウェブページの構造を定義する言語ですが、見た目のデザインまで整えることはできません。そこで登場するのがCSS（Cascading Style Sheets）です。CSSは「スタイルシート」などとも呼ばれ、ウェブページの文字の色やサイズ、行間、背景色、レイアウトなど見た目のスタイルを指定する役割を担っています。
HTMLとCSSを組み合わせることで、内容と見た目を分離して効率的に管理できます。
|
HTMLの種類 |
発表年 |
概要 |
|
HTML4 |
1997年～ |
・動画や音声はHTMLでは扱えずJavaScriptが必要 ・2018年に廃止 |
|
XHTML |
2000年～ |
・XML（拡張可能なマークアップ言語）に準拠したHTML ・2018年に廃止 |
|
HTML5 |
2014年～ |
・Flashなどを利用しなくても動画や音声が扱えるようになった ・2021年に廃止 |
|
HTML Living standard |
2019年～ |
・2019年にHTMLの唯一の標準規格として採用された ・仕様は随時更新される |
HTMLの原型は1989年に考案され、ウェブの普及とともに繰り返しアップデートが行われ改良がを重ねられてきました。バージョンごとに表現力が拡張されています（表組参照）。
HTML5では、音声や動画データの埋め込み、<header>や<footer>など意味を持つタグが追加され、よりリッチで構造的な表現が可能になりました。
HTML5は2021年に廃止され、現在は「HTML Living Standard」が唯一の標準規格となり、常に最新の仕様がオンラインで更新される仕組みが整えられています。ただし基本機能はHTML5と大きく変わらず、実務でも引き続きHTML5として認識されています。
HTMLは主に以下の「タグ」「要素」「属性」の3つで構成されています。
・タグ：テキストに意味を与えるための印のことです。開始タグ＜要素名＞（例：<h2>）と終了タグ</要素名>（例：</h2>）のペアでテキストを囲むことで、そのテキストがタイトルなのか、見出しなのか、本文なのかを指示する役割を担っています。なお、HTMLのタグで使われる記号は、不等号「<」と「>」で、「<」は小なり、「>」は大なりとも呼ばれます。カーブが緩やかな山括弧〈 と 〉とは異なるため注意が必要です。
・要素：開始タグと終了タグ、さらにその中身であるテキストを含めた全体を指します。例えば、<h2>HTMLとは？</h2>であれば、テキスト部分も含めた全体が「見出しタイトルの要素」です。
・属性：タグの内部に記述される追加情報のことで、要素に詳しい意味や機能を持たせます。例えば、<img src="photo.jpg" alt="風景">では、srcで画像ファイルを指定し、altで代替テキストを与えています。なお、通常は終了タグを使用しますが、imgタグには終了タグは必要ありません。
HTMLには数多くのタグがありますが、実際にWeb制作やSEOでよく使われるのは一部です。ここでは、タグの種類や基本的な役割、SEOに直結する重要タグを整理して解説します。
HTMLの最新仕様である「HTML Living Standard」では、使用できるHTMLタグの数が固定されているわけではありません。過去のバージョンごとに追加や廃止が繰り返されてきた経緯があるため、明確に「全部で○個」とは言い切れないのが特徴です。一般的には100〜120種類程度が定義されており、そのうち実際のWeb制作で頻繁に利用されるのは50〜60種類ほどとされています。
さらに、各タグには「属性」が存在し、役割を拡張したり詳細な情報を加えたりすることができます。たとえば、<img>タグに付与する「src」や「alt」属性がそれに当たります。HTMLタグの種類を数えるだけでなく、属性と組み合わせて理解することで、HTMLをより柔軟に活用できるようになります。Web担当者としては、タグ全体を網羅する必要はありませんが、よく使われる代表的なものを確実に押さえることが重要です。
以下は最低限知っておきたい代表的なHTMLタグ一覧です。
| タグ | 用途 | 例 |
|---|---|---|
| <html> | HTML文書においてルート（基点）となるもので、文書全体を囲む。 | <html>…</html> |
| <head> | ページ情報（metaやtitle）や外部リソースの読み込み設定を行うタグ。＜title＞タグは検索結果やブラウザのツールバーなどに表示され、それ以外は通常画面には表示されない。 | <head>…</head> |
| <meta name=”description”> |
ページの概要を定義するタグ。検索結果のスニペットとして表示される。内容を的確にまとめ、120〜150文字程度に収めるのがベスト。 【SEOとの関係】 CTR向上に直結。 | <meta name=”description” content=”ページの概要を簡潔に説明します。”> |
| <title> |
<head>内に含まれるページのページのタイトルを指定するタグ。ブラウザのタブや検索結果に表示される。内容を端的に表す30〜35文字程度が推奨される。 【SEOとの関係】 設定が最重要。検索順位やクリック率（CTR）に大きく影響。 | <title>HTMLとは</title> |
| <body> | 実際に表示される本文を指定するもので、文書の中に一つだけ配置できる。 | <body>本文</body> |
| <h1>〜<h6> |
見出しを指定するhタグ。文書内の見出しを6段階で表す。ｈ1が一番表示サイズが大きく、見出しの数字が大きくなるにつれて表示サイズが小さくなる。なお、WordPressなどでは基本的にはh1が記事タイトルとして使われる。 【SEOとの関係】 コンテンツ構造を検索エンジンに伝える重要な要素。 | <h1>見出しタイトル</h1> |
| <p> | 段落を示すタグ。 | <p>文章</p> |
| <a> |
href属性を用いて、別のウェブページやファイル、メールアドレス、同一ページ内の場所、他のURLへのハイパーリンクを作成する際に使用する。 【SEOとの関係】 リンクテキストには「こちら」ではなく内容がわかるキーワードの使用が推奨される。内部リンクはクローラビリティを高め、外部リンクは信頼性の向上につながる。 | <a href=”url”>詳しくは関連記事「●●●●」をご覧ください。</a> |
| <img> | src属性（埋め込みたい画像へのパス）、alt属性（画像をテキストで説明）を用いて文書に画像を埋め込む際に使用する。なお、imgタグには終了タグは必要ない。 【SEOとの関係】 アクセシビリティ向上に不可欠。検索エンジンは画像を直接理解できないため、alt属性で内容を伝えることが重要 | <img src=”cat.jpg” alt=”猫”> |
| <strong> <em> | いずれもテキストを強調するためのタグで、＜strong＞は囲んだテキストが太字で、＜em＞は囲んだテキストがイタリック体（斜体）などで表示される。 【SEOとの関係】 ユーザーに伝わりやすくなると同時に、検索エンジンにも強調ポイントを示せる。 | <p>いずれもテキストを＜strong＞強調する＜/strong＞ためのタグです。</p> |
| <ul> / <ol> / <li> | 箇条書きをするときに使用するタグ。黒丸付きの箇条書きは＜ul＞と＜li＞を用い、順序付きの箇条書きは＜ol＞と＜li＞を用いる。 |
<ul> <li>テキスト1</li> <li>テキスト2</li> <li>テキスト3</li> </ul> |
| <br> | HTMLで改行するには <br> タグを文末にのみ配置して使用する。 | ～については以下を参照してください<br> |
| <div> | ブロック要素で見出しや段落などテキストをグループ化し、レイアウトや装飾などスタイルを細かく指定できるようにする。 | <div>…</div> |
| <span> | インライン要素でテキストのなかの一部分をグループ化し、class属性やid属性を使用して単語や文章の色、太さなどを個別に指定できるようにする。 |
テキストに <span class＝”red”>色をつけて</span> 強調する |
| <meta name=”robots”> | 検索エンジンのクロールやインデックスを制御するタグ。全ページに必須ではないが、特定ページを検索結果に表示させたくない場合などに利用する。 【SEOとの関係】 インデックス可否を指定可能。 | |
| <link rel=”canonical”> | 同じ内容のページが複数ある場合に「正規URL」を指定するためのタグ。 【SEOとの関係】 重複コンテンツを整理し、検索エンジンに優先的に評価してほしいURLを伝えられる。 |
【HTMLタグの書き方例】
Meta discriptionタグの書き方
※Headタグの中に記載する。
<head>
<meta name="description" content="Webサイト運営やコンテンツ制作に欠かせないのが、ページの骨組みを作る「HTML」です。この記事では、Web担当者が最低限おさえておきたいHTMLの基礎知識と、SEO対策に重要なタグ活用のポイントをわかりやすく解説します。">
</head>
Titleタグの書き方
<head>
<title>【HTMLの基礎知識】Web担当者が知っておきたいタグとSEO対策</title>
</head>
Meta name=”robots”の書き方
<head>
<meta name="robots" content="noindex, nofollow">
</head>
link rel=-”canonical”の書き方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<link rel="canonical" href="https://www.example.com/正規のページ.html">
</head>
<body>
...
</body>
</html>
aタグの書き方
<a href="url">詳しくは関連記事「●●●●」をご覧ください。</a>
なお、リンクを別ウィンドウで開きた場合はURLのあとにtarget=”_blank”と入れる。
<a href="url"target=”_blank”>詳しくは関連記事「●●●●」をご覧ください。</a>
strongタグの書き方
<p>いずれもテキストを＜strong＞強調する</strong>ためのタグです。</p>
Imgタグの書き方
<img src="cat.jpg" alt="猫">
hタグの見え方
<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し２</h3>
titleは昔（10年ほど前？）に比べると重要度は少し下がったとはいえ、今でもダントツで大事なタグです。descriptionはむしろ前より影響が大きくなっていて、クリック率を左右するので丁寧に書きたいですね。
見出しはh1・h2を中心にシンプルな構造にするのがベターで、画像のaltも昔以上に評価されやすい印象があります。strongみたいな強調タグも「意味ない」と言われていた時代がありましたが、実際にはユーザーもよく目にするので効果的。
逆にcanonicalは以前ほど効かなくなっていて、あくまで「推奨の目安」くらいに考えるのが現実的です。だいぶ効かなくなりましたね（笑）
渥美 嘉将
アパレルECの運営を経験した後、SEOコンサルタントとして10年以上の実績、計100件以上のクライアント案件に携わる。テクニカルSEOの知見が豊富で分析、改善起案を得意としており、長年に渡り月間数億UU規模の大規模WebサイトにおけるSEOプロジェクトをメインで担当し続けている。お客様に寄り添うことを何より大切にしている。
関連記事
hタグとは？意味・用途と見出しタグ（h1～h6）の正しい使い方と注意点
Canonical（カノニカル）タグの効果とは？ SEO効果を最大化する実践ガイド
WordPressやノーコードツールの普及で、コードを書かずにページを作れる時代になりました。しかし、トラブル対応やSEOの観点から、HTMLの基礎知識は今も現場で求められています。
HTMLは、Webページを形づくる「骨組み」にあたります。どのようなCMS（コンテンツ・マネジメント・システム）や生成AIを利用しても、最終的にブラウザに読み込まれるのはHTMLで記述された構造です。そのため、ページの表示崩れや余分なスペース、レイアウトの乱れといった問題が起きたとき、原因を把握し適切に修正するにはHTMLの知識が欠かせません。
また、SEO対策を行う上でも、検索エンジンが正しく理解できるページ構造を作ることが大切です。見出し階層やリンク構造などの基本を押さえていれば、外部ツールに任せきりにせず、自社サイトに最適な調整が可能になります。Webの基盤を理解することで、表面的な操作にとどまらない本質的な改善が行えるのです。
WordPressやノーコードツールは非常に便利ですが、細かい調整を行う際にはHTMLの知識が役立ちます。例えば、WordPressの編集画面では、ウィジェットやカスタムHTMLブロックを使ってコードを直接入力する場面があります。ここでリンクを追加したり、見出しの階層を正しく変更したりするには、基本的なHTMLの理解が必要です。
また、生成AIで作成したコンテンツでも、出力されたコードが完全とは限りません。リンク先の属性付与や、装飾タグの適切な使い分けなど、人の手による修正が求められるケースがあります。つまり、ツールを使いこなすための裏付けとして、HTMLの知識は今も欠かせないスキルといえるでしょう。
検索順位やユーザー体験の向上には、適切なHTMLタグの使い方が欠かせません。＜h1＞から＜h6＞までの見出しタグはページ構造を示し、検索エンジンがコンテンツを理解する助けになります。また、画像に設定するalt属性はSEO効果に加え、視覚に障がいのあるユーザーが利用する際に音声ブラウザがテキストを読み上げることによって画像の内容を理解できるようになるなど重要な役割を担います。
ところが、自動生成ツールが出力するコードは、必ずしもSEOやアクセシビリティを意識して最適化されているわけではありません。余分なタグや不適切な属性が含まれることもあり、そのままでは効果を十分に発揮できない場合があります。そんなとき、人がHTMLを理解していれば、不足や誤りを修正し、検索エンジンにもユーザーにもやさしいサイトに改善できます。
HTMLはWebページの構造を支える基盤であり、現在のCMSや生成AIが普及した環境でも欠かせない知識です。タグや要素、属性を正しく理解することで、表示崩れの原因を見極めたり、SEOの観点からコードを最適化したりすることができます。また、＜title＞や＜meta＞、見出しタグ、alt属性といった要素は、検索順位やアクセシビリティに直結します。ノーコードツールやAIを活用する場合でも、部分的にコードを調整する場面は少なくありません。基礎を押さえておけば、外部ツール任せにせず、自社サイトに合った改善が可能です。Web担当者や広報、マーケティング担当者にとって、HTMLの理解は今なお実務に直結する価値あるスキルといえるでしょう。
2002年設立から、20年以上に渡りSEOサービスを展開。支援会社は延べ2,000社を超える。SEO/CRO（コンバージョン最適化）を強みとするWebコンサルティング会社。日本初のSEO情報サイトであるSEO Japanを通じて、日本におけるSEOの普及に大きく貢献。
SEO最新情報やセミナー開催のお知らせなど、お役立ち情報を無料でお届けします。
