初心者でも分かる解説。HTMLってなんだ? HTML5とは?

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
html5 image

HTMLの超入門編です。初心者にも分かりやすく、専門用語を使わずに解説します。

HTMLは、CSS, JavaScriptと並んで、Webサイト作成にはなくてはならない技術です。

これを読めば、HTMLの役割、HTML5の『5』の意味も分かります。

『いまさら見直すのは恥ずかしい』という人にもオススメです。

今回は、HTMLの書き方とか具体的な手法は一切ありません。ただただ『HTMLってなにもの?』だけの話です。

役に立つかと言われれば、雑学に近いです。でも、ウェブサイトの技術の中でのHTMLの役割がはっきりと分かりますので、最後までお付き合いください。

HTMLとは?

HTMLは、『Hyper Text Markup Language』で、マークアップ言語です。

マークアップ言語は、データを構造化したもので、データの保存・抽出を得意としています。

HTMLは研究機関から生まれたものです。研究データを整理・保存して、それを簡単に見れることを目的に使われました。

『ハイパーテキスト』はその名残です。『テキストリンク』といったほうが分かりやすいでしょう。単語を選んだらその単語の内容が出てくるのですから、便利な辞書みたいで出てきた当初は大発明でした。

『ボタンとか画像とか動画とか音声とかいろいろあるのになんでテキストなんだ?』と思うかもしれませんが、最初は『研究データ(テキスト)を保存・閲覧』するものだったからです。

HTML, CSS, JavaScriptの立ち位置

HTMLの誕生の話をしましたが、さらに『HTMLとは?』を続けると、一部分の話になるのであまり良くありません。ここはあえてWebの全体像を話します。

HTML, CSS, JavaScriptは、Webサイト作成では、

  • フロントサイド
  • フロントエンド

と言われます。

Webサイトは、見る側(ブラウザ)と見せる側(Webサーバー)が情報をやり取りすることでページが表示されます。

フロントエンドは見る側、ブラウザの技術になります。

  • ボタンやチェックボックスを表示(HTML)
  • 文字を大きくしたり色を変える(CSS)
  • コンテンツをマウスで動かす(JavaScript)

などできますよね?

これらは全部、ブラウザが処理をしてユーザーに見せています。()内は何が仕事をしているかです。

ブラウザは優秀なんです。HTML, CSS, JavaScriptの3つの仕事をこなしているのだから。

HTMLの機能、CSS, JavaScriptとの関係

ブラウザからリクエストを受けて、Webサーバーから送られるデータはすべて構造文書(文字列)です。それがHTMLです。

(画像や動画などは、文書内のurlから別リクエストで取得します。)

HTMLをそのまま表示すると、分からない人には意味不明な、構造化されたデータが表示されるだけです。

HTMLの内容は、ブラウザを右クリックして、『ソースコードを表示』で見ることができます。

HTMLは、『家の土台と骨組み』です。一応、キッチン、リビング、収納、トイレ、バスルームなど決められたところに配置はされてますがそれぞれの姿形は見えません。

HTMLは、コンポーネント(文字・ボタン・テキストボックスなど)の種類と配置を決めています。

HTMLが発展するに従って文書だけではなく、ボタン・チェックボックス・画像などいろいろな表現ができるようになりました。
それらの総称を『コンポーネント』と言います。

一方、家の屋根、外壁、内装など住めるような形に肉付けするのはCSSです。

CSSは、コンポーネントのサイズ・色・形などの装飾を担当します。

たとえば、ブラウザに次のように表示されているとします。

タイトルサンプル

本文サンプル
本文サンプル
本文サンプル

これから、CSSの装飾を外します。

タイトルサンプル

本文サンプル
本文サンプル
本文サンプル

味気ない文書になりました。HTMLが昔は『構造化された文書』だったことが分かります。

そして、家だけ立派にしても豊かな生活はできません。家具・家電など生活の『動き』を用意する必要があります。それがJavaScriptです。

JavaScriptは、コンポーネントに動きをつけて、リッチなWebサイトに仕上げます。

  • クリックしたら色を変える
  • ドラッグ&ドロップでコンポーネントを動かす

など多彩です。最近はWebアプリと言って、Webサイトをアプリケーションとして使うことができます。Webアプリのタッチ(マウス)操作の中核がJavaScriptです。

HTML5ってなに?

HTMLは、バージョンで管理されています。現在はバージョン5.2で、一般的には『HTML5』と呼ばれています。

HTML5

  • HTML5➡2014年10月28日勧告
  • HTML5.1➡2016年11月1日勧告
  • HTML 5.2➡2017年12月14日勧告

HTML5は、WHATWG (Web Hypertext Application Technology Working Group, ワットダブルジー)が仕様を策定して、その結果に元づいてW3C が勧告を行なっています。

W3C (World Wide Web Consortium, ダブリュー・さん・シー)

HTML, CSSの標準化団体。仕様の策定から勧告まで行う。HTML5からは策定は行わず勧告だけを行うようになった。

策定

どのような機能を追加・変更・削除するのか決めること。

勧告

決まった仕様の対応を開発元に促すこと。

HTML5から仕様の策定・勧告の方法が変わる

HTML5より前は、W3Cが仕様の策定から勧告まで行なっていました。

しかし、W3Cは突然、HTMLの仕様変更をこれ以上しないと、バージョンアップの中止を宣言します。

それに反発したのは開発者たちでした。このときすでに、動画や音声に関して、HTMLで実装するように要望が高まっていたからです。

そこで2004年、Apple, Mozilla, Operaの開発者たちが独自で開発を続けるためにWHATWGを設立します。

結局、世の中のニーズをくみ取ったWHATWGが支持され、あとになってW3Cが合流して、

仕様策定➡WHATWG
勧告➡W3C

という形に収まりました。

HTML5の特長

HTML5の1番の特長は、動画と音声の埋め込みが簡単にできるようになったことです。

それまでは、flashという専用プログラムをパソコンにインストールしなければなりませんでした。覚えている人もたくさんいると思います。

その他にもレスポンシブデザイン対応など、いろいろな機能が追加されています。

まとめ

HTMLは、Webサイトの中核の技術です。Webサイト作成と言えば最初に学ぶプログラム言語(じっさいはマークアップ言語)でもあります。

Webデザインに関わる人、Webデザイナーを目指す人は必ず習得しなければなりません。

あと、セットでCSSも覚えたほうが良いです。JavaScriptもあるのですが、これは、がっつりプログラミングになるので、余裕があればチャレンジしても良いでしょう。

よく、『コーダーがいるからデザイナーは書けなくてもいい』という声を聞きます。
これは間違いです。どの世界に自分の表現を形にする方法を一度も習得せずに、他人に丸投げして正当化する人がいるのでしょうか?

  • 料理長は作れないのではなく『作らない』
  • 漫画家は書けないのではなく『書かない』

立派な料理人や大先生の漫画家でもないキャリアの人間が、誰かに仕事を丸投げするほど『何様ですか?』という話です。

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!