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

HTML5の新要素「section」「article」は役に立たない？その価値と正しい使い方

結論：section要素とarticle要素は十分に役立つ

HTML5で導入された<section>や<article>といった新しいセマンティック要素は、決して無意味なものではありません。むしろ、ウェブアクセシビリティの観点から非常に重要な役割を果たしています。

これらの要素は、スクリーンリーダー（音声読み上げソフト）がページ構造を正しく認識するために活用され、視覚に障害を持つユーザーがコンテンツを理解する大きな助けとなります。また、電子書籍リーダー（eBookリーダー）でも、コンテンツ構造を適切に解釈するために利用されています。

さらに、検索エンジンがページの意味構造を把握しやすくなるため、SEOの面でもメリットが期待できます。以下では、それぞれの要素の具体的な使い方をコード例とともに見ていきましょう。

section要素の使い方

<section>要素は、文書内でテーマごとにまとめられたセクション（区切り）を表します。通常は見出し（h1〜h6）を伴い、関連するコンテンツの塊を囲んで使用します。

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

article要素の使い方

<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の使い分けのポイント

両者の違いを簡単に整理すると、次のようになります。

  • section要素：ページ内のテーマ別のまとまりを表す。単体で独立したコンテンツとは限らない。
  • article要素：それ自体で完結する独立したコンテンツを表す。フィード配信などでも単独で意味が通る内容に使用する。

このように、<section>と<article>は、アクセシビリティの向上だけでなく、文書構造を明確にするうえでも欠かせない要素です。適切に使い分けることで、あらゆるユーザーにとって読みやすく、検索エンジンにも理解されやすいウェブページを作成できます。

  1. SAPUI5で静的HTMLを直接記述する方法

    SAPUI5と静的HTMLの共存SAPUI5は、開発者が独自の静的HTML要素をUI5コントロールと組み合わせて使用できる柔軟なフレームワークです。クローズドなフレームワークではないため、sap.ui.core.HTMLコントロールを利用することで、UI5がレンダリングする領域内に任意の量のプレーンHTMLを直接記述することが可能です。この仕組みにより、従来のHTMLマークアップとUI5コントロールを同じ画面内で簡単に混在させることができ、既存のHTML資産を活かした開発や、細かいレイアウト調整もスムーズに行えます。UI5コントロールが生成するHTMLは動的一方で、UI5コントロールが出力する

  2. HTMLのブロック要素とインライン要素の違いをわかりやすく解説

    はじめにHTMLの要素は、その表示方法によって「ブロック要素」と「インライン要素」の2種類に大きく分けられます。この2つの違いを理解することは、Webページのレイアウトを思い通りに組むための第一歩です。本記事では、それぞれの特徴と具体的なコード例を使って、わかりやすく解説します。ブロック要素（Block Elements）とはブロック要素は、前後に改行が入ったかのように表示される要素です。また、親要素の利用可能な幅いっぱいまで占めるという特徴があります。代表的なブロック要素には以下のようなものがあります。<h1>〜<h6>（見出し）<p>（段落）<ar