HTML 初心者のためのベストプラクティス 15 選

HTML 初心者向けのベストプラクティスを 30 個紹介します。

1. タグを閉じたままにする

過去には、次のようなコードをよく見かけました。

XML/HTML コードコンテンツをクリップボードにコピー

< li >ここにテキストがあります。
< li >ここに新しいテキストがあります。
< li >お分かりですね。

外側を囲む UL/OL タグが省略され (意図的かどうかは誰にもわかりません)、閉じる LI タグが忘れられていることに注意してください。今日の基準では、これは明らかに悪い習慣であり、100% 回避する必要があります。つまり、タグを閉じたままにしておきます。そうしないと、HTML タグの検証で問題が発生する可能性があります。

より良い方法

XML/HTML コードコンテンツをクリップボードにコピー

< ul >
< li >ここにテキストを入力してください。 </ li >
< li >ここに新しいテキストがあります。 </ li >
< li >お分かりですね。 </ li >
</ ul >

2. 正しいドキュメントタイプを宣言する

私はこれまで多くの CSS フォーラムに参加してきました。ユーザーが問題に遭遇したときは、まず次の 2 つのことを行うことをお勧めします。

1. CSS ファイルを検証してエラーがないことを確認します。

2. 正しいdoctypeが追加されていることを確認する

DOCTYPE は HTML タグの前に表示され、ページに HTML、XHTML、またはその両方の混合が含まれているかどうかをブラウザに伝え、ブラウザが正しく解析できるようにします。

選択できる一般的なドキュメントの種類は 4 つあります。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd” >
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd” >
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd” >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

どのようなドキュメントタイプ宣言を使用するかについてはさまざまな意見があります。一般的には、最も厳密な宣言を使用するのが最善の選択肢であると考えられていますが、調査によると、ほとんどのブラウザはこの宣言を通常の方法で解析するため、多くの人が HTML 4.01 標準を使用することを選択しています。ステートメントを選択する際の肝心な点は、それが本当に自分に適しているかどうかです。そのため、総合的に検討して、プロジェクトに適したステートメントを選択する必要があります。

3. インラインスタイルを使わない

コードを書いているときに忙しいと、次のように、都合よくまたは怠惰にインライン CSS コードを追加することがよくあります。

XML/HTML コードコンテンツをクリップボードにコピー

< 10 ... style = "color: red;" >このテキストを赤にして、目立つようにし、人々の注目を集めるようにします。 </ p >

これは便利で問題もなさそうです。しかし、これはコーディングの実践における間違いです。

コードを記述するときは、コンテンツ構造が完成するまでスタイルシートコードを追加しないことをお勧めします。

この種のコーディング方法はゲリラ戦のようなもので、非常に模倣的なアプローチです。 ——クリス・コイヤー

より良い方法は、タグ部分を完了した後、外部スタイルシートファイルでこの P のスタイルを定義することです。

提案

XML/HTML コードコンテンツをクリップボードにコピー

#someElement > p {
色: 赤;
}

4. すべての外部CSSファイルをheadタグ内に配置する

理論的には、CSS スタイルシートはどこにでもインポートできますが、HTML 仕様では、ページのレンダリングを高速化するために、Web ページの head タグにインポートすることを推奨しています。

Yahoo での開発プロセス中に、head タグにスタイルシートを導入すると、ページを段階的にレンダリングできるため、Web ページの読み込みが高速化されることが分かりました。 ——ySlowチーム

XML/HTML コードコンテンツをクリップボードにコピー

<ヘッド>
< title >私のお気に入りのトウモロコシの種類</ title >
<リンク rel = "スタイルシート" タイプ= "テキスト/css" メディア= "スクリーン" href = "path/to/file.css" />
<リンク rel = "スタイルシート" タイプ= "テキスト/css" メディア= "スクリーン" href = "別のファイルへのパス.css" />
</ヘッド>

5. JavaScriptファイルは下部に配置されます

覚えておくべき原則の 1 つは、できるだけ早くページをユーザーに提示することです。スクリプトを読み込む場合、スクリプトが完全に読み込まれて実行されるまで、ページの読み込みは一時停止されます。したがって、ユーザーの時間がさらに無駄になります。

JS ファイルが特定の機能（ボタンのクリックイベントなど）を実装するだけの場合は、本文の下部に自由に導入できます。これは間違いなく最良の方法です。

提案

JavaScriptコードコンテンツをクリップボードにコピー

<p>これで私の好きなトウモロコシの種類がわかりましたね。</p>
<script type= "text/javascript" src= "path/to/file.js" ></script>
<script type= "text/javascript" src= "path/to/anotherFile.js" ></script>
</本文>
</html>

6. インライン JavaScript は絶対に使用しないでください。もう1996年ではありません!

何年も前までは、HTML タグに JS コードを直接追加する方法がありました。これは特にシンプルなフォトアルバムでよく見られます。基本的に、タグには「onclick」イベントが添付されており、一部の JS コードと同じ効果があります。あまり議論する必要はありません。このアプローチは使用しないでください。コードを外部の JS ファイルに転送し、「addEventListener/attachEvent」を使用してイベントリスナーを追加する必要があります。または、jQuery のようなフレームワークを使用する場合は、「クリック」メソッドを使用するだけです。

JavaScriptコードコンテンツをクリップボードにコピー

$( 'a#moreCornInfoLink' ).click(関数() {
alert( 'トウモロコシについてもっと知りたいですか?' );
});

7. 開発と検証を同時に行う

Web デザインを始めたばかりの場合は、Web 開発者ツールバーをダウンロードし (Chrome ユーザーはアプリストアで検索してください。IE ユーザーはそうでない可能性があります)、コーディングプロセスの任意の時点で「HTML 標準検証」と「CSS 標準検証」を使用することを強くお勧めします。 CSS は習得が非常に簡単な言語だと考えているなら、それは間違いです。不注意なコードにより、ページは抜け穴や問題だらけになります。良い方法は、検証、検証、そして再度検証することです。

8. Firebugをダウンロードする

Firebug は間違いなく Web 開発に最適なプラグインです。JavaScript をデバッグできるだけでなく、ページタグのプロパティと位置を直感的に理解することもできます。さっそくダウンロードしましょう！

9. Firebugを使う

著者の観察によると、ほとんどのユーザーは Firebug の機能の 20% しか使用しておらず、これは非常に無駄です。数時間かけてこのツールを体系的に学習したほうがよいでしょう。半分の労力で 2 倍の結果が得られると信じています。

10. タグ名は小文字にする

理論的には、HTML は大文字と小文字を区別しないので、次のように何でも記述できます。

XML/HTML コードコンテンツをクリップボードにコピー