JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLのsection要素とarticle要素の使い方とは？導入された理由をわかりやすく解説

HTML5で新たに追加された<section>要素と<article>要素は、Webページに「意味（セマンティクス）」を持たせるための重要なセマンティック要素です。この記事では、それぞれの役割、導入された背景、そして具体的な使い方をコード例とともに解説します。

section要素とarticle要素が導入された理由

これらの要素が導入された最大の目的は、アクセシビリティの向上です。従来の<div>は単なる汎用的なコンテナであり、ブラウザや支援技術には「何のための領域なのか」という情報が伝わりませんでした。

<section>や<article>を使用すると、スクリーンリーダー（音声読み上げソフト）がページ構造を正確に把握できるようになり、視覚に障害のあるユーザーでも目的のコンテンツへ素早くアクセスできるようになります。また、電子書籍リーダー（eBookリーダー）でも、章立てや記事の区切りが明確になるため、読みやすいコンテンツ表示につながります。

さらに、検索エンジンもページ構造を理解しやすくなるため、SEOの面でもメリットがあります。

section要素の使い方

<section>要素は、「テーマごとにまとまったコンテンツのグループ」を表します。一般的には、見出し（h1〜h6）を含めて使用します。以下は基本的な記述例です。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML section要素の例</title>
   </head>
   <body>
      <section>
         <h1>Java</h1>
         <h3>継承（Inheritance）</h3>
         <p>継承とは、スーパークラスとサブクラスの関係を定義する仕組みです。</p>
      </section>
   </body>
</html>

このように、一つのトピック（ここではJavaの継承）に関する見出しと本文をまとめる形で使用します。

article要素の使い方

<article>要素は、「それ単体で独立して成立するコンテンツ」を表します。ブログ記事、ニュース記事、フォーラムへの投稿、レビューなどが代表例です。以下のように、<main>要素の中に複数の<article>を配置するのが典型的なパターンです。

<!DOCTYPE html>
<html>
   <body>
      <main>
         <h1>学習</h1>
         <p>学んで経験を積み、その知識を他の人と共有しましょう。</p>

         <article>
            <h3>Web開発チュートリアル</h3>
            <p>第2学期の試験対策として、CSS・HTML・PHPのチュートリアルで構成されています。</p>
         </article>

         <article>
            <h3>アカデミック系チュートリアル</h3>
            <p>第1学期の試験対策として、コンピュータ基礎・コンピュータネットワークのチュートリアルで構成されています。</p>
         </article>
      </main>
   </body>
</html>

sectionとarticleの使い分けのポイント

どちらの要素を使うべきか迷った場合は、次の基準で判断するとよいでしょう。

  • article要素： そのコンテンツを抜き出しても、単独で意味が通じる場合（ブログの各記事、ニュース項目など）
  • section要素： ページ全体の中の一つの章・節として位置づける場合（関連するトピックのまとまりなど）

適切にこれらのセマンティック要素を使い分けることで、スクリーンリーダーの利用者やeBookリーダーのユーザーにとって快適な閲覧体験を提供でき、より質の高いWebページになります。

  1. JavaScript DOMとは？基本の仕組みと要素の取得方法をわかりやすく解説

    JavaScriptのDOM（Document Object Model：ドキュメントオブジェクトモデル）は、Webページ上のHTML要素を表現する仕組みです。DOMはインターフェースとして機能し、ページのコンテンツやスタイルを変更することで、Webページを自由に操作できるようにします。 DOMにアクセスするには、Webページ上で右クリックして「検証（Inspect）」を選択します。すると画面の右側または左側にパネルが表示され、現在閲覧しているページのHTML要素を確認できます。要素にマウスカーソルを合わせると、ページ上の該当部分がハイライトされるため、どの要素がページのどのセクションに対応

  2. 頭字語とabbrタグの違いとは？HTMLで省略形を正しく使う方法

    頭字語（アクロニム）とは、フレーズを構成する各単語の頭文字をつなぎ合わせて作られた略語のことです。わかりやすく言えば、頭字語は省略形（abbreviation）の一部であり、省略形とは単語やフレーズを短縮した形全般を指します。acronymタグは廃止されました重要なポイントとして、<acronym>タグはHTML5ではサポートされておらず、現在では非推奨（deprecated）となっています。そのため、新しいWebページで使用することは避けてください。HTMLで省略形を表現したい場合は、代わりに<abbr>タグを使用しましょう。省略形も頭字語も、どちらも単語やフレーズを