最近のWEB制作事情について思う事：デファクトスタンダードやHTML5使用法
2019年11月15日
最近はWEB制作より映像制作が仕事としては多めに行ってきた。WEB制作は10年以上前からやってきているが、最近感じていることはWEB制作の大きなデファクトスタンダードの変革がようやくやや落ち着いてきたように思えたことだが、WEB制作から離れているとなかなか時流がつかみにくく思えてしまう。
WEB制作のデファクトスタンダードの変革、というのは今までも何度かあったが、振り返ってみると大体下記のようにまとめられると思う。
・CSSの導入 2000年代後半くらい
・CMSの導入 2010年前後くらい
・HTML5、CSS3の導入 2010年代前半くらい
・レスポンシブデザインの導入 2015年前後くらい
・モバイルファーストが現実になる 2010年代後半くらい
・SEO対策上、コンテンツファーストの設計が必須になる 2010年代後半くらい
こうしてみるとApple（スティーブ・ジョブズ）が世にはなったiPhoneとiPadがWEB制作現場のデファクトスタンダードにいかに大きな影響を及ぼしたかわかる。
（完全な私感だがApple Watchは、多分今後WEB制作現場にはあまり影響しないと思う。医療系アプリ分野ではかなり活躍しそうではある。）
後はSEOに関係するGoogleのポリシーがコンテンツファーストに遷移したことが大きい。
検索エンジンがコンテンツの内容を正確に判断し、ユーザーのニーズに合った、精度の高いインデックスを作成できるようになった、ということだと思う。
HTML5の正確な使用法に関しては今でも調べることがある
そんななかでHTML5のタグの使用法に関しては、今でも整理できてない部分がある。
言い訳みたいに聞こえるかもしれないが、特に分かりにくいsectionとarticleの策定は最初はかなり漠然としていたようでググってみると色んな使用法の意見が検索される。HTML5の策定は2014年くらいに終わっているらしいので、それ以前の記事はあまり信憑性がないのかもしれない。
wikipediaの記事を引っ張ってきた。
To better organize independent content
<section>tags can be nested inside<article>tags:<article> <h2>Names of Shapes</h2> <p>There are several different types of shapes...</p> <section> <h4>Triangles</h4> <p>Here is some info about triangles</p> </section> <section> <h4>Circles</h4> <p>These Pi-shaped wonders are mesmerizing and...</p> </section> </article>Conversely, it may sometime be appropriate to nest an
<article>element inside a<section>element. For example, in a web page containing several articles on varying subjects:<section> <h1>Articles about Paris Tourism</h1> <article> <h3>The Eiffel Tower</h3> <p>Standing at over 12 inches high...</p> </article> <article> <h3>The Louvre</h3> <p>A must-see in Paris tourism...</p> </article> </section>
両方ともほとんど同じ構文だが、下記の方はsection要素直下にpタグが存在しない。
コンテンツになり得る、文章のボックス要素が直下にない場合、sectionを使った方が良い、ということだと思う。
逆に、上記のsectionでマークアップされている部分は、articleでマークアップしても良いように思う。実際の文章量やサイト構成によって柔軟に変える必要がある部分ではあるが。
例えばボックス要素の中にpタグがあっても、そのボックスがリストのようにデザインされていたら、そのボックスはarticleよりsectionの方が合っているかもしれない。
いまだに使いどころの判断が難しいタグである。
median.weblike.jp
