HTMLとは？HTMLの基本を分かりやすく解説！
デザイン・コーディング

HTMLとは？HTMLの基本を分かりやすく解説！

Share
このエントリーをはてなブックマークに追加

Webサイトの骨組みを構成するHTML。Webに少し携わったことのある人なら、誰でもご存じでしょう。しかし、「HTMLとは何か？」と聞かれて、具体的に答えられる方は少ないのではないでしょうか。そこで、今回はHTMLの歴史にも触れながら、HTMLとはそもそもどういったものなのか解説していきます。

HTML

ハイブリッド型受講を可能に。医療団体に特化した研修管理システム。

https://manaable.com/

manaable（マナブル）は、利用ユーザー数25万人を突破した医療団体向け研修管理システムです。会員や研修から決済・受講・アンケートまで、研修管理に必要な機能を網羅。あらゆる業務の一元管理を可能にしたシステムだからこそ、お客様に合わせた革新的で最適な研修体制をご提供します。

目次

  1. HTMLとは？
    1. HTML
    2. HTMLの最大の特徴はマークアップとハイパーテキスト
  2. インターネットの仕組み
    1. WWW（World Wide Web）
    2. クライアントサーバーシステム
  3. HTMLの歴史
    1. Webの父、ティム・バーナーズ＝リー
    2. HTMLのバージョン
    3. HTMLとXHTMLの違い
    4. XHTMLはXMLとHTMLの中間
    5. W3CとWHATWGの攻防
    6. HTML5開発とその特徴
  4. HTMLの主要なタグ
    1. htmlタグ
    2. headタグ
    3. bodyタグ
  5. まとめ

HTMLとは？

HTML

HTMLとは、Webページの記述言語です。HTMLのルールに従って記述されたテキストファイルをHTMLドキュメントと呼び、これをブラウザが読み込むことで、Webページを表示させることができます。また、HTMLの正式名称は、”HyperText Markup Language” と言います。日本語に直すと、ハイパーテキストをマークアップする言語、という意味です。

HTMLの最大の特徴はマークアップとハイパーテキスト

では実際にHTMLを見ていきましょう。下の画像はHTMLの一部を表したものです。

  1. <li class="item pc">
  2.    <a href="https://www.itra.co.jp/webmedia/interaction_design.html">
  3.       <div class="item-content">
  4.          <h3 class="ttl-style02 newest">
  5.             <span class="date list">
  6.                <time>2019/07/29<\span></time>
  7.                <span class="category list">デザイン・コーディング</span>
  8.             </span>
  9.         【2019年Webデザイントレンド】インタラクションデザインとは
  10.          </h3>
  11.          <div class="item-img">
  12.             <img src="/uploads/media/2019/06/20190604171640.jpg"alt="Webデザインの変移">
  13.             <p>Webデザインのトレンドをどれくらい意識していますか。Webデザインは単なる目新しさを狙っているものではなく、新しいデバ...
  14.             </p>
  15.          </div>
  16.       </div>
  17.    </a>
  18. </li>


頭が痛くなりそうな文字と数字の羅列ですが、これがHTMLでWebサイトの骨組みを形作っています。
テキストの一部を＜タグ＞と呼ばれる記号で囲むことで、テキストの構造や文章の役割を示すことをマークアップと呼びます。HTMLにおいては、マークアップによって、コンピュータにとって、「その文書が何を表すか」をわかりやすいように記述されています。そしてこの羅列がWebやブラウザを介すことで、人間にとって分かりやすく表示されます。

上記のようなコードは一部ですが何千行と組み合わさり、ブラウザを介して表示されると、

WebMedia_top

WebMediaのトップページになります。このようにHTMLの＜タグ＞でテキストを囲うことでマークアップを行い、「人間用」に見やすくすることがHTMLの大きな役割です。

また、HTMLのもう一つの大きな特徴としてハイパーテキスト機能が挙げられます。ハイパーテキストとは、独立した文書を相互に関連づける機能（ハイパーリンク）を持った文書を指します。つまりわかりやすく言うと、普段私たちが使っているWebページにあるボタンやリンクはハイパーテキストと呼ばれ、リンク先のWebページとつながることができるという機能をハイパーリンクと呼びます。私たちがインターネット上で、URLなどのリンクを介して様々な文書に行き着くことができるのは、WWW（World Wide Web）上で、HTMLドキュメントという「ハイパーリンクを持つハイパーテキスト」で構成されているからです。Webページが他のWebページとつながり、行き来ができるのはHTMLの大きな特徴の1つです。

インターネットの仕組み

HTMLを理解するうえで、基盤となっているインターネットについてもおさらいをしておきましょう。

WWW（World Wide Web）

WWW（World Wide Web）とは、インターネット上で提供されるサービスののうちの一つです。インターネットとWebは混同されがちですが、インターネット上に提供される他のサービスとして、Email などがあげられます。
World Wide Webを直訳すると、「世界中に広がる蜘蛛の巣」という意味になり、Webサーバが世界中に点在し、蜘蛛の巣を張るようにインターネット網で繋がれている様子を表しています。また、一般的にはWebと呼ばれます。

World Wide Webについて

クライアントサーバーシステム

Webは「クライアントサーバーシステム」、と呼ばれる仕組みで作動しています。クライアントサーバーシステムとは、サービスを提供する側（サーバ）と、サービスを受ける側（クライアント）で、役割を分担して成立するシステムです。

Webにおいては、Webクライアント（一般的にブラウザと呼ばれるもの）が、WebページなどのデータをWebサーバ（一般的にサーバーと呼ばれるもの）に要求し、サーバーがそれを受けて、ブラウザにデータを送り返す、というシステムになっています。

