[HTML5 入門]実用を意識した最小単位からの文書構造チュートリアル
この記事は約30分ぐらいで読めます
以前[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところという記事を書きました。HTML5 入門と銘打ち、今後こうしたHTML5コーディングにおける解説を行っていきたいと思っています。内容に納得できたなら、是非これからHTML5に挑みたい人にも勧めてもらえたらと思います★
今回いつもにもまして非常に画像が雑ですみません＞＜
文書構造って難しいですよね
コーディングしていたら迷う事ってたくさんありますよね。「これは見出しなのかな」「この段落はどこまで段落なんだろう」「検索バーはどのタグで囲めばいいの？」等など、判断に詰まることはいくらでもあります。そしてその判断の迷路を抜け出た後も、ふと「このマークアップで本当に合ってんのかな」と再び迷いに陥ることも。
エレメントの役割とタグの用途の正確な理解
コーディングしているときに何故迷うか。これは、
- それぞれのパーツがそのサイト内にどういう役割で置かれているかをはっきりと定義できていない
- 各タグの用途を理解できていない
このいずれか、または両方が出来ていないから起きる問題だと思います。エレメントの役割とタグの用途、この二つがはっきりしていればコーディングに迷う事はありません。…まあ(他にも納得の行かない組織ルールとかSEOを考慮した記述等があって)それは理想の話なんですがｗ webcre8もまたこの境地に達することが出来るよう、色んなパターンを試したり、既存のサイトを頭の中でパターンに落とし込んだりしています。人に教えるということも実はその確認作業の一つでもありますね。
いきなり完成されたサイトを作ろうとすると構造が理解できない
web制作者は、実際にサイトを作ってみようとするまでに既にたくさんのwebサイトを見てきているので、「webサイトとはこういうもの」という既成概念が出来あがっています。ここに、落とし穴があります。
つまり、webサイト然としたインターフェイスを整えられればそれでサイトが出来あがっていると考えてしまうのです。これはある意味間違いではないですし(「webサイトなんて見れればOK」)、実際そのように作られているサイトは多いです。ですがコーディングと言う仕事の完成度、技術の理解という面から見た場合、この思考はその大きな妨げとなります。なまじ成り立ってしまうせいで、構造的なミスをはらんでいることに気付けないのです。
DOMとアウトライン
webcre8はあまりJavaScriptを使ったHTMLの操作について知識がなく、正直DOMという言葉になじみがありません。デザイナの仕事からコーディングを覚えた人にはそういう人も多いんじゃないかなと思います。アウトラインはHTML5から出てきた概念ですね。なので、前からこれまで普通にコーディングしてきた人も、わりと知らずとも困らずにいたりします。
DOM
Document Object Modelの略。HTMLやXMLをアプリケーションから利用するためのAPIです。外部のプログラムが文書の構造を解釈するためのもの、とざっくり考えています。
以下に詳しい説明があります。
でもまあ、言葉としては認識していなくても、タグを使うときには開始タグと終了タグを互い違いにせずに必ず入れ子にすることや、DOMツリーを見たときにああ、こういうものかと認識することは多分できると思います。そもそもこの入れ子構造がわかっていないとまともなコーディングが出来ませんしね。
大した知識もないし本題ではないのでここではあんまり触れませんｗ というか後日関係性の深い別記事にもうちょっと書きます。
アウトライン
この言葉は何度かWEBCRE8.jpでも取り上げてきていますね。
[HTML5]アウトラインで迷わない！ sectionと見出しについて
これらの説明である程度はわかってもらえると思いますが、特に上記の記事で挙げている内容はどちらかと言うと一般的な、特にブログ等のテキストコンテンツに特化したシチュエーションで、もっと変わった形の場合どうなるか等が分かりにくかったかもしれません。
HTML5コンテンツチュートリアル
ここからは単純化したページから複雑なページまで、ページの各パーツをまず「コード」で示し、それを「アウトライン」「コンテキスト(文脈)」「レイアウト」といった観点から解説していこうと思います。
単体のテキスト
まず単体のテキストのみをbody内に置いてみます。
テキスト一文のみのページ
コード
<html>
<head>
<title>Not Found</title>
</head>
<body>
指定のURLに該当するページは見つかりませんでした
</body>
</html>
アウトライン
一見文書構造的には無茶苦茶な気がしますが、アウトラインモデルで考えるとこのテキストは「暗黙の段落を持ったテキスト」であり、それがタイトルのないセクショニングルート(body)に置かれている状態と言えます。
ちなみにこの「暗黙の段落」については別途記事を書きます。
書きました！
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ – WEBCRE8.jp
コンテキスト
このテキストはこのページにおける唯一のコンテンツなので、当然テキストのみがメインコンテンツになります。bodyというセクショニングルートの内容はこれだけです。titleタグに内容が入っていれば、それがこのページのタイトルになります。
考えられるのは404のページなどでしょう。ページタイトルには「Not Found」、内容には「指定のURLに該当するページは見つかりませんでした」等の文言が考えられます。
レイアウト
特になし。好きなように配置しましょう。
タイトルのあるテキスト
そのテキストにタイトルが付きます。
タイトルとテキストのみ
コード
<html>
<head>
<title>Website Name</title>
</head>
<body>
<h1>Coming Soon</h1>
<p>2012年 11月発売</p>
</body>
</html>アウトライン
このタイトルがbodyのタイトルになります。テキストはタイトル同様body直下のコンテンツですね。
コンテキスト
タイトルとテキストはこのページのメインコンテンツです。ページ自体のタイトルはtitleタグで宣言されているので、コンテンツのタイトルはより限定的であったり特化している内容でも構いません。
例えばティザーサイトなどで、ページタイトルにはサイトタイトルがついているとして、コンテンツのタイトルには「Coming Soon」、内容にはリリース日や説明が入っているような状態です。他にも単にサイトのロゴがあり、そのサイトの説明だけが書かれてあるといったページもありうるでしょう。
レイアウト
特になし。どのように配置しても構いません。
複数の、タイトルのあるコンテンツのブロック
入れ子であったり並列に置かれたタイトル付きコンテンツの設置です。
セクションに分かれたコンテンツがある場合
コード
<html>
<head>
<title>Web Service</title>
</head>
<body>
<h1>このサービスの特徴</h1>
<div>
<section>
<h1>特徴1：早い</h1>
<p>とにかく早いです。</p>
</section>
<section>
<h1>特徴2：安い</h1>
<p>圧倒的価格を実現しました。</p>
</section>
<section>
<h1>特徴3：うまい</h1>
<p>値段にしてはうまいです。</p>
</section>
</div>
</body>
</html>
アウトライン
まずセクショニング・ルートであるbodyは直下に一つタイトルを持ちます。以下、タイトルが置かれるごとにその下のコンテンツを含む形でセクショニング・コンテンツを置く必要がありますが、これは仮に置かなかったとしても暗黙のセクションを形成します。個人的にはブログのような更新コンテンツでなければしっかりセクショニング・コンテンツのタグを使っておいたほうがいいと思います。スタイルに寄る見た目も揃えやすいですしね。
コンテキスト
まずbodyの直下のタイトルはそのページ(サイトのホームであればそのサイト自体)のタイトルになります。
以下に置かれるタイトルはそのページに含まれる個別のコンテンツのタイトルです。通常そのタイトルとコンテンツはそれの属するセクショニングルート内のサブセクションであり、sectionで囲まれます。親セクションの内容に含まれるそれぞれのタイトルについてのコンテンツが入ります。
レイアウト
この辺からある程度の情報を持ったコンテンツと呼べるような体裁が整ってきますね。
本来ヘッダ内の内容にあたるサイトタイトルは、header内に入れるのが相応しいでしょう。ですがタイトルのみであればこれは大きなh1のみを置いてもいいと思います。レイアウト上、例えば見た目上のヘッダ部分のエリアを取るためならdivで調整します。
メインコンテンツにあたる部分のセクションがページに対して同等である場合はそれらは別々のセクショニング・コンテンツになります。これらをレイアウト上の問題でグルーピングしたい場合はdivを使います。
CSSでレイアウトする場合positionを使うのは極力避けたいですし、floatで済ませるのであればレイアウトの為のdivは必須です。ただし、これが意味的なグルーピングであるのであれば何らかのセクショニング・コンテンツで囲う方が相応しいでしょう。例えば例のレイアウトではサイトのロゴ等がありません。サイトタイトルをページにレイアウトした場合(通常のサイトはそうなるでしょう)、現時点での下位のサブセクションはそれぞれサイトの特徴の一部であるため、「サイトの特徴」というタイトルの親セクションを持つかもしれません。
ヘッダとフッタ
ページ自体、コンテンツに本文と別に詳しい情報等が付けられる場合です。
コンテンツ情報が増えたのでヘッダとフッタが入る
コード
<html>
<head>
<title>Web Service</title>
</head>
<body>
<header>
<h1>Web Service</h1>
<p>早い安いうまいのWeb Serviceです。</p>
</header>
<div>
<section>
<h1>特徴1：早い</h1>
<p>とにかく早いです。</p>
</section>
<section>
<h1>特徴2：安い</h1>
<p>圧倒的価格を実現しました。</p>
</section>
<section>
<h1>特徴3：うまい</h1>
<p>値段にしてはうまいです。</p>
</section>
</div>
<footer>
<address>お問い合わせ：[email protected]</address>
<p><small>© 2012 WEBCRE8.jp</small></p>
</footer>
</body>
</html>
アウトライン
ヘッダとフッタはheaderタグとfooterタグでマークアップされます。これらはアウトラインに影響は与えず、ただ親セクションのヘッダ情報、フッタ情報の内容をグルーピングするためだけに使われます。
コンテキスト
これらにはヘッダ、フッタに相応しいコンテンツが入るべきです。その親のセクショニング・コンテンツに本文と別の付帯情報があるならこれらのタグで囲むようにましょう。
サイトのヘッダに置く要素がサイトタイトルだけなら特にheaderタグで囲む必要はないですし、フッタ部分も著作権表記しかないのであればsmall要素一つですが、直接置くのではなくpタグなどに入れるのが正しいでしょう。webcre8はブロック要素と同じ階層にはブロック要素しか置かないようにしています。
何がヘッダ情報で何がフッタ情報なのかは正直定義が分かりませんが、慣例的には以下の様な感じです。
ヘッダにあたるコンテンツ
- セクショニング・ルート、セクショニングコンテンツの見出し
- コントロール(bodyにおける検索窓等)
- サイトにおける関連リンク(上部ソーシャルボタンやタグ等)
- 概要やサムネイル、キャッチ
- 目次
- 記事公開日、閲覧数等文書の情報
フッタにあたるコンテンツ
- 著者情報
- 関連コンテンツへのリンク
- 出典へのリンク
レイアウト
サイトのヘッダとしてグルーピングしたいパーツ(検索窓や設定メニュー、ソーシャルリンク等)があるのならそれらが全てページのヘッダであることを示す為にheaderタグで囲みます。
あるセクショニング・コンテンツがタイトル以外にヘッダ情報やフッタ情報を複数持つのであれば、それはどんな深くて小さいコンテンツであってもheader、footerを持つ可能性があります。ただし、headerやfooterの中に、headerやfooterを持つコンテンツを置くことは相応しくないそうです。ここのところデザインパターンとして定着しているFat Footer(コンテンツの沢山入ったフッタのこと)なんかだと詳細な内容を持つセクショニング・コンテンツを含んでしまいそうな気もしますけど、アレはあくまでサイトの下の方に大きな領域を取って見せる、どちらかと言うと表現手法でしかありません。それらは適当なdivやsection、asideに入れてしまい、footer要素とは別にしたほうがいいと思います。
グローバルナビゲーション、機能メニュー
サイトをコントロールするメニュー、階層的にサイト内を閲覧する場合に使うグローバルナビゲーション等のメニューを設置します。
横いっぱいに置くことでサイト全体をカバーしているとわからせる
コード
<html>
<head>
<title>Web Service</title>
</head>
<body>
<header>
<h1>このサービスの特徴</h1>
<p>このサービスの特徴を紹介します</p>
</header>
<nav>
<ul>
<li><a href="about.html">サービスの特徴</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
<div>
<section>
<h1>特徴1：早い</h1>
<p>とにかく早いです。</p>
</section>
<section>
<h1>特徴2：安い</h1>
<p>圧倒的価格を実現しました。</p>
</section>
<section>
<h1>特徴3：うまい</h1>
<p>値段にしてはうまいです。</p>
</section>
</div>
<footer>
<address>お問い合わせ：[email protected]</address>
<p><small>© 2012 WEBCRE8.jp</small></p>
</footer>
</body>
</html>
アウトライン
navはセクショニング・コンテンツです。ナビゲーションとしての役割を果たすコンテンツをこれで囲みます。
コンテキスト
そのナビゲーションが、親セクショニング・コンテンツやルートについてのナビゲーションであればそれをnavで囲むべきだと思います。これについての議論もわりとし尽くしたので、別途記事なりコンテンツにします(この記事風呂敷広げまくりだな…回収できるように頑張ります＞＜)。
例えばbody直下に置かれたグローバルナビゲーションはサイト自体の閲覧をナビゲートするものと言えます。同様に、article直下に置かれたページ内リンクの塊(目次等)は記事の閲覧をナビゲートするものと言えるでしょう。
パンくずリスト
パンくずはnavであると思います。bodyの直下に置かれた場合、これはそれの置かれたページ自体のサイト内の位置を示しています。もしこれが仮にarticle内に置かれている場合はそのarticle自体の設置位置を示します。少しコンテキストが変わりますが、個人的にはその差に大した意味があるとは考えてません。好きなように配置してもいいと思います。
レイアウト
そのナビゲーションの対象がどこまでなのか(サイト全体のナビなのか記事のナビなのか)を配置の仕方でアピールできるのがベストでしょう。
例えば、サイトのレイアウトをX軸かY軸いずれかで占有すればそれはグローバルナビゲーションらしく見えますが、これが2カラムのメインカラム内に入ってしまっていると、これがサイト内のグローバルなナビゲーションだとは思われにくいです。グローバルナビゲーションを垂直に分割したカラムに入れる場合は、その分割がY軸いっぱいに拡がっていなければ、やはり子のナビゲーションに見えてしまいます。
モバイルデバイスの場合
横幅が狭いデバイスにおいてはこの分割の仕方による差別化が難しくなります。この場合はアイコンで示したり、コンテンツを視覚的な枠で区切ったり、表現における工夫が必要になるでしょう。
独立した、コンテンツの塊
独立した意味を持っているコンテンツです。親コンテンツが何であっても意味が変わりません。例えば「りんごの皮の上手なむき方」というタイトルの記事は、それがデザイナのブログで投稿されようがまとめサイトに全文転載されようが、TOPページにあろうが個別ページにあろうが、記事が持つ意味が変わりません。これは完全に独立しているという事です。
名前が詳しくつけられ個別で存在し得るコンテンツ
コード
<html>
<head>
<title>Web Service</title>
</head>
<body>
<header>
<h1>Web Service</h1>
<p>早い安いうまいのWeb Serviceです。</p>
</header>
<nav>
<ul>
<li><a href="about.html">サービスの特徴</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
<article>
<h1>Web Serviceの特徴</h1>
<section>
<h1>特徴1：早い</h1>
<p>とにかく早いです。</p>
</section>
<section>
<h1>特徴2：安い</h1>
<p>圧倒的価格を実現しました。</p>
</section>
<section>
<h1>特徴3：うまい</h1>
<p>値段にしてはうまいです。</p>
</section>
</article>
<footer>
<address>お問い合わせ：[email protected]</address>
<p><small>© 2012 WEBCRE8.jp</small></p>
</footer>
</body>
</html>
アウトライン
独立した意味を持つのでタイトルを持ちます。そのタイトルについて書かれた内容全てをセクショニングします。
コンテキスト
その内容がメインコンテンツ、または独立して成立(例えば単体の記事等、それがメインコンテンツになっているページが存在しうるような内容をまとめた塊等の場合)するコンテンツである場合はarticleになります。
何かについての記事などはそれ単体で成立します。そこから書かれていることは全て最初に付けられたタイトルについての内容ですよね。
会社概要、お問い合わせ等のページはそれ単体でも成立することはできそうですが、この書き方だと単体で考えた場合どこの会社の会社概要かわかりませんよね。
例えば企業サイトを作ったとします。そのサイトのあるページのbody直下に「会社概要」というタイトルのコンテンツを置いた場合、これはあくまでそのbody(この場合はサイト自体)の説明として会社概要が置かれているに過ぎません。極端な話、それは独立したページでなくサイドバーに置くことだってできてしまいます(会社概要だとさすがに違和感がありますが、個人のプロフィールなんかはサイドバーやフッタにあることを見かけると思います)。これでは独立したコンテンツとは言えないのでarticleは使いにくいですね。sectionで囲うべきです。
これが仮に「株式会社○○の会社概要」というような、親セクションに捕捉されずとも成立するようなタイトルの付け方であれば、それは(単体でも成立するため)articleでもいいと思います。それにあんまり意味はありませんが…。
レイアウト
通常articleはそのページのメインコンテンツです。メインだとわかる位置に置くのがふさわしいと思います。
TOPページや一覧ページにある記事の一覧はどうでしょう。これらは、いずれもそのページのメインコンテンツであり、紛れもなく記事ではあるのですが、「続きはこちら」などで内容が断片化しているため「独立している」とは言えない気もします。この辺正直なところwebcre8も結論が出せていないのですが、現時点ではこの断片的なコンテンツの塊を「記事」として考えています。
記事ではない、という考え方の例として以下の記事を挙げておきます。
これを読むと「記事リストの一つ一つは記事ではない」という気もしてきますし、「いや記事だ」と言われればそんな気もしてます。中途半端で恐縮ですがこれはみなさんもこれを記事だと思うか思わないか考えてマークアップして欲しいと思います。大本営のお達しがあればまあそういうもんかなと従うことが出来る気はしてますｗ
一応記事一覧の抜粋がarticleであるという私見を述べると、RSS等でも全文配信と一部配信は同様のものとして扱われています。且つ、表示上はリンク先以降に続きが書かれているとは言え、その意味が変わるわけではありません。これが記事でないのならページングされた記事もarticleではないことになるのでは、と思います。
この辺りご指摘頂けると助かります！
親コンテンツと関係性の薄いコンテンツ
その位置に置きたい要素ではあるものの、文脈に沿っているわけではなく、その位置に置かなくてもいいようなコンテンツです。
記事のコンテンツを省略しています。asideの配置
コード
<html>
<head>
<title>Web Service</title>
</head>
<body>
<header>
<h1>Web Service</h1>
<p>早い安いうまいのWeb Serviceです。</p>
</header>
<nav>
<ul>
<li><a href="about.html">サービスの特徴</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
<article>
<h1>Web Serviceの特徴</h1>
<section>
<h1>特徴1：早い</h1>
<p>とにかく早いです。</p>
</section>
<section>
<h1>特徴2：安い</h1>
<p>圧倒的価格を実現しました。</p>
</section>
<section>
<h1>特徴3：うまい</h1>
<p>値段にしてはうまいです。</p>
</section>
</article>
<div>
<aside>
広告等
</aside>
<aside>
カテゴリ一覧など
</aside>
</div>
<footer>
<address>お問い合わせ：[email protected]</address>
<p><small>© 2012 WEBCRE8.jp</small></p>
</footer>
</body>
</html>
アウトライン
独自の内容を持っているのでセクショニング・コンテンツになりますが、特にタイトルを付ける必要はないです。タイトルのないセクショニング・コンテンツです。
コンテキスト
それが置かれているページ自体とは内容的に関連性の薄いものを置く場合はasideです。広告、外部サービスのウィジェット等が考えられますね。これにタイトルがあるかどうかは別で、あってもなくてもいいです。
注釈、脚注などにも使えるとされています。これは注釈が必ずしも文章のその場所になくてもいいからです。例えば、ある用語の説明にそこに置こうと思った文脈から独立した説明は、そこに置かずその記事の末尾に移したとしても無理なく読めます。
サイドバーに置かれるようなコンテンツはページ自体(body)にとってのasideです。カテゴリ一覧、Twitterのウィジェットなどはサイドバーに置く場合もあるし、フッタにあったりします。それがどの位置にあってもあまり意味が変わりませんよね。順番も関係ありません。
レイアウト
どこにでも置くことができます。大抵、PCサイトの場合はサイドバーとしてdivで一つにまとめられたり、フッタにまとめられたりしています。記事本文で使う場合は大抵そのセクションの最後に配置します。どうしてもその場所に置かないと意味が通じないような書き方になっている場合はasideではない可能性が高いです。
ちょっと長めのまとめ
いかがだったでしょうか。よくブログなんかは見てるけど、実務でHTML5を使ってコンテンツを作る場合にどうやったらいいのかわからない…そう言う人は、ページのパーツがそのページ、サイトにとってどういう役割を持っているのか、そう言う風に考えてみると考え方がわかってくるかと思います。webサイトのパーツは同じ見た目や機能を持っていても、ページの見せ方や設計思想によって、全く役割が変わってきます。見た目は所詮CSSで変わってしまいますよね…。
そもそも見た目に左右されるべきではないと言うよりも、設計側は見た目によってもそのパーツの意味を暗黙的に伝えるべきで、見た目によってユーザの捉え方に齟齬が発生するということは、そのUI設計が間違っていることになります。
今はまだHTML5(と言うよりHTML4のころからあったルールすら把握していない人の作ったサイトも当然沢山あります)を正確に理解せず使っている人も決して少なくないはずです。webcre8も日々、自分の過去のマークアップの間違いと戦っていますし、今後もそれは続くでしょうw 良く使われている表現を真似せずに、自分で制作しているサイトのUI、情報設計を掘り下げてみれば、自ずと使うべきタグを選べるのではないかなと思っています。
マークアップはコンテキスト次第
ここにある文章は私見を多く含みます。ですがwebcre8は「マークアップはコンテキスト次第」であると思っています。その為論理や前提知識が間違っている場合を除けば、これは立派にガイドラインとして成立しているのではないかと考えています。あくまで解釈の一つではありますが、この記事が制作者の皆さんの迷いを少しでも晴らしてくれることを願っています★
HTML5入門について
HTML5の入門の助けになる記事を書いていきます
今後もWEBCRE8.jpでは「HTML5入門」と言う事で、いくつか記事を書いていきます。webcre8自身、普段作っているのはwebサイトかブログだけなんですが、近いうちにwebアプリも守備範囲に入れ、webアプリならではのインターフェイスについても考えていきたいと思っています。でもこうして使い方ではなく考え方から入っていけば(変なデファクトスタンダードを除けば)、作るものが変わっても、これら自分で出した結論がそのまま役に立つはずだと思っています。