制作者の活動(PR)。

堀北真希ちゃんのうさ耳キャラクタ。次ぎ
主な作品

アイドルをモデルにしたオリジナルキャラクタのイラスト例とそれを組み込んだアニメーション動画

HTML 5でのマークアップ。

HTML 5と言えば、JAVAスクリプトを用いて自由に描画出来たりなど、動的なコンテンツのためだけに用意された仕様と言われているようですが、静的な文書の作成に於いても興味深い点があります。

ここでは余り話題にされていない、HTML 5は静的な文書を記述するためのマークアップ言語であると言う立場から、HTML 5でのマークアップの一例を解説しております。

HTML 5でのマークアップ・目次。

はじめに。

HTML 5と言っても、実際にはHTML 4.01の文法の大半を含んでおり、従って現在あるHTML 4.01の文書の大半は文書型宣言を書き直すだけでHTML 5適合文書となるでしょう。

ですが、HTML 4.01が破棄でもされない限り、文書型宣言だけ書き直すなんて事をわざわざする必要もない筈です。

ここでは、HTML 5特有のマークアップを考えてみたいと思います。

セクションの概念。

HTML 5は、セクションの概念を始めて明示出来るようにした仕様です。

セクションとは、文書を分割した切片の事です。

歴史的には、ISO-HTML(JIS-HTML, ISO/IEC 15445:2000)もセクションの概念を明示するようにしようとしましたが、HTML 4.01との表面上の互換性を維持するため、見出しの存在に依りセクションの存在を暗示すると言う発想に留めております。

W3Cも次世代HTMLとしてXHTML 2.0でセクションの概念を導入しようとしましたが、XHTML 2.0は事実上廃案となっており、HTML 5が現存する唯一のセクション構造を明示出来る仕様となりました。

HTML 5に於けるセクション。

HTML 5では、セクショニング内容要素と呼ばれる要素を定義し、これらの要素としてマークアップする事でセクショニングを行います。

また、セクショニング内容要素とされていない要素にも、同様にセクションを成す要素が定義されておりますが、ここではその違いについては割愛させていただきます。

セクショニング内容と定義されている要素は以下の通りです。

<section>要素

一般のセクション。以下の各要素に該当しないセクションは全て<section>要素としてマークアップ出来ます。

<nav>要素

ナヴィゲーションセクション(主にサイト内リンクの集まり)。

<article>要素

独立した記事のセクション。

<article>要素内に他の<article>要素が入れ子となっている場合、下位の<article>要素は上位の<article>要素で扱う記事に関連した他の記事となります。

<aside>要素

重要性の低いセクション。脚注や詳解など、本文の流れから逸れた内容のセクションなどが該当します。

これらの要素は従来のHTML 4.01/XHTML 1.xで言うところのブロックレヴェル要素の塊を一括したセクションとなります。

また、セクショニングではありませんが、以下のような文書中の一ブロックを成す要素もあります。

<header>要素

文書全体またはセクショニング内容要素のヘッダ部分。多くの場合は見出しもヘッダの一部と考えます。

<footer>要素

文書全体またはセクションのフッタ部分。

<hgroup>要素

複数の見出しを一纏めにしたもの。これ自身も見出し要素と見なします。

尚、<hgroup>要素の見出しの等級は、内容となっている見出しの中で最も高い等級に従います。

セクションと見出しの関係。

仕様上は強制ではありませんが、各セクションには見出しが冒頭に与えられている事とされております(特に<section>要素と<article>要素)。

見出しの等級については、セクションの親子関係から等級が導かれる事とされており、従って各セクションの最上級の見出しは全て<h1>要素としても良い事とされております。

或いは、HTML 5より前の世代のウェブブラウザでも適切に取扱えるように、従来の等級付けをする事も可能です。

ここでは、HTML 5以前のウェブブラウザの事を考えて、後者の方法を採る事にします。

実際の例。

実際の例として、以下のような文章があったとします。

◎HTMLについて。
●HTMLとは。
HTMLはウェブで公開する電子文書を作る為の言語です。
HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。

●HTMLの特徴。
HTMLの特徴は画像を埋め込めるとか、文字の色など表示方法を指定出来るとかではありません。
確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。
HTMLの最大の特徴は「ハイパーリンクが使える」「どんな環境でも読めるようになっている」この二点に尽きます。

これをHTML 4.01/XHTML 1.xの文法に従ってマークアップすると、以下のようになるでしょう。

<title>HTMLとは何か</title>
<h1>HTMLについて。</h1>
<h2>HTMLとは。</h2>
<p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
<p>HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。</p>

<h2>HTMLの特徴。</h2>
<p>HTMLの特徴は画像を埋め込めるとか、文字の色など表示方法を指定出来るとかではありません。</p>
<p>確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。</p>
<p>HTMLの最大の特徴は「ハイパーリンクが使える」「どんな環境でも読めるようになっている」この二点に尽きます。</p>

