HTMLって何？HTMLの役割と歴史、基礎知識

※本ページにはプロモーション(広告)が含まれています

HTMLという言葉を聞いたことはありますか。なんとなくでも聞いたことがある人は多いのではないでしょうか。HTMLとはプログラミング言語の１つであり、最もメジャーな言語とも言えます。そんなメジャーなHTMLですが、どのような言語で、どんな役割や特徴を持っているのでしょうか。

ここでは HTMLの役割や特徴などの基礎知識 について、また HTML・CSSの初心者向けおすすめ本 について、紹介します。プログラミングに興味を持ち始めた方や、これから、勉強を始めたい方は、参考にご覧ください。

１.HTMLとは？

多くの人が最初に勉強するプログラミング言語であるHTMLですが、どんな特徴を持つのでしょうか。役割や歴史、基礎知識など確認していきましょう。

１.そもそもHTMLとは？

HTMLは、Hyper Text Markup Languageの略であり、マークアップ言語の１つです。ほとんどのWebサイトがHTMLで作られており、最もメジャーなプログラミング言語とも言えます。HTMLの名前にもあるハイパーテキストが、Webサイト上にリンクを貼ったり、動画や画像などのデータをリンクで埋め込んだりできるようにします。

また、文章に見出しや段落を付けたりすることもできます。HTMLは文書構造を定義して骨組みや構造を作るための言語です。例えば、このサイト上の大きな文字の見出しもHTMLで「見出し」として定義しているため、大きな文字で表示されています。

内容を定義する際は、「HTMLタグ」というものを使い、HTMLタグを使えば「テキストに定義・意味を与える」ことができます。下記は一部のHTMLタグです。

このようなHTMLタグを使って、テキストに定義付けを行い、Webサイトの骨組みを作っていきます。

２.HTMLの歴史

HTMLの最初の設計、考案者はティム・バーナーズ・リーというイギリスの計算機科学者と言われており、１９８９年にスイスにある欧州原子核研究機構のCERNで開発され誕生しました。その後、１９９７年にはHTML４.０が勧告され、１９９８年にはiTunesのリストなどにも使われているXML１.０がW３Cから勧告されます。

そして、２０００年にはHTML４.０を基にXHTML１.０が勧告され、２００８年には従来のHTMLより拡張性と互換性の優れたHTML５の草案が発表されます。そして現在では、プラグインを使わなくても動的な機能が扱えて、ブラウザ間の互換性を気にしなくていいHTML５が主流となっています。HTMLについて参考書などを使って学ぶ場合は、HTML５の内容を学び身に付けます。

３.HTMLとCSSの関係性

HTMLはCSSと非常に関係性が深いです。Webサイトを作るためには、HTMLだけでは味気ないデザインになってしまうため、CSS（Cascading Style Sheets）言語などを使用して 見やすく・わかりやすいデザインに仕上げる のが一般的です。

HTMLはテキストを定義付けすることはできますが、テキストのフォントを変えたり、画像サイズを変えたり、背景色を変えたり、レイアウトを変更することはできません。しかし、CSSを使えば、HTMLタグで囲んだテキストなどを装飾することができます。CSSはセレクタ、プロパティ、値の３つの要素を用いて、デザインを施し、Webサイトの見栄えを整えます。下記は主要なプロパティの一部です。

HTMLだけでなくCSSも学ぶことで、見栄えの良いWebサイトを作れるようになります。

２.HTML5が誕生するまで

１.HTML5の必要性とは

以前のHTMLに求められていた事は 情報を表示すること でした。しかし最近ではアプリケーションとしての動きも求められるようになってきており、HTMLが誕生した頃とは要求される働きが変わってきています。

HTML5が必要とされる背景には、Flashが2020年に廃止されることも大きく関係していると思われます。サイトのコンテンツにFlashを利用していた箇所は表示されなくなりますので、その穴埋めをするためにHTML5の技術が必要とされています。

このような事も含め、より高度な機能をHTMLだけで実現させる必要性が生じたものと思われます。外部プラグインを使わずとも幅広い表現を実現するためにバージョンアップを繰り返しHTML5が誕生することとなりました。

２.HTML5以前のバージョン

HTML1.0

初めて一般公開となったバージョン。現在でも使われている基本的な機能「見出し」「段落」「リンク」などは最初期から実装されていました。

HTML2.0

このバージョンから文章型定義の宣言が記述されるようになりました。「使用言語の表記」や「入力フォーム機能」はこのバージョンから実装となりました。

HTML3.2

ここから現在のHTMLの面影が大分見えてきます。「テーブル」「文字の配色」や「Javaアプレット」など音や映像も埋め込むことができるようになりました。

HTML4.0&4.01

このバージョンからCSSが実装されました。今やHTMLの相方と言われるほどですが、実装されたのは大分バージョンアップが進んでからの事でした。

XHTML

