初心者のための HTML コーディングガイドライン 30 選

初心者のための HTML コーディングガイドライン 30 選

1. HTMLタグは常に閉じる

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

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

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

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

 <ul>
 <li>ここにテキストを入力してください。</li>
 <li>ここに新しいテキストがあります。</li>
 <li>お分かりですね。</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;">ウェブマスターのホーム</p>

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

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

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

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

いくつかの要素 > p {
色: 赤;
 }

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

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

Yahoo での開発中に、スタイルシートをヘッド タグに含めると、ページを段階的にレンダリングできるため、Web ページの読み込みが高速化されることを発見しました。 ——ySlowチーム

 <ヘッド>
 <title>私のお気に入りのトウモロコシの種類</title>
 <link rel="スタイルシート" type="text/css" media="screen" href="path/to/file.css" />
 <link rel="スタイルシート" type="text/css" media="screen" href="path/to/anotherFile.css" />
 </head>

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

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

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

例： 

 <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 を使用しないでください。今は 21 世紀ですから!

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

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

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

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

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

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

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

9. Firebug を使いましょう。

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

Firebug チュートリアル:

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

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

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

     <DIV>
     <P>トウモロコシに関する興味深い事実があります。</P>
     </DIV>

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

     <div>
     <p>トウモロコシに関する興味深い事実をご紹介します。</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="#">ホーム</a>
     <a href="#">について</a>
     <a href="#">お問い合わせ</a>
     </div>

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

    ナビゲーション メニューのレイアウトに UL を使用する理由は何ですか?

    ——ULは定義リストのために生まれた

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

     <ul id="nav">
     <li><a href="#">ホーム</a></li>
     <li><a href="#">概要</a></li>
     <li><a href="#">お問い合わせ</a></li>
     </ul>

    15. IEの対処方法を学ぶ

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

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

     <!--[IE 7 の場合]>
     <link rel="スタイルシート" 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="ウェブマスターのホーム" title="ウェブマスターのホーム" />

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

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

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

    21. ソースコードを表示

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

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

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

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

    23. 第三者サービスの利用

    翻訳者注: 元の英語のタイトルは「Twitter の使い方」です

    インターネット上には、Web ページに無料で追加できる人気の API が数多くあります。これらのツールは非常に強力です。それは多くの巧妙な機能を実現するのに役立ち、さらに重要なことに、Web サイトの宣伝にも役立ちます。

    24. Photoshopを学ぶ

    Photoshop はフロントエンドエンジニアにとって重要なツールです。すでに HTML と CSS に精通している場合は、Photoshop についてさらに学習することをお勧めします。

    25. HTMLタグをすべて学ぶ

    いくつかの HTML タグはほとんど使用されませんが、それでも知っておく必要があります。たとえば、「abbr」、「cite」などです。必要になった場合に備えて、これらを学習する必要があります。

    26. コミュニティのディスカッションに参加する

    インターネット上には優れたリソースが数多く存在し、コミュニティには多くの専門家が潜んでいます。ここでは、自分で学習したり、経験豊富な開発者に相談したりすることができます。

    27. CSSリセットを使用する

    Css Reset は Reset Css も意味し、一部の HTML タグ スタイルまたは既定のスタイルをリセットします。

    CSS Reset を使用するべきかどうかについても、オンラインで白熱した議論が行われています。著者はこれを使用することを推奨しています。まず、成熟した CSS リセットをいくつか選択し、それをゆっくりと自分に合ったものに進化させていきます。

    28. 要素を揃える

    つまり、Web ページの要素をできるだけ近づけて配置する必要があります。お気に入りの Web サイトを観察すると、ロゴ、タイトル、グラフ、段落が非常にきれいに整列していることが分かります。そうしないと、雑然としてプロフェッショナルに見えなくなります。

    29. PSDスライスについて

    HTML、CSS、Photoshop をマスターしたら、PSD を Web ページの画像や背景に変換する方法も学ぶ必要があります。ここでは 2 つの優れたチュートリアルを紹介します。

  • PSD をスライスして切り分ける
  • PSD から HTML/CSS へ

    • 30. フレームワークを恣意的に使用しない

    Javascript と CSS の両方に優れたフレームワークが多数ありますが、初心者の場合は急いで使用しないでください。まだ CSS に精通していない場合、フレームワークを使用すると知識体系が混乱します。

    CSS フレームワークは経験豊富な開発者向けに設計されており、多くの時間を節約します。

    <<:  美しいチェックボックススタイル（複数選択ボックス）はIE8/9/10、FFなどと完全に互換性があります。

    >>:  インタビュアーはCSSで固定アスペクト比を実現する方法を尋ねました

    推薦する

    要素の幅（高さ）の適応を実現するCSSおよびCSS3の柔軟なボックスモデル

    1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...

    ログインフォームを実装するためのJavaScript

    この記事の例では、ログインフォームを実装するためのJavaScriptの具体的なコードを参考までに共...

    仮想マシンのディスクサイズを拡張する方法

    Vmvare が仮想マシンのディスク サイズを設定した後、ディスク領域が不足していることがわかりまし...

    Vueはツリー構造の追加、削除、変更、チェックのサンプルコードを実装します

    実は多くの会社がユーザー権限ツリーに似た機能を持っています。最近、追加、削除、修正のツリー構造を書き...

    React Native が「NSArray＜id＜RCTBridgeModule＞＞型のパラメータを初期化できません」というエラーを報告する (解決方法)

    最近、古い RN プロジェクトを Xcode で実行すると、次のコード エラーが報告されました。 &...

    Linux の操作とメンテナンスの基本 httpd 静的 Web ページ チュートリアル

    目次1. ウェアハウスを使用してhttpd lrzsz解凍ファイルを作成する2. ソースコードファイ...

    Ubuntu16.04 インストール mysql5.7.22 グラフィックチュートリアル

    VMware12.0+Ubuntu16.04+MySQL5.7.22 インストールチュートリアルの詳...

    HTML テーブル マークアップ チュートリアル (38): ヘッダーの境界線の色属性 BORDERCOLOR

    テーブルを美しくするために、ヘッダーに異なる境界線の色を設定できます。基本的な構文<TH 境界...

    MySQLデータの挿入、更新、削除の詳細

    目次1. 挿入2. 更新3. 削除1. 挿入 顧客に挿入( 顧客.顧客住所、 顧客.cust_cit...

    年末ですが、MySQL パスワードは安全ですか?

    序文：年末です。データベースを検査する時期ではないでしょうか?一般的に、検査では、パスワードの複雑さ...

    Vue ダイナミック バインディング アイコンの完全な手順

    0 アイコンと画像の違いアイコンは文字であり、画像はバイナリ ストリームです。つまり、画像はアイコン...

    nginxコンテナ設定ファイルの独立した実装

    コンテナを作成する [root@server1 ~]# docker run -it --name ...

    Dockerコマンドの自動補完の実装

    序文この友人がどれくらいDockerを使っていなかったのかは分かりませんが、突然Dockerコマンド...

    小規模プログラムへのデータキャッシュ機構の応用と実装

    ミニプログラムデータキャッシュ関連知識データ キャッシュ: データをキャッシュして、アプレットを終了...

    Web ページ制作におけるテーブル属性 CellPad、CellSpace、Border の説明と使用

    cellspacing は表内のセル間の距離です。セルパディングは、表のセル内の空白スペースです。一...