HTMLスタイルガイド
一貫性があり、クリーンで整頓されたHTMLコードにより、他の人があなたのコードを読みやすく理解しやすくなります。
ここでは、優れたHTMLコードを作成するためのガイドラインとヒントをいくつか紹介します。
常にドキュメントタイプを宣言する
ドキュメントタイプは、常にドキュメントの最初の行として宣言してください。
HTMLの正しいドキュメントタイプは次のとおりです。
<!DOCTYPE html>
小文字の要素名を使用する
HTMLでは、要素名に大文字と小文字を混在させることができます。
ただし、次の理由から、小文字の要素名を使用することをお勧めします。
- 大文字と小文字を混在させると見栄えが悪くなります
- 開発者は通常小文字の名前を使用します
- 小文字はきれいに見えます
- 小文字の方が書きやすい
良い：
<body>
<p>This is a paragraph.</p>
</body>悪い：
<BODY>
<P>This is a paragraph.</P>
</BODY>すべてのHTML要素を閉じる
HTMLでは、すべての要素（要素など）を閉じる必要はありません<p>。
ただし、次のようにすべてのHTML要素を閉じることを強くお勧めします。
良い：
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>悪い：
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>小文字の属性名を使用する
HTMLでは、属性名に大文字と小文字を混在させることができます。
ただし、次の理由から、小文字の属性名を使用することをお勧めします。
- 大文字と小文字を混在させると見栄えが悪くなります
- 開発者は通常小文字の名前を使用します
- 小文字の見た目がすっきり
- 小文字の方が書きやすい
良い：
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>悪い：
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>常に属性値を引用する
HTMLでは、引用符なしの属性値を使用できます。
ただし、次の理由から、属性値を引用することをお勧めします。
- 開発者は通常、属性値を引用します
- 引用された値は読みやすい
- 値にスペースが含まれている場合は、引用符を使用する必要があります
良い：
<table
class="striped">悪い：
<table class=striped>ひどい：
値にスペースが含まれているため、これは機能しません。
<table class=table striped>画像には常にalt、width、heightを指定してください
alt画像の属性は常に指定してください。この属性は、何らかの理由で画像を表示できない場合に重要です。
また、常に画像のwidthと
heightを定義します。ブラウザはロードする前に画像用のスペースを予約できるため、これによりちらつきが減少します。
良い：
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">悪い：
<img
src="html5.gif">スペースと等号
HTMLでは、等号の前後にスペースを入れることができます。ただし、スペースがないと読みやすくなり、エンティティをより適切にグループ化できます。
良い：
<link rel="stylesheet" href="styles.css">悪い：
<link
rel = "stylesheet" href = "styles.css">長いコード行は避けてください
HTMLエディタを使用する場合、HTMLコードを読むために左右にスクロールするのは便利ではありません。
コード行が長すぎないようにしてください。
空白行とインデント
理由なしに空白行、スペース、またはインデントを追加しないでください。
読みやすくするために、大きなコードブロックまたは論理コードブロックを区切るために空白行を追加します。
読みやすくするために、インデントのスペースを2つ追加します。タブキーは使用しないでください。
良い：
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
and the most
populous metropolitan area in the world.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>
悪い：
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
and the most
populous metropolitan area in the world.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
良いテーブルの例：
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
良いリストの例：
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<title>要素をスキップしないでください
この<title>要素はHTMLで必要です。
ページタイトルの内容は、検索エンジン最適化（SEO）にとって非常に重要です。ページタイトルは、検索エンジンアルゴリズムによって使用され、検索結果にページを一覧表示するときの順序を決定します。
<title>要素：
- ブラウザのツールバーでタイトルを定義します
- お気に入りに追加されたときにページのタイトルを提供します
- 検索エンジンの結果にページのタイトルを表示します
したがって、タイトルをできるだけ正確で意味のあるものにするようにしてください。
<title>HTML
Style Guide and Coding Conventions</title>
<html>と<body>を省略しますか？
<html>HTMLページは、
<body>タグなしで検証されます。
例
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<html>ただし、常にと
<body>タグを追加することを強くお勧めします。
省略<body>すると、古いブラウザでエラーが発生する可能性があります。
省略し<html>、<body>
DOMおよびXMLソフトウェアをクラッシュさせる可能性もあります。
<head>を省略しますか？
HTMLの<head>タグも省略できます。
ブラウザは、の前<body>のすべての要素をデフォルトの<head>
要素に追加します。
例
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
ただし、<head>タグの使用をお勧めします。
空のHTML要素を閉じますか？
HTMLでは、空の要素を閉じることはオプションです。
許可された：
<meta
charset="utf-8">
また許可されます：
<meta charset="utf-8" />
XML / XHTMLソフトウェアがページにアクセスすることを期待する場合は、XMLおよびXHTMLで必要となるため、閉じスラッシュ（/）を保持します。
lang属性を追加します
Webページの言語を宣言するには、常にタグlang内に属性を含める必要があります。<html>これは、検索エンジンとブラウザを支援することを目的としています。
例
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
メタデータ
適切な解釈と正しい検索エンジンのインデックス作成を確実にするには、言語と文字エンコードの両方をHTMLドキュメントでできるだけ早く定義する必要があります。<meta charset="charset">
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
ビューポートの設定
ビューポートは、Webページのユーザーの表示領域です。デバイスによって異なります。携帯電話の方がコンピューターの画面よりも小さくなります。
<meta>すべてのWebページに次の要素を含める必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
これにより、ページのサイズと拡大縮小を制御する方法がブラウザに指示されます。
width=device-widthパーツは、デバイスの画面幅（デバイスによって異なります）に従うようにページの幅を設定します。
このinitial-scale=1.0パーツは、ページがブラウザによって最初にロードされたときの初期ズームレベルを設定します。
次に、ビューポートメタタグのないWebページと、ビューポートメタタグのある同じWebページの例を示します。
ヒント：携帯電話またはタブレットでこのページを閲覧している場合は、以下の2つのリンクをクリックして違いを確認できます。
HTMLコメント
次のように、短いコメントを1行に書き込む必要があります。
<!-- This is a comment -->
複数行にまたがるコメントは、次のように書く必要があります。
<!--
This is a long comment example. This is
a long comment example.
This is a
long comment example. This is a long comment example.
-->
長いコメントは、2つのスペースでインデントされていると、観察しやすくなります。
スタイルシートの使用
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.