このマークアップに対してHTML 5でのセクショニングの概念を加える場合、以下のようにセクショニングされる事でしょう。

  1. 先ず、文書全体が独立した記事セクションと見る事が出来ます。そして、<h1>要素はその記事に掛かる見出しと見なせます。
  2. 続いて、<h2>要素から続く段落の塊が、記事セクションを分割して得られる子セクションとなります。

以上の考えを用いた場合、先ず以下のように文書全体が<article>要素としてマークアップされる事となります。

<title>HTMLとは何か</title>
<article>
    <h1>HTMLについて。</h1>
    <h2>HTMLとは。</h2>
    <p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
    <p>HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。</p>

    <h2>HTMLの特徴。</h2>
    <p>HTMLの特徴は画像を埋め込めるとか、文字の色など表示方法を指定出来るとかではありません。</p>
    <p>確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。</p>
    <p>HTMLの最大の特徴は「ハイパーリンクが使える」「どんな環境でも読めるようになっている」この二点に尽きます。</p>
    </article>

続いて、各子セクションが<section>要素としてマークアップされる事でしょう。

<title>HTMLとは何か</title>
<article>
    <h1>HTMLについて。</h1>

    <section>
        <h2>HTMLとは。</h2>
        <p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
        <p>HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。</p>
        </section>

    <section>
        <h2>HTMLの特徴。</h2>
        <p>HTMLの特徴は画像を埋め込めるとか、文字の色など表示方法を指定出来るとかではありません。</p>
        <p>確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。</p>
        <p>HTMLの最大の特徴は「ハイパーリンクが使える」「どんな環境でも読めるようになっている」この二点に尽きます。</p>
        </section>
    </article>

必要なメタデータなどを加えると、最終的なHTML 5準拠文書は以下のようになるでしょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="shift_jis">
        <title>HTMLとは何か</title>
        </head>

    <body>
        <article>
            <h1>HTMLについて。</h1>

            <section>
                <h2>HTMLとは。</h2>
                <p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
                <p>HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。</p>
                </section>

            <section>
                <h2>HTMLの特徴。</h2>
                <p>HTMLの特徴は画像を埋め込めるとか、文字の色など表示方法を指定出来るとかではありません。</p>
                <p>確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。</p>
                <p>HTMLの最大の特徴は「ハイパーリンクが使える」「どんな環境でも読めるようになっている」この二点に尽きます。</p>
                </section>
            </article>
        </body>
    </html>

文字コードのエンコーディングを指定する<meta>要素がHTML 4.01/XHTML 1.xまでのものと異なっていることに注意してください。

一応、従来の書式も有効とされてはおりますが、こちらの記法を推奨しているようです。

マークアップの別解。

上述の通り、セクションの親子関係から見出しの等級は自動的に決まっていくと言う決まりなので、全てのセクションの最上級見出しを<h1>要素としてマークアップしても構わない事とされております。

その考えに則ったマークアップの場合、以下のように<h2>要素は<h1>要素としてマークアップが可能になります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="shift_jis">
        <title>HTMLとは何か</title>
        </head>

    <body>
        <article>
            <h1>HTMLについて。</h1>

            <section>
                <h1>HTMLとは。</h1>
                <p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
                <p>HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。</p>
                </section>

            <section>
                <h1>HTMLの特徴。</h1>
                <p>HTMLの特徴は画像を埋め込めるとか、文字の色など表示方法を指定出来るとかではありません。</p>
                <p>確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。</p>
                <p>HTMLの最大の特徴は「ハイパーリンクが使える」「どんな環境でも読めるようになっている」この二点に尽きます。</p>
                </section>
            </article>
        </body>
    </html>

ただ、この場合、CSSでのスタイル定義やCSSに対応していない環境でのレンダリングに問題が生じるかも知れません。

CSSだと、以下のようにセレクタを用意しなければならないでしょう。

h2,
article section h1 {
   (第二等級見出しのスタイル定義)
   }

h3,
article section section h1 {
   (第三等級見出しのスタイル定義)
   }

…

この例では、

  1. 最上位のセクションは常に<article>要素としてマークアップされ、
  2. 下位のセクションは全て<section>要素としてマークアップされている

と仮定しておりますが、そのような規則性を持たせていない場合には更に複雑になるでしょう。

以上の事とCSS非対応環境への対応を考慮するのであれば、やはり見出しの等級はマークアップする側で明示した方が良いと思われます。

最後に。

HTML 5は「ウェブアプリケーションのための言語」と言う側面ばかりがマスメディアやネットワーカたちに依ってクローズアップされておりますが、実際にはこのようにセクショニングの概念など、従来のHTML/XHTMLでは見られなかった画期的な概念も導入されております。

決して、HTML5は、ウェブアプリケーションのGUIを記述するか、「ブログ」を記述する爲に使ふプログラミング言語なんかではありません。静的な文書類の記述に適した立派なマークアップ言語と言い切れます。

とりわけウェブで本来公開されるべきものとされていた学術論文にこそ、活用されて欲しいものと思っております。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com