図の左側は「目玉焼きの作り方」を箇条書きにしています。 作り方は順番を入れ替えることができないので順序付きリスト（ol）です。 図の右側は「冬が旬のくだもの」を箇条書きにしています。 順番を前後させても特に問題がないので、こちらは順序なしリスト（ul）です。 #ひとことa11y pic.twitter.com/bc9u0cMYX9

ulは順序なしリストを作成するために使用されるタグです。 リストの順番を入れ替えても特に問題のない、意味合いとして順序が重要ではないリストに使われます。 順序なしリストの行頭文字は点や丸が使用されることが多くあります。 #ひとことa11y

olは順序付きリストを作成するために使用されるタグです。 リストの順番を入れ替えることができない、意味合いとして順序が重要なリストに使われます。 順序付きリストの行頭文字は、数字やアルファベットになります。 #ひとことa11y

olとulはどちらもリストを作るときに使用するタグです。 一見非常に似ていますが、明確な使い分けがあります。 olは順序付きリストを作成するために使用されます。 ulは順序なしリストを作成するために使用されます。 #ひとことa11y

トップページなどにブログの最新記事を並べるような場合、sectionの中にarticleが入ります。 しかし、画像1枚目のようなブログ記事の場合はこれが反対になります。 画像2枚目のように、全体を囲むarticleの中にサブタイトルごとに分けるなどしてsectionが入ります。 #ひとことa11y pic.twitter.com/C6XkpIt8tP

チャコウェブサイトの場合も同じような使い方をしています。 ブログ記事がそれぞれ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