Progateが教えてくれない、マークアップの考え方
おまたせしました。「Progateが教えてくれないフロントエンドの基礎知識」シリーズ第二弾を投下します。今日はズバリ、「マークアップ」についてです。ProgateでHTMLの書き方を勉強した駆け出しの方に向けて、Web制作の現場で求められるマークアップの考え方を解説します。
HTMLを書く≠マークアップ
Progateを終了した方であればHTMLを書く事自体は特に難しいものではない、ということは理解していることと思います。
<h1>見出し</h1>
<p>段落</p>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>こんな感じですね。
ところで次のHTMLを見て、あなたは何か違和感を感じるでしょうか？
<div class="top-wrapper">
<div class="container">
<h1>LEARN TO CODE.</h1>
<h1>LEARN TO BE CREATIVE.</h1>
<p>◯◯◯◯はオンラインプログラミング学習サービスです。</p>
<p>リード文テキストが入ります。コンテンツの概要を説明しています。</p>
</div>
</div>何も違和感を感じないとしたら、あなたは「マークアップする」とはどういうことなのか？について、もう少し深く勉強する必要があります。
おそらくですが、Progateで初めてHTML/CSSに触れて、他に何も勉強していない人の場合、HTMLは書くけど、マークアップはできていないという状態に陥っている可能性が高いと思われます。
単に「HTMLを書く」ということと、「マークアップする」ということは、似ているようでイコールではありません。Progateでは初めてHTMLに触れる人に対してあまり難しいことを考えさせないように、本当の意味でのHTMLの役割、つまり「マークアップする」ということの本質についてはほとんど解説していません。コードに慣れる段階であればそれでも構わないのですが、これから本格的フロントエンドに関わっていこうとするのであれば、もう少しHTMLの持つ役割についてしっかりと理解をする必要があると思って下さい。
マークアップとは？
Web制作の世界におけるマークアップとは、ざっくり言うと
１．「タグ」という印を使って
２．コンピュータが正しく理解できるように
３．文書の情報構造を意味づけする
ということであると言えます。「タグ」という印を使う（決められた開始タグと終了タグでテキストを囲む）ということはマークアップするための「手段」であり、Progateが教えてくれるのはこの部分だけです。しかし、仕事でWebフロントエンドに携わるのであれば、「コンピュータが正しく理解できるように（目的）」「文書の情報構造を意味づけする（役割）」というマークアップすること自体の役割と目的をしっかり理解することが求められてきます。
セマンティックなマークアップを心がけよう
HTMLの持つ役割と目的を達成するために「セマンティック」という言葉がよく言われます。
「セマンティック（semantic）」とは「意味の、語義の、意味論の、意味的な」などと訳される形容詞であり、それ単体で意味を成すものではありませんが、Webフロントエンドの世界では「伝えたい情報構造に即して正しく意味づけされるように、適切なHTMLタグを用いてマークアップすること」の意味で使われています。何となくHTMLを書くのではなく、コンピュータにも正しく情報が伝わるように情報構造に合わせた適切なマークアップ（セマンティックなマークアップ）をするようにしよう、というものです。
セマンティックにするのは誰のため？
ところで、「でも実際誰もHTMLのソースコードなんか見ないし、CSSでどうにでも表現できるからいいじゃないか」と思ったりしませんか？
確かに、パソコンやスマホのブラウザを使って日々WebサイトやWebアプリを使っている一般の人にとって、HTMLがどのように書かれているかなんてハッキリ言って関係ない話です。でも、HTMLから情報を取得しているのは、人間だけではありません。
ブラウザや、検索エンジンのクローラーや、スクリーンリーダー（音声読み上げブラウザ）といった、コンピュータのプログラムがHTMLの内容を機械的に読み取って解釈し、情報を伝えるということが日々行われているのです。HTMLの役割の本質は、人だけでなくコンピュータに対しても情報を正しく伝えることであり、そのためには適切に意味づけされたセマンティックなマークアップが欠かせないのです。
マークアップする時に最低限意識して欲しいこと
人にも機械にも優しいセマンティックなマークアップするために、まず真っ先に意識して取り組んでもらいたいこと。それは、
「適切に見出し構造を作ること」
です。他のことは一旦後に回したとしても、とにかくコンテンツに対して適切な見出し構造をつけることに全力を注いで下さい。
うちのにゃんこ
うちのにゃんこさんたちのかわいい日常をちらっと紹介しちゃいます♪
●小町
性別：♀
年齢：7歳
毛色：黒
パパママ以外には基本誰にも懐かない超ビビリな性格な女の子。持病の猫喘息の影響でよくそこらじゅうで吐くのでひそかに「ゲロ町」とか言われたりもするけど、おめめくりくり、毛皮つやつやのかわいい奴です。
［小町の写真 キャプション：典型的箱入り娘の小町さん］
●小夏
性別：♀
年齢：6歳
毛色：白
短毛種なのになぜかフッカフカでモッフモフな毛皮を持ち、大型種でもないのに体重6kgオーバーの存在感ありまくりわがままボディな女の子。常にニャーニャースリスリゴロゴロしてかまって攻撃激しい甘えん坊さんです。
［小夏の写真 キャプション：子守もおまかせ小夏さん］
たとえばめっちゃシンプルな例として、上記のような文書をマークアップすることを考えてみましょう。
文書の見出し構造を考える時はまずh1から
HTMLの見出し要素はh1〜h6までの6段階が用意されています。h1が最上位レベルの見出し、すなわちそのコンテンツの主題（タイトル）となるものを表す最も重要な見出しとなりますので、まず何はなくともh1を見つけてください。先程の文書の場合、自分が飼っている2匹の猫ちゃんを紹介する文書ですので、当然冒頭にある「うちのにゃんこ」を最上位の見出しh1とするのが自然なのが分かりますね。
h2以下は情報の階層構造を意識する
さて、では他の見出しはどこにあるでしょうか？
Google先生で検索をすると、見出しとは次のように定義されています。
1. 新聞・雑誌の記事の標題など、それを一目見てそこの内容が分かるようにしたもの。
2.（検索のため）項目として示したもの。
HTML文書内の見出しについては前者の理解で良いと思います。要するにあるひとかたまりの情報に対して、その内容を端的に表した文言が見出しということになります。
今回の文書は「うちのにゃんこ」で2匹の猫を紹介する内容となっています。1匹目が小町、2匹目が小夏です。ということは、以下のような情報構造となっていると判断できます。
うちのにゃんこ
├「小町」についての内容
└「小夏」についての内容
「うちのにゃんこ」という見出しの下に、2つのコンテンツが並列でぶら下がって階層構造を作っています。このコンテンツの階層構造のことを「文書のアウトライン」と言います。アウトラインをコンピュータに伝えるために使うのが見出し要素です。したがって、上記のアウトライン構造をもった文書であることをHTMLで表現するためには、「小町」「小夏」の行をそれぞれh2見出し要素とすることになります。
h3以下もコンテンツに応じて同様の考え方で
今回のシンプルな文書ではh2までの階層構造しかありませんが、もっと本格的な文書であれば、h2見出しでまとめられたコンテンツの中を更に複数のコンテンツに分けて詳しく記述することもあるでしょう。その場合は、h2の次のレベルのh3を使って第三階層をつくり、その下はh4→h5→h6まで同様の考え方で必要に応じて文書のアウトライン構造を表現していきます。
（※実際のWebサイトではh5やh6まで使うことはあまり無いかと思います。そこまでコンテンツの階層構造が深くなるのは1ページの情報過多である可能性が高いので、適切に別ページに分割した方が良いと思います）
正確な見出し構造は正確な情報伝達につながる
正確な見出し構造が正しくマークアップされていると、それを頼りに機械的に文書の要約を作成したりすることが容易になります。また、目の見えない方が利用するスクリーンリーダーという支援技術の多くには「見出しジャンプ機能」というものがあり、見出しだけを拾い読みして読みたいところに素早くたどり着くことを可能にしてくれます。正しいマークアップは、誰でも欲しい情報にすばやくたどり着ける、「情報の取得のしやすさ＝アクセシビリティ」の向上に直結する非常に重要なものであることを是非理解してコーディングをするようにしましょう。（※アクセシビリティを向上させるためのマークアップについては本当はもっともっと奥が深いので、またの機会にでも解説したいと思います）
見出し要素以外も、要素のもつ「定義」から外れないように注意
今回は数あるHTML要素の中でも特にセマンティックにとって重要な見出し要素の考え方について詳しく解説してきましたが、その他の要素についてもそれぞれの要素の持つ「定義」から外れた使い方をしないように注意する必要があります。
HTML要素の定義は「箇条書き」とか「表組み」とか「段落」とかかなりざっくりした分類しかありませんので、正直に言うと文書内容を真の意味でセマンティックにするには程遠いのが現実ですが、それでも少なくともHTML要素で表現できる範囲内で正しく構造をマークアップしておくようにすることが、セマンティックWeb、アクセシビリティの向上といったWebサイトの品質を担保するための第一歩となるのです。
さいごに
さて、最後にここで冒頭にお見せしたコードをもう一度振り返ってみましょう。
<div class="top-wrapper">
<div class="container">
<h1>LEARN TO CODE.</h1>
<h1>LEARN TO BE CREATIVE.</h1>
<p>◯◯◯◯はオンラインプログラミング学習サービスです。</p>
<p>リード文テキストが入ります。コンテンツの概要を説明しています。</p>
</div>
</div>
どうですか？違和感感じませんか…？ 感じますよね……？
このコードを見て「おいおい、なんでやねん！」と感じられるようになったら、一人前のWebフロントエンドの第一歩、セマンティックなマークアップに対する意識と思考回路が付き始めた証拠です。
CSSに比べて何かとぞんざいに扱われ過ぎな感じのあるHTMLですが、ほんとはとても大事な役割を持ってるんだよ、ということを覚えていただけると幸いです。
宣伝タイム♪
小町と小夏も登場するHTML&CSSの入門書を書いています。よかったらこちらもどうぞ(●´ω｀●)
いいなと思ったら応援しよう！