XHTMLは、HTML4.1に変わる新しいWeb技術として期待されていましたが、XHTMLと互換性のあるサイトが少ないなどの理由から思ったように普及は進みませんでした。

HTML5

1999年にHTML4.01が誕生してから15年あまり…。2014年についに新バージョンHTML5が誕生することになります。

３.HTML5の特徴

HTML5へとバージョンアップして出来ることが飛躍的に増えました。本項目では HTML5の特徴や代表的な機能 をご紹介します。

動画や音声データが扱いやすい

これまでのHTMLでは動画や音声データを扱うためには、Flashのようなプラグインの利用が必要でした。HTMLに実装されている機能だけでは音声データを埋め込むことができなかったわけですね。

HTML5から実装されたタグ＜video＞や＜audio＞を使うことで、動画や音声データをHTMLだけで扱えるようになりました。これらの実装によってどのような環境であっても動画や音声データを再生させることができるようになったのです。

ウェブアプリケーションを構築しやすい

HTML5から高度な機能を実現するAPIが複数追加されました。APIとはアプリを作成する仕様書のようなものです。このAPIを利用することで、難解なプログラミングを行わなくても高度な機能を持つウェブアプリケーションを開発できるようになりました。

より明確に文書構造を示すことができる

HTML4.01以前でも文書構造を示すことはできましたが、要素の不足から適切な要素を設定できないことも少なくありませんでした。

HTML5から追加された要素は「article（記事の部分）」「aside（関連リンク）」など、より細かい役割を要素として振り分けることが可能となりました。

フォーム機能の拡張

フォーム機能まわりも大幅に拡張されました。フォーム関連の属性が多数追加されたことで、入力補助、入力チェックを始めとした機能が充実。これまでJavaScriptによる記述が必須とされていた箇所も、HTMLによる記述だけで機能するようになりました。

何かと労力のかかるフォーム作成の手間の大幅な時間短縮に成功しました。

CSS3によって描画表現が大幅に広がった

CSS3の登場により、これまでよりさらに豊かな表現が可能となりました。主にアニメーション周りの発達が目まぐるしく、JacaScriptを使用しなければ実装できなかったようなアニメーションもCSS3の記述だけでも実装できるように。

簡単にアニメーション処理を施せるようになりました。プログラミングに疎い人でもCSS3を利用することで気軽にアニメーションを実装できるようになったのは非常に大きいですね。

３.HTML・CSSを勉強する際のおすすめ専門書

ここでは、HTMLとCSSが初心者の方向けのおすすめの本を紹介します。

１.はじめてのHTML＋CSS

はじめてのHTML＋CSSは実際に架空の企業用ホームページを作成しながら、HTMLとCSSの知識・テクニックを学んでいきます。非常に内容がわかりやすく、間違えやすい箇所も丁寧に解説されています。HTMLとCSSの２つの言語を基礎から学びたい方におすすめの本です。

２.HTML演習HTML５対応版

HTML演習HTML５対応版は、HTMLを演習形式で学んでいけるため、項目ごとに確認問題があり、自分の理解度を客観的に確かめながら学べます。また、各章の終わりには演習問題も用意されており、実践的な内容となっているため、クリアしていくごとに知識・テクニックが身に付いているのが実感できます。

著者がプログラミングや開発演習の講師などをしている方なので、シンプルでわかりやすいのが特徴です。

３.スラスラわかるHTML＆CSSのきほん

スラスラわかるHTML＆CSSのきほんは、HTMLとCSS初心者のための基礎から学んでいける本です。実際にWebサイトを作りながら、学んでいけるため知識だけでなく実践的な技術も身に付きます。フリー素材などのコンテンツもすべても公式Webサイトからダウンロードでき使えるようになっていますので、まったく初めての方でも安心して作れます。

４.HTML５＆CSS３デザインブック

HTML５＆CSS３デザインブックは、Webページにおける段組みや、ブログ・ニュース系サイト、ビジネスサイト風などのサイトを作成しながら学ぶ本です。サイトの見栄えを良くするテクニックや、使い勝手を向上する方法などが学べます。

５.HTML５＆CSS３標準デザイン講座

HTML５＆CSS３標準デザイン講座は、HTMLとCSS初心者の方でも簡単に技術を身に付けられる本です。HTMLの概要や画像などの挿入方法、CSSで装飾する方法やレイアウトについてなど、基礎の基礎から学んでいけます。とてもわかりやすく解説されているのが特徴ですので、他の本で勉強が続かなかった方でも安心です。

まとめ

いかがでしたでしょうか。今回は、HTMLの役割や特徴などの基礎知識、また、HTML・CSSの初心者向けおすすめ本について紹介しました。HTMLは、サイトのテキストなどを定義付けするための言語であり、ほとんどのWebサイトに使われています。

HTMLと合わせてCSSも勉強することで、装飾することができるようになり、より見栄えの良いサイトを作れるようになります。これから、勉強を始めていこうと考えている方は、今回紹介した本も参考にしてみてください！