HTMLからウェブサイトのあり方を見直す。

この記事はGEEK Inc. Advent Calendar 2017の15日目の記事となります。

初日でも書きましたマークアップエンジニアと1歳9ヶ月(更新)の父をやっている大山です。

今回は自分の方で皆さんに改めて伝えたいと思った「HTML」についてをお話していこうと思います。よろしくお願いします。

そもそもHTMLとは何なのか?

みなさんはHTMLってそもそも文書として扱われているもの、ということをご存知でしたでしょうか?

原点に戻ってみて、HTMLとは一体なんなのかを考えてみましょうか。検索してみると、

「ハイパー・テキスト・マークアップ・ランゲージ」

というのがわかるとは思いますが、結局なんのこっちゃとなりますがもう一度見直してみましょう。

「ハイパーテキスト」

そう、すんごいテキストなのです。すんごいテキストをマークアップしてる言語なのです(?)。

元々は科学文書などを世界的に共有するためにつくられたものではありましたが、W3Cやブラウザ開発している会社などによりHTMLは進歩を遂げ、いわゆるWebアプリやブラウザゲームなど、様々なことができるものとして認知されてきました。

しかし、そうした進化を重ねてきたHTMLであったとしても、結局のところ、HTMLは文書ファイルであるという事実は何ら変わっておりません。

我々は普段ネットをブラウジングしていて何を見ているのかというとHTMLを見ています
厳密に分類すればphpやJSなどのサーバーサイド側で解釈してHTMLとして出力するのもありますが、それはともかくHTMLを見ています

見ている内容は人それぞれ、いろんなものがあるでしょう。
ブログ、ニュース、キュレーションサイト、動画、SNS…などなど。興味の幅や種類というものが各々違ってはいると思いますが、共通して言えることはマークアップされたHTML文書を皆が閲覧しているということです。

 

きれいなマークアップとは正しい文章を書くこと

次にHTML文書の中身を見ていきましょう。

HTMLはheadと呼ばれるメタ要素、ここでは「文書のタイトルや説明」についてがあたるもの、とbodyと呼ばれる文書の「本文」にあたるものから成り立っています。

headはあくまでもその文書が何かを指し示すものでここではあまり重要ではないのですが、本文にあたるbodyには様々なタグ、いわゆる文書を構成するために必要なパーツがあります。

文書を構成するパーツは見出し(h1,h2,h3…)強調分(strong)引用文(blockquote)セクショニング(section)段落(p)水平線(hr)改行(br)画像(img)、そしてリンク要素(a)など。

参考:http://www.htmq.com/HTML5/

このパーツたちを見て、なにやら既視感みたいなものを感じるかもしれませんが、社会人や大学生だったら普段よく目にするMicrosoft Wordといった文書作成ツールが持つものと同じ要素で出来ております。そう考えるとHTMLというものにより親近感が湧いてはこないでしょうか?(湧かなければそれはそれで大丈夫です)

そうしたことを踏まえて、マークアップエンジニアの私が常々思うことは、HTMLを綺麗に書けるかどうかは文章をしっかりと書ける技術があるかどうかではないかということです。

もちろんただ相手に理解できればいいということで文書体系みたいなのを考えなくてもよいことはあるかもしれません。ですが、どういった相手でも・どんな状況下でも伝わる、共有し合えるものを作るためには、体系を学び・どういった構成をすべきなのかを実現させるほかありません。

HTMLには正しくマークアップできたかを調べるバリデーターがあり、マークアップに従事している人ならば品質チェックとして必ずチェックするものかと思います。この工程は正しい文書を実現させる上で必要な校閲作業と似たものだと思ってください。

正しくマークアップできていればそのサイトやページは文書としてルールを遵守できたページと担保されます。逆にエラーや警告が残念ながら出てしまう場合は、ルールを見直してしっかりと校閲していく必要があります。

我々マークアップエンジニアは、人間やブラウザ(マシン)が、きちんと理解できるような文書を作り出せることをモットーに日々頑張っております。

 

サイトの文書構造を理解する一番いい方法

これは簡単なことで、適応しているスタイルCSSを外すと分かりやすいと思います。要は素の状態のHTMLを見る。
ChromeのエクステンションでCSSを無効化にするものもありますのでこれを使ってみましょう。

https://chrome.google.com/webstore/detail/css%E7%84%A1%E5%8A%B9%E5%8C%96%E3%81%8F%E3%82%93/locapbphgfloicmncpgmjnglfepfjfbm?hl=ja

たとえば日経電子版のサイトに行って先程のエクステンションを作動させると…

このような感じで、装飾抜きのテキストと画像のみの状態になります。

この時に皆さんにしていただきたいのが、普段見ているサイトはいったいどういった順番でパーツが並べられているのか、ナビゲーションとして機能していたものも装飾を外すとこのような内容になっていたのか等、HTML文書としてどのような構造・骨組みとなっているかです。

気になるあのサイトのCSSをとっぱらって骨組みだけにしたら…いったいどうなるでしょうか?ここからはあなたの目でたしかめてみてください。

 

「クソ酷いウェブサイト」が教えてくれること

今年5月くらいに注目が集まった「クソ酷いウェブサイト」についてを皆さんはしっていますでしょうか。

このサイトはJavaScript・jQueryやCSSでの装飾、その他ソーシャルウェジェットや大きな画像も使うことなく、ただHTMLでのセマンティックなマークアップだけで表現された何の変哲もないウェブサイトです。

内容や言いたいことはサイト全文を参照してくれればいいのですが、私はまさにこれこそが本質的なHTMLなのではないかと感じます。何故ならば、

  • どの端末化でも認識できる
  • どういった内容であるかが分かりやすい
  • セマンティックな構成ができている
  • 「ページ」としての機能を果たしている

といった要件を満たしているからです。

誤解なきように伝えると、このサイトのようなことを皆が目指してほしいという訳ではないです。ただ、ユーザの希望しない過剰な装飾・ウェジェットを大量に貼っていたりするならば、ここから学ぶべきこと・考え直してみることは大いにあるのではないでしょうか。

 

おわりに

色々と書きましたが、自分のHTMLの書き方が誰がどう見ても・機械判定としても100%の判定のものを必ず書けているわけではないです(保険みたいな書き方ですみません)。

ただ、その判定や点数といったものを日々上げていけるよう知識のアップデートや書き方の見直しなどを試行錯誤している次第であります。
当たり前の話ではありますが、今までも・これからもきちんとしたマークアップをしていきたい所存であります。

フロントエンド界隈では、様々な技術や設計思想が跋扈して繁栄と同時に混沌をも極めております。
ですがそうした中だからこそ今一度初心にもどって、我々はインターネットを通じていつも何を見ているのか、そして我々ウェブ業界で生きるものたちは何を見てこの世界にやってきたのかを改めて見つめ直すことを忘れてはいけないような気がしてなりません。

 

「HTMLとは何なのだ?」

「それは誰のためのものなのか?」

「そして私たちはそれとどう付き合っていくべきなのか?」

 

ーーー 願わくば、幸せなインターネットを。

 

ここまでご覧いただきありがとうございました。

次回(12/18)はJavaScript大好きエンジニア、純さんになります。→ 記事リンク
残りわずかですが、引き続きよろしくお願いします。

投稿者プロフィール

ooyama
ooyama
マークアップデベロッパ。1児の父親だそうです。
このエントリーをはてなブックマークに追加
はてなブックマーク - HTMLからウェブサイトのあり方を見直す。
Facebook にシェア
[`evernote` not found]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です