HTML コードを書くための 30 のヒント

1. HTMLタグは常に閉じる

前のページのソースコードでは、次のような記述がよく見られます。

 <li>Some text here. <li>Some new text here. <li>You get the idea.

おそらく過去にはこのような HTML 非終了タグを許容できたかもしれませんが、今日の基準ではこれは非常に望ましくないことであり、100% 回避する必要があります。必ず HTML タグを閉じてください。閉じないと検証に合格せず、予期しない問題が発生する可能性があります。

この形式を使用することをお勧めします:

 <ul> <li>Some text here. </li> <li>Some new text here. </li> <li>You get the idea. </li> </ul>

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

私はかつて多くの CSS フォーラムのメンバーでしたが、そこではユーザーが問題に遭遇した場合、まず次の 2 つのことを実行することを推奨していました。

1. CSSファイルを検証し、目に見えるエラーを解決する
2. ドキュメントタイプDoctypeを追加する

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

選択できる一般的なドキュメントタイプは 4 つあります。

 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4. <!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スタイルを使用しない

コードを書いているときに忙しいと、次のように、埋め込み CSS コードを都合よく、または面倒くさがって追加することがよくあります。

 <p style="color: red;">123WORDPRESS.COM</p>

これは便利で問題がないように思えるかもしれませんが、コードに問題が発生する可能性があります。

コードの記述を開始するときは、コンテンツ構造が確定してからスタイルコードの追加を開始するのが最適です。

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

より良い方法は、スタイルシートファイルでこの P のスタイルを定義することです。

 someElement > p { color: red; }

4. ページのヘッドタグにすべてのスタイルシートファイルをインポートします。

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

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

<head> <title>My Favorites Kinds of Corn</title> <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" /> <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" /> </head>

5. ページの下部にJavaScriptファイルをインポートする

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

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

例：

 <p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js"></script> <script type="text/javascript" src="path/to/anotherFile.js"></script> </body> </html>

6. 埋め込み JavaScript を使用しないでください。今は 21 世紀ですから!

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

 $('a#moreCornInfoLink').click(function() { alert('Want to learn more about corn?'); });

7. 開発中いつでも標準検証を実行する

多くの人は、標準検証の意味と価値を本当に理解していません。著者はブログでこの問題を詳細に分析しました。一言で言えば、標準検証はあなたに迷惑をかけるものではなく、あなたに役立つものなのです。

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

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

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

9. Firebug を使いましょう。

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

Firebug チュートリアル:

Firebug の概要
Firebug を使用した JavaScript のデバッグ – ビデオチュートリアル

10. 小文字のタグを使用する

理論的には、次のように任意のマークアップを記述できます。

 <DIV> <P>Here's an interesting fact about corn. </P> </DIV>

このように書かない方が良いです。大きな文字を入力しても意味がなく、コードが醜くなります。次のように書く方が良いです。

 <div> <p>Here's an interesting fact about corn. </p> </div>

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

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

12. ブログの場合は、H1を記事のタイトル用に保存する

今日、私はTwitterで議論を始めました。H1 はロゴで定義するべきか、それとも記事のタイトルで定義するべきか? 80% の人が後者を選択しました。

もちろん、どのように使用するかはニーズによって異なりますが、ブログを作成するときに記事のタイトルを H1 に設定することをお勧めします。これは、検索エンジン最適化 (SEO) に非常に役立ちます。

13. ySlowをダウンロードする

過去数年間、Yahoo のチームはフロントエンド開発の分野で多くの素晴らしい成果を上げてきました。少し前に、ySlow という Firebug 拡張機能がリリースされました。これは、Web ページを分析し、ページのあらゆる側面の詳細と改善点を提案する「レポートカード」を返します。少し厳しいですが、間違いなく役立つので、強くお勧めします - ySlow!

14. UL リストを使用してナビゲーションメニューをレイアウトする

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

 <div id="nav"> <a href="#">Home </a> <a href="#">About </a> <a href="#">Contact </a> </div>

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

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

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

 <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>

15. IEの対処方法を学ぶ

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

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

 <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" /> <![endif]-->

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

16. 良いコードエディタを使う

Windows ユーザーでも Mac ユーザーでも、選択できる優れたエディターが多数あります。

Macユーザー

コーダ
エスプレッソ
テキストメイト
アプタナ
ドリームウィーバーCS4

PCユーザー

インタイプ
電子テキストエディタ
メモ帳++
アプタナ
ドリームウィーバーCS4

17. フロントエンドコードを圧縮します。

Javascript 圧縮サービス

Javascript コンプレッサー
JS コンプレッサー

CSS 圧縮サービス

CSS オプティマイザー
CSS コンプレッサー
クリーンなCSS

18. 削減、削減、削減

私たちの多くが書いた最初のページを振り返ってみると、深刻な「DIV 中毒」(divitis) に間違いなく気づくでしょう。通常、初心者の本能は、段落を DIV で囲み、さらに DIV を配置して位置を制御することです。 —— 実際、これは非効率的で有害な習慣です。

Web ページを書いた後は、必ず何度かチェックして、要素の数を減らすようにしてください。
リストを UL でレイアウトできる場合は、個別の DIV を使用してレイアウトしないでください。

記事を書くための鍵が「減らす、減らす、減らす」であるのと同じように、ページを書く場合にも同じ原則が当てはまります。

19. すべての画像にAlt属性を追加する

画像に alt 属性を追加することの利点は明らかです。これにより、画像を無効にしたり、特別なデバイスを使用したりしているユーザーでも、障害なく情報を理解できるようになり、画像検索エンジンにとっても使いやすくなります。

Firefox は画像の Alt 属性の表示をサポートしていないため、title 属性を追加できます。

 <img src="cornImage.jpg" alt="123WORDPRESS.COM" title="123WORDPRESS.COM" />

20. 夜更かしすることを学ぶ

いつの間にか朝方まで勉強したり仕事をしたりしていることが多いのですが、これは良いことだと思います。

私の「A-HA」の瞬間は、JavaScript の「クロージャ」の概念を完全に理解したときのように、夜遅くに起こります。この魔法のような瞬間をまだ体験したことがないなら、今すぐお試しください!

21. ソースコードを表示

アイドルを真似することほど HTML を早く学ぶのに役立つものはありません。最初は私たち全員がコピー者になる必要がありましたが、その後ゆっくりと独自のスタイルを開発していきました。お気に入りの Web サイトのページのコードを調べて、コンテンツがどのように実装されているかを確認します。これは専門家のための唯一の方法ですので、ぜひ試してみてください。注意: コピー＆ペーストではなく、コーディングスタイルを学んで真似してください。

インターネット上のさまざまなクールな JavaScript エフェクトに注目してください。プラグインが使用されているように見える場合は、ソースコードの head タグ内のファイル名に基づいてプラグインの名前を見つけることができ、それを自分の利益のために使用する方法を学習できます。

22. すべての要素のスタイルを定義する

これは、他の会社の Web サイトを作成する場合に特に必要です。あなた自身はblockquoteタグを使用していませんか?では、ユーザーは使うかもしれないけど、あなた自身はOLを使わないんですか？ユーザーも同様かもしれません。時間をかけて、ul、ol、p、h1-h6、blockquote などの要素のスタイルを示すページを作成し、何かが欠けているかどうかを確認してください。