--- title: 正しいマークアップとはなんなのか? tags: HTML HTML5 author: momoogles slide: false --- ## はじめに 本文章は、来年からマークアップを教えることになるMoが、「なぜ正しくマークアップする必要があるのか?」「そもそも正しいマークアップとは何を基準としているのか?」ということを再考するために書いたものです。 ## マークアップとは? マークアップとは端的に言えば、テキストやその構造を与えることをいう。広く使われているマークアップ言語はHTMLとXMLで、web開発をしているとどちらも目にかかるものである。 例えば、HTMLでは以下のようにマークアップする。 ```html My Awsome Page

Hello World!

I am Mo! I like Dogs!

Where I live

I live in a small city in Tokyo!

``` これはブラウザで以下のように表示される。 スクリーンショット 2019-12-23 11.44.58.png ``タグの中の``タグ内の記述がページタイトルになっていたり、`<body>`タグの`<h>`タグ内の記述が強調されていたりと、なんとなく文書構造が出来上がっていることがわかる。 ## なぜマークアップが必要なのか? 先の例を見ると、果たしてこの手続きが必要なのかという疑問にぶつかる。 `head`タグ内の記述はブラウザの表示の都合上必要であるにせよ、`<body>`タグ内の記述に関して、いちいち`div`タグを使うのか、`p`タグを使うのか...,`span`タグを使うのか,`h`タグを使うのか...,と頭を悩ませる必要はあるのだろうか? 特に、太字にしたり行間を整えたりなんていう視覚上の効果は、cssでスタイルを当てる方が幅も効くし、質も上がるし、そんなに難しい作業ではない。では、マークアップする意味はなんなのだろうか? 以下文章では、HTMLの開発コミュニティの一つであるWHATWGが作成した[HTML standard](https://html.spec.whatwg.org/multipage/) のみに準じて、HTMLの仕様を見ることでマークアップの必要性を考えることとする。 ### セマンティクス(Semantics) マークアップの必要性はセマンティクスを与えられるとい点にある。 >Because HTML conveys meaning, rather than presentation, the same page can also be used by a small browser on a mobile phone, without any change to the page. Instead of headings being in large letters as on the desktop, for example, the browser on the mobile phone might use the same size text for the whole page, but with the headings in bold.... >HTMLは見栄えよりもむしろ意味を伝えるため、ページを一切変更することなく、同じページが携帯電話上のスモールブラウザーによっても使用できる。たとえば、デスクトップと同様に大きな文字である見出しの代わりに、携帯電話のブラウザーは、ページ全体で同じサイズのテキストを使用するが、太字の見出しを持つかもしれない。 ここで語られているのは、HTMLの要素や属性に備わっているセマンティクスによって生み出される、文章の構成の共通性である。 ある一つのWebページを作成しても、利用するユーザーがどのようなインターフェースを通じてそのページの情報を得ているかはわからない。たとえPCやタブレット用にスタイルが当てられていたとしても、ガラケーやスマートフォンでページを見ている人にはそのスタイルは伝わらない。ましてや、もし目の不自由なユーザーがいたらスタイルなんてわかるはずもない。HTMLはこうしたことを解決するために、文章に最低限の意味を持たせてくれるらしい。 #### nav要素 実際にセマンティクスがどう機能していくのかを見ていくためにnav要素の例を見てみる。 続く(後日作成します)... ## まとめ HTML Standard で割と難しい話が展開してるのでゆっくりと全文を読んで仕様をもっと理解していきたいと思いました。とりあえず何が言いたかったというと、HTMLは仕様を活かせるようにマークアップすればいいわけだということです。仕様を理解してもいないのにそれらしいようにマークアップするのは無駄にコストのかかることだし、教える側になった時に、仕様を教えずに、これはこういう決まりだからと教えるのも無駄なので、それを意識できればいいなと思いました。