ホームページ  >  記事  >  ウェブフロントエンド  >  セマンティクスは HTML5 の新しい機能ですか?

セマンティクスは HTML5 の新しい機能ですか?

青灯夜游
青灯夜游オリジナル
2022-01-23 15:22:082263ブラウズ

セマンティゼーションは HTML5 の新機能です。その機能は次のとおりです: 1. ページでより適切なコンテンツ構造とコード構造を表示できるようにする; 2. ユーザー エクスペリエンスを向上させる; 3. SEO に貢献する; 4. ブラウジングを許可するサーバーのクローラーとマシンがより適切に解析できるようになります; 5. チームの開発とメンテナンスが容易になります。

セマンティクスは HTML5 の新しい機能ですか?

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

1. HTML セマンティクスとは何ですか?

基本的には、タイトル (H1 ~ H6)、リスト (li)、強調 (強 em) などのいくつかの主要なタグを中心に展開します。>

コンテンツの構造化 (コンテンツ セマンティクス) と適切なタグの選択 (コード セマンティクス) により、 開発者はより洗練されたコード の読み書きが容易になり、 ブラウザ クローラーとマシンの解析が向上します

2. なぜセマンティクスなのか?用途は何ですか?

  • CSS を使用せずにページが適切なコンテンツ構造とコード構造を表示するには: 裸で実行したときに見栄えがよくなるようにするには;

  • #ユーザー エクスペリエンスの向上: たとえば、タイトルと alt は、名詞の説明や画像情報の説明、ラベル タグの使用方法の説明に使用されます。

    #SEOに適した
  • : 検索エンジンとの良好なコミュニケーションを確立すると、クローラーがより効果的な情報を取得できるようになります: クローラーはタグに依存して各キーワードのコンテキストと重みを判断します;
  • 他のデバイスの利便性

    解析
  • (スクリーン リーダー、ブラインド リーダー、モバイル デバイスなど)、意味のある方法で Web ページをレンダリングする;
  • ##これは、Web ページの次のステップにおける重要な傾向です。W3C 標準に従うチームはすべてこの標準に従うため、差別化が低下する可能性があります。

  • #3. HTML コードを記述するときに注意すべき点は何ですか?

非セマンティック タグ p とスパンの使用はできる限り少なくしてください。

セマンティクスが明確でない場合や、セマンティクスが明確でない場合は、p を使用できます。 p にはデフォルトで上下のスペースがあり、特別な端末との互換性にとって有益であるため、p を使用してみてください。
  • 次のような純粋なスタイル タグは使用しないでください。 font、u などの場合は、代わりに CSS 設定を使用してください。
  • 強調する必要があるテキストは、strong タグまたは em タグ (ブラウザのデフォルト スタイル。CSS で指定できる場合は使用しないでください) に含めることができます。 Strong は太字 (b は使用しない)、em はイタリック体 (i なし);
  • 表を使用する場合は、タイトルに caption、表ヘッダーに thead、tbody を使用します。メイン部分とテール部分の tfoot です。テーブル ヘッダーは一般的なセルと区別する必要があります。テーブル ヘッダーには th を使用し、セルには td を使用します。
  • フォーム フィールドは fieldset タグで囲み、凡例タグは次のようにします。フォームの目的を説明するために使用されます。
  • 各入力ラベルに対応する説明テキストは、ラベル label を使用する必要があり、入力の id 属性を設定し、for= を設定します。ラベル label、説明テキスト、および対応する入力 Relate の someld。
  • 4. HTML5 に追加される新しいセマンティック タグについて詳しく説明してください。
  • 1),
ドキュメントの主要部分のセクションと段落を定義します。

2)、

特殊なセクション タグ。セクションよりも明確なセマンティクスを持ちます。フォーラムの記事やブログのテキストなど、外部から独立した完全なコンテンツ ブロックを定義します。 。 。

3)、

他のモジュールから独立して、ページにテキスト以外のコンテンツを読み込むために使用されます。たとえば、広告、リンクのグループ、サイドバーなどです。 。 。

4),

ドキュメントとページのヘッダーを定義します。通常、これは何らかのガイダンスおよびナビゲーション情報であり、ページ ヘッダー全体に限定されず、コンテンツ内でも使用できます。

5),

ヘッダーと同様に、ドキュメントとページのフッターを定義します。

6)、

リンク グループで構成されるナビゲーション パーツを定義します。リンク グループ内のリンクは、他の Web ページまたは現在のページの他の部分にリンクできます。

7),


Web ページまたはセクションのタイトル要素 (h1 ~ h6) を結合するために使用されます。

8),

要素を結合するために使用されます。

9),

Figure 要素にタイトルを追加します。通常は、figure の最初の子要素または最後の子要素に配置されます。

10)、

要素の詳細を定義します。ユーザーはクリックして要素を表示または非表示にできます。

11),

詳細と組み合わせて使用​​し、詳細のタイトルを含めます。

12),

キャンバスの描画に使用されます。

13),

ビデオを定義します。

14),

オーディオを定義します。

15)、

埋め込み Web ページのコンテンツを定義します。プラグインなど。

16),

このタグは、メディア要素 (ビデオ、オーディオなど) のメディア要素を定義します。

17),

入力と組み合わせて使用​​されるオプションのデータのリストを定義します ()) 入力値のドロップダウン リストを作成できます。

18)、

ユーザーに強調表示するテキストを視覚的に表示します。たとえば、検索キーワードは検索結果でユーザーに対して強調表示されます。

19)、<メートル [最小/最大/低/高/最適/値]>

赤、黄、赤を使用した重さと大きさ緑色は値の範囲を表します。

20),

さまざまなタイプの出力を定義します。スタイルはスパンと同じです。

21)、

プログレスバー、進行状況。

22),

日付または時刻を定義します。

23),

暗号化されたコンテンツを定義します。

24),

コマンドの動作を定義します。

関連する推奨事項:「html ビデオ チュートリアル

以上がセマンティクスは HTML5 の新しい機能ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。