HTMLって何！？用途から歴史まで徹底解剖

2021 3/03

2018.09.13 2021.03.03

HTMLとは？

HTMLの用途

インターネットを使う時、必ず耳にする言葉としてhtmlがありますが、具体的に何を意味しているのか、何のために使われているものかということをよくわからなでいる人も少なくありません。
そもそも普段使っているこのHTMLという言葉は略称で、正式には「Hyper Text Markup Language」というものです。

htmlというのは、ウェブページをつくるための言語であり、これを使うことで普段目にしているようなサイトが出来上がります。
正確に言えば飾り立てたりするためには「CSS」、動きを作ったりするためには「javaScript」といったプログラミング言語が必要になりますが、ウェブページを制作する上ですべてのベースとなるのがHTMLということで、非常に重要な役割を果たします。
それゆえに、HP制作をする上では習得するべき言語と言えます。

普段目にしているウェブサイトでも、この技術は使われているわけですが、それと分かる形では表示されていません。
閲覧しているウェブサイトでマウスを右クリックした時に、そこのソースを表示するという部分をクリックすると、英語や記号の羅列している文章が出てきます。
そのソースコードこそがhtmlです。
他にも、仕事や家族との連絡に使っているメールや、今や無くてはならないスマートフォンのアプリなどにも使われています。

HTMLはプログラミング言語ではない！？

HTMLはプログラミング言語として一括りにされることもありますが、それは間違いです。
実際にはマークアップ言語というものです。
プログラミング言語というのは、コンピューターに何かをして欲しいという指示をするために書くもので、マークアップ言語はテキストや画像などがどのような構造になっているのかをコンピューターに理解せるための言語です。英語で書いた文章で色がついたり、枠ができたりするので勘違いしやすいですが、混同するべきではありません。

HTMLの歴史

さて、なぜこのhtmlが生まれたのかというと、スイスにあるCERNというところが関わっています。
日本では欧州原子核研究機構といって、ヨーロッパの国々が出資して作り出した世界最大の素粒子物理学研究機関です。

そこでは、トップクラスの研究者が大勢集まって研究を行っているのですが、かつてCERNではその研究成果である実験結果や論文などの情報を研究者たちが相互で把握できないことから、情報を一元的に管理でき、かつ簡単に追加や修正できるシステムをつくらなければいけないということになりました。
そこで、CERNにいたティム・バーナーズ＝リーによって開発されたのがハイパーリンクテキストであり、そのために使われるハイパーリンクテキストを編集するためのソフト「WorldWideWeb」が誕生しました。
この編集に使う言語としてつくられたのがhtmlです。

それから仕様を加えてバージョンアップされつつ、改定第5番となるバージョン5が2014年にW3C（技術の標準化を推進する非営利団体）の勧告によって次世代のウェブの標準となりました。
ただ1999年にバージョン4.01が勧告されてから15年以上使われ続けてきたものですから、完全にバージョン5に移行するのは時間がかかっています。

でも、動画コンテンツを動かすために使われてきたflashが2020年にサポートを終了するということで、それに代わるものとして動画や音声の再生に対応できるようになったバージョン5が注目されています。それによってバージョン5への移行が加速しつつあります。

HTMLの書き方

HTMLファイルは、「.html」という拡張子を設置することで作成可能です。
この拡張子をつけることで、コンピューターがHTMLという認識をしてくれます。

文章を書き、タグをでその文章を囲むことでその文字に意味を与え、ウェブページに表示することができます。
例として以下のように記述します。
ファイル名は「sample.html」とします。

<!DOCTYPE html>
<html>
  <head>
    <title>Sample.html</title>
  </head>
  <body>
    <h1>h1見出しテキスト。</h1>
    <h2>h2見出しテキスト。</h2>
    <h3>h3見出しテキスト。</h3>
    <a href="https://webtre-plus.com/blog">ウェブトレ＋のリンクです。</a>
  </body>
</html>

こちらのコードを実際に表示すると、下記のようになります。

「h1」「h2」「h3」それぞれのタグで書かれた文章がそれぞれ異なる文字の大きさになりました。
「ウェブトレ＋のリンクです。」という文章は色が変わり、リンクの機能が加わりました。文字を押すと「https://webtre-plus.com/blog」のURLに飛ぶようになっています。

このように文章に様々な機能を追加するのがhtmlのできることです。
このタグには様々な種類がありますが、それぞれの役割を覚えてしまえば、様々なウェブサイトを作れるようになります。

HTMLを習得するためには？

HP作成のためにhtmlの技術を習得する事が必要だとして、どうすれば学ぶことが出来るのかというと、独学でも出来ないことはないですが、相談できる相手がいません。そうなるとわからないことがあったときに、わからないままで終わり挫折してしまいます。

効率的に勉強をするのであれば、オンラインで完結するウェブスクールや、教室を構えるプログラミングスクールに通うのがいいでしょう。
特にオススメなのは、対面形式で授業を行ってくれるプログラミングスクールです。
プログラミングはどうしても習熟スピードに個人差が出やすい分野と言えます。マンツーマンで授業を進めてくれる場合、そういったスピード差が関係なくなり、個人のスピードに合わせて授業を進めることができるため、最も確実に習得できる方法といえます。

そうして勉強をしていく中で、より高度な技術を習得してキャリアアップを目指すのであれば、HTML5プロフェッショナル認定資格に挑んでみると良いでしょう。

学習法についてはこちらの記事をご参考に
https://webtre-plus.com/archives/639

まとめ

ウェブサイトを制作する上で、HTMLを習得することは必須です。
上記にも記載したとおり、HTMLはプログラミング言語ではありませんが、プログラミングを学ぶ上での入りとして、コードに触れるという観点においてはHTMLに触れておくのは非常におすすめです。
構造が分かりやすく、コードに触れたことない方でも比較的容易に理解することができるでしょう。