[雑談]section、article、asideと構造化文書

HTML5からsection, article, asideといった文章の意味内容に基づく領域を指定するブロック要素が導入されました。

section

sectionは通常の文章の章や節のように文書全体の流れの一部を構成する部分で、その領域に含まれる文章が1個の塊として意味内容を持つ範囲を示す要素です。

たとえば、こんな形で使うことを想定していると考えられます。

<body>
  <section id="introduction">
    <h1>はじめに</h1>

    ...

  </section>

  <section id="section_1">

    <h1>第1章</h1>

    ...

aside

asideは脚注や余談的なコラムのように文書中の語句や題目に関連した文章ですが、その文章がなくても文書全体の流れに影響を与えないような文章の塊の範囲を示す要素になります。

使い方はこんな感じになると思います。

<section id="introduction">
  <h1>はじめに</h1>
  ...

  <aside class="further_readings" id="introduction_further_readings">

  <h1>参考文献</h1>

  ...

  </aside>

</section>

...

article

articleは意味内容的に独立した文章の範囲を示す要素で、ニュースサイトやプレスリリースリストにおける個々の記事や発表内容といった独立した項目が羅列されている文書においてそれぞれの項目を示します。

sectionやasideに含まれる文章がそれだけを取り出すと十分に意味をとることができないのに対して、articleで囲まれた文章はそれだけで完結している必要があります。

構造化文書

80年代から90年代にかけて、構造化文書というトピックがそれなりに注目され、ISOとCCITTによりOpen Document Architecture (ODA)が標準化されるといった動きがあったのですが、トピックとしてはほぼ廃れてしまったようです。

なぜ構造化文書だったのか

これは伝聞で実際にモノを見たことはないのですが、80年代の大規模システム、メインフレームコンピュータとそのソフトウエアや航空機などの運用・保守マニュアルはバインダーに閉じた形で供給され、厚さをメートルで図るような規模だったそうです。

バインダー形式になっているのは何らかの変更があった際に運用や保守の手順が変わるので該当するページを簡単に追加差し替えできるようにということだと思います。

さて、航空機であれば運用する航空会社ごとにファースト、ビジネス、エコノミーの3クラスとするか、ファーストとエコノミーの2クラスにするかといった違いやどのエンジンを採用するかといった違いがあり、コンピュータシステムではそれこそ納入するシステムごとにハードウエア構成も違えばソフトウエアも違うといったことがあります。

このため、マニュアルも納入するごとに必要なページの取捨選択を行う必要があるのですが、数万ページに及ぶようなマニュアルですからページの取捨選択だけでも大変な労力となるわけです。

これをどうにかしようということで考えられたのが、文書を章や節などを単位としてリビジョン管理や構成管理を行える仕組みで、それが構造化文書と呼ばれていました。

構造化文書の構成と生成

ODAでは文章や図表などのコンテンツを文章の流れの中で位置づける論理構造と、ページへの割り付けやページ内での配置を管理するレイアウト構造とで構成されていました。

そして項目の取捨選択などの構成管理や変更、修正などのリビジョン管理は論理構造側で行い、自動、もしくは手動によるレイアウトによりレイアウト構造を生成するというのが理念的なところになります。

ところがApple Macintoshの登場以降、WYSIWYG (What You See Is What You Get) が一般的になり、レイアウトを中心とした文書作成が当たり前となる中で論理構造に基づく文書作成とレイアウトの修正といった形での文書作成は受け入れがたいものになったのか、結局広まることなく廃れたというのが私の感じるところです。

Webの登場による新たな展開

 構造化文書とは別の流れとして、World Wide Web (Web)が突如として現れ、HTMLが文書の記述形式としてクローズアップされました。

Webの重要なポイントと考えるのは、文書作成とレイアウトが完全に分離されたことです。

Webの場合、1行が何文字で表示されるか、写真や図表がどのくらいの大きさで表示されるかはディスプレイのサイズや画素数、ブラウザウインドウの大きさなどに依存し、文書の作成時には想定できないという点です。

特に当初のHTMLは細かいことを指定することができず、見出しは<h1>、<h2>、...、太字は<b>といった感じで指定するだけであとは成り行きという感じのアバウトなものでした。

そのころはまだタグの使い方が十分に理解されていないこともあり、太字のために<b>を使うのではなく、強調のために<strong>を使うべきといったことが言われていました。

HTML5では<b>と<strong>の意味づけが明確になり、必要に応じてこれらを使い分けることが推奨されています。

その後スタイルが導入され、見た目に関する設定はスタイルで行い、HTMLタグは文章に対する意味づけを行う方向へと整理されました。

これにより<b>タグは太字を表すタグから<b>タグに設定されたスタイルを適用するタグにと変わっていきました。

そして上でも少しふれたようにHTML5でそれぞれのタグが持つ意味が明確化され、タグの持つ意味に合わせてスタイルを設定するようにと文章の意味と見えが分離されることとなりました。

その流れの中で今回の主題としているarticle、section、asideといった文書構造を表現するタグも導入されてきました。

article、section、asideをどう使うか

いまのところarticle、section、asideを有効に使用できるアプリケーションはそれほどないようです。

しかし、今後はこれらのタグを使用した様々な展開があると考えられます。

執筆環境でいえば構造化文書の項で触れたようなリビジョン管理や構成管理にこれらのタグを使用し、専用のファイル形式を使用しなくてもHTMLエディタで構造化文書が作成でき、ブラウザでプレビューができるといった仕組みが提供されるようになるかもしれません。

閲覧環境では読み上げのヒントとして、例えばasideタグのついた領域は自動的に読み飛ばすといった仕組みが提供できるかもしれませんし、文書の要約生成やななめ読み機能などにも応用できるかもしれません。

これから出てくるであろうアプリケーションに向けて、長文のHTML文書を作成する際はこれらタグを意識した執筆が求められるだろうと考えています。


0コメント

  • 1000 / 1000