🙌

HTML Semantic Tag?

2023/06/25に公開

Semantic Tagとは?

意味があるタグを言います。

  • 非意味タグ: <div> <span>タグ名だけを見るとどんな内容なのかわからないです。
  • 意味論的 : <form> <table> <article> ..などの内容なのか予想できます。

Semantic Tagのメリット

  1. SEO:検索エンジンはタグに基づいてページの検索キーワードの優先順位を判断します。
  2. 視覚障害のユーザーがスクリーンリーダーを使用するときに役立ちます。
  3. 要素探索が簡単になります。
  4. 開発者に明確は意味を伝え、コミュニケーションやコードの再使用が楽です。

よく使うSemantic Tag紹介

ページのタイトルなどのページ紹介内容を含む
ロゴやアイコン、検索フォーム、作成者名を含むタグ

メーニュや目次などに使用されます。

Aside

サイドバーやコールアウトボックスとして使用され、間接的に文書に関する内容を示します。

Main

コンテンツのエリアを表示するタグ

Section

タイトルがあるコンテンツの集合で、ドキュメントの独立のエリアの示します。

Article

独立的に配布や再使用するように作成されたドキュメントでブログ作成文、コメント、記事などに使います。

Discussion