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

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

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。