HTMLタグはウェブページのコンテンツを構造化し、意味を付与するためのマークアップ言語であるHTML（HyperText Markup Language）の基本要素です。タグを組み合わせることで、ウェブページの構造とデザインが形成されます。ここではSEOに必須なHTMLタグを中心に解説します。ウェブページのコンテンツを検索エンジンが正しく理解し、ランキングを向上させる役割を果たします。SEOに必要なhtmlタグを基本からおさらいしていきましょう。
HTMLタグとは
HTMLとは、「HyperText Markup Language」の頭文字を取った略語で、Webサイトを作成するときに使われる言語です。またHTMLは、目印で囲むことで文書の意味を定義する「マークアップ言語」です。たとえば、本記事の見出しを設定する場合は、以下のようになります。
|
文章をhタグで囲むことで、見出し名と意味づけができるわけです。HTMLタグには、さまざまな種類があり、文字を太字にしたり、改行したりと書き方のルールが決まっています。HTMLタグを書くことで、コンピューターが文章の構成や要素を理解し、Webサイトが正しく表示されます。
またWebサイトは、HTMLを含めて以下のファイルから成り立っています。
- HTML：テキストなどの内容
- CSS：サイトのデザイン
- 画像：JPEG形式、PNG形式、GIF形式などの画像ファイル
- JavaScript：サイトの表示やページ遷移などの動作
ここでは、Webサイトの中身であるHTMLについて解説します。まずは、Webサイトの中身を作るために、よく使われるHTMLタグから覚えていきましょう。
Webサイトの基本的な構造
Webサイトの基本的な構造
HTMLタグを覚える前に、まずはWebサイトの基本的な構造を理解しておきましょう。Webサイトは、基本的に以下のような構造で成り立っています。
【Webサイトの基本的な構造例】
|
Webサイトは、主に<head>～</head>で囲った「head要素」と、<body>～</body>で囲った「body要素」の2つの要素から成り立っています。それぞれの要素について、詳しく解説します。
<!DOCTYPE>
<!DOCTYPE>は、厳密にいうとHTMLタグではなく、文章のタイプを宣言する「ドキュメントタイプ宣言」と呼ばれるものです。HTMLタグよりも先に記載します。<!DOCTYPE>を見ることで、HTMLのバージョンを判断することが可能です。上記の例では、<!DOCTYPE html>となっているため、HTML5で作成していることがわかります。
<html>～</html>
htmlタグは、HTML文書であることを示すためのタグです。先述した<!DOCTYPE>のあとに記載し、HTMLの要素全体を囲います。
<head>～</head>
headタグ内には、文字コードやタイトルなど、文書についての定義を書きます。headタグは、HTMLを構成する要素のなかで、head要素といわれており、<head>～</head>で囲った内容はWebサイトには表示されません。
上記の例では、headタグ内にmetaタグで使用する文字コードを定義し、またtitleタグでWebページのタイトルを記述しています。
<body>～</body>
bodyタグ内には、Webサイトの内容を記述します。bodyタグは、HTMLを構成する要素のなかで、body要素といわれており、<body>～</body>で囲ったコンテンツがWebサイト上で表示されます。
HTMタグの種類
タイトル：titleタグ
titleタグには、HTML文書のタイトルを記述します。
【titleタグの例】
|
titleタグは、headタグ内に記述し、検索エンジンの検索結果やブラウザーのツールバーなどに表示されます。
見出し：h1～h6タグ
hタグは、見出しを意味する「Heading」の頭文字を取ってhタグと呼ばれ、見出しを示します。h1からh6まであり、h1が最も大きい見出しで、数字が小さいほど上位の見出しをあらわします。
【hタグの例】
|
多くのWebサイトでは、見出しによって表示される文字の大きさが異なり、上位の見出しほど文字が大きくなるのが一般的です。WordPressなどでWebページを作成する場合は、基本的にh1タグは記事のタイトルを示すときに使われます。hタグで見出しを示すことで、Webページ内の構造が把握できるようになるわけです。
段落：pタグ
pタグは、「Paragraph」の頭文字を取っていることから段落を示します。<p>～</p>でテキストを囲うことで、ひとつの段落をあらわします。
【pタグの例】
|
上記の例のように、pタグ囲うことでテキストが区切られるため、段落として分けられます。
改行：brタグ
brタグは、テキストを改行するときに使います。
【brタグの例】
|
上記の例のように、基本的には文末にbrタグを記述して使用しましょう。
リンク：aタグ
aタグは、指定した別ページにリンクするときに使うHTMLタグです。たとえば、以下のように使用します。
【aタグの例1】
|
href属性のあとに、リンク先のURLを記述し、表示させたいテキストをaタグで囲みましょう。
【aタグの例2】
|
また、リンク先のページを別ウィンドウで開きたい場合は、URLのあとに「” target=”_blank”」を記述します。
箇条書き：ul/ol/liタグ
箇条書きをするときに使用するHTMLタグは、「ulタグ」「olタグ」「liタグ」です。liタグは、ulタグ、olタグと組み合わせて使用します。まずはulタグから紹介しましょう。ulタグは、黒丸がついた箇条書きリストを作成する際に使います。
【ulタグの例】
|
liタグで箇条書きしたテキストを<ul>～</ul>で囲むと、以下のようにテキストの前に黒丸がつきます。
【ulタグの表示例】
|
ulタグは、情報を羅列したいときや、整理したいときに最適です。
次に、olタグについて紹介します。順序つきのリストを作成したい場合は、olタグを使用します。
【olタグの例】
|
liタグで箇条書きしたテキストを<ol>～</ol>で囲むと、以下のようにテキストの前に数字がつきます。
【olタグの表示例】
|
olタグは、手順を説明したいときに活用するとよいでしょう。
画像の埋め込み：imgタグ
imgタグは、画像ファイルを埋め込むときに使用するHTMLタグです。
【imgタグの例】
|
src属性のあとに、埋め込む画像ファイルを指定します。画像ファイルの形式は、JPEG形式、PNG形式、SVG形式などを指定することが可能です。また、CSS、またはwidth属性・height属性で表示する画像サイズを指定しておくと、表示の崩れを防げます。
表：table/tr/th/tdタグ
tableタグは、表を作成するときに使うHTMLタグです。trタグ・thタグ・tdタグとあわせて使用します。
【table/tr/th/tdタグの例】
|
【table/tr/th/tdタグの表示例】
|
列a |
列b |
|
|
行A |
Aa |
Ab |
|
行B |
Ba |
Bb |
trタグでは表の行を記述し、tdタグで表の列を記述します。セル内の内容は、thタグで囲みましょう。CSSで設定していない限り、基本的には表の枠線は表示されません。枠線を表示する場合は、以下のようにborder属性で指定します。
【table/tr/th/tdタグの例】
|
【table/tr/th/tdタグの表示例】
|
列a |
列b |
|
|
行A |
Aa |
Ab |
|
行B |
Ba |
Bb |
ほかにも、CSSで枠線の太さや横幅などを設定することが可能です。
強調：strongタグ
strongタグは、テキストを強調したいときに使用します。強調したい部分を<strong>～</strong>で囲みましょう。
【strongタグの例】
|
【strongタグの表示例】
|
strongタグで囲んだテキストは、上記の表示例のように太字になります。ユーザーに注目してもらいたいテキストを目立たせるときに使用するのがおすすめです。
太字：bタグ
bタグは、テキストを太字で表示したいときに使います。<b>～</b>で囲んだテキストが太字で表示されます。
【bタグの例】
|
【bタグの表示例】
|
太字で表示されるため、strongタグとbタグの使い分けに悩む方もいるかもしれません。bタグは、太字に表示するためのHTMLタグです。そのため、重要な内容を説明するときなどは、strongタグを使用するとよいでしょう。
定義・説明：dl/dt/ddタグ
dlタグは、定義リストを作成するときに使うHTMLタグです。定義を解説する内容をdlタグで囲み、dtタグとddタグと組み合わせて使用します。
【dl/dt/ddタグの例】
|
【dl/dt/ddタグの表示例】
|
上記の例のように、dtタグには定義する言葉を記述し、ddタグには定義する言葉に関する説明を記述します。dlタグは、用語の説明などをする際に使いましょう。
引用：blockquoteタグ
blockquoteタグは、文章を引用するときに使います。他メディアなどから引用する文章を<blockquote>～</blockquote>で囲うことで、引用であると判断できるわけです。
【blockquoteタグの例】
|
ただし、引用する文章が短い場合は、qタグを使用します。
コメント：<!– ××× –>
<!– ××× –>は、HTMLソース内にコメントが入れられるHTMLタグです。タグ内に記述した内容は、表示されることはありません。そのため、メモ代わりに使用できるタグです。
【<!– ××× –>タグの例】
|
時間をおいて確認したい部分などに、記述して活用するとよいでしょう。
ミエルカでできること
