HTML脳になってHTMLをスラスラと書こう！
HTMLの基本的な特徴を知って、スラスラとHTMLが記述できるHTML脳を作りましょう！
今回の記事では、HTMLとは？ということで、「マークアップ言語」と「ハイパーテキスト・ハイパーリンク」についてお話します。HTMLの特徴を理解することによって、このときはどんなタグを使ったらいいんだろう？という疑問を減らし、適切なマークアップでHTMLをスラスラと書けるようになりましょう！
HTMLとは？
HTMLは、HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）の略です。HTMLの最も大きな特徴は、下記の2点です。
- マークアップ ランゲージ
- マークアップ言語である
- ハイパーテキスト
- 他のドキュメントへハイパーリンク（今は単にリンクと呼ばれるものです）を設定できる
マークアップ言語とは
マークアップとは、「マークアップ規則」に従って文章を要素で括って意味づけをすることです。
例えば、下記のような文章があったとします。
この文章は、以下のように、複数通りのとらえ方ができます。
- 一文
- マークアップブログ初心者マークアップエンジニアのための覚え書き
- タイトル
- マークアップブログ
- サブタイトル
- 初心者マークアップエンジニアのための覚え書き
- タイトル
- マークアップブログ
- 文章
- 初心者マークアップエンジニアのための覚え書き
何通りものとらえ方ができるので、読む人によって、伝わり方が全然変わってきます。そこで、下記のように書き換えてみます。
さて、これで、この一文を初めて見た人でも、「マークアップブログ」がタイトルで、「初心者マークアップエンジニアのための覚え書き」が文章であることが、明確になりました。
このように、文章を一定の規則（マークアップ規則）に則って括って意味づけをすることをマークアップする、と言います。
昔のパソコンは、文字だけでやり取りをしていたため、相手に、言いたいことがより伝わりやすくなるように文章に意味づけ（マークアップ）をして、データのやり取りをしていました。
現代においても、全てのデータを画像で送りあうのは、容量が重すぎて難しく、また、人間には伝わりやすくても、コンピュータが理解できないこと、さらには、見やすくなるようにブラウザの方で自動的に装飾を加えることもあるため、画像で送りあうのではなく、文章を意味づけして送っています。それが、マークアップ言語です。
HTMLは、マークアップ言語
先ほどの例文を実際にHTMLに書きなおしてみます。
World Wide Web（W3C）という団体の作ったHTML5の仕様書*1では、h1はタイトルを示し、pが文章であるとされています。
このように、仕様書に沿ってマークアップすることにより、より伝わりやすい文書を届けることができます。それぞれのタグには、それぞれ決まった意味があるため、独自の解釈でマークアップしてしまうと、違った意味に捉えられたり、伝えたいことが伝わりづらいページになってしまいます。
*1 参考：W3C HTML5 仕様書（英語）
HTMLとSEO
以上のように、より文書を正確に相手に伝達するためにW3Cが作成したHTMLの仕様書が存在します。GoogleやYahooのようなサーチエンジンは、それらの仕様書に基づいて、これはこう伝えたいんだな、と理解します。だからこそ、W3Cの仕様書に沿って正確にHTMLを書くことは、SEOにとっても大変重要な意味を持ちます。
ハイパーテキストって何？ハイパーリンクは何ですごいの？
※ 歴史的な話もしたいところですが、すごく長くなるので、今回はざっくりと、「ハイパーリンク」と「ハイパーテキスト」とは何かについて解説します。
HTMLのすごいところは、マークアップで意味づけをするだけではなく、ハイパーリンクの機能があるところです。この「ハイパーリンク」ができるテキストを「テキストを超える」という意味から「ハイパーテキスト」と呼ばれます。
ハイパーリンクとは
インターネット上でやり取りされているのは、単なるテキストや画像が主です。そして、テキストはテキスト、画像は画像として個別に配信されています。
テキストは、そのままでは読みづらいので、マークアップによって意味づけされ、読みやすくされています*2。
マークアップ言語は、単に文章に意味づけをして読みやすくしただけですが、HTMLはそれに加えて、URI情報*3を付けて「これはここ（URI）と関連があるよ！」という情報も持たせています。これにより、1ページだけではなく、そのページから関連した情報を持つ新しいページに行くことが可能になります。
青：ハイパーリンク、赤線：ハイパーリンクのリンク先
HTMLによってそれぞれ別々に存在していたコンテンツ同士がつながり、以下の図のようにクモの巣状（ウェブ状）につながってネットワークが形成されページごとに行き来できるようになっています。この仕組みこそが、HTMLのもっとも重要なポイントで一番すごい仕組みなのです*4。
*2 マークアップされたテキストは、ブラウザがそれぞれの文字を大きく太くしたり、色を付けたりして読みやすくなっています。そして、そのブラウザにどのような見た目にしてほしいか指示を出すのがCSSの役割です。
*3 URI情報とは、URLの考え方を拡張したものです。簡単に言うと、インターネット上の住所のようなものの一つです。
*4 リンクは、HTMLの最も大きな特徴ではありますが、上にも書いた通り、「クモの巣状」に広がります。そのため、時として収集がつかなくなることがあります。Webサイトをどのように見せたいか、導線をしっかり考えて上手くリンクさせましょう。参考：情報の構造化（1）
まとめ
今回は、「マークアップ言語とは何ぞや？」と「何がすごいの？」についてざっくりとお話しました。
HTMLを使い始めたばかりの方から、「どのタグをいつ使ったらいいのかわからない」という質問をよく聞きます。
しかし、マークアップ言語は意味づけのために使われる、HTMはマークアップ言語である、ということを理解したら、そんなに難しい話ではありません。
HTMLを書く際は、どこがタイトルなのか？どこが文章なのか？これは引用なのか？強調して伝えたいのか？これはどんな情報なのか？といった、国語的な要素の方が重要になります。
HTMLで出力される見た目がこうだからこれを使う、ではなく、きちんと意味を考えてHTMLを使えば、スラスラと適切なマークアップが行え、それによってユーザビリティが上がり、SEOの向上にもつながっていきます。
おまけ（という名のてぃーなのつぶやき）
個人的なお話になりますが、このたび、新しいことを始めるため、私のこのブログでの記事の投稿は今回の記事をもって最後になります。これまで楽しみに読んで下さった皆様に深く感謝いたします。
ブログ自体はまいまいを筆頭に他のメンバーで引き続き続けていきます。これからも当ブログをよろしくお願いいたします。
てぃーなのこれまでの記事
てぃーなが書きました。
今日のひとこと：自宅のマウスを新しくしました！ちょっとお高めのものにしたんですが、その甲斐あってすごく手が楽になりました！