HTMLスタイルガイド
一貫性のある、クリーンで整頓されたHTMLコードは、他のユーザーがコードを読みやすく、理解しやすくします。
優れたHTMLコードを作成するためのガイドラインとヒントを次に示します。
常にドキュメントタイプを宣言する
ドキュメントタイプは、常にドキュメントの最初の行として宣言してください。
HTMLの正しいドキュメントタイプは次のとおりです。
小文字の要素名を使用する
HTMLでは、要素名に大文字と小文字を混在させることができます。
ただし、次の理由から、小文字の要素名を使用することをお勧めします。
- 大文字と小文字の名前を混在させると見栄えが悪い
- 開発者は通常、小文字の名前を使用します
- 小文字がきれいに見える
- 小文字の方が書きやすい
良い：
悪い：
すべてのHTML要素を閉じる
HTMLでは、すべての要素を閉じる必要はありません（たとえば、<p>エレメント）。
ただし、次のようにすべてのHTML要素を閉じることを強くお勧めします。
良い：
悪い：
小文字の属性名を使用する
HTMLでは、属性名に大文字と小文字を混在させることができます。
ただし、次の理由から、小文字の属性名を使用することをお勧めします。
- 大文字と小文字の名前を混在させると見栄えが悪い
- 開発者は通常、小文字の名前を使用します
- 小文字がきれいに見える
- 小文字の方が書きやすい
良い：
悪い：
常に属性値を引用する
HTMLでは、引用符なしで属性値を使用できます。
ただし、次の理由から、属性値を引用することをお勧めします。
- 開発者は通常、属性値を引用します
- 引用された値は読みやすい
- 値にスペースが含まれている場合は、引用符を使用する必要があります
良い：
悪い：
ひどい：
値にスペースが含まれているため、これは機能しません。
画像のalt、幅、高さを常に指定する
常に指定するalt画像の属性。この属性は、何らかの理由で画像を表示できない場合に重要です。
また、常にwidthとheight画像の。これにより、ブラウザは画像をロードする前にスペースを予約できるため、ちらつきが減少します。
良い：
悪い：
スペースと等号
HTMLでは、等号の前後にスペースを使用できます。ただし、スペースのない方が読みやすく、エンティティをより適切にグループ化できます。
良い：
悪い：
長いコード行を避ける
HTML エディタを使用する場合、左右にスクロールしてHTMLコードを読むのは不便です。
コード行が長すぎないようにしてください。
空行とインデント
理由もなく空白行、スペース、またはインデントを追加しないでください。
読みやすくするために、空白行を追加して大きなコードブロックまたは論理コードブロックを区切ります。
読みやすくするために、インデントの2つのスペースを追加します。タブキーは使用しないでください。
良い：
悪い：
良いテーブルの例:
良いリストの例:
<title>要素をスキップしない
<title>要素はHTMLで必須です。
ページタイトルの内容は、検索エンジン最適化（SEO）にとって非常に重要です。ページタイトルは、検索結果にページをリストする際の順序を決定するために、検索エンジンアルゴリズムによって使用されます。
<title>エレメント：
- ブラウザのツールバーのタイトルを定義します
- お気に入りに追加されたときにページのタイトルを提供します
- 検索エンジンの結果にページのタイトルを表示する
したがって、タイトルをできるだけ正確で意味のあるものにするようにしてください。
<html>と<body>を省略しますか?
HTML ページは、<html>と<body>タグ:
ただし、常に追加することを強くお勧めします。<html>と<body>タグ！
省略<body>古いブラウザではエラーが発生する可能性があります。
省略<html>と<body>DOMおよびXMLソフトウェアもクラッシュする可能性があります。
<head>を省略しますか?
HTMLの<head>タグも省略できます。
ブラウザは前にすべての要素を追加します<body>、デフォルトに<head>エレメント。
例
しかし、<head>タグを使うことをお勧めします。
空のHTML要素を閉じますか?
HTMLでは、空の要素を閉じることはオプションです。
可：
こちらも可:
XML/XHTMLソフトウェアがページにアクセスすることが予想される場合は、終了スラッシュ(/)を保持します。これは、XMLおよびXHTMLで必要になるためです。
lang属性を追加する
常に含める必要がありますlang内部の属性<html>タグで、Webページの言語を宣言します。これは、検索エンジンとブラウザを支援するためのものです。
例
メタデータ
適切な解釈と正しい検索エンジンのインデックス作成を確実にするために、言語と文字エンコーディングの両方<meta charset="charset">HTMLドキュメントのできるだけ早い段階で定義する必要があります。
ビューポートの設定
ビューポートは、Webページのユーザーの可視領域です。デバイスによって異なります。携帯電話では、コンピューターの画面よりも小さくなります。
以下を含める必要があります<meta>すべてのWebページの要素:
これにより、ページのサイズとスケーリングを制御する方法がブラウザーに指示されます。
width=device-width一部は、ページの幅をデバイスの画面幅（デバイスによって異なります）に従うように設定します。
initial-scale=1.0partは、ページがブラウザによって最初にロードされるときの初期ズームレベルを設定します。
これはウェブページの例です*それなし*ビューポートメタタグ、および同じWebページ*と*ビューポートメタタグ:
ヒント：このページを携帯電話またはタブレットで閲覧している場合は、下の2つのリンクをクリックして違いを確認できます。
HTMLコメント
短いコメントは、次のように1行で記述する必要があります。
複数行にわたるコメントは、次のように記述します。
長いコメントは、2つのスペースでインデントすると見やすくなります。
スタイルシートの使用
スタイルシートへのリンクには単純な構文を使用します(type属性は必要ありません):
短いCSSルールは、次のように圧縮して記述できます。
長いCSSルールは、複数の行にまたがって記述する必要があります。
- 開始ブラケットをセレクターと同じ行に配置します
- 左括弧の前に1つのスペースを使用します
- 2つのスペースのインデントを使用する
- 最後のペアを含め、各プロパティと値のペアの後にセミコロンを使用します
- 値にスペースが含まれる場合のみ、値を引用符で囲みます
- 先頭のスペースを入れずに、閉じ括弧を新しい行に配置します
JavaScriptをHTMLに読み込む
外部スクリプトをロードするための単純な構文を使用します(type属性は必要ありません):
JavaScriptを使用したHTML要素へのアクセス
「乱雑な」HTMLコードを使用すると、JavaScriptエラーが発生する可能性があります。
これら2つのJavaScriptステートメントは、異なる結果を生成します。
小文字のファイル名を使用する
一部のWebサーバー(Apache、Unix)では、ファイル名の大文字と小文字が区別されます。「london.jpg」に「London.jpg」としてアクセスすることはできません。
他のWebサーバー(Microsoft、IIS)は大文字と小文字を区別しません。「london.jpg」には「London.jpg」としてアクセスできます。
大文字と小文字を組み合わせて使用する場合は、これに注意する必要があります。
大文字と小文字を区別しないサーバーから大文字と小文字を区別するサーバーに移行すると、小さなエラーでもWeb が壊れてしまいます。
これらの問題を回避するには、常に小文字のファイル名を使用してください。
ファイル拡張子
HTMLファイルには.html拡大（.htm許可されています）。
CSSファイルには.css拡大。
JavaScriptファイルには.js拡大。
.htmと.htmlの違いは?
.htmと.htmlのファイル拡張子に違いはありません。
どちらも、WebブラウザーとWebサーバーによってHTMLとして扱われます。
デフォルトのファイル名
URLの最後にファイル名が指定されていない場合(「https://www.techis.jp/」など)、サーバーは「index.html」、「index.htm」、「 default.html」、または「default.htm」。
サーバーがデフォルトのファイル名として"index.html"だけで構成されている場合、ファイル名は"default.html"ではなく"index.html"でなければなりません。
ただし、サーバーは複数のデフォルトファイル名で構成できます。通常、デフォルトのファイル名はいくつでも設定できます。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。