WEBCRE8.jp > 考える > [HTML5]文を書くのも上手くなる！セクショニングを理解する

[HTML5]文を書くのも上手くなる！セクショニングを理解する

この記事は約12分ぐらいで読めます

HTML5を用いたマークアップの特徴の一つ、セクショニング。「文書構造を明確にする」と言う事には一体どんな意味があるのか。これについて考えてみました。

セマンティックWeb

セマンティックWebとは、web上のデータをコンピュータがちゃんと理解できるようにすることを目指したもので、例えばHTML5で新しく追加された要素やMicrodata等はそれに貢献するものとされています。

人の思考を人、マシン双方に同じように理解させる

webcre8はまだまだ不勉強なところもありますが、HTML5の学習を進めるとともに、このセマンティックWebについて深く興味を持っています。それを通じて学んだことや考えたことはこのブログに残していこうと思います。ご指摘などありましたらブログのコメント欄や@webcre8の方にご連絡頂ければと思います！

セクショニングの立ち位置

HTML5にはセクショニングと言う概念が存在します。文書構造を明確にする考え方のことで、要素としてはセクショニング・コンテンツやヘッディング・コンテンツに分類されている要素がそのマークアップ上の役割を担っており、これらの要素を用いてセクショニングすることで、文書は正しいアウトラインを得ます。これについては過去記事の[HTML5]アウトラインで迷わない！ sectionと見出しについてをお読み頂ければと思います。ある程度勉強したけどsectionとかarticleの使い分けがイマイチ…と言う方向けです。

文書構造と言う考え方はもちろんHTML5以前にもあったわけですが、これをタグ付けしてセクショニングを明確に行おうと言う訳です。

これは「普通に文書を読む人間にとって内容を理解しやすくするものであるとともに、コンピュータでも理解できる文書構造を作ろう」というセマンティックなwebの考え方とも合致するものでもあります。

以下の記事はHTML5以前の文書構造について書かれた記事です。おなじみWebデザインレシピさんですね。

論理的なHTML（文書構造）を意識してつくるWebデザイン（CSS）… とSEO

セクショニングされている必要はあるのか

では実際、そんなことをする必要はあるのでしょうか。正しく文書構造を理解できるように書く…実際のところ、文章を正しくタグ付けしなくとも書けば文章は読めますし、最近は何もしなくてもグーグルにインデックスされたりします。それをすることに時間を割いたり、出来る人間にお金を払ってやってもらったりすることにどんな意味があるんでしょうか？

とりあえずSEO

今現在この「セマンティックなマークアップをする」と言う事についてweb制作者やそれらを使う人間の前にぶら下げられているアメは「検索エンジンにクロールされ、正しく評価される」、つまりSEOです。

セクショニングを正しくすることはそれの一部です。

今SEOは「マシンの癖を把握してコンテンツの評価を他より上げる技術」というようなものから「コンテンツが確かに利用者の目的に合っていることをいち早く伝える技術」へと、本来あるべき姿になっていこうとしています。「利用者のニーズに誠実に答えること」もしくは「新たな利用者のニーズを生みだすであろうこと」以外が評価になってはいけないのです。

文書を正しくセクショニングすると言うことは、この文書が何について書かれているのかを検索エンジンに伝えることに一役買っていると考えられますし、今後もより重視されるでしょう。

技術の物差し

webと言うもののビジネスにおいての位置は常に高まり続けています。ビジネスのインフラとして、またそのビジネス自体がwebに関するものであったり、更にそれを取り巻くコミュニケーション自体がwebを介して行われたりしています。

そんななか、そのビジネスの顔となるwebサイトの構文がめちゃくちゃだったり正しくない情報を伝えていたりすると言うのは、現実で言うなら「見栄えの良い自社ビルが耐震構造はガタガタ」であるとか、「受付係が会社の説明をまともに出来なかったり不在だったりする」と言う事になると思います(まあ実際はそこまで重視されてはいないでしょうが)。「こんなに分かりづらい会社案内を置いている会社の技術者やデザイナはちゃんと利用者に優しいプロダクトを作れるのだろうか」と思われる可能性だってありますよね。

つまり正しいマークアップが出来ているかと言うことは、会社自体の評価に繋がるのはもちろんのこと、技術者はその会社から出ても自分の技術を誇れるか、しっかり評価されるかという部分にも繋がるわけです。アメ職人は本人がどんなアメの味の好みをしてても構いませんが、それとは別に「誰もが美味しいと思うアメ」がなんなのかを知っててくれている方が信頼できますよね。

セクショニングはこの全てではありませんが、論理的にマークアップできているかと言う事に関係があると思います。

この辺、自分のブログの事を言ってるのかとか言われそうですが…ｗこのブログは6月まで改装しながら営業しているブログです。それで良ければ見てやってください＞＜

そしてそれだけではなく…

webcre8自身が特に感じている正しくセクショニングすること自体の意味は作成者が、文書が読み手にとって理解のしやすい文脈で書けているかを常に意識しながら制作できることだと思います。

セクショニングの意味

ここからマークアップにおけるセクショニングと、マークアップではなく文を書くという事自体の持つセクショニングの意味について書いていきます。

例として、りんごの美味しさについて語った長ーい文章があるとします。その文は長すぎて、こうやって最初に「りんごの美味しさについて語った文」ですよと言われれなければどういう事が書いてあるかが判断できません。セクションも何もないただの文は、読んでみるまで中身が分からないわけです。

今回の記事ではセクショニングを暗黙のセクションで行っている場合のマークアップをもとに解説しています。sectionタグを用いて明示的にセクショニングした方がより汎用性は高いです。それについても[HTML5]アウトラインで迷わない！ sectionと見出しについてで解説済みです。

