HTMLタグの種類と使用例を解説

WEBサイトを制作する上でかかせないHTMLタグ。
ただ、実際にWEBサイトを自身で作っていない場合、HTMLタグはどのようなものか、なかなか知る機会は少ないかもしれません。
もし、WEB担当になって、サイトの運用、また外注を行う場合に最低限知っておきたいHTMLタグについて解説していきます。

1.　HTMLタグの定義

HTML（HyperText Markup Language）は、WEBページを作成する際に使用される言語です。マークアップ言語とも呼ばれ、HTMLタグを使って文書に意味付けを行います。

HTMLタグとは

HTMLタグとは、見出しや本文といったWEBページの要素を囲み、意味を持たせるコードのこと。「<×××>〜」の形で記述され、「×××」部分に見出しや本文、画像といった各要素の定義が入ります。

テキストやデザインの各要素をタグで囲むことを「タグ付け」や「マークアップ（Markup）」、ブラウザーで読み込めるようにHTMLソースコードを記述する作業全体をコーディングと呼びます。

HTMLタグが使われるシーン

HTMLタグは主にWEBページの作成に使われます。テキストもデザインも、HTMLファイルにしないとWEBページでは表示できません。
また、例え白紙のページであっても、HTMLファイルのソースを表示するとたくさんのタグが記述してあるものです。

HTMLタグにはどのようなものがあるのか、以下によく使われるタグの例を紹介します。

以下、通常は< >で囲って使用するHTMLタグとなります。各タグを簡単に解説します。

• !DOCTYPE html
「これはHTML文書です」と宣言するタグです。


• html
このタグに囲われた文書をHTMLだと定義付けるもの。lang="ja"は「ここで使われている言語は日本語です」と言語指定している部分です。


• head
文書の基本情報（ヘッダー情報）を記述するタグです。記事タイトルやmeta情報、CSSの指定などが入ります。ヘッダー情報はWEBページでは表示されません。


• body
WEBページに表示される部分を囲うタグです。


• header
WEBサイトのヘッダーメニューなどが入る部分です。headタグとは別物です。


• main
WEBページの主要部分を囲うタグです。ブログなら見出し（hタグ）や段落（pタグ）など記事本文の情報が入ります。


• footer
WEBページ下部に表示されるサイト情報などが入る部分です。

HTMLタグの重要性

SEOを意識したWEBサイトを作るなら、とくにHTMLタグは重要です。
というのも、Googleをはじめとする検索エンジンは、WEBページのHTMLを参照してページの順位付けを行っているためです。

検索エンジンはクローラーと呼ばれるプログラムでWEBサイトを巡回し、ネット上にある無数のWEBページのテキストや画像情報を取得・データベース化しています。そのため、クローラーがページを認識しやすいようマークアップすることが大切です。
このような検索エンジンからの見え方まで考えてWEBページを作成することを内部SEOや内部対策などと呼び、WEB制作会社によってそのスキルには差があります。

SEOの観点からコーディング先、サイト制作の依頼先を探すのであれば、マークアップを得意とする会社かどうかの確認も大切です。WEB制作会社などへ外注依頼する際は、過去に作ったサイトの例を見せてもらうことが多いでしょう。その際に、一緒にコーディング例も見せてもらうとスキルの見極めになります。

WEBサイトのコーディングやマークアップなどの依頼先をお探しの場合は、リカイゼンにお任せください！
リカイゼンでは、熟練のマッチングスタッフが、希望条件に応じて適した方法、また対応可能な制作会社候補を選定し、無料紹介いたします。
まずはご相談からでもお気軽にご連絡ください。

2.　SEO内部対策にてHTMLで頻出するタグ

SEOの内部対策では、どのようなHTMLが重要視されるのでしょうか。ここでは「metaタグ」「見出しタグ」「本文中タグ」の3つにわけで紹介します。

metaタグ

metaタグとは、記事の情報を検索エンジンに伝えるタグです。headタグ内に記述します。
特に重要になるmetaタグは以下の4つです。

• titleタグ
そのページのタイトルを設定するタグです。記事タイトルには対策キーワードを含めたものを付けるのがSEOの大原則。検索エンジンはtitleタグ部分を「この記事のタイトルだな」と認識してコンテンツ情報を取得するためです。また検索エンジン上で最初にユーザーが目にする部分でもあるため、記事タイトルが魅力的かどうかはクリック率に直結します。


• descriptionタグ
その記事の概要や要約を表した文章を設定するタグです。「meta name=”description” content=」で=以降にdescription用のテキストを記述します。
クローラーに記事の概要を伝える役割を持つとともに、検索エンジンで記事タイトルの下に表示される短い説明文にもなります。ディスクリプションもクリック率に関係するため、対策キーワードを意識して記述しましょう。


• viewportタグ
画面の表示領域をデバイスごとに調整するタグです。「meta name="viewport" content="width=device-width,initial-scale=1"」のように記述します。
WEBページのレスポンシブ対応はSEOでも重視されるため、レスポンシブコーディングを行うなら必須といえるでしょう。


• keywordsタグ
記事の対策キーワードをクローラーに伝える役割があり、「meta name="keywords" content="キーワードA,キーワードB…"」で記述します。
以前はkeywordsタグで記事の対策キーワードが判断されていたため、重要なタグでした。しかし検索エンジンが進化したことで、現在はほとんどSEOの効果はないと言われています。よって現時点で特別注意する必要はありませんが、将来的にまた効果を発揮する可能性もゼロではないため、一応入れておくほうが安心です。

