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

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

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

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

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

より良い方法

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

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

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

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

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

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

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

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

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

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

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

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

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

提案

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

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

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

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

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

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

提案

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

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

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

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

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

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

9. Firebugを使う

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

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

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

しかし、このように書かない方がよいでしょう。大きな文字を入力する労力は何の役にも立たず、コードが醜くなります。

提案

11. H1-H6タグを使用する

Web ページでは、これら 6 つのタグをすべて使用することをお勧めします。ほとんどの人は最初の 4 つだけを使用しますが、H を最大限使用すると、デバイス フレンドリー、検索エンジン フレンドリーなど、多くの利点があります。すべての P タグを H6 に置き換えてもよいでしょう。

12.ナビゲーションメニューを順序なしリスト（UL）で囲む

通常、Web サイトにはナビゲーション メニューがあり、次のように定義できます。

美しいコードを書きたい場合は、このアプローチを使用しないのが最善です。

ナビゲーション メニューのレイアウトに UL を使用する理由は何ですか? ——ULは定義リストのために生まれた

次のように定義する方が良いでしょう。

15. IEの対処方法を学ぶ

IE はフロントエンド開発者にとって常に悪夢でした。

CSS スタイルシートが基本的に完成している場合は、IE 用に別のスタイルシートを作成すると、IE でのみ有効になります。

これらのコードの意味は、ユーザーのブラウザが IE6 以下の場合、このコードが有効になるということです。 IE7も含める場合は、「[if lt IE 7]」を「[if lte IE 7]」に変更します。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。