42.HTML5 スタイルガイドとコーディング規約

  • 投稿者:
  • 投稿コメント:0件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2022年3月31日
この記事の概要
  1. HTMLコーディング規約
  2. 賢く将来を見据えて
  3. 正しい伝票タイプを使用
  4. 小文字の要素名を使用する
  5. すべてのHTML要素を閉じる
  6. 空のHTML要素を閉じる
  7. 小文字の属性名を使用する
  8. 属性値の引用
  9. 画像の属性
  10. スペースと等号
  11. 長いコード行を避ける
  12. 空白行とインデント
  13. <html> と <body>を省略しますか?
  14. <head>を省略しますか？
  15. メタデータ
  16. ビューポートを設定する
  17. HTMLコメント
  18. スタイルシート
  19. HTMLでJavaScriptをロードする
  20. JavaScriptを使用したHTML要素へのアクセス
  21. 小文字のファイル名を使用する
  22. ファイル拡張子
  23. .htmと.htmlの違い
  24. 技術的な違い

HTMLコーディング規約

Web開発者はだいたい、HTMLで使用するコーディングスタイルと構文について完璧でない場合が多いです。

2000年から2010年の間に、多くのWeb開発者がHTMLからXHTMLに変換しました。

XHTMLでは、デベロッパーは有効な “整形式” のコードを書くことを余儀なくされました。

HTML5はコード検証に関してはもう少しずさんです。

賢く将来を見据えて

スタイルを一貫して使用すると、他の人があなたのHTMLを理解しやすくなります。

将来、XMLリーダーのようなプログラムがあなたのHTMLを読み込むかもしれません。

整形式の「XHTMLに近い」構文を使用するのは賢明です。

コードを常にきれいに整理し、整形式にしてください。

スポンサーリンク

正しい伝票タイプを使用

常にドキュメントタイプをドキュメントの最初の行として宣言してください。：

<!DOCTYPE html>

小文字のタグとの一貫性が必要な場合は、次のものを使用できます。:

<!doctype html>

小文字の要素名を使用する

HTML 5では、要素名に大文字と小文字を混在させることができます。

以下の理由により、小文字の要素名を使用することをお勧めします。

  • 大文字と小文字を混在させるのは悪い
  • 開発者は通常小文字を使います（XHTMLのように）
  • 小文字に見えるクリーナー
  • 小文字は書きやすい

悪い:

<SECTION>
<p>This is a paragraph.</p>
</SECTION>

ひどい:

<Section>
<p>This is a paragraph.</p>
</SECTION>

良い:

<section>
<p>This is a paragraph.</p>
</section>
スポンサーリンク

すべてのHTML要素を閉じる

HTML 5では、すべての要素（たとえば <p> 要素）を閉じる必要はありません。

すべてのHTML要素を閉じることをお勧めします。

悪い:

<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>

良い:

<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>

空のHTML要素を閉じる

HTML 5では、空の要素を閉じることはオプションです。

OK:

<meta
charset=”utf-8″>

こっちもOK:

<meta charset=”utf-8″ />

ただし、XHTMLとXMLでは、スラッシュ（/）は必須です。

XMLソフトウェアがあなたのページにアクセスすることを期待しているなら、最後のスラッシュを続けるのは良い考えです！!

スポンサーリンク

小文字の属性名を使用する

HTML 5では、属性名に大文字と小文字を混在させることができます。

以下の理由により、小文字の属性名を使用することをお勧めします。

  • 大文字と小文字を混在させるのは悪い
  • 開発者は通常小文字を使います（XHTMLのように）
  • 小文字に見えるクリーナー
  • 小文字は書きやすい

悪い:

<div CLASS=”menu”>

良い:

<div
class=”menu”>

属性値の引用

HTML5では、引用符なしで属性値を使用できます

次の理由により、属性値を引用符で囲むことをお勧めします:

  • 開発者は通常属性値を引用します（XHTMLのように）
  • 引用符で囲まれた値は読みやすくなります
  • 値にスペースが含まれる場合は引用符を使用しなければなりません

ひどい:

値にスペースが含まれているため、これは機能しません。

<table class=table striped>

悪い:

<table class=striped>

悪い:

<table
class=”striped”>
スポンサーリンク

画像の属性

常に alt 属性を画像に追加してください。この属性は、何らかの理由で画像を表示できない場合に重要です。また、常に画像の幅と高さを定義してください。ブラウザはロードする前に画像のためのスペースを確保できるので、ちらつきを軽減します。

悪い:

<img
src=”html5.gif”>

良い:

<img
src=”html5.gif” alt=”HTML5″ style=”width:128px;height:128px”>

スペースと等号

HTML5では等号の周りにスペースを入れることができます。しかし、スペースのない方が読みやすく、エンティティをよりよくグループ化できます。

悪い:

<link
rel = “stylesheet” href = “styles.css”>

良い:

<link rel=”stylesheet” href=”styles.css”>
スポンサーリンク

長いコード行を避ける

HTMLエディタを使用している場合、HTMLコードを読むために左右にスクロールするのはよくないです。

80文字を超えるコード行を避けてください。

空白行とインデント

理由なしに空白行を追加しないでください。

読みやすくするために、大きなコードブロックまたは論理コードブロックを区切るために空白行を追加してください。

読みやすくするために、スペースを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>

スポンサーリンク

<html> と <body>を省略しますか?

HTML 5では<html>と<body> を省略出来ます

