1. Home
  2. HTML（5）コードの仕様

HTML（5）コードの仕様2024 年の最新の入門チュートリアル。このコースでは HTMLコーディング規約,ドキュメントの正しいタイプを使用します,小文字の要素名,すべてのHTML要素をオフにします,空のHTML要素を閉じます,小文字の属性名,プロパティ値,画像のプロパティ,スペースと等号,コードの長い行を避けます,空行とインデント,<HTML>と<body>を省略？,<ヘッド>を省略？,メタデータ,HTMLのコメント,スタイルシート,HTMLにJavaScriptをロード,HTML要素にアクセスするにはJavaScriptを使用します,小文字のファイル名,ファイル名の拡張子,.htmと.htmlの間の差,技術的に差, について学習できます。

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>

推奨：

<節>
<P>これは段落です。 </ P>
</部>

すべてのHTML要素をオフにします

HTML5では、あなたは、要素（例えば、<p>要素）のすべてを閉じるにはしたくないが、我々は、各要素が終了タグを追加する必要がありますことをお勧めします。

推奨しません：

<節>
<P>これは段落です。
<P>これは段落です。
</部>

推奨：

<節>
<P>これは段落です。 </ P>
<P>これは段落です。 </ P>
</部>

空のHTML要素を閉じます

HTML5では、空のHTML要素は、シャットダウンする必要はありません。

私たちは書くことができます：

<メタ文字セット= "UTF-8 ">

あなたも書くことができます。

<メタ文字セット= "UTF-8 " />

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

あなたがソフトウェアのXMLページを使用することが予想される場合は、このスタイルは非常に良いです。

小文字の属性名

HTML5は、プロパティ名の大文字と小文字を使用することができます。

私たちは、小文字の属性名を使用することをお勧めします：

  • ユースケースは、非常に悪い習慣です。
  • 開発者は通常、小文字（同様のXHTML）を使用します。
  • 小文字のスタイルは、よりスッキリ見えます。
  • 書きやすい小文字。

推奨しません：

<DIV CLASSは=「メニュー」>

推奨：

<DIVクラス = "メニュー">

プロパティ値

HTML5の属性値は、引用することはできません。

私たちは、属性値の引用符を使用することをお勧めします：

  • プロパティ値が含まれている場合はスペースが二重引用符を使用する必要があります。
  • ミックススタイルは、提案された統一されたスタイルをお勧めしません。
  • 引用符を使用して、プロパティの値が読みやすいです。

次の例では、引用符を使用しないでください、値にスペースが含まれている属性、それが動作することはできません。

<Tableクラス=テーブルストライプ>

以下は、それが正しいか、二重引用符を使用しています。

<Tableクラス= "テーブルストライプ" >

画像のプロパティ

画像のALTがしばしば使用される属性。 画像を表示することができない場合には、画像表示を置き換えることができます。

<IMG SRC = "html5.gif" ALT = "HTML5" スタイル= "幅：128px;高さ ：128px">

定義されたイメージのサイズは、フリッカを低減する、負荷指定空間の時に予約することができます。

<IMG SRC = "html5.gif" ALT = "HTML5"スタイル= "幅：128px;高さ：128px">

スペースと等号

あなたは、等号の前後にスペースを使用することができます。

<リンクのrel = "スタイルシート"のhref = "Styles.cssを">

しかし、我々はより少ないスペースを使用することをお勧めします：

<リンクのrel = "スタイルシート"のhref = "Styles.cssを">

コードの長い行を避けます

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

80文字未満できるだけ多くのコードの各行。

空行とインデント

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

各論理機能ブロックのために読みやすくなり、空白行を追加します。

インデント2スペース、TABをお勧めしません。

不要な空白行が短い符号間にインデントされ、使用しないでください。

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

<ボディ>

<H1>このチュートリアル</ H1>

<H2> HTML </ H2>

<P>
このチュートリアルでは、学習だけでなく、技術だけでなく、夢です。
このチュートリアルでは、学習だけでなく、技術だけでなく、夢です。
学習このチュートリアルでは、技術だけではなく、また夢、
このチュートリアルでは、学習だけでなく、技術だけでなく、夢です。
</ P>

</ BODY>

推奨：

<ボディ>

<H1>このチュートリアル</ H1>

<H2> </ H2>
<P>このチュートリアルでは、学習だけでなく、技術だけでなく、夢です。
このチュートリアルでは、学習だけでなく、技術だけでなく、夢です。
このチュートリアルでは、学習だけでなく、技術だけでなく、夢です。
このチュートリアルでは、学習だけでなく、技術だけでなく、夢です。 </ P>

</ BODY>

フォームの例：

<表>
<TR>
<Thの>名前</目>
<Thの>説明</目>
</ TR>
<TR>
<TD> A </ TD>
<TD> </の説明 TD>
</ TR>
<TR>
<TD> B </ TD>
Bの<TD>説明</ TD>
</ TR>
</表>

リストの例：

<オル>
<李>ロンドンます。</ li>
<李>パリます。</ li>
<李>東京ます。</ li>
</オル>

<HTML>と<body>を省略？

HTML5の規格では、<HTML>と<body>タグを省略することができます。

以下のドキュメントが正しいHTML5のとおりです。

例：

<！DOCTYPE HTML>
<ヘッド>
<タイトル>ページのタイトル</ TITLE>
</ HEAD>

