セクション1。HTML5セマンティックタグを使用したコンテンツの構造
1.1。構造
- HTMLを使用すると、コンテンツの意味に従ってドキュメントを構築できます
- div、テーブルタグは、構造、レイアウトを作成するために使用されますが、セマンティックではありません
- HTMLセマンティックタグ - レイアウトだけでなく、意味を示すウェブページの構造
- HTMLセマンティック構造/セクション要素は、より読みやすく、アクセスしやすく、より良い検索エンジンの結果指向で、簡単に変更/更新できるページを作成するのに役立ちます
- セマンティック要素は、ブラウザと開発者の両方に対するその意味を明確に説明しています
注：HTML5セマンティック要素は、すべての最新のブラウザでサポートされています。
HTML見出しセクション要素
H1〜H6
HTML5セマンティック構造/セクション要素
| タグ | 使用 |
|---|
<main> | ドキュメントの主なコンテンツを指定します |
<header> | ドキュメントまたはセクションのヘッダーを指定します |
<nav> | ナビゲーションリンクを定義します |
<section> | ドキュメント内のセクションを定義します |
<article> | 記事を定義します。 |
<aside> | ページコンテンツ以外にコンテンツを定義します |
<footer> | ドキュメントまたはセクションのフッターを定義します |
なぜHTML5セマンティック構造/セクション要素が導入されたのですか？
- HTMLで以前、開発者は独自のID/クラス名を使用/作成して、ヘッダー、フッター、トップナビゲーション、ボトムナビゲーション、メインメニュー、ナビゲーション、メインの左上トップボトムコンテナ、コンテンツ、左の記事、右サイドバーなどなどの要素をスタイリングしました。
- これにより、検索エンジンが正しいWebページのコンテンツを識別することが難しく、不可能になりました。
- 新しいHTML5セマンティック/意味のある要素（
<header> <footer> <nav> <section> <article> <aside> ）により、これは簡単になります - HTML5セマンティック/意味のある要素は、アクセシビリティ、検索エンジンの結果、より一貫性があり、使いやすく、スタイルを備えたマシンやユーザーのページをより読みやすくします
W3Cによると、セマンティックWeb：「アプリケーション、企業、コミュニティ全体でデータを共有および再利用できるようにします」
構造階層の実装
階層が理にかなっている限り、関係する要素が正確に何を表すかは本当にあなた次第です。そのような構造を作成するとき、いくつかのベストプラクティスを念頭に置く必要があります。
- できれば、
use a single <h1> per page必要があります。これはトップレベルの見出しであり、他のすべてが階層でこれの下に座っています - 階層の正しい順序で見出しを使用してください。サブヘディングを表すために
<h3>s使用しないで、 <h2>sが続き、サブスブヘッドを表すことができます。それは意味がなく、奇妙な結果につながるでしょう
なぜ構造が必要なのですか？
- Webページを見ているユーザーは、関連するコンテンツを見つけるために迅速にスキャンする傾向があります。彼らが数秒以内に役に立つものを見ることができない場合、彼らはおそらくイライラして他の場所に行くでしょう。
- 検索エンジンページのインデックス作成ページの検索ランキングに影響を与えるための重要なキーワードと見出しの内容を考えてください。見出しがなければ、ページは
SEO (Search Engine Optimization)に関してパフォーマンスが低下します - 視覚障害者の人々は、多くの場合、ウェブページを読まないことがよくあります。彼らは代わりに彼らの話を聞きます。見出しが利用できない場合、彼らはドキュメント全体を聞くことを余儀なくされます大声で読み出します
1.2。アウトライン
- HTMLは、セマンティック要素、見出し、セマンティックタグを使用して、ページコンテンツのドキュメントアウトラインを生成/説明します（ドキュメントアウトライン=トピック、目次、インデックス）
- ドキュメントアウトラインは、デバイス/ブラウザによってコンテンツをスキャンおよび検索し、特定の/特定のセクションに移動し、コンテンツが相互にどのように関連するかを判断するために使用されます
- HTML5アウトライナーは、HTMLページ/ドキュメントの正確なアウトラインIEページ構造を理解して知るために使用されます
- アウトライナーユーティリティの使用：https：//gsnedders.html1.org/outliner/
- ブラケットのようなテキストエディターは
Document Outliner Plugin/extensionを使用して、適切なドキュメントの概要/目次/トピック/ページのインデックスを表示します - ブラケット - > [表示]メニュー - >ドキュメントの概要を表示します
1.3。 nav
- ナビゲーションを目的としたドキュメントのセクションを表します
- 要素は、ナビゲーションリンクのセットを定義します
- HTML要素は、現在のドキュメント内または他のドキュメントにナビゲーションリンクを提供することを目的とするページのセクションを表します
- ナビゲーションセクションの一般的な例は、メニュー、内容の表、インデックスです
注：ドキュメントのすべてのリンクが内側にあることはルールではありません
要素要素は、ナビゲーションリンクの主要なブロックのみを対象としています
1.4。セクション
- 一般的なドキュメントまたはアプリケーションセクションを表します
- HTML
W3CのHTML5ドキュメントによると、「セクションは、通常は見出しを持つコンテンツのテーマのグループ化です」
- 通常、Webページは、紹介、コンテンツ、左右のセクションなどの中央セクションなどのセクションに分割できます。
1.5。記事
- ブログエントリや新聞記事など、ドキュメントの独立したコンテンツを表します
- この要素は、独立した自己完結型コンテンツを指定します
- HTML要素は、ドキュメント内の自己完結型の構成を表します
- HTMLタグは、ブログ/フォーラムの投稿、新聞記事、ブログエントリなどで使用されています。
1.6。さて
- ページの残りの部分にわずかに関連するコンテンツを表します
- この要素は、（サイドバーのように）に配置されているコンテンツ以外にいくつかのコンテンツを定義します
- Asidesは、サイドバーまたはコールアウトボックスとして頻繁に提示されます
1.7。ヘッダ
- 導入またはナビゲーションエイズのグループを表します
- 要素は、ドキュメントまたはセクションのヘッダーを指定します
- 要素は、入門コンテンツのコンテナとして使用する必要があります
- HTML要素は、導入コンテンツ、通常は導入またはナビゲーションエイズのグループを表しています
- いくつかの見出し要素だけでなく、ロゴ、検索フォーム、著者名、およびその他の要素も含まれている場合があります
- 1つのドキュメントにいくつかの要素がある場合があります
1.8。フッター
- セクションのフッターを表します
- 要素は、ドキュメントまたはセクションのフッターを指定します
- HTML要素は、最も近いセクションコンテンツまたはセクションルート要素のフッターを表します
- フッターには通常、セクションの著者に関する情報、著作権データ、または関連ドキュメントへのリンクが含まれています
- 1つのドキュメントにいくつかの要素がある場合があります
1.9。 div
1.10。ワイアリア
- Web Accessibility Initiative-アクセス可能なリッチインターネットアプリケーション
- これは、WebサイトまたはWebアプリケーションのセマンティクスを強化して、視覚障害者のスクリーンリーダーなどの支援技術を支援するための属性のセットであり、HTMLのネイティブではない特定のことを理解してください
- ARIA（WAI-ARIA）は、HTML要素に追加できる属性のセットです。これらの属性は、ブラウザに実装されているアクセシビリティAPIを介して、役割、状態、およびプロパティセマンティクスを支援技術に伝えます
- Aria（Wai-Aria）は、ユーザーにサイトをナビゲートして対話する良い方法を提供します。訪問者やスクリーンリーダーにとってコードが簡単に理解できるように、HTMLコードを可能な限りセマンティックにしてください
- WAI-ARIAは、開発者が視覚的に豊富なユーザーインターフェイスの目的、状態、およびその他の機能を簡単に説明できるようにする非常に強力なテクノロジーです。
- ランドマークの役割（スクリーンリーダーやその他のデバイスがスキャンして必要な役割にジャンプ）
- <header role="banner">
- <nav role="navigation">
- <main role="main">
- <article role="article">
- <footer role="footer">
- <aside role="complementary">
- <footer role="contentinfo">
1.11。ウェブサイト /ブログ
- https://www.w3schools.com/html/html_accessibility.asp
- https://www.w3.org/wai/standards-guidelines/aria/
- https://www.w3.org/tr/wai-aria/
- https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/
