HTML5のセマンティックマークアップを簡単にまとめる。
今日こそ簡単にまとめる!
よく質問を受けることがあるので、まとめておく。
まず、質問が多い理由としては、ググってもよくわからん!っていうのが多い。私も過去何度ググったかわからない。その都度自分の言葉で説明する方法を模索していたんだが、ようやくまとまった気がするので、まとめた。
では、早速だが例え話だ。
飯屋に行って飯を食う!
簡単な例えだ。
だが僕らは知っている。
腹減った人が、ふらっとお店に入り、注文したら料理が出てくる。
その裏で
この一見当たり前に見えることが、いろんなシステムに支えられてできているってことを知っている。
素材の生産・配送、そして調理に到るまで手法が確立し、様々な人や企業がその間に存在する。
セマンティックというのはこれだ。
料理が目の前に出されてただ食べるっていう表面的なことを考えるだけならば、そもそもセマンティックという概念は必要ない。
全部、div で作っちゃえばいいじゃん!
となる。
食事するときに、いちいち生産者のことやその工程、配送なんかについてほとんど考えることがないのはそれだ。もちろん考えたとしても、それをだいたいこんな感じだろうという背景知識から推察するくらいで、検証画面でコードをチェックしながら Web ページを見る人がいないのと同じで、調べれば分かるだろうが調べない。
だが、マークアップエンジニアはこの裏の過程について知らなければならない。
どういう素材をどういうルートでお届けして、どう消費者に提供するのかということを。
それが結果としてユーザーに対してより良い体験を提供できるということになる。
Google を始めとした検索エンジンはユーザーを案内する。その際、この裏の過程がルールづけられきちんと運用されていれば、より的確にユーザーを案内することができる。これがいわゆる SEO である。
一般に言われているように Google 様のご機嫌とりに SEO をしているのではない。双方が歩み寄ることにより、より良い体験をユーザーに届けることができるということだ。
マークアップエンジニアは一見するとユーザーに提供する調理だけを担当しているように見えているが、実はそうではないということだ。
デザインといった見た目でちやほやされることも多いし、見た目ができると達成感もあるので注意しなければならない。
Google 様のためにセマンティックはあるのではない、ユーザーの ためにあるのだ。