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

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 などの要素のスタイルを示すページを作成し、何かが欠けているかどうかを確認してください。

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

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

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

24. Photoshopを学ぶ

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

  1. Psdtuts+には英語のジュエリーチュートリアルがたくさんあります。ビデオセクション
  2. Lynda.comにもチュートリアルがたくさんありますが、25ドルかかります。
  3. Photoshop が下手」チュートリアル シリーズ
  4. 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 フレームワークは経験豊富な開発者向けに設計されており、多くの時間を節約します。

<<:  CSS グリッドレイアウトの完全ガイド

>>:  JavaScript でじゃんけんゲームを書く

推薦する

Dockerfile テキストファイルの使用例の分析

Dockerfile は、イメージをビルドするために使用されるテキスト ファイルです。テキスト コン...

Vue スキャフォールディングでのレンダリングを理解する

Vue スキャフォールディングでは、エントリ ファイル main.js の新しい Vue コードに、...

jsはreduceメソッドを使用してコードをよりエレガントにします

序文実際のプロジェクトでは、最も一般的な処理は計算とループロジックである可能性があります。配列でre...

VMware インストール エラー VMware Workstation が VMware 認証サービスを開始できませんでした

背景: SAP ECC サーバーをインストールし、XP をプレインストールしたいと考えています。XP...

Linuxシステムはルートアカウントのリモートログインコマンドを禁止しています

ps: Linux システムで root アカウントのリモート ログインを無効にする方法は次のとおり...

MySQL における SQL ページングクエリのいくつかの実装方法と利点と欠点

【SQL】SQLページングクエリの概要開発プロセスではページングが必要になることがよくあります。今日...

MySQL ユーザー権限管理の実装

1. MySQL の権限の概要MySQL には、権限を制御する 4 つのテーブルがあります。user...

この記事では、MySQLのマスタースレーブ同期の原理を説明します。

目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...

Js クラスの構築と継承のケースの詳細な説明

JS のクラスの定義や継承は本当に多様なので、別のノートブックを開いて記録しておきます。意味オブジェ...

マウスを傾けた状態でのフリップナビゲーションの問題に関する研究

この記事では、マウス フリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期...

読み取り専用と無効の違い

要約すると: Readonly は入力 (テキスト/パスワード) とテキスト領域に対してのみ有効です...

実用的なクイックスタートReactルーティング開発

インストールインストールするには、次のコマンドを入力します。 // ネプ npm で react-r...

Linux システムでの virtuoso データベースの詳細なインストールと使用

最近、リンク データについていくつか調査していて、rdf データベースを使用する必要があったため、v...

Linux および Unix サーバーのセキュリティを強化する方法

ネットワーク セキュリティは非常に重要なトピックであり、サーバーはネットワーク セキュリティにおける...

MySQLストアドプロシージャを変更する詳細な手順

序文実際の開発では、ビジネス要件が変更されることが多いため、ストアド プロシージャの特性を変更するこ...