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

以下は HTML 初心者向けの 30 のベスト プラクティスです。参考までに皆さんに共有します。具体的な内容は次のとおりです

1. タグは閉じたままにしてください

以前は、次のようなコードをよく見かけました (注釈: どれだけ長いか)前はこれでした Ah...):

Some text here.     

Some new text here.     

You get the idea.

外箱の UL/OL ラベルが欠落していることに注意してください (意図的か非意図的かは誰にもわかりません)。また、LI ラベルを閉じるのを忘れていました。今日の基準からすると、これは明らかに悪い習慣であり、100% 避けるべきです。とにかくタグは閉じたままにしておきます。そうしないと、HTML タグを検証するときに問題が発生する可能性があります。

より良い方法

        
• Some text here. 
        
• Some new text here. 
        
• You get the idea. 
     

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

著者は以前から多くの CSS フォーラムに参加しており、ユーザーが問題に遭遇した場合には、最初に次の 2 つのことを行うよう提案しています。

1.エラーがないことが保証されています。

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

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

通常、選択できるドキュメント タイプは 4 つあります:

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

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

3. インライン スタイルは絶対に使用しないでください

コードの作成に没頭していると、このように、何気なくまたは怠惰に小さなインライン CSS コードを追加することがよくあります

<p>I'm going to make this text red so that it really stands out and makes people take notice! </p>

これは便利で問題がないようです。ただし、これはコーディングの実践における間違いです。

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

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

より良いアプローチは、タグ部分を完成させた後、外部スタイルシートファイルでこの P のスタイルを定義することです。

お勧め

#someElement > p {     
  color: red;     
}

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

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

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

     
<title>My Favorites Kinds of Corn</title>     
<link>     
<link>     

5.javascript ファイルは一番下に配置されます

覚えておくべき原則の 1 つは、ページをできるだけ早くユーザーの前に表示することです。スクリプトがロードされると、スクリプトが完全にロードされて実行されるまで、ページのロードが一時停止されます。したがって、ユーザーの時間はより多く浪費されることになります。

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

アドバイス

<p>And now you know my favorite kinds of corn. </p>     
<script></script>     
<script></script>