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

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

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

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. < li >ここにテキストがあります。
  2. < li >ここに新しいテキストがあります。
  3. < li >お分かりですね。

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

より良い方法

XML/HTML コードコンテンツをクリップボードにコピー
  1. < ul >      
  2.    < li >ここにテキストを入力してください。 </ li >      
  3.    < li >ここに新しいテキストがあります。 </ li >      
  4.    < li >お分かりですね。 </ li >      
  5. </ ul >     

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

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

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

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

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd” >   
  2.   
  3.   
  4. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd” >   
  5.   
  6.   
  7. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd” >   
  8.   
  9.   
  10. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >   
  11.   

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

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. < 10 ...   style = "color: red;" >このテキストを赤にして、目立つようにし、人々の注目を集めるようにします。 </ p >      

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

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

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

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

提案

XML/HTML コードコンテンツをクリップボードにコピー
  1. #someElement > p {
  2. 色: 赤;
  3. }

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

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <ヘッド>      
  2. < title >私のお気に入りのトウモロコシの種類</ title >      
  3. <リンク  rel = "スタイルシート"  タイプ= "テキスト/css"  メディア= "スクリーン"   href = "path/to/file.css"   />      
  4. <リンク  rel = "スタイルシート"  タイプ= "テキスト/css"  メディア= "スクリーン"   href = "別のファイルへのパス.css"   />      
  5. </ヘッド>     

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

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

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

提案

JavaScriptコードコンテンツをクリップボードにコピー
  1. <p>これで私の好きなトウモロコシの種類がわかりましたね。</p>
  2. <script type= "text/javascript" src= "path/to/file.js" ></script>
  3. <script type= "text/javascript" src= "path/to/anotherFile.js" ></script>
  4. </本文>
  5. </html>

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

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

JavaScriptコードコンテンツをクリップボードにコピー
  1. $( 'a#moreCornInfoLink' ).click(関数() {
  2. alert( 'トウモロコシについてもっと知りたいですか?' );
  3. });

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

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

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

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

9. Firebugを使う

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

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <目次>      
  2. < P >トウモロコシに関する興味深い事実があります。 </ P >      
  3. </DIV>   

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

提案

XML/HTML コードコンテンツをクリップボードにコピー
  1. <div>      
  2.   < p >トウモロコシに関する興味深い事実があります。 </ p >      
  3. </div>    

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. < h1 >これはトウモロコシに関する本当に重要な事実です! </ h1 >      
  2. < h6 >小さいながらも重要なトウモロコシに関する事実をここに記します。 </ h6 >   

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. < div   id = "ナビ" >      
  2.   <   href = "#" >ホーム</ a >      
  3.    <   href = "#" >について</ a >      
  4.    <   href = "#" >お問い合わせ</ a >      
  5. </div>   

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

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. < ul   id = "ナビ" >      
  2.    < li > < a   href = "#" >ホーム</ a > </ li >      
  3.    < li > < a   href = "#" >について</ a > </ li >      
  4.    < li > < a   href = "#" >お問い合わせ</ a > </ li >      
  5. </ ul >     

15. IEの対処方法を学ぶ

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

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

CSSコードコンテンツをクリップボードにコピー
  1. <!--[IE 7 の場合]>
  2. <link rel= "スタイルシート" type= "text/css" media= "screen" href= "path/to/ie.css" />
  3. <![endif]-->

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

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

<<:  Linux インストール Apache サーバー構成プロセス

>>:  vue-admin-template 動的ルーティング実装例

推薦する

XHTML の一般的なタグ

XHTML タグとは何ですか? XHTML タグ要素は、XHTML ドキュメントの基本的なコンポーネ...

MySQL クラスター化インデックスのページ分割原理の分析例

この記事では、MySQL クラスター化インデックスのページ分割を例を使って説明します。ご参考までに、...

JavaScript で長い画像のスクロール効果を実装する

この記事では、JavaScriptの長い画像スクロールの具体的なコードを参考までに共有します。具体的...

CentOS6.7 mysql5.6.33 でデータファイルの場所を変更する方法

問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...

Vue3 の父子値転送に関する簡単な説明

目次父から息子へ: 1. 親コンポーネントのサブコンポーネントタグに、サブコンポーネントに渡されるデ...

XHTML言語のデフォルトCSSスタイル

html、アドレス、引用ブロック、本文、dd、div、 dl、dt、フィールドセット、フォーム、フレ...

Vue ページレンダリングにおけるキーの適用例チュートリアル

導入フロントエンドプロジェクトの開発プロセスでは、el-table によって表示される結果列がコンポ...

ウェブサイトのカラースキーム ウェブサイトに適した色の選択

色はウェブサイト訪問者に影響を与えますか?数年前までは、ウェブサイトはまだ贅沢品でしたが、今ではほと...

HTMLテーブルの詳細な説明

機能: データ表示、テーブルアプリケーションシナリオ。 <table> テーブル<...

Nginxでネットワーク分離を解決した実践記録を詳しく解説

必要最近、Node オンライン サービスを移行する必要があったため、2 つの新しいオンライン サーバ...

MYSQLは継続サインイン機能を実装しており、サインイン後1日経過すると最初から開始します(SQL文)

1. テストテーブルを作成する テーブル `testsign` を作成します ( `userid`...

nginxプロキシsocket.ioサービスの落とし穴の詳細な説明

目次Nginx は 2 つの socket.io サーバーをプロキシします。 socket.ioの動...

WIN10 に複数のデータベースがインストールされている場合にコンピュータの速度低下を防ぐ方法

必要なときにサービスを有効にし、必要がないときは無効にします。データベース サービスを管理する方法:...

MySQL データベース クエリ パフォーマンス最適化戦略

クエリを最適化するExplain ステートメントを使用してクエリ ステートメントを分析するExpla...

VueのkeepAliveコンポーネントの機能と使い方の詳細な説明

序文面接中、多くの面接官は「keep-alive が何をするのか知っていますか?」と質問する際に V...