HTML セマンティック タグとは何ですか?一般的な HTML セマンティック タグの完全なリスト

<strong>1. HTML セマンティック タグとは何ですか?

セマンティック タグは、タグに独自の意味を与えるように設計されています。

<p>一行文字</p><span>一行文字</span>

上記のコードに示すように、<code>p タグと <code>span タグの違いの 1 つは、<code>p タグの意味が段落であることです。 <code>span タグには固有の意味はありません。

2. セマンティックタグの利点

<li>

コード構造は明確で読みやすく、チーム開発に役立ちます。

<li>

他のデバイス (スクリーン リーダー、ブラインド リーダー、モバイル デバイスなど) によって簡単に解析され、セマンティックな方法で Web ページをレンダリングします。

<li>

検索エンジン最適化 (SEO) に適しています。

3. 一般的なセマンティック タグ

したがって、ページ構造を記述するときは、セマンティック HTML タグ

<li>

: ページのメインコンテンツ。 <code><title>

<li>

: h1~h6、階層タイトル、<code><hn> と <code><h1> の調整は検索エンジンの最適化に役立ちます。 <code><title>

<li>

: 順序なしリスト。 <code><ul>

<li>

: 順序付きリスト。 <code><li>

<li>

: 通常、ヘッダーには Web サイトのロゴ、メイン ナビゲーション、サイト全体のリンク、検索ボックスが含まれます。 <code><header>

<li>

: ナビゲーションをマークします。ドキュメント内の重要なリンク グループにのみ使用されます。 <code><nav>

<li>

: ページのメイン コンテンツ。ページ上で 1 回のみ使用できます。 Web アプリケーションの場合は、その主要な機能を囲みます。 <code><main>

<li>

: ドキュメントの残りの部分から独立した外部コンテンツを定義します。 <code><article>

<li>

: ドキュメント内のセクション (セクション、セクション) を定義します。章、ヘッダー、フッター、文書のその他の部分など。 <code><section>

<li>

: 含まれているコンテンツを超えたコンテンツを定義します。サイドバー、記事へのリンクのセット、広告、フレンドリーリンク、関連製品リストなど。 <code><aside>

<li>

: フッター、親が body の場合のみ、ページ全体のフッターになります。 <code><footer>

<li>

: 小さいフォント効果を表示し、詳細を指定し、免責事項、注釈、署名、著作権を入力します。 <code><small>

<li>

: <code><strong> タグと同様に、テキストを強調するために使用されますが、テキストをより強く強調します。 <code>em

<li>

: 強調内容としてテキストを斜体で表現します。 <code><em>

<li>

: テキストの一部を強調表示するには黄色を使用します。 <code><mark>

<li>

: 独立したフロー コンテンツ (画像、チャート、写真、コードなど) を指定します (デフォルトのマージンは約 40px)。 <code><figure>

<li>

: <code><figcaption> 要素のタイトルを定義します。<code>figure 要素の最初または最後の子要素の位置に配置する必要があります。 <code>figure

<li>

: 含まれているテキストが書籍や雑誌のタイトルなどの参照を参照していることを示します。 <code><cite>

<li>

: 独自のスペースを持つブロック参照を定義します。 <code><blockquoto>

<li>

: 短い引用 (クロスブラウザーの問題。使用は避けてください)。 <code><q>

<li>

: datetime 属性は特定の形式に従います。この属性が無視される場合、テキスト コンテンツは正当な日付または時刻形式である必要があります。 <code><time>

<li>

: 略語。 <code><abbr>

<li>

: 定義用語要素。定義のすぐ隣になければなりません。説明リスト dl 要素で使用できます。 <code><dfn>

<li>

: 著者、関係者、または組織の連絡先情報 (電子メール アドレス、連絡先ページへのリンク)。 <code><address>

<li>

: コンテンツが削除されました。 <code><del>

<li>

: コンテンツを追加しました。 <code><ins>

<li>

: タグコード。 <code><code>

<li>

: 既知の範囲または小数値内のスカラー測定を定義します。 (Internet Explorer はメータータグをサポートしていません) <code><meter>

<li>

: 実行中の進行状況 (プロセス) を定義します。 <code><progress>

その他の関連チュートリアルについては、

HTML5 ビデオ チュートリアル
をご覧ください。