HTML(5) コード仕様

HTML コーディング規約

多くの Web 開発者は、HTML コーディング規約についてほとんど知りません。

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

XHTML を使用する開発者は、より優れた HTML 記述標準を徐々に開発してきました。

HTML5 については、より良いコード標準を形成する必要があります。以下にいくつかの標準的な提案を示します。

正しい文書タイプを使用してください

文書タイプ宣言は HTML 文書の最初の行にあります:

<!DOCTYPE html>

他のタグと同様に使用します小文字の場合は、次のコードを使用できます:

<!doctype html>

要素名には小文字を使用してください

HTML5 要素名には大文字と大文字を使用できます小文字。

小文字の使用を推奨します:

大文字と小文字のスタイルを混在させると非常に良くありません。
開発者は通常、小文字を使用します (XHTML と同様)。
小文字のスタイルがより爽やかに見えます。
小文字は書きやすいです。

非推奨:

<SECTION>
<p>これは段落です。 </p>
</SECTION>

非常に悪い:

<セクション >
< p>これは段落です。 </p>
</SECTION>

すべての HTML 要素を閉じる

HTML5 では、必ずしもすべての要素 (<p> 要素など) を閉じる必要はありませんが、各要素に終了タグを追加することをお勧めします。

非推奨:

<セクション>
<p>これは段落です。
<p>これは段落です。
</セクション>

HTML5では、空のHTML要素は必要ありません閉じる:

できます書く:

メタ charset="utf-8">

は次のように書くこともできます:

meta charset="utf-8"/ >

XHTML と XML ではスラッシュ (/) が必要です。

XML ソフトウェアがページを使用することが予想される場合は、このスタイルを使用するのが最適です。

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

HTML5 の属性名では、大文字と小文字を使用できます。

属性名には小文字を使用することをお勧めします:

同時に大文字を使用するのは非常に悪い習慣です。
開発者は通常、小文字を使用します (XHTML と同様)。
小文字のスタイルがより爽やかに見えます。
小文字は書きやすいです。

非推奨:

推奨:

ディビジョン

class="menu">属性値

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

属性値には引用符を使用することをお勧めします:

属性値にスペースが含まれる場合は、引用符を使用する必要があります。

スタイルを混合することはお勧めできません。スタイルを統一することをお勧めします。
属性値は引用符を使用すると読みやすくなります。
次のインスタンス属性値にはスペースが含まれており、引用符で囲まれていないため、機能しません:

table

class=table Striped>以下はdoubleを使用しています正しい引用符:

table

class="table Striped">画像の属性

画像は通常、

alt

属性を使用します。画像が表示できない場合、画像表示を代替することができます。

img

src="html5.gif" alt="HTML5" style="幅:128px;高さ:128px">

画像のサイズを定義し、読み込み時に指定されたスペースを確保してちらつきを軽減します。

スペースなど等号の前後にスペースを使用できます。

リンク rel = "stylesheet" href = "styles.css">

ただし、スペースは少なくすることをお勧めします:

link rel= 」スタイルシート" href="styles.css">

長すぎるコード行は避けてください

HTML エディターを使用する場合、コードを左右にスクロールするのは不便です。

コードの各行は 80 文字未満に抑えるようにしてください。

空白行とインデント

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

読みやすくするために、各論理関数ブロックに空白行を追加します。

インデントには 2 つのスペースを使用します。TAB は推奨されません。

短いコードの間に不必要な空白行やインデントを使用しないでください。

不要な空白行とインデント:

<body>

<h1>php中国語ウェブサイト< /h1 >

<h2>HTML</h2>

> php 中国のウェブサイト、技術だけではなく、夢でもあります。 php 中国語のウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります。 php 中国語ウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります、 php中国語サイト、学ぶものは技術だけではなく夢も。
<

/p

></body

> 推奨:

body

>< ;h1

>php中国語ウェブサイト</h1><h2

></ 2> <p
>php 中国のウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります。 php 中国語のウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります。 php 中国語のウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります。 php 中国語のウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります。 <
/p

></body

>

テーブル格实例:

<table>
<tr>
<th >名前</th >
<番目>説明</番目>
</tr>
<tr>
<td>A< /td>
<td>Aの説明</td>
</tr>
<tr>
<td>B< /td>
<td>Bの説明</td>
</tr>
< /テーブル> ;

リストの例:

<ol>
<li>London</li>
<リ>パリ</li>
<li>東京</li>
</ol>

lt;html> と <body> ;?

標準の HTML5 では、<html> タグと <body> を省略できます。

次の HTML5 ドキュメントは正しいです:

例

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

サンプルを実行する»

オンラインサンプルを表示するには、[サンプルを実行] ボタンをクリックしてください

<html> と <body> を省略しています。 ; タグは推奨されません。

<html> 要素はドキュメントのルート要素であり、ページの言語を記述するために使用されます:

!DOCTYPE html><
html lang = "zh">ステートメント言語は、スクリーンリーダーと検索エンジンの利便性を目的としています。

<html> または <body> を省略すると、DOM および XML ソフトウェアがクラッシュします。

<body> を省略すると、古いブラウザ (IE9) でエラーが発生します。

<head>を省略しますか?

標準のHTML5では、<head>タグを省略できます。

デフォルトでは、ブラウザはデフォルトの <head> の <body> の前にコンテンツを追加します。要素について。

インスタンス

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<body>

<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO。";
</script>

</body>
</html>

インスタンスの実行 »

オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください

メタデータ

HTML5 タイトル名はページのテーマを説明します:

>php 中国のウェブサイト</title and＆gt;titleと言語では、検索エンジンがページのトピックをすばやく理解できるようにすることができます。 lang="zh"

頭> <メタ
charset="UTF-8" > <title
>php中国語ウェブサイト</title
></head>
HTMLコメントコメントを書くことができます 内:  長いコメントは

長いコメントの最初の文字はスペース2つでインデントされ、読みやすくなります。

スタイルシート

スタイルシートは、簡潔な構文形式を使用します(type属性は必要ありません):

link

rel=

"stylesheet"

href=
"styles。 css "

& gt; & 短いルールは次の行として記述することができます:

p.into

{

font-family:

verdana;

長いルールは複数行で記述することができます:

body {
background-color: lightgrey;
font-family: "Arial Black"、Helvetica、sans-serif;
font-size: 16em;
color: black;
}

左中括弧をセレクターと同じ行に配置します。
左中括弧とセレクターの間にスペースを追加します
インデントに 2 つのスペースを使用します
の後にカンマを使用します。アンパサンド。スペース。
各属性と値の末尾に記号を使用します。
新しい行に閉じ中括弧を入れます。

HTML に JavaScript をロードします

外部スクリプトファイルをロードするには簡潔な構文を使用します (type 属性は必要ありません):

JavaScript を使用して HTML 要素にアクセスする

HTML 形式が不適切であると、JavaScript 実行エラーが発生する可能性があります。

次の 2 つの JavaScript ステートメントは、異なる結果を出力します:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO.";
</script>

</body>
</html>

インスタンスの実行 »

オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックしてください

で同じ命名規則を使用してみてください。 HTML 内の JavaScript。

JavaScript コード仕様にアクセスします。