HTMLのアウトライン
はじめに
普段HTMLを書く時、アウトラインを意識していますか？
私は、仕事で書くことがあるのですが一切気にしたことがありませんでした…。
自己紹介
私は今現在、卸小売業の小さな会社でECの担当として働いております。 今の会社に入社する前まではコールセンターや事務といった仕事をしていました。
でも年半ばで、ものを作る仕事に就きたいと思うようになり、WEBデザイナーという肩書きに憧れ(笑)、HTML、CSS、Photoshop、Illustratorを学んだ後、今の会社にご縁があって入社しました。
とても小さな会社で、WEB制作とはまるで無縁の会社ではあるのですが、自社のサイトと大手のモールで商品を売っているので、商品の登録やら画像加工といった事をしています。
ECを担当している直の上司が唯一一人いるのですが、その人も私と同じくらいのスキルの方で、本当なら制作会社に入社したかったであろう私を気遣い、あるモールのサイトのリニューアルを任せてくれたり、LPを制作させてくれたりと、本来なら任せてもらえないであろう事をさせてもらえたので、個人的には本当にラッキーといった感じでした。
ただ、導いてくれる人がいないのです…。上司もコードがそんなに書けないので。 それ以外の人は基本パソコンが苦手という方々しかいないのです。 大手では考えられないと思います。それが小さな会社のミラクルなところ。
なので、色々調べました。勉強したことを復習しながらゆっくりとコードを書く日々。 自社なので期限をあまり気にしなくてもいいというところもありがたかった。 ちょっと気難しいところのある上司ではあるのですが、本当に私はラッキーだと思います。
ただ、また言っちゃいますけど、導いてくれる人がいない…。独走状態です。
そうなるとどうなったか。
- とりあえず何でもdivで囲む。
- とりあえずaタグでdivを囲む。
- とりあえず動いているから、これでいいか。（これ以上直せない…！！ ）
(三拍子のまとまりの悪さよ…他にも色々…)
「とりあえず」独走状態です。
何ならフォトショも切り抜き下手〜
jQueryで動きを入れたくてちょっとコードを勉強した時に、コード書くの楽しい♪と思うようになって、気がついたらJavaScriptを少し勉強するようになって、その内バックエンドに興味を持つようになり、気がついたらRubyとRailsを勉強するようになってました。現時点での私がここです。
本題のアウトラインとは
で、話は戻って。
今の加入しているコミュニティでHTMLとCSSのプラクティスがあったときに、HTMLのアウトラインを知りました。
アウトラインとは…
- 文書の階層（ツリー）構造
- ブラウザがどの文章の区切りかを見極める非常に大事なもの。
書き方としては方法は２つ
- hタグのhレベルでアウトラインを作る。
article、section、asideなどのブロックの階層構造でアウトラインを作る。
例えばドラえもんのサブキャラをツリー構造にしてみると以下のようになります。
- ドラえもんサブキャラ
- のび太
- 性格：怠け者
- 特技：昼寝
- ジャイアン
- 性格：凶暴
- 特技：歌
ツリー構造は「の」を付けて矛盾しないで成立すること。
ドラえもんサブキャラの、のび太 のび太の性格 のび太の特技
ツリー構造をhタグとブロックでそれぞれ書いてみると以下のようになります。 まずはhタグから。
hタグ
<article> <h1>ドラえもんサブキャラ</h1> <h2>のび太</h2> <h3>性格</h3> <p>怠け者</p> <h3>特技</h3> <p>昼寝</p> <h2>ジャイアン</h2> <h3>性格</h3> <p>凶暴</p> <h3>特技</h3> <p>歌</p> </article>
hタグで書いた場合、ブラウザには以下のように解釈されます。
<article> <h1>ドラえもんサブキャラ</h1> <section> <h2>のび太</h2> <section> <h3>性格</h3> <p>怠け者</p> </section> <section> <h3>特技</h3> <p>昼寝</p> </section> </section> <section> <h2>ジャイアン</h2> <section> <h3>性格</h3> <p>凶暴</p> </section> <section> <h3>特技</h3> <p>歌</p> </section> </section> </article>
ブラウザは暗示的にsetionタグ生成してアウトラインを作ります。
一方、ブロックの階層構造に従い書いた場合、
ブロック
<article> <h1>ドラえもんサブキャラ</h1> <section> <h2>のび太</h2> <section> <h3>性格</h3> <p>怠け者</p> </section> <section> <h3>特技</h3> <p>歌</p> </section> </section> <section> <h2>ジャイアン</h2> <section> <h3>性格</h3> <p>凶暴</p> </section> <section> <h3>特技</h3> <p>歌</p> </section> </section> </article>
明示的に自分で section タグでブロックを区切り、section の入れ子構造を作って階層構造を表現します。
ブラウザは、書いたコードに対しsection= 章 区切りで解釈をしています。
全然知りませんでした。
他にも、
hタグ(見出し)の下には文章(pタグ）が必ずぶら下がる。hタグを連続(例えばh2にすぐh3)しても良い。その場合は下に文章(pタグ）続く。
これ全然わかってなくてコード書いてました….。
そして勉強していて気づいたのです。
ブラウザがsectionタグで自分のコードを解釈した時に、意図してるものと違う階層になってしまったとして、、SEOに多大なる影響を与えてるとしたら…一件の売り上げに左右される可能性があったとしたら！…アウトライン、大事じゃないか！？
そんな大事な事を疎かにしていたのか、自分…！
ということで、簡単まとめ
- アウトラインには暗示的と明示的な書き方がある。
- ブラウザは
sectionタグを使って章を区切って解釈している。
HTML、奥が深いですね。
今後少しづつ勉強した事をアップしていこうと思っています。 書いた内容が間違っていることもあるので公式サイトや他の方が書かれた記事も合わせて参考にして頂く事をお勧めします。 もし書いたことがその方にとって間違っていたら、責任も取れないし申し訳がないので。 （さして、あんまりネタもためていないですが。）
このブログにたどり着いたということは、同じコミュニティの方、もしくは相当困って相当調べた方だと思うのです。 私はPaizaの問題に挑戦していたとき、わからないことをとにかく調べに調べて、誰かに見られているなんて1mmも思っていないであろう、個人の方のgithubにたどり着いたことがあります（Paizaさんからお叱りを受けない事を祈るばかりです。）
なので、このブログに書かれている気になったキーワードを検索して、正しい答えに辿り着けたらいいのでは！という思いで、橋渡し？的にこれからブログを書いていこうと思います。
本来なら、今のコミュニティに参加した時から書き始めたら良かったのですが、正直後回しになってしまったのと、日記ではないので、読む方の心持ちを考えたいと思い、加入後100日目にして初投稿となりました。
さして読まれない前提で書いてるので大分饒舌です。
そんな、私が参加しているコミュニティは…
以後、お見知り置きを。
最後までお読み頂きありがとうございました。