見出しタグ

見出しタグとは、記事本文の「大見出し」や「小見出し」を設定するためのタグです。h1が大見出し、h2が小見出しというようなかたちで、数が増えることに階層に入っていくようなかたちになります。
見出しタグには文章の重要なポイントを検索エンジンに伝える役割があり、記事の内容に合わせて使い分けるとユーザーにとっても読みやすい記事に仕上がります。見出しタグはh1〜h6までありますが、主にh1〜h4を使用することが多いでしょう。

• h1タグ
最上位の見出しです。記事内に1つか、多くても2つ。ほぼタイトルと同じ扱いで使用されることが多いでしょう。ただし、あくまでbodyタグ内に記述するため、titleタグと違って検索表示などの外部からは見えません。


• h2〜h4タグ
h2は中見出し、h3とh4は小見出しとして使用されます。各見出しの数は記事の長さや内容によって変わり、制限はありません。ただしh2、h3は検索表示をされることもあるため、対策キーワードを意識して設定するとよいでしょう。

本文中のタグ

見出しタグの他にも、本文中に使用するタグがいくつかあります。

• aタグ
リンクを設定するときに使用するタグ。アンカータグとも呼ばれ、指定するテキストにリンクを貼ることなどが可能です。


• 画像タグ（altタグ）
記事内に挿入した画像について説明するタグ。代替テキストとも呼ばれ、「img src="image.jpg" alt="画像の説明文"」のように記述します。
altタグがなくても画像表示に問題はありませんが、適切に設定しておくと、音声読み上げでのWEBページ閲覧や画像検索対策に役立ちます。


• リストタグ(liタグ）
箇条書きをしたいときに使用するタグです。箇条書きはユーザーの見やすさ向上につながるため、SEOに効果的。また強調スニペットにも表示されやすくなります


• 強調タグ（strongタグ）
テキストを太字に装飾したいときに使用します。テキストのなかで特に重要なポイントを検索エンジンとユーザーに伝える役割があります。


• 引用タグ（qタグ）
文献や別サイトからの引用文を囲むタグです。qタグで囲んだ箇所について、引用文用の装飾が付与できます。また引用文だと検索エンジンに伝えることで、コピーサイトと疑われるのを避ける役割もあります。


• 表タグ（tableタグ）
ページ内に表を作成するタグです。tableタグのなかに「tr」、「th」、「td」で行・列・セルを定義していきます。ユーザーの見やすさはもちろんのこと、表であると正しく定義しておくと強調スニペット表示にもつながります。

SEO内部対策など、コーディングやマークアップなどの依頼先をお探しの場合は、リカイゼンにお任せください！
リカイゼンでは、熟練のマッチングスタッフが、希望条件に応じて適した方法、また対応可能な制作会社候補を選定し、無料紹介いたします。
まずはご相談からでもお気軽にご連絡ください。

3.　HTMLタグ使用時の注意点

適切なHTMLタグの利用はSEOの内部対策にはなりますが、多く使えばよいというわけではありません。HTMLタグ使用時の注意点を紹介します。

ごみタグを作らない

不要なタグ、いわゆるごみタグは作らないようにしましょう。
例えば文字の色を赤くするHTMLタグの内側に、文字の色を黒くするタグが書かれているといった具合です。文字は赤く表示されるため、文字を黒くするタグは何の効果もないごみタグになります。

タグが整理されておらず、ごみタグが多いと以下のような問題が発生します。

• ウェブページのサイズが無駄に大きくなってしまう
• HTMLソースに変更箇所があっても、すぐに目的のコードを見つけられない
• 修正などで他者にHTMLソースを見せる際も、内容の理解に時間がかかる

ルールを守る

WEBサイトによってはマークアップルールを設定しているケースもあります。
例えば「リストタグを使うときは、

のように決められた属性をつける」というルールがある場合、ただの
で記述してしまうと箇条書きの見え方が変わってしまうでしょう。また改行やコメントの入れ方など、他のコーダーと共有する前提でルールを設定していう場合もあります。

ルールは見栄えの面でもサイトへの影響が大きいため、ルールがある場合はきちんと遵守しましょう。

コーディングやマークアップなどの依頼先をお探しの場合は、リカイゼンにお任せください！
リカイゼンでは、熟練のマッチングスタッフが、希望条件に応じて適した方法、また対応可能な制作会社候補を選定し、無料紹介いたします。
まずはご相談からでもお気軽にご連絡ください。

WEBサイトコーディングの相談をする(無料)
お電話でのご相談は 03-6427-5422
受付時間：平日10:00～18:30
お電話でのご相談はこちら TEL:03-6427-5422 (平日10:00～18:30)

4.　まとめ

WEBサイト作成者の力量は、HTMLソースを見れば分かるとも言われます。
検索エンジンからの見え方も考えて適切にマークアップされたサイトは、SEO対策としても効果を発揮します。

このように書くと「対策キーワードをとにかくタイトルや見出しへ入れればよい」「strongタグをたくさん使えばよい」と勘違いする人もいるのですが、そのようなタグの乱用は悪質なページとしてペナルティ判定されるケースもあるため注意が必要です。
SEOを意識してサイト運営を行うならば、HTMLタグの役割を把握したうえで、ユーザーから見える部分とHTMLの両方を見やすく整理するように心がけましょう。