HTMLの歴史

Webの父、ティム・バーナーズ＝リー

Webは、当時CRENに所属していたティム・バーナーズ＝リーによって作られました。彼がWWWを作ったのは、CRENの研究者同士で論文などの情報を最新で共有するシステムを構築するためでした。
そこで、記述様式としてHTMLを作り、またそのエディタとしてWWWが作られました。そして1993年、WWWはCRENによって無償で開放され、私たちも使えるようになりました。

HTMLのバージョン

HTML1.0が1993年に作られてからHTML2.0、HTML3.0…とバージョンアップがしばしば行われています。現在Web上で主に使われているのは、HTML5・HTML4.01・XHTMLの3つです。HTML5（正確には2017年に勧告されたHTML5.2）が最新のW3Cが勧告した最新のバージョンですが、一度あるバージョンのHTMLでWebサイトを作成した場合、ガラッと全面的にリニューアル等されない限りは基本的にそのバージョンから自動的にアップデートされることはありません。そのため、HTML4.01やXHTML1.0などの最新ではないバージョンもまだまだ使用されています。

例えば、HTML4.01を採用している代表的な例としてYahoo!Japanなどがあげられます。

Yahoo!Japan

HTMLとXHTMLの違い

XHTML（Extensible HyperText Markup Language）とは、HTMLの後継バージョンのうちの一つです。HTML4.01とほぼ同じ内容のものを、xml形式で再定義したものであり、HTMLと比べると、より書式形式が厳密である、という特徴がみられます。HTMLがバージョンアップの度に、タグ形式などが複雑化したことから作り直しを目指して作られました。

XHTMLはXMLとHTMLの中間

HTMLとXMLはどちらも、SGML（Standard Generalized Markup Language）と呼ばれる書式に基づいて書かれており、その縮小版（サブセット）といえます。SGMLとは、元々は軍需産業で使われていた書式で、航空機などのマニュアルを電子化を目的としたメタ言語です。

HTMLは、仕様が大きく複雑なSGMLをルールなどをタグによって簡略化し、一般にも普及しやすいようにわかりやすくしたマークアップ言語です。しかしその分、HTMLは、簡略化した言語であるがゆえに、機械によっては出力が異なる、という難点がありました。

XMLは、HTMLよりSGMLのルールに厳密で、機械同士の通信に優れている、という特徴がありました。しかし、Webの主流はHTMLであったため、HTMLとの互換性がありながら、xml形式に変換できる言語として勧告されたのがXHTMLです。

W3CとWHATWGの攻防

HTML5は、XHTML1.0のあとに勧告された形式ですが、この背景には「XHTML1.0がHTMLよりも複雑だったため、エンジニアなどによる反発があった」という背景があります。

Webの父、ティム・バーナーズ＝リーは、CRENを退任後、WWWの仕様や指針、標準技術を策定・開発する団体であるW3C（World Wide Web Consortium）を設立し、HTMLのバージョンアップ勧告を行ってきました。

W3Cは、XHTML1.0の発表後、より厳密な標準化を進める方針として、XHTMLの開発に注力するようになりました。これに対し、一部のエンジニアが「HTMLのほうが自由度が高く、開発を進めやすい」と、反発を起こし、HTMLの改善を独自に進める目的で設立した団体がWHATWGです。

2004年にApple、Mozilla、Operaなどに所属する有志で設立されたWHATWG（Web Hypertext Application Technology Working Group）が、「Web Applications 1.0」（現在のHTML5のもととなるもの）を開発しました。

HTML5開発とその特徴

W3Cは、Web Applications 1.0が開発されたことを受け、開発を進めていたXHTML2.0開発プロジェクトを中止しました。そしてその後、W３CはWHATWGと共同で、HTMLの開発をしていくことを発表し、2014年にHTML5が勧告されました。

HTML5の特徴を簡単に説明すると、文章構造を示すタグが追加され、SEOにより特化した仕組みになっていること、動画の挿入が容易であること、多くのAPIに対応していることなどがあげられます。

詳しくは、こちらの記事で解説しています。

HTMLの主要なタグ

HTMLはマークアップ言語です。主に、開始タグ<>と終了タグ</>によって要素をタグで指定し、タグの間にマークアップしたい内容を挟みます。ここではHTMLにおける基本的なタグをご紹介します。

htmlタグ

htmlの開始と終了を指定するタグです。文書の開始に<html>を記述し、終了に</html>を記述します。htmlタグで囲まれた部分はHTMLドキュメントとなります。HTMLにおいて基本中の基本のタグとなります。ラング属性なども挿入されることもあります。

headタグ

HTMLドキュメントにおいてhead要素を指定するタグです。このタグの間には、ページタイトルやメタ要素などのその文書に関する情報を記述します。<html>の直後に <head>～</head>を記述します。headタグで囲まれた部分はその文書のヘッダ部分となります。

bodyタグ

HTMLドキュメントにおけるコンテンツ部分を指定するタグです。このタグの間には見出しを示す<h2>タグや文章を示す<p>タグなどのブロック要素が入り、そのページ内容に関して記述します。<head>の後に記述し、囲まれた部分はブラウザ上でWebページの本文として表示されます。

まとめ

HTMLをなにげなく聞いたことがあったり、使用したことがある方でも、今回初めて知る部分もあったのではないでしょうか。どういった経緯でできたのかを理解して、HTMLに触れてみると以前までと違った使い方ができるかもしれません。

Web担当になったけれど自分の知識に自信がない、自社のWebページをもっと改善したい。けれども、うちにはそんな時間も人材もないというお悩みはございませんか？ITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。お気軽にお問い合わせください。

Share
このエントリーをはてなブックマークに追加

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。