検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >「Web フロントエンドのベスト プラクティス」-HTML_html/css_WEB-ITnose

「Web フロントエンドのベスト プラクティス」-HTML_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:25:26958ブラウズ

1. Web 標準

多くの人が Web 標準について話しますが、ページの外部パフォーマンスのみに焦点を当てており、ページ自体のコードの品質は無視されています。

標準ページの利点は何ですか?

  • ブラウザーが最大限に正しくレンダリングされていることを確認して、さまざまなブラウザーでページが正常に解析できることを保証すると同時に、将来のさまざまなクライアントでページが正常に解析できることも保証します。

  • 検索エンジンで検索されやすくなり、ウェブサイトの検索ランキングが向上します。標準ページは基本的に、検索エンジンの最適化作業の半分を完了します。検索エンジンの Web 「クローラー」の目的は、Web サイトのコンテンツを理解し、Web サイトのキーワードを見つけることです。タグと属性を合理的に使用すると、検索エンジンが Web サイトのコンテンツを正確に理解するのに役立ちます。

  • ウェブサイトの使いやすさを向上させます。視覚障害や身体障害のあるユーザーなど、幅広いユーザーが Web サイトにアクセスできるようにします。

  • より良いメンテナンスと拡張。 複数の開発者が統一標準に従えば、既存のページをよりよく理解し、維持できるようになります。タグ、スタイル、動作を分離した標準ページの方が明らかにスケーラビリティが優れています。

    • 標準を達成するにはどうすればよいですか?

  • 標準の HTML ページ構造 (ドキュメントタイプ宣言、ヘッド (タイトルおよびインポートされたファイル)、本文など)。

  • ラベルを正しく閉じてください。

  • 非標準のタグと属性の使用をやめ、コードを簡素化します。

  • スタイルと構造の分離。

  • JavaScriptが無効になっているプロンプト情報を追加します。

  • よく使用されるキーワード、説明などの必要な タグを追加し、IE ブラウザの互換モードを設定し、モバイル デバイスでのページの表示を設定します。

2. 可読性の高い HTML

いくつかの小さな原則

1. Web ページの外観は、ブラウザの解析や検索エンジンのクローリングとは関係がありません。開発者にとって HTML コードは理解しやすく保守しやすいですが、最も重要なことはマシンで読み取れることです。

2. 不必要なタグを使用しないでください。疑似要素など、他の方法を使用して同じ効果を得ることができます。 より一般的な不適切な使用には、「セパレータ」や「空のラベル クリア フロート」などがあります。

3. テキスト以外のコンテンツを使用する場合、CSS で空のタグを使用することで完成できるように見えますが、テキストの説明を追加して CSS で非表示にすることができます。これにより、サードパーティの読み取りツールによる識別も容易になります。

4. 各タグの標準化された属性を理解し、alt、title、for などの一般的な属性などの必要な属性を HTML タグに追加します。

5.
はテキスト コンテンツの行折り返しにのみ使用する必要があり、行レベル要素の行折り返しには使用しないでください。

6. Web ページの画像には を使用する必要がありますか? ページコンテンツの一部である場合は、img を使用します。装飾のみに使用する場合は、背景を使用します。

いくつかの一般的なタグの正しい使い方

Web ページのタイトル レベル

title タグは、h1 から h6 までの 6 つのタグを指し、他のセマンティック タグと比較して、検索エンジンの影響を受けるため、特別な注意が必要です。

(1) はタイトルに使用する必要があります。

(2) ページ内で h1 タグを 1 つだけ使用すると、検索エンジンはそれに最も高い重みを付けます。他のモジュールのタイトル タグは開始します。 h2 から。

(3) タグを使用するときにレベルをスキップしないでください。

(4) コンテンツのスタイルを設定するために単に を使用しないでください。フォームを正しく作成してください

(1) を使用しないでください。 を使用してください (入力コントロールのテキストを定義するために使用されます)。 ); 関連するコントロールを指定するには、