次のコードはHTML5として処理されます。

例文

<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

ただし、<html> と <body> タグを省略することはお勧めしません。

<html> 要素は、ドキュメントルートです。ページ言語を指定するのに推奨される場所です。

<!DOCTYPE html>
<html lang=”en-US”>

言語を宣言することは、アクセシビリティアプリケーション（スクリーンリーダー）や検索エンジンにとって重要です。

DOMやXMLソフトウェアを省略する <html> か <body> クラッシュさせる可能性があります。

<body> を省略すると、古いブラウザでエラーが発生する可能性があります（IE9）

<head>を省略しますか？

HTML5では、 <head> タグも省略することができます。

デフォルトでは、 <body>の前のすべての要素を <head>
要素に追加します。

<head> タグを省略することで、HTMLの複雑さを軽減できます。

例文

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

ただし、<head> タグを省略することはお勧めしません。

タグを省略することは、Web開発者にとってなじみのないことです。ガイドラインとして確立するには時間が必要です。

スポンサーリンク

メタデータ

<title> 要素はHTML 5では必須です。タイトルをできるだけ意味のあるものにします。

<title>HTML5
Syntax and Coding Style</title>

適切な解釈と正しい検索エンジンの索引付けを確実にするために、言語と文字エンコードの両方を文書内でできるだけ早く定義する必要があります。

<!DOCTYPE html>
<html
lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>HTML5
Syntax and Coding Style</title>
</head>

ビューポートを設定する

HTML 5では、Webデザイナーが
<meta>タグを通じてビューポートを制御できるようにする方法が導入されました 。

ビューポートは、Webページのユーザーの表示領域です。それはデバイスによって異なり、携帯電話ではコンピューターの画面よりも小さくなります。

<meta>の すべてのWebページに次のviewport要素を含める必要があります

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<meta> ビューポート要素は、ページの大きさとスケーリングを制御する方法については、ブラウザの指示を与えます。

width = device-width部分は、デバイスの画面幅に合わせてページの幅を設定します（これはデバイスによって異なります）

initial-scale = 1.0部分は、ページがブラウザによって最初にロードされたときの初期ズームレベルを設定します。

スポンサーリンク

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つのスペースでインデントされていると見やすくなります。

スタイルシート

スタイルシートへのリンクには単純な構文を使用します（type属性は必要ありません）

<link rel=”stylesheet” href=”styles.css”>

短い規則は、次のように圧縮して書くことができます。

p.intro {font-family: Verdana; font-size: 16em;}

長い規則は複数の行にまたがって書く必要があります。

body {
background-color: lightgrey;
font-family: “Arial
Black”, Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
  • 開きブラケットをセレクタと同じ行に配置します。
  • 左角かっこの前にスペースを1つ入れる
  • 2スペースの字下げを使用する
  • 最後のものも含め、各プロパティと値のペアの後にセミコロンを使用します
  • 値にスペースが含まれる場合にのみ値を引用符で囲む
  • 先行スペースなしで、閉じ括弧を新しい行に配置します。
  • 80文字を超える行は避けてください
スポンサーリンク

HTMLでJavaScriptをロードする

外部スクリプトをロードするために単純な構文を使用します（type属性は必要ありません）

<script src=”myscript.js”>

JavaScriptを使用したHTML要素へのアクセス

「乱雑な」HTMLスタイルを使用すると、JavaScriptエラーが発生する可能性があります。

これら2つのJavaScriptステートメントは異なる結果になります。

例文

var obj =
getElementById(“Demo”)

var obj = getElementById(“demo”)

JavaScriptスタイルガイドをご覧ください

小文字のファイル名を使用する

一部のWebサーバー（Apache、Unix）はファイル名に関して大文字と小文字を区別します： “london.jpg”は
“London.jpg”としてアクセスすることはできません。

他のWebサーバー（Microsoft、IIS）では大文字と小文字が区別されません。”london.jpg” は
“London.jpg” か “london.jpg”としてアクセスできます。

大文字と小文字を組み合わせて使用​​する場合は、非常に一貫性がある必要があります。

大文字と小文字を区別しないサーバーから大文字と小文字を区別するサーバーに移動すると、小さなエラーでもWebが破損します!

これらの問題を回避するために、常に小文字のファイル名を使用してください。

ファイル拡張子

HTMLファイルの拡張子は.html か .htm です。

CSSファイルは. .css で設定すべきです。

JavaScriptファイルの拡張子は.js です。

.htmと.htmlの違い

拡張子.htmと.htmlの間に違いはありません。どちらも、どのWebブラウザまたはWebサーバーでもHTMLとして扱われます。

.htmはシステムが拡張子を3文字に制限していた初期のDOSシステム “っぽい” 感じがします。

.html は、この制限がないUNIXオペレーティングシステム “っぽい” 感じです。

技術的な違い

URLにファイル名が指定されていない場合、サーバーはデフォルトのファイル名を返します。
一般的なデフォルトのファイル名はindex.html、index.htm、default.html、default.htmです。

サーバーがデフォルトのファイル名として “index.html” のみで構成されている場合、ファイルの名前は
“index.html”, ではなく “index.htm.”にする必要があります。

ただし、サーバには複数のデフォルトファイル名を設定でき、通常は必要に応じていくつでもデフォルトファイル名を設定できます

とにかく、HTMLファイルのための完全な拡張子は.htmlです、そして、それが使われるべきでない理由はありません。

タグ: , , , ,

コメントを残す