タイトル

セクション直下の文章がそれぞれのセクションの内容になる

人間ならそういった文章を見たとき、まず目についた単語や文書内に置かれた画像等でこれが自分にとって価値のある文章なのかを判断しますよね。もちろん著者の名前が目につけばそれで興味を持つ場合もありますね。

それをしなくても(出来なくても)、一番最初に文章の趣旨を明確にしてくれるのは文章のタイトルであり、それは例文では「りんごの美味しさについて語った文」と言うようなものです。

HTML5ではタイトルは普通h1要素でマークアップされます。

ここで言うタイトルとは単にページ自体のタイトルとは限らず、記事や単一ページがページ内に複数ある場合はそれぞれのタイトルの事を指します。ブログ等の記事一覧ページ、JavaScriptを用いたスクロール等で複数のページを一つのページで見せる等の場合ですね。

タイトル直属の段落(序文、概要等)

タイトルに続いて、文章は冒頭の部分で大まかに内容を説明するかもしれません。それはつまりその文の「概要」や「要旨」です。ここでも読む側は文章が読む価値のあるものかどうか、その内容を判断できます。

タイトル直属の段落はマークアップ的には単に記事のタイトルの直後に書いてある段落と言うだけで、そのタイトル直属の文章として認識できます。

h1が属しているセクションに直に書かれているわけですから、それはその下のセクションに分類されるh2以下の文章より直接的にタイトルについて書いている文である筈ですね。

概要でない場合、この文がどういった見地から語られているか、これから本文を読む人にその内容のちょっとしたストーリーやキーワードを与えることで興味を持ってもらおうと言う導入になっていたりします。

りんごの文の例えで言うなら、「りんごは美味しいですが、そのおいしさはどのように構成されているのでしょうか。解説しましょう」「ハーイ！林檎食べてますか？今日私は朝食で丸ごと食べたのですが…～」と言ったような文です。

また、meta要素のdescriptionで書かれていたりするものもその文書の概要であり、同じ役割を果たしていると言えます。その考えからWEBCRE8.jpではタイトル直下の文を概要として用いています。

見出しと以下の文章

ここで言う見出しとは、「h1＝タイトル」とした場合のh2のことです。ちなみにWEBCRE8.jpではこれに通し番号を振り、目次でリンクを張っています。

h2以下で書かれていることは話のメインの流れです。なので見出しを拾っていけば自ずと文書全体が伝えたい事が分かるようになっており、そうでなければならないでしょう。

りんごの文の例えで言うなら、見出しはりんごのおいしさの理由一つ一つを説明する大枠のタイトルであったり、文全体の流れの大きな段落の塊に名前をつけたものです。「りんごのおいしさのヒミツ1」や「りんごが本当においしい時期は」など、タイトルの「りんごの美味しさについて語った文」に直接関係した内容であることが望まれます。

仮に「りんごの美味しさについて語った文」と直接関係のない見出しをh2の階層の見出しとしてつけた場合(<h2>椎名林檎の命名の秘密</h2>、だとか)、この文の「りんごの美味しさについて語った文」としての純度は下がります。反対に、文書全体において椎名林檎についての文章に重きを置くのであれば、この文にタイトルとして「りんごの美味しさについて語った文」とつけるのは間違っているかもしれません。「りんごについての雑談」なんてタイトルが相応しいかもしれないですねｗ

つまり、アウトラインに於ける階層の深さと言うものはそのセクションの、タイトルが掲げる主題に対しての遠さも表しているわけです。

小見出しとそれ以下の文章

h3～h6以降の小見出しとそれ以下の文章はその前のh2以下の文章から分岐、またはそれに従属した文章であり、内容の枝葉です。細密に内容を伝える為にはなくてはなりませんが、短くしてくれと言われれば端折れる部分です。

挿入される参照コンテンツ

[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)でも説明した挿しコンテンツとも言うべき要素は、それの置かれたセクションから参照されながらも、なくても成立するものです。h3以降は枝葉と言いつつも、その小見出しを置いてある以上本文の一部ではあります。挿しコンテンツはそうでなく、あくまでそれの属するセクションを修飾する要素です。

例文で言うならこれは「りんごの今年の出荷量の表」や「美味しそうなりんごの写真」などになるでしょう。

属するセクションの内容に直接関係のないセクション

そのセクションに含まれるものの、文の流れから分離されているセクションはasideでマークアップされます。これはh2から始まるセクション内にあるh3以下のセクションと違い、本文の流れから分離した内容のものが入ります。

例文で言うなら「りんごの有名な産地、青森」等の、付け加えておきたいけど本文の流れから逸れる話題です。前述の記事にも書いた通り、同じ内容の文だったとしても、書き手が重視しているかどうかによってその文章の文書全体における立ち位置は変わります。

まとめ：HTML5を意識することで人からも理解しやすい文章が書ける

こうした文章の流れの理解から、話の終点まで読者をしっかり導く論理的な文章が作れるのではないかと思います。

こんな感じではありますが、恐縮ながらwebcre8自身も文章が読み進めやすいと言うお褒めの言葉をもらうことがあります。そう思ってもらえる理由を考えると、そのひとつにはこの「文書構造に対する意識」というものが一役買っているのでは？と思っているわけです。セクショニングを意識すれば、どれだけ話が枝葉に分岐しても、元々言いたいメインの内容に話が戻ってきます。

つまりセクショニングを意識すると言う事は、何もHTML5を使って構文すると言う事のみならず、機械だけでなく本来読んで欲しい人間にも言いたいことを混乱しないように分かりやすく伝えることに繋がっているわけです。セクショニングは、そのガイドラインと言うわけなのです。