チャコウェブサイトの場合も同じような使い方をしています。 ブログ記事がそれぞれarticleで囲まれていて、そのさらに外側にsectionがあります。 また、section内には見出しタグを含めることが推奨されていますので、「お役立ちブログ」部分は見出しタグを使用しています。 #ひとことa11y pic.twitter.com/4GZvsxtXVi

「それ自体が独立した内容を持ち、サイト内の他の部分で再利用可能である」と書くと難しい感じがしますが、ブログやニュースの最新記事を何件か表示させる箇所などに使用することをイメージすると分かりやすいのではないでしょうか？ #ひとことa11y

こちらがsectionとarticleの関係を表した図です。 図のようにブログの最新記事が表示されるコンテンツがあった場合、そのコンテンツ全体を囲むタグがsectionとなります。 そして、それぞれのブログ記事を囲むタグがarticleになります。 #ひとことa11y pic.twitter.com/TucSeJyOkq

sectionは、独立した1つのセクション（区切り）を表すために使用されます。 通常、sectionの中に見出しタグ（h1タグやh2タグなど）が1つ以上含まれる必要があります。 articleよりも大きな区切りを表すことが一般的です。 #ひとことa11y

articleは独立・自己完結しているコンテンツを表すために使用されます。 sectionと異なるのは「自己完結している」という部分で、これは「それ自体が独立した内容を持ち、サイト内の他の部分で再利用可能である」という意味です。 例としてブログの投稿やニュースの記事があります。 #ひとことa11y

タグの中には、似たような意味を持つものや同じような使い方をするものがあります。 例えばarticleとsection、olとulなどがあります。 一見同じように見えても、それぞれ使用目的やニュアンスが異なります。 #ひとことa11y

これまでにいくつかのタグと、その使い方をご紹介しました。 他にもたくさんのタグが存在しますが、最初からすべてを覚える必要はありません。 まずは、自分がよく使用するタグの意味を確認するようにすると、自然と知識が蓄積されていくと思います。 #ひとことa11y

見出しタグ（h1からh6）は、コンテンツの見出しを表すために使用されます。 h1が一番大きな見出しで、会社名やサイト名、ロゴ、ファーストビューのコピーやページタイトルなどが入ることが多くあります。 反対に、h6は一番小さい見出しです。 #ひとことa11y

mainは、ページのメインコンテンツを表すために使用されるタグです。 asideは、メインコンテンツから独立した追加情報を表すために使用されるタグです。 サイドバーや広告などに使われることが多くあります。 #ひとことa11y

articleは独立して完結しているコンテンツを表すために使用されるタグです。 例としては、ブログやニュースの記事があります。 sectionはページ内の関連コンテンツをまとめるために使用されるタグです。 articleと似ていますが、articleよりも大きいくくりで使用されることが多いです。 #ひとことa11y

footerはページやセクションのフッターを表すために使用されるタグで、コピーライトや連絡先などが含まれることが多くあります。 navはナビゲーションメニューを表すために使用されるタグで、主にウェブサイト内のメインナビゲーションやサイドバーナビゲーションに使われます。 #ひとことa11y

セマンティックHTMLでコーディングするときには、適切なタグを使用することでコンテンツの構造や意味を分かりやすくします。 headerはページやセクションのヘッダーを表すために使用されるタグで、headerの中にはロゴやナビゲーションメニュー、サイト名などが含まれます。 #ひとことa11y

よくあるサイト構造をセマンティックHTMLでコーディングすると、以下の図のようになります。 このようにタグの意味や役割を意識してコーディングすると、どこからどこまでがヘッダーなのか、どの部分が1つのセクションなのかなど、サイト全体の構造がとても分かりやすくなります。 #ひとことa11y pic.twitter.com/R6bpTtpzwi

よくあるサイトの構造を図で表すと以下のようになります。 極端に言えばこの構造をdivのみで再現することも可能です。 しかし、そのように制作してしまうとコードの可読性が下がったり、ユーザー・検索エンジンのどちらにとっても分かりにくいサイトになったりする可能性があります。 #ひとことa11y pic.twitter.com/X15mCS6L8y

セマンティックHTMLを意識して制作するだけで、テキストリーダーやユーザーにコンテンツの内容や構造を適切に伝えることができるようになります。 結果としてウェブアクセシビリティの向上に繋がるのです。 セマンティックHTMLはウェブアクセシビリティ向上には欠かせません。 #ひとことa11y