<H1>これは見出しです</ H1>
<P>これは段落です。 </ P>

»をお試しください

<HTML>と<body>タグを省略はお勧めしません。

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

<！DOCTYPE HTML>
<HTML LANG = "ZH">

言語のステートメントは、スクリーンリーダーや検索エンジンを促進することです。

DOMとXMLソフトウェアクラッシュに<HTML>または<BODY>を省略します。

<body>を省略したエラーは、古いブラウザ（IE9）で発生します。

<ヘッド>を省略？

HTML5規格では、<HEAD>タグを省略することができます。

デフォルトでは、ブラウザは<body>が前にデフォルトの<head>要素に追加されたコンテンツになります。

例

<！DOCTYPE HTML>
<HTML>
<タイトル>ページのタイトル</ TITLE>

<ボディ>
<H1>これは見出しです</ H1>
<P>これは段落です。 </ P>
</ BODY>

</ HTML>

»をお試しください
ノート 今、頭のタグを省略したが、推奨されていません。

メタデータ

HTML5は、<タイトル>の要素が必要とされ、タイトルの名前は、ページのテーマを説明します。

<タイトル>このチュートリアル</タイトル>

タイトルと検索エンジンがすぐにあなたのページのテーマを理解するであろうことができます言語：

<！DOCTYPE HTML>
<HTML LANG = "ZH">
<ヘッド>
<メタ文字セット= "UTF-8 ">
<タイトル>このチュートリアル</タイトル>
</ HEAD>

HTMLのコメント

：<！ - - と>でコメントを書き込むことができます

<！ -これはコメントです- >

<！ - と - >より長いのコメントは枝に書きました：

<！ -
これは長いコメントです。 これは長いコメントです。 これは長いコメントです。
これは、これは長いコメントで長いコメントです。 これは長いコメントです。
- >

最初の文字のインデントのコメント読みやすい二つの空間、。

スタイルシート

スタイルシート簡潔な構文（type属性は必要ありません）：

<リンクのrel = "スタイルシート"のhref = "Styles.cssを">

ルールは、短い線のように書くことができます。

p.into {フォントファミリ：MS Pゴシック;フォントサイズ：16em;}

ロング複数行のルールを書き込むことができます。

体{
背景色：lightgrey。
フォントファミリ：「Arialの黒」 、ヘルベチカ、サンセリフ;
フォントサイズ：16em;
色：黒;
}
  • セレクタと同じ行にブレース。
  • 左中括弧の間に選択して、スペースを追加。
  • 私はインデントするために2つのスペースを使用します。
  • コロンとプロパティ値の間にスペースを追加しました。
  • コンマや記号の後にスペースを使用します。
  • プロパティ値は、各シンボルの終わりを使用する必要があります。
  • プロパティ値が含まれている場合にのみスペースが二重引用符を使用します。
  • 新しい行を右ブレース。
  • 行あたり80文字まで。
ノート カンマとセミコロンの後にスペースを追加する一般的なルールです。

HTMLにJavaScriptをロード

（type属性は必要ありません）、外部スクリプトファイルをロードするための簡単な構文を使用します。

<スクリプト SRC = "myscript.js">

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

悪いHTML形式ではJavaScriptエラーの実行を引き起こす可能性があります。

出力異なる結果に以下の2つのJavaScriptの文：

例

VAR OBJ = getElementByIdを（ "デモ" ）

VAR OBJ = getElementByIdを（ "デモ" ）

»をお試しください

HTML、JavaScriptは同じ命名規則を使用してみてください。

アクセスJavaScriptコードの仕様 。

小文字のファイル名

ほとんどのWebサーバー（Apacheのは、Unixの）は大文字と小文字が区別されます：london.jpgのLondon.jpgはアクセスできません。

大文字と小文字を区別しません他のWebサーバー（マイクロソフト、IIS）：london.jpgはLondon.jpgまたはlondon.jpg介してアクセスすることができます。

あなたは、私たちは一貫して使用小文字のファイル名をお勧めします、統一されたスタイルを維持しなければなりません。

ファイル名の拡張子

HTMLファイルの拡張子は、の（ または Rの.htm）とすることができます。

CSSファイルの拡張子は.cssのです。

JavaScriptのファイル接尾辞の.jsを。

.htmとの間の差

自然上のファイル拡張子は.htmとの違いはありません。 ブラウザとWebサーバーがに対処するためのHTMLファイルとしてそれらを扱います。

相違点は次のとおりです。

初期のDOSシステム、またはシステム内の.htmアプリケーションは現在、唯一の3文字です。

サフィックスは、通常ので、Unixシステムに特に限定されるものではありません。

技術的に差

URLは（そのようなhttp://www.w3write.com/css/のような）ファイル名を指定しない場合、サーバーはデフォルトのファイル名に戻ります。 デフォルトのファイル名は、通常のindex、index.htmを、defaultの、およびdefault.htmのです。

サーバはデフォルトのファイルとしてのみ "のindex」で構成されている場合は、むしろ「index.htmの"よりも、 "indexのを」ファイルに名前を付ける必要があります。

しかし、一般的には、サーバが複数のデフォルトファイルを設定することができ、あなたはそれを必要に応じてデフォルトのファイルを設定することができます。

とにかく、HTMLフルサフィックスは「の "です。

ホットチュートリアル

お問い合わせ

HTML（5）コードの仕様
10/30