HTMLの設計思想と、2014年に最適な学び方 ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #03」【ゲスト寄稿】

SHARE:

TechAcademy__テックアカデミー____ITに特化したスクール編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから

3899114449_ec210c67d5_z

Image by Flickr

「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第3回目のテーマは「HTML」です。

前回は「インターネットとブラウザ」というテーマでお送りしました。今回は「HTMLの基礎と、現代的な学び方」について考察・ご紹介します。本連載は、インターネット業界で、これまで技術的なバックグラウンドを持たないまま起業した方や、これから独立・起業しようと思い立った方をサポートするための、連載記事です。

はじめに

プログラミングはできなくても、HTMLとCSSなら少しは書ける、といった方は日本中にたくさんいると思われます。2000年代前半では、ブログ黎明期・個人ホームページ黎明期ということもあり、情報感度の高い若者や、IT業界に属する個人の会社員でも、趣味的にWebサイトを作るということがありました。書店にはHTMLに関する解説本が並び始めます。

また今では、WordPressなどのCMSツールを使って独自ドメインでブログを書いていて、その延長で、HTMLのタグ記法を覚えていったという方も多いでしょう。

HTMLとは何か

HTMLとは、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略称で、Web上の文書を記述し、またブラウザがそれを解釈するためのマークアップ言語(構造化言語)です。中学校の情報処理の授業などでも取り扱われているため、リンクテキストを生成する<a>タグや、強調テキストを意味する<strong>タグなどは、Web以外の業種の方でもご存知かもしれません。

一方で、<div>タグや、<span>タグは、Webサイトの制作(デザイン・コーディング)に関わったことがない人にとっては、ほとんど馴染みのない言葉でしょう。またHTML4.01において分類されている、インライン要素・ブロックレベル要素といった分類の概念があることも、きちんと体系化して勉強したことがない方は、知らないかもしれません。

構造化言語とは何か?

HTMLの基礎を学ぶにあたって、「構造化言語」についての理解が必要不可欠です。現代では、様々なWebアプリケーション開発フレームワークが登場し、単純なHTMLによる静的ページ作成とどまらず、データの非同期通信など、サーバーとクライアント側で処理を分けるなど、技術は多様化・複雑化してきました。しかしながら、HTMLが草案されたときから、今でも設計思想として残っている「根本的な考え方」を抑えておくことで、今後の学びはより一層、効率化するはずです。

Webページの製作において構造化とは下記のように表現できます。

  • (1) 特定の表示領域に対して意味を定義し(それを要素を呼ぶ)
  • (2) 定義された要素間の関係性を作ること

皆さんが今見ているこのWebページも、WebフロントエンドエンジニアによってHTMLが書かれ、それらは構造化されて記述されています。たとえば上部にはサイト共通のヘッダーエリア(ナビゲーション)があり、右側にはメニューエリアがあり、左側には記事エリアがあるといったように。

HTMLと親戚関係に、XML(Extensible Markup Language)と呼ばれる構造化言語があります。XMLの特徴は、その名の通り「拡張可能なマークアップ言語」で、具体的には「タグを自由に定義できる」という点です。例えば学生名簿を作るときに、以下のような記述を繰り返し、構造化文書を作成することができます。

<学生>
  <学籍番号>20140001</学籍番号>
   <氏名>
    <姓>田中</姓>
    <名>太郎</名>
   </氏名>
  <学部>経済学部</学部>
</学生>

上記の構造化言語においては、意味のあるタグを定義し、その中にある情報に「値」を付与しています。田中さんの名前という値にアクセスしようと思った場合、学生 > 氏名 > 名 という階層で、取得することができます。XMLは、皆さんが普段使っているブログやニュースサイトなどの更新通知を受け取る「RSSフィード」などで、お馴染みです。

HTMLは、あらかじめルールが決められた構造化言語

HTMLは、ティム・バーナーズ=リーが創始した「W3C」が定めている標準化規格により、構造化を実現するための定義が、あらかじめルールとして決められている言語です。ですから、タグの種類と適切な使い方をセットで覚えてしまえば良いので、抑えどころさえ間違えなければ、あまり時間をかけずに学ぶことができます。一方で、HTMLをただ単に「Webページを作るための言語」とだけ雑に解釈し、本質的な「構造化」「情報を定義する」といった理解が抜け落ちていると、今後プログラミング等を進めていく上でも、非効率になるかもしれません。

