HTMLの書き方！基本やタグの書き方など徹底解説【初心者向け】
HTMLを適切に書けば、検索エンジンのクローラーが認識しやすいHTML構造となるので、その分SEO効果が期待できます。
もう少し言うと、文書や画像などのコンテンツを適切なHTMLでマークアップすることで、そのコンテンツの内容をクローラーが理解しやすくなります。
結果的に、作成したコンテンツの内容がしっかり認識されて、Googleに評価されやすくなるというわけです。
一方、不適切なHTMLを書けば、クローラーがコンテンツ内容を理解しずらくなります。
そうなれば、いくら質の高いコンテンツを作成しても、クローラーにその内容がしっかり認識されません。
結果的に、その分SEO効果が見込めないでしょう。
こうした状況を回避するためにも、適切なHTMLタグやその属性、値といったコードを使ってコーディングし、マークアップすることが重要です。
この点踏まえて、今回は、HTMLの書き方（コツ）について中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。
HTMLとは？
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本となるマークアップ言語のことです。
なので、インターネット上のWebページは、ほとんどHTMLのマークアップ言語を使って作られてます。
ちなみにHTML以外だと、「XML」というマークアップ言語もあります。
また、HTMLの略の一部である、Hyper Text（ハイパーテキスト）とは、リンクを貼ったり、埋め込むことができるテキストのことです。
このハイパーテキスト機能で関連する情報を結びつけて、情報を整理することができる特徴を持つのが「HTML」となります。
このHTMLを使用するためには、専用のHTMLタグをルールに沿ってマークアップ（コーディング）することが重要となります。
そして、HTMLは、最新のHTML5というバージョンを使うことが推奨されてます。
HTMLマークアップでは、定義されてる数多くの専用タグを使って、適切にソースコードを記述することが大切となります。
HTMLの書き方
HTMLを書くために、一からHTMLタグを打ち込む必要はありません。
まずは、あらかじめ決まってる基本形式のテンプレートを活用しましょう。
そのテンプレートをベースにして、必要なHTMLタグをルールに沿って適切に追記しながら、HTMLを書き進めていくことがおすすめです。
HTMLを書くための基本的なテンプレート
HTMLを書くために、まず基本的なソースコードをそのまま活用しましょう。
例えば、以下のソースコードを、コピペして「EmEditor」などのテキストエディタに記述することから始めます。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ページのタイトル</title> </head> <body> ページのコンテンツ内容 </body> </html> |
このソースコードのテンプレートをベースにして、まずはページのタイトルやコンテンツ内容を記述しましょう。
そして、必要なHTMLタグをルールに沿って適宜適切に追記して、クローラビリティ、ユーザビリティ、アクセシビリティを考慮したHTML構造に仕上げましょう。
HTMLを書くためのルール
HTMLを書くために、「Google HTML/CSS Style Guide」のガイドラインを参考にすることができます。
このガイドラインは、GoogleがW3Cの仕様書をもとに公開してる「HTMLとCSSの書式とスタイルの規則を定義したもの」です。
つまり、HTMLを書くための基本的なルールをもとに、サンプルコードを添えて記載してるガイドラインとなります。
ガイドラインは、原文が英語です。
なので、ここでは原文を翻訳して、わかりやすくHTMLの書き方を紹介したいと思います。
※参考：「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN
一般的なスタイルルール
一般的なスタイルルールは、以下のようになります。
プロトコル
埋め込みリソースからプロトコル（http: https:）を省略し、マークアップ。
|
1 2 3 4 5 |
<!-- 推奨しない --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- 推奨 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> |
|
1 2 3 4 5 6 7 8 9 |
/* 推奨しない */ .example { background: url(http://www.google.com/images/example); } /* 推奨 */ .example { background: url(//www.google.com/images/example); } |
一般的な書式ルール
一般的な書式ルールは、以下のようになります。
インデント
一度に2スペースでインデント。タブを使用したり、インデントにタブとスペースを混在させないでマークアップ。
|
1 2 3 4 |
<ul> <li>Fantastic <li>Great </ul> |
|
1 2 3 |
.example { color: blue; } |
大・小文字
alt属性以外の全てのコードは、小文字のみを使用してマークアップ。
|
1 2 3 4 5 |
<!-- 推奨しない --> <A HREF="/">Home</A> <!-- 推奨 --> <img src="google.png" alt="Google"> |
|
1 2 3 4 5 |
/* 推奨しない */ color: #E5E5E5; /* 推奨 */ color: #e5e5e5; |
文末のスペース
文末のスペースを削除してマークアップ。
|
1 2 3 4 5 |
<!-- 推奨しない --> <p>What?_ <!-- 推奨 --> <p>Yes please. |
検索順位を上げたり、検索流入を増やすにはSEOが重要！
一般的なメタルール
一般的なメタルールは、以下のようになります。
エンコーディング
UTF- 8（BOMなし）を使用してマークアップ。
|
1 |
<meta charset="utf-8"> |
コメント
必要に応じてコメントを記述しておくと便利です。
※コメントを追記することで、何のコードかわかりやすい
アクションアイテム
コードにTODOをコメントとして記述する。
TODO:というキーワードをコメントに含める。
|
1 2 3 4 5 6 7 8 |
{# TODO(john.doe): revisit centering #} <center>Test</center> <!-- TODO: remove optional tags --> <ul> <li>Apples</li> <li>Oranges</li> </ul> |
HTMLのスタイルルール
一般的なメタルールは、以下のようになります。
ドキュメントタイプ
HTML5を使用してマークアップ。
HTML5 （HTML構文）は、すべてのHTMLドキュメントに適してます。
|
1 |
<!DOCTYPE html> |
HTMLのバリデート
パフォーマンス低下を除き、可能な限り有効なHTMLを使用してマークアップ。
「The W3C Markup Validation Service」などの検証ツールを使用する。
|
1 2 3 4 5 6 7 8 9 |
<!-- 推奨しない --> <title>Test</title> <article>This is only a test. <!-- 推奨 --> <!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article> |
セマンティックな記述
見出しならhタグ、段落ならpタグ、アンカーならaタグなど、目的に合わせたHTMLタグをマークアップする。
|
1 2 3 4 5 |
<!-- 推奨しない --> <div onclick="goToRecommendations();">All recommendations</div> <!-- 推奨 --> <a href="recommendations/">All recommendations</a> |
マルチメディアフォールバック
マルチメディアのための代替コンテンツを提供します。
画像に代替テキスト（alt属性）をマークアップする。
アクセシビリティ向上のため、画像・動画・オーディオコンテンツ等には、代替コンテンツを提供する。
|
1 2 3 4 5 |
<!-- 推奨しない --> <img src="spreadsheet.png"> <!-- 推奨 --> <img src="spreadsheet.png" alt="Spreadsheet screenshot."> |
構造を分離
文章構造（マークアップ）、スタイリング（スタイルシート）、動作（スクリプト）は分離して記述する。
スタイルシートとスクリプトを最小限にする。
スタイルシートやスクリプトを更新するよりも、 HTML文書とテンプレートを変更する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!-- 推奨しない --> <!DOCTYPE html> <title>HTML sucks</title> <link rel="stylesheet" href="base.css" media="screen"> <link rel="stylesheet" href="grid.css" media="screen"> <link rel="stylesheet" href="print.css" media="print"> <h1 style="font-size: 1em;">HTML sucks</h1> <p>I’ve read about this on a few sites but now I’m sure: <u>HTML is stupid!!1</u> <center>I can’t believe there’s no way to control the styling of my website without doing everything all over again!</center> <!-- 推奨 --> <!DOCTYPE html> <title>My first CSS-only redesign</title> <link rel="stylesheet" href="default.css"> <h1>My first CSS-only redesign</h1> <p>I’ve read about this on a few sites but today I’m actually doing it: separating concerns and avoiding anything in the HTML of my website that is presentational. <p>It’s awesome! |
実体参照
実体参照を使用しないでマークアップ。
※HTMLで特殊な意味を持つ文字（ < や & など）は例外です。
|
1 2 3 4 5 |
<!-- 推奨しない --> The currency symbol for the Euro is “&eur;”. <!-- 推奨 --> The currency symbol for the Euro is “€”. |
省略できるタグ
ファイルサイズの最適化のため、任意のタグを省略することを検討してマークアップしてください。
「HTML5 specification」で省略できるタグが定義されてます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- 推奨しない --> <!DOCTYPE html> <html> <head> <title>Spending money, spending bytes</title> </head> <body> <p>Sic.</p> </body> </html> <!-- 推奨 --> <!DOCTYPE html> <title>Saving money, saving bytes</title> <p>Qed. |
type属性
スタイルシート（css）とスクリプト（javascript）のtype属性を省略してマークアップできます。
HTML5は、type属性の指定必要なし。古いブラウザでも行うことが可能です。
|
1 2 3 4 5 |
<!-- 推奨しない --> <link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css"> <!-- 推奨 --> <link rel="stylesheet" href="//www.google.com/css/maia.css"> |
|
1 2 3 4 5 |
<!-- 推奨しない --> <script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script> <!-- 推奨 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> |
HTMLの書式ルール
HTMLの書式ルールは、以下のようになります。
一般的な書式
すべてのブロック、リスト、またはテーブル要素の新しい行を使用して、すべてのそのような子要素をインデントしてマークアップします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<blockquote> <p><em>Space</em>, the final frontier.</p> </blockquote> <ul> <li>Moe <li>Larry <li>Curly </ul> <table> <thead> <tr> <th scope="col">Income <th scope="col">Taxes <tbody> <tr> <td>$ 5.00 <td>$ 4.50 </table> |
HTMLの引用符
属性値を引用する場合、二重引用符を使用してマークアップします。
属性値を囲む単一引用符（ ” ）よりも、 （ “”）二重を使用します。
|
1 2 3 4 5 |
<!-- 推奨しない --> <a class='maia-button maia-button-secondary'>Sign in</a> <!-- 推奨 --> <a class="maia-button maia-button-secondary">Sign in</a> |
CSSスタイルルール
CSSスタイルルールは、以下のようになります。
CSSのバリデート
CSS検証のバグに対処するか、独自の構文を必要としない限り、有効なCSSを使用してください。
IDとクラスの命名
意味のある、または一般的なID名とクラス名を使用してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* 推奨しない：無意味 */ #yee-1901 {} /* 推奨しない：見た目を表した名前 */ .button-green {} .clear {} /* 推奨：固有の名前 */ #gallery {} #login {} .video {} /* 推奨：一般的な名前 */ .aux {} .alt {} |
IDとクラス名のスタイル
できるだけ短く、意味のあるIDとクラス名を使用する。
|
1 2 3 4 5 6 7 |
/* 推奨しない */ #navigation {} .atr {} /* 推奨 */ #nav {} .author {} |
タイプセレクタ
パフォーマンス向上のため、必要な場合を除き、タイプセレクタの使用は避けてください。
※参考：Simplifying CSS Selectors | High Performance Web Sites
|
1 2 3 4 5 6 7 |
/* 推奨しない */ ul#example {} div.error {} /* 推奨 */ #example {} .error {} |
速記プロパティ
可能な限り短縮形のプロパティを使用してください。
短縮形のプロパティを使用すると、コードの効率性と理解するのに便利です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* 推奨しない */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; /* 推奨 */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em; |
0と単位
「 0 」の値の後に単位の指定を省略します。
|
1 2 |
margin: 0; padding: 0; |
小数点の先頭の「0」省略
小数点の値は先頭の “0”を省略します。
|
1 |
font-size: .8em; |
16進法
可能な場合は3文字の16進表記を使用してください。
※カラー値では、 3文字の16進表記が短く、より簡潔です。
|
1 2 3 4 5 |
/* 推奨しない */ color: #eebbcc; /* 推奨 */ color: #ebc; |
接頭辞
IDやクラス名には固有の接頭辞を付ける。（オプション）
大規模なプロジェクトの場合や、外部サイトに埋め込まれるコードを開発する場合など、IDとクラス名が重複しないように接頭辞（名前空間など）付ける。
接頭辞は後ろにハイフンを付けて繋げる。
※名前空間を使用すると、名前の衝突を防止するのに役立ちます。
|
1 2 |
.adw-help {} /* AdWords */ #maia-note {} /* Maia */ |
IDとクラス名の区切り文字
ハイフンで、セレクタ内の単語や略語を連結する。
|
1 2 3 4 5 6 7 8 9 |
/* 推奨しない："demo"と"image"がそのまま連結してる */ .demoimage {} /* 推奨しない：アンダースコアーで連結してる */ .error_status {} /* 推奨 */ #video-id {} .ads-sample {} |
CSSハック
CSSハックを使う前に別の方法を試してみること。
CSSハックは、簡単で魅力的な方法だが、コード全体の品質を落とすことにもなるので「最後の手段」として考えること。
CSSスタイルルールは、以下のようになります。
宣言順
一貫性のあるコードを達成するために、アルファベット順に宣言を入れてください。
※特定のCSSプロパティのために複数のベンダー固有の接頭辞は（例えば、 -moz接頭辞が-webkitの前に来る）ソートを保つ必要があります。
|
1 2 3 4 5 6 7 8 |
background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em; |
ブロックごとにインデント
階層反映と理解を向上させるため、すべてのブロックのコンテンツをインデント。
|
1 2 3 4 5 6 7 8 |
@media screen, projection { html { background: #fff; color: #444; } } |
宣言停止
すべての宣言の後にセミコロンを使用します。
|
1 2 3 4 5 6 7 8 9 10 11 |
/* 推奨しない */ .test { display: block; height: 100px } /* 推奨 */ .test { display: block; height: 100px; } |
プロパティ名停止
プロパティ名のコロンの後にスペースを使用します。
|
1 2 3 4 5 6 7 8 9 |
/* 推奨しない */ h2 { font-weight:bold; } /* 推奨 */ h2 { font-weight: bold; } |
宣言ブロックの分離
最後のセレクタと宣言ブロックの間にスペースを使用します。
最後のセレクタと宣言ブロックを開始する左括弧の間にシングル・スペースを使用しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* 推奨しない：スペースが不足してる */ #video{ margin-top: 1em; } /* 推奨しない：不要な改行がある */ #video { margin-top: 1em; } /* 推奨 */ #video { margin-top: 1em; } |
セレクタと宣言分離
別々のセレクタと宣言は改行して記述。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* 推奨しない */ a:focus, a:active { position: relative; top: 1px; } /* 推奨 */ h1, h2, h4 { font-weight: normal; line-height: 1.2; } |
ルールの分離
必ずルール間に空白行（一行間）を置きます。
|
1 2 3 4 5 6 7 8 |
html { background: #fff; } body { margin: auto; width: 50%; } |
CSSの引用符
属性セレクタとプロパティ値を必要に応じ単一引用符を使用します。
URIの値には引用符を使用しないでください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* 推奨しない */ @import url("//www.google.com/css/maia.css"); html { font-family: "open sans", arial, sans-serif; } /* 推奨 */ @import url(//www.google.com/css/maia.css); html { font-family: 'open sans', arial, sans-serif; } |
CSSメタルール
CSSメタルールは、以下のようになります。
セクションのコメント
セクションごとにコメント使用することが可能です。
|
1 2 3 4 5 6 7 8 |
/* Header */ #adw-header {} /* Footer */ #adw-footer {} /* Gallery */ .adw-gallery {} |
SEO対策で重要なHTMLタグの書き方について
「titleタグ」「metaタグ」「hタグ」は、Webサイトを構築するときによく使うHTMLタグです。
もう少し言うと、「titleタグ」「metaタグ」「hタグ」は、SEO対策を行う上で重要なHTMLタグとなります。
これらのHTMLタグの書き方について中心に、紹介したいと思います。
titleタグ
titleタグは、SEOにおいて最も重要なタグであり、以下のようなポイントに沿って記述します。
- 前方にキーワードを含めて、検索クエリとの関連性を強調する
- コンテンツの内容とマッチするようなタイトルの文言にする
- 短く簡潔な文言にする
これらのポイントに沿ってtitleタグを調整することが、SEO効果を高めるうえで最低限必要です。
また、SEO対策で最初に行うキーワード選定で、1ページに対して 1つの対策キーワードを決めておくことがtitleタグを調整するうえでも重要になってきます。
キーワード選定がしっかりできてれば、titleタグの文言に重要なキーワードを含めることができるので、SEO効果を上げることができます。
metaタグ（ディスクリプションタグ）
metaタグは、主に「メタディスクリプションタグ（meta description）」のことを指します。
ディスクリプションは、ページの概要を記述しますが、合わせて以下のようなポイントを抑えることでSEO効果が期待できます。
- 前方にキーワードを含めて、検索クエリとの関連性を強調する
- ページの概要を簡潔に記述する
- コンテンツの内容にマッチするような文言を記述する
このようなポイントを抑えてディスクリプションタグを記述することがSEO効果を上げるうえで、最低限必要となります。
見直すポイントはtitleタグとほぼ同様で、ディスクリプションタグとtitleタグは1セットとして修正することが必要となります。
例えば、ページのタイトルを変更したら、その内容に合わせてディスクリプションの文言も変更しなければいけません。
つまり、タイトルとディスクリプションの内容の整合性をとることが、重要となります。
hタグ（見出しタグ）
hタグは、見出しタグのことです。
h1～h6タグまでの見出しタグを適切に使い分けることが重要です。
最も重要な見出しタグにh1タグを使用して、その次に重要な見出しをh2タグでマークアップします。
このように重要性に応じて見出しタグを使い分けることで、検索エンジンに認識されやすいコンテンツに仕上げることができるので、SEO効果が期待できます。
また、見出しにキーワードを入れることで検索クエリとの関連性を強調できるのでSEO効果が期待できます。
この考え方は、タイトルタグやディスクリプションタグと同様になります。
canonicalタグ
canonicalタグは、URLを正規化するタグです。
同じコンテンツに複数URLでアクセスできる場合に、canonicalタグで1つのURLを指定して評価を統一ながらSEO効果を高めることができます。
これは、Googleが最も重要視する被リンク評価が分散してしまうため、canonicalタグの設定が必要となります。
よくあるケースとしては、PCとスマホでURLが異なるが同じコンテンツ内容というケースです。
PCサイトのURL：http://seolaboratory.jp/
スマホサイトのURL：http://seolaboratory.jp/m/
このような場合に、スマホサイトのURLにcanoniclタグを設定しておくことが必要となります。
リストタグ（ul/ol/liタグ）
リストタグは、「ul/ol/liタグ」のことを指します。
箇条書きやリスト形式の項目などに対してリストタグでマークアップすることで、コンテンツが検索エンジンに認識されやすくなり、SEO効果が期待できます。
このように、リストタグなどのHTMLタグは、「W3C HTML5 仕様書」に基づいて適切にマークアップすることで検索エンジンが理解しやすいページ内容にすることができます。
良く使われるPタグやstrongタグ、divタグやspanタグ、tableタグなども定義されてる用途に沿って使うことが重要です。
また、hタグもそうですが、コンテンツの中身を構成するHTMLタグの中にはキーワードやキーワードに関連する語句を散りばめて、タイトルや検索クエリとの関連性を高めることがSEO効果を高めるポイントとなります。
HTMLの記述内容をブラウザで確認する方法
HTMLを書いたら、そのHTMLの内容がブラウザ上でどのように表示されるか？チェックしましょう。
チェック方法は、以下のような手順です。
- HTMLを記述したテキストファイルを、HTML形式で保存する（例：index.html）
- 保存したHTMLファイル（例：index.html）を、Google Chromeなどのブラウザ上にドラック＆ドロップする
このように、HTMLタグに書いた内容を、Webページとして確認することができます。
HTMLの構文がチェックできるツール
HTMLを正しく書いたつもりでも、Webページのレイアウトが崩れていれば、HTMLの書き方にミスが発生してる可能性が高まります。
ちゃんとWebページが表示されていても、ときに適切なHTMLマークアップができてない場合があります。こうした状況を回避するために、いくつか専用のツールでチェックすることも重要です。
こうしたツールも活用して、より適切なHTMLを書くように努めましょう。
まとめ
適切なHTMLを書いて、検索エンジンが認識しやすいコンテンツにしましょう。
そうすれば、Googleに評価されやすくなります。
また、Googleに評価されるには、マークアップするテキスト文章が最も重要となります。
テキスト文章を最適化して、ユーザーがより満足するコンテンツ内容に仕上げましょう。
そうして、品質の高いコンテンツを増やして、サイトの質を高めるようにSEO対策を進めることがポイントとなります。
検索順位が上がらない…なぜ？
検索順位が上がらない…なぜ？
検索順位が上がらない理由は、SEO対策の質が低いからです。
例えば、ユーザーの検索意図を無視したり、関連性の低いコンテンツを増やして内部リンクの最適化を疎かにします。
この場合、SEO対策の質が下がります。
結果、検索順位が上がらないというわけです。
こうした悪い状況を回避する為に、サイトの欠点を調査して上位化に必要な対策を洗い出しましょう。
