HTMLとは。HTMLでできること、できないこと

HTMLを学習しようと思っています。

HTMLと言えばホームページを作る言語というイメージがありますが、 他にもできることがありますか? あと、CSSとの関係や、できないことも知りたいです。

今回はこのような疑問に答えていきます。

インターネット上で多くの情報が得られる時代に、 HTMLは欠かすことのできない言語です。 あなたが今見ているこのサイトも、もちろんHTMLで作成されています。 そしてHTMLはWebサイトを作るだけでなく、他にもできることがあります。

そこでこの記事では、HTMLとは、HTMLでできること、 できないことについて解説します。

HTMLとは

HTML5

HTMLは「ハイパーテキスト マークアップ ランゲージ」 (Hyper Text Markup Language)の略です。 「ハイパーテキスト」と「マークアップ ランゲージ」の2つの部分に分かれます。

ハイパーテキストとは、文書内のリンク部分(ハイパーリンク)をクリックすると 別の文書へ遷移でき、複数の文書が結び付けられている仕組みのことです。

マークアップランゲージとは、マークアップ言語ともいいます。 文書内に印(マーク)をつけることで、文書構造を表す言語です。 文書内につける印(マーク)のことをタグといいます。 <p></p>などのことです。

上の2つをつなげると、HTMLは 「ハイパーテキストの仕組みを持ったマークアップ言語」 という意味になります。

HTMLはマークアップ言語であってプログラミング言語ではない

「HTMLはプログラミング言語ではないのですか?」とよく聞かれますが、 正確にはマークアップ言語であって、プログラミング言語ではありません。 プログラミング言語とはコンピュータプログラムを記述するための言語で、 Python、Java、JavaScriptといった言語のことです。 マークアップ言語は文書の構造を表す言語です。

コンピュータに用いられる言語のことを総称してコンピュータ言語といいます。 マークアップ言語もプログラミング言語も、 コンピュータ言語という大きな枠組みの中の1つです。 ちなみにCSSはスタイルシート言語といい、 これもプログラミング言語ではなコンピュータ言語の1つです。

HTMLでできること

できること①:Webサイト

Webサイト

今あなたが見ているこのサイトもWebサイトの1つで、 もちろんHTMLで記述されています。 1つのページをWebページといい、 Webページの集まりをWebサイトといます。 個人が作るブログサイト、企業が作る企業サイトやECサイトなど、 ネット上で見ることができる全てのWebサイトにおいてHTMLが使われています。

HTMLコード(ソース)を見たい場合は、 ブラウザのページ上で「右クリック」 ⇒ 「ページのソースを表示」を クリックするとHTMLコード(ソース)が表示されます。

Webサイトを作成する際に、HTMLと切り離せないのがCSSとJavaScriptです。 HTMLで文書構造を示し、CSSで文書のデザインを整えて見栄えを良くして、 JavaScriptでWebサイトに動きを加えます。

できること②:Webアプリ

Androidアプリ

Webアプリとは、ブラウザ上で利用できるアプリケーションのことです。 Webアプリとして代表的なのはGmailです。 PCやスマホなどの端末と、インターネット環境と、 ChromeやFirefoxなどのブラウザがあればWebアプリを利用できます。

ここで「Webサイト」と 「Webアプリ」の違いを簡単に説明しておきます。

「Webサイト」は主に情報の閲覧を目的としているため、 訪問者は受動的です。
一方、「Webアプリ」の場合は、訪問者が能動的に情報を取得したり、 情報を発信したりします。

例えば、Gmailの場合はまずログインします。 メールを誰かに出したい場合は新規メールボタンを押し、 キーボードからメール内容を入力して、 送信ボタンを押します。そして最後にログアウトします。 このようなやりとりが発生するものをWebアプリといいます。

WebサイトもWebアプリも、 どちらもブラウザ上で画面が表示されている点は同じです。 ですがWebアプリの場合はサーバー側のプログラム、 クライアント側のプログラムが必要になってくるため Webサイトよりもはるかに複雑な仕組みになっています。

できること③:ハイブリッドアプリ

ハイブリッドアプリとは、 「Webアプリ」と「ネイティブアプリ」の中間に位置するアプリです。
「Webアプリ」はブラウザ上で利用できるアプリで、 「ネイティブアプリ」はスマホなどにインストールして使うアプリです。

ハイブリッドアプリはその間に位置し、 アプリ内でWebページを表示したり、 カメラなどのネイティブ機能を利用することもできます。

ハイブリッドアプリは「WebView」と「Cordava」という2つの機能を使うことで 実現可能です。 どちらの機能もAndroidやiOSに標準で組み込まれており、 「WebView」がWebページの表示を、 「Cordava」がネイティブアプリの機能を担当することで ハイブリッドアプリができる、という仕組みです。

ハイブリッドアプリの例としてはAmazonやクックパッドが有名です。

できること④:HTMLメール

メール

メールのやりとりをする場合、通常はテキストだけのメールが多いと思いますが、 HTMLを使ってHTMLメールを作成することもできます。

HTMLメールなら文字の色やサイズ、背景色を設定したり 画像を埋め込むこともできます。 ですから普通のテキストメールよりも 見栄えが良くて、読みやすいメールを作ることが可能です。

個人がHTMLメールを作ることはあまりありませんが、 事業者の商品案内メールやサービス紹介メールなどで HTMLメールを良く見かけます。

HTMLメールは見やすい反面、 相手側の端末環境によっては画像が表示されなかったり、 表示レイアウトが崩れてしまうデメリットもあります。

HTMLでできないこと

動的ページができない

まずは静的ページと動的ページについて説明します。
「静的ページ」とは、 サイト制作者が文書内容を更新しない限りは内容が変わらないページのことです。 誰でも、どこからアクセスしても同じ内容を見ることができます。

それに対して「動的ページ」とは、 サイト制作者が更新しなくても、 状況に応じて異なる内容が表示されるページのことです。 例えば、掲示板サイトなどは誰かが書き込むと、 自動的に表示内容が更新されます。 会員制サイトなら、ユーザー別に異なる内容を表示することもできます。

HTMLはあくまで文書構造を表すマークアップ言語なので、 静的サイトを作ることはできる一方、 動的サイトを作ることはできません。

動的サイトを実現するにはPHPやRubyなどのプログラミング言語を使います。

HTMLの学習方法

タイトルとURLをコピーしました