一番シンプルな例を取ってみましょう。<strong>というタグで囲った文字は、別途CSSによる命令がない限り一般的に太字になります。これは、デザイン上の事情から太字にするためのタグではなく、その文字が「重要であること」を意味付けるための構造化タグです。重要だから太字になる、ということが仕様としての「結果論」であって、装飾として太字にしたいから、という理由で使ってはいけません。HTMLの学習では、この違いについて理解することから始まります。

この話は、次回のテーマ「CSS」でも扱いますが、タグや要素の命名規則など、その意味については、しっかりと歴史的背景を理解し、本質的な部分から理解しておくと良いでしょう。タグとして採用された言葉の意味、語源をたどっていくのも、楽しい勉強法の一つです。<a href=””> のaは、「アンカー(anchor)」のaです。hrefは、hypertext referenceを指しています。

8134400255_a580283e4c_z

Image by Flickr

HTMLの基本文法

HTMLは、開始タグと閉じタグによる記法が一般的です。タグは数十種類存在しており、それぞれに意味を持っています。HTML5は、W3Cにより草案段階ですが、すでに多くのモダンブラウザでサポートされており、2014年では様々なWebメディア・Webサービスでも標準採用されています。HTML5の雛形を、以下に示します。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>HTML 5 complete</title>
<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js“></script>

<![endif]–>
<style>
 article, aside, dialog, figure, footer, header,
 hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>

<head>〜</head>が、ブラウザがHTML文書をレンダリング(解析)する上での最初に読み込むヘッダファイルで、<body>〜</body>タグが、実際にWebページに表示される領域の記述です。<head>〜</head>の中には、<title>〜</title>タグがあり、この中に記述したテキストは、ブラウザのタイトル欄などに表示されるテキストになります。

【補足】SEO対策の内部対策とは、構造化を徹底すること

SEO対策(検索エンジン最適化)という考え方が叫ばれて、早いもので10年以上が経ちます。当初はページランクなどの概念が話題の中心となっていましたが、現代では非常に複雑なアルゴリズムにより、議論も多様化してきました。

Webについて本質的な設計思想を理解すると、SEO対策というのは実は難しいことではありません。適切に文書構造を定義して(内部対策)、そこに存在する情報がエンドユーザー(訪問者)にとって有益な価値を生み出しているか(コンテンツ)ということです。

その結果、多くの他サイトから引用されたり、リンクされるといった事象は自然な形で増えていき、ページランク(被リンクの数など)は徐々に高まっていきます。これらを「対策」と呼んで取り組むこと自体、Webの設計当初や、検索エンジンの設計思想の立場からすると本末転倒なのですが、経済原理の上では仕方のないことなのかもしれません。

例えば、良質なコンテンツを提供していても、サイトの構造化が間違っていた(改善すべき部分が多い)場合には、損をしていることになります。SEO対策のコンサルティングを担う専門業者は、そうした視点から構造化のための技術的アドバイスを行ったり、そもそもコンテンツ自体を質の高いものへと変えていく作業をサポートします。(単に見せかけのリンク数を増やし続けるなど、短期的な結果にしかならない粗悪な業者にはお気つけください)

サイト情報を構造化し、良質なコンテンツを掲載する。その結果、被リンクが増えていき「外部対策」となります。検索エンジンのアルゴリズムは日々複雑化しており、それだけで何冊も本が書かれているほどの情報量ですが、まずはWebページの掲載順位を決める上でのベースとなる普遍的な事実として、Webのルールに則した構造化、ユーザー視点で考えられた良質なコンテンツの提供という2つを覚えておくと良いでしょう。

インライン要素とブロック要素

HTMLのタグには、ブロックレベル要素とインラインレベル要素というものに分類することができます。(他にも要素の分類は存在しますが、本記事では入門編ということで割愛します)

ブロックレベル要素

ブロックレベル要素は、文書における見出しタグ <h1>~<h6> や、文章の段落(パラグラフ)を示す <p> タグなど、構造化において「ひとかたまり」を定義する際に用います。ブロックレベル要素は、別のブロック要素やインラインレベル要素を含むことができます。一方で、インライン要素の中にブロックレベル要素を置くことはできません。

タグなど、構造化において「ひとかたまり」を定義する際に用います。ブロックレベル要素は、別のブロック要素やインラインレベル要素を含むことができます。一方で、インライン要素の中にブロックレベル要素を置くことはできません。

ブロックレベル要素のHTMLタグは、以下のようなものがあります(HTML4.01 Strict)

p div table dl ul ol form address blockquote h1 h2 h3 h4 h5 h6 fieldset hr pre

インラインレベル要素

インライン要素は、ブロックレベル要素に対して文中の一部分にだけ意味付けをする場合や、 書式設定を行うものを指します。

インライン要素のHTMLタグは、以下のようなものがあります。(HTML4.01 Strict)

a abbr acronym b bdo big cite code dfn em i kbd label q samp small span strong sub sup tt var

【補足】ブロック要素、インライン要素の分類は「HTML5」では無くなる

HTML4.01の仕様では、Webページを構成する要素は、大きくブロックレベル要素とインライン要素のいずれかに分類されることを上述しました。将来的にHTML5が勧告された場合、HTML5においてはブロックレベル要素とインライン要素を分類する概念はなくなります。HTML5では、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブと呼ばれる、コンテンツの種類がそれぞれ定義されています。

通常、HTMLなどの仕様は「草案」「勧告草案」「勧告」という段階で、数年単位での見直しが行われますが、現在HTML5は「勧告草案」の段階です。

これから学び始める方は、HTML5における「コンテンツ・モデル」について独学を始めると良いでしょう。しかしながら、現時点でもCSSと学ぶ上で、HTMLのブロック要素・インライン要素の区別は重要ですので、早い段階でその違いについて理解する必要があります。また、HTMLの新規格が誕生しても、「エリアを定義して、構造化する」という根底の思想は変わりません。

HTMLの学び方

HTMLの基本がわかった上で、いったいどのように学べばよいでしょうか?本項で全てのタグを解説しても良いのですが、そうするとこのメディアの中で最も長い記事になってしまいます。基本的な考え方、設計思想については解説し、学習方法についてのアドバイスに留めたいと思います。

1.HTMLの解説書を買って読む

→Web上に無料で学習リソースが溢れている中、あまり今風の勉強法ではないかもしれませんが、書籍があった方が学びやすいという方もいるでしょう。

2.「HTML入門」や「HTMLの基礎」といった古くからあるWebサイトを読んで勉強する

→古くからあるWebサイトは、検索で調べ物をする際にたどり着くことが多いため、必要に応じて活用します。

3.動画で学べる学習サイトでHTMLの文法・知識を身に付ける

ドットインストールなど国内外に多数の無料動画学習サイトがあるので、それを活用します。

4.Google ChromeのDeveloper Toolを使って学習する

→Google Chromeのブラウザを使っている方は、Webページ上で右クリックし「要素の検証」をクリックすると、その領域がHTMLとCSSではどのように定義されているか、ということを見ることができます。「ソースの表示」よりも見やすく色分けされており、実際にWebブラウザ上でテキストや値を書き換えることもできます。

5.自分の作りたい完成図(ワイヤーフレーム)を手書きで描き、HTMLのリファレンスサイトを片手に作りながら覚える

→Developer toolでの学習と組み合わせてお薦めする学習方法です。

この中からお薦めする4と5の学習方法について詳しく紹介します。

ChromeのDeveloper Toolsを使って学習しよう

Webページの特定の領域を右クリックし、ポップアップした中の「要素の検証」をクリックします。

dd61e04a6719d14fb9e5a171af40a864

その領域がどのようにHTMLで記述されているか、HTMLタグのネスト(階層)や構造化について、直感的に理解できるはずです。右側には、次回のテーマとなる「CSS」のプロパティなども記述されています。

また、ダブルクリックすると、内容を書き換えてWebページ上でプレビューすることもできます。(書き換えはブラウザのクライアント側で保持する一時的なもので、再読み込みすると元に戻ります。)

98295f9ad43cb53fa307bef2863c099b

ぜひ自分が参考にしたいWebサイトを使って試してみてください。

手書きのワイヤーフレームをつくり、HTMLを描いてみよう

5371776333_a06d01e367_z

Image by Flickr

Google ChromeのDeveloper Toolを使って、ほかのサイトがどのようにHTMLで記述されているかを実践的に学びつつ、自分では「作りたいページのイメージ」を実際に手書きのワイヤーフレームという形に書き起こし、それを実現するためのHTMLを記述してみましょう。

Webページでレイアウトなどを作成していくためには、CSSに関する知識も必要になります。次回、第4回はCSSをテーマにお送りします。

BRIDGE Members

BRIDGEでは会員制度の「Members」を運営しています。登録いただくと会員限定の記事が毎月3本まで読めるほか、Discordの招待リンクをお送りしています。登録は無料で、有料会員の方は会員限定記事が全て読めるようになります(初回登録時1週間無料)。
  • 会員限定記事・毎月3本
  • コミュニティDiscord招待
無料メンバー登録