HOME内部対策 > HTMLマークアップとは~練習チェックに役立つ基本言語とHTML5マークアップ入門

HTMLマークアップとは~練習チェックに役立つ基本言語とHTML5マークアップ入門

2016/01/07内部対策[最終更新日]:2017/03/07
このエントリーをはてなブックマークに追加

HTMLマークアップを適切に行い、基本言語中心に練習チェックしながら、サイトパフォーマンスを向上させることが大切です。

今回は、HTMLマークアップの練習チェックに役立つ基本言語、HTML5マークアップ入門について、「HTMLマークアップをサイトのページに追加すると、構造化データを指定できます。」について中心に解説したいと思います。

HTMLマークアップとは~練習チェックに役立つ基本言語とHTML5マークアップ入門

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR

HTMLマークアップとは

HTMLマークアップとは、マークアップ言語である「HTML」を使ってファイルにソースコードを記述することです。

HTMLマークアップは、Webページを構築するために必要な作業で、最新のHTML5を使うことが推奨されてます。

HTMLマークアップでは、定義されてる数多くの専用タグを使って、適切にソースコードを記述することが大切となります。

HTMLマークアップの練習チェックに役立つ基本言語

HTMLマークアップの練習チェックに役立つ基本言語は、以下のよう「Google HTML/CSS Style Guide」を参考にする方法があります。

Google HTML/CSS Style Guide は、Googleが公開した、HTMLとCSSの書式とスタイルの規則を定義したものです。
※参考:Google ウェブマスター向け公式ブログ: HTML と CSS のコーディングガイドライン

このガイドラインでは以下のマークアップ項目が定義されてます。(※Google HTML/CSS Style Guide 翻訳)

一般的なスタイルルール
一般的な書式ルール
一般的なメタルール
HTMLのスタイルルール
HTMLの書式ルール
CSSスタイルルール
CSSの書式設定ルール
CSSメタルール

一般的なスタイルルール

プロトコル
埋め込みリソースからプロトコル(http: https:)を省略し、マークアップ。

<!– 推奨しない –>
<script src=”http://www.google.com/js/gweb/analytics/autotrack.js”></script>

<!– 推奨 –>
<script src=”//www.google.com/js/gweb/analytics/autotrack.js”></script>
/* 推奨しない */
.example {
  background: url(http://www.google.com/images/example);
}

/* 推奨 */
.example {
  background: url(//www.google.com/images/example);
}

一般的な書式ルール

インデント
一度に2スペースでインデント。タブを使用したり、インデントにタブとスペースを混在させないでマークアップ。

<ul>
  <li>Fantastic
  <li>Great
</ul>

.example {
  color: blue;
}

大・小文字
alt属性以外の全てのコードは、小文字のみを使用してマークアップ。

<!– 推奨しない –>
<A HREF=”/”>Home</A>

<!– 推奨 –>
<img src=”google.png” alt=”Google”>
/* 推奨しない */
color: #E5E5E5;

/* 推奨 */
color: #e5e5e5;

文末のスペース
文末のスペースを削除してマークアップ。

<!– 推奨しない –>
<p>What?_

<!– 推奨 –>
<p>Yes please.

一般的なメタルール

エンコーディング
UTF- 8(BOMなし)を使用してマークアップ。

<meta charset=”utf-8″>

コメント
必要に応じてコメントを記述しておくと便利です。
※コメントを追記することで、何のコードかわかりやすい

アクションアイテム
コードにTODOをコメントとして記述する。
TODO:というキーワードをコメントに含める。

{# 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ドキュメントに適してます

<!DOCTYPE html>

HTMLのバリデート
パフォーマンス低下を除き、可能な限り有効なHTMLを使用してマークアップ。
W3C HTML validator」などの検証ツールを使用する。

<!– 推奨しない –>
<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タグをマークアップする

<!– 推奨しない –>
<div onclick=”goToRecommendations();”>All recommendations</div>

<!– 推奨 –>
<a href=”recommendations/”>All recommendations</a>

マルチメディアフォールバック
マルチメディアのための代替コンテンツを提供します。
画像に代替テキスト(alt属性)をマークアップする
アクセシビリティ向上のため、画像・動画・オーディオコンテンツ等には、代替コンテンツを提供する

<!– 推奨しない –>
<img src=”spreadsheet.png”>

<!– 推奨 –>
<img src=”spreadsheet.png” alt=”Spreadsheet screenshot.”>

構造を分離
文章構造(マークアップ)、スタイリング(スタイルシート)、動作(スクリプト)は分離して記述する
スタイルシートとスクリプトを最小限にする
スタイルシートやスクリプトを更新するよりも、 HTML文書とテンプレートを変更する

<!– 推奨しない –>
<!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で特殊な意味を持つ文字( < や & など)は例外です。

<!– 推奨しない –>
The currency symbol for the Euro is “&eur;”.

<!– 推奨 –>
The currency symbol for the Euro is “€”.

省略できるタグ
ファイルサイズの最適化のため、任意のタグを省略することを検討してマークアップしてください。
HTML5 specification で省略できるタグが定義されてます。

<!– 推奨しない –>
<!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属性の指定必要なし。古いブラウザでも行うことが可能です。

<!– 推奨しない –>
<link rel=”stylesheet” href=”//www.google.com/css/maia.css”
type=”text/css”>

<!– 推奨 –>
<link rel=”stylesheet” href=”//www.google.com/css/maia.css”>
<!– 推奨しない –>
<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の書式ルール

一般的な書式
すべてのブロック、リスト、またはテーブル要素の新しい行を使用して、すべてのそのような子要素をインデントしてマークアップします。

<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の引用符
属性値を引用する場合、二重引用符を使用してマークアップします。
属性値を囲む単一引用符( ” )よりも、 ( “”)二重を使用します

<!– 推奨しない –>
<a class=’maia-button maia-button-secondary’>Sign in</a>

<!– 推奨 –>
<a class=”maia-button maia-button-secondary”>Sign in</a>

CSSスタイルルール

CSSのバリデート
CSS検証のバグに対処するか、独自の構文を必要としない限り、有効なCSSを使用してください。

IDとクラスの命名
意味のある、または一般的なID名とクラス名を使用してください。

/* 推奨しない:無意味 */
#yee-1901 {}

/* 推奨しない:見た目を表した名前 */
.button-green {}
.clear {}

/* 推奨:固有の名前 */
#gallery {}
#login {}
.video {}

/* 推奨:一般的な名前 */
.aux {}
.alt {}

IDとクラス名のスタイル
できるだけ短く、意味のあるIDとクラス名を使用する

/* 推奨しない */
#navigation {}
.atr {}

/* 推奨 */
#nav {}
.author {}

タイプセレクタ
パフォーマンス向上のため、必要な場合を除き、タイプセレクタの使用は避けてください。
※参考:Simplifying CSS Selectors | High Performance Web Sites

/* 推奨しない */
ul#example {}
div.error {}

/* 推奨 */
#example {}
.error {}

速記プロパティ
可能な限り短縮形のプロパティを使用してください。
短縮形のプロパティを使用すると、コードの効率性と理解するのに便利です。

/* 推奨しない */
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 」の値の後に単位の指定を省略します。

margin: 0; padding: 0;

小数点の先頭の「0」省略
小数点の値は先頭の “0”を省略します。

font-size: .8em;

16進法
可能な場合は3文字の16進表記を使用してください。
※カラー値では、 3文字の16進表記が短く、より簡潔です。

/* 推奨しない */
color: #eebbcc;

/* 推奨 */
color: #ebc;

接頭辞
IDやクラス名には固有の接頭辞を付ける。(オプション)
大規模なプロジェクトの場合や、外部サイトに埋め込まれるコードを開発する場合など、IDとクラス名が重複しないように接頭辞(名前空間など)付ける。
接頭辞は後ろにハイフンを付けて繋げる。
※名前空間を使用すると、名前の衝突を防止するのに役立ちます。

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

IDとクラス名の区切り文字
ハイフンで、セレクタ内の単語や略語を連結する

/* 推奨しない:”demo”と”image”がそのまま連結してる */
.demoimage {}

/* 推奨しない:アンダースコアーで連結してる */
.error_status {}

/* 推奨 */
#video-id {}
.ads-sample {}

CSSハック
CSSハックを使う前に別の方法を試してみること。
CSSハックは、簡単で魅力的な方法だが、コード全体の品質を落とすことにもなるので「最後の手段」として考えること。

CSSの書式設定ルール

宣言順
一貫性のあるコードを達成するために、アルファベット順に宣言を入れてください。
※特定のCSSプロパティのために複数のベンダー固有の接頭辞は(例えば、 -moz接頭辞が-webkitの前に来る)ソートを保つ必要があります。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

ブロックごとにインデント
階層反映と理解を向上させるため、すべてのブロックのコンテンツをインデント。

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

宣言停止
すべての宣言の後にセミコロンを使用します。

/* 推奨しない */
.test {
  display: block;
  height: 100px
}

/* 推奨 */
.test {
  display: block;
  height: 100px;
}

プロパティ名停止
プロパティ名のコロンの後にスペースを使用します。

/* 推奨しない */
h3 {
  font-weight:bold;
}

/* 推奨 */
h3 {
  font-weight: bold;
}

宣言ブロックの分離
最後のセレクタと宣言ブロックの間にスペースを使用します。
最後のセレクタと宣言ブロックを開始する左括弧の間にシングル・スペースを使用しています。

/* 推奨しない:スペースが不足してる */
#video{
  margin-top: 1em;
}

/* 推奨しない:不要な改行がある */
#video
{
  margin-top: 1em;
}

/* 推奨 */
#video {
  margin-top: 1em;
}

セレクタと宣言分離
別々のセレクタと宣言は改行して記述。

/* 推奨しない */
a:focus, a:active {
  position: relative; top: 1px;
}

/* 推奨 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

ルールの分離
必ずルール間に空白行(一行間)を置きます。

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

CSSの引用符
属性セレクタとプロパティ値を必要に応じ単一引用符を使用します。
URIの値には引用符を使用しないでください。

/* 推奨しない */
@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メタルール

セクションのコメント
セクションごとにコメント使用することが可能です。

/* Header */
#adw-header {}

/* Footer */
#adw-footer {}

/* Gallery */
.adw-gallery {}

参考:
Googleが推薦するHTMLとCSSのコーディング方法 | 簡単ホームページ作成支援-Detaramehp
「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

HTML5マークアップ入門について

HTML5マークアップ入門について、「HTML5の入門サイト」で解説してますので、ぜひご参考ください。

HTMLマークアップをサイトのページに追加すると、構造化データを指定できます

HTMLマークアップをサイトのページに追加し、構造化データを指定する方法は、「Googleサポートのパンくずリスト作り方」で解説してますので、ぜひご参考ください。

やり方としては、まずHTMLでマークアップし、そのあとに構造化データを追加でマークアップする形です。
マークアップ実装後、構造化データテストツールでチェックし、問題ないことを確認する流れです。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

まとめ

HTMLマークアップを適切に行い、認識しやすいページにしましょう。

クローラーやユーザーにわかりやすくし、ページ評価を高めながら、SEO対策で順位上昇を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR
あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
期間限定!今だけ両方プレゼント!「Googleが嫌うリンク3つ教えます」と【順位が上がらない方へ】SEO内部レポートプレゼント
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

このエントリーをはてなブックマークに追加
最新記事
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
このブログが役に立つと思ったら、ぜひ『いいね!』して下さい。