【HTML導入編】今からでも遅くない、HTMLを始めよう！

HTMLって何？

HTMLって何？

HTML って皆さん聞いたことはあると思いますが、どういうものか知っていますか？
HTML（HyperText Markup Language）は、ウェブページを作成するための基本言語のことです。
皆が普段見ているお気に入りのサイトやこのサイト、YouTubeやInstagramだって、このHTMLを基本言語として作られています。
もちろん現在はHTML以外にも重要な言語がいくつかありますが、全てはHTMLから始まっています。
このサイトではHTMLを一から学び、誰でも簡単にウェブページを作ることができるように構成しています。
隙間時間で少しずつでも進めてみてください、きっとあなたの新たな可能性が広がります。

HTMLの誕生

まずHTMLを学ぶにあたり、HTMLの誕生から現在に至るまでの歴史を簡単に紹介します。
HTML（HyperText Markup Language）は、1989年にティム・バーナーズ＝リー（Tim Berners-Lee）によって発明されました。ティム・バーナーズ＝リーは、CERN（欧州原子核研究機構）で働いていたコンピュータ科学者で、彼の発明は今日のインターネットの基礎を築いたと言えます。

発明の背景

当時、CERNには世界中の科学者が集まり、膨大な量の研究データを生成していました。
これらのデータを効率的に共有するための方法が求められていましたが、各研究者が異なるコンピュータシステムやフォーマットを使用していたため、データの共有が非常に困難でした。

ティム・バーナーズ＝リーは、この問題を解決するために「World Wide Web」の概念を考案しました。このコンセプトは、次の3つの基本要素に基づいています：

HTML（HyperText Markup Language）: 文書の構造を記述する言語。
HTTP（HyperText Transfer Protocol）: データを転送するためのプロトコル。
URL（Uniform Resource Locator）: 文書やデータの位置を示すためのアドレス体系。

HTMLの誕生エピソード

ティム・バーナーズ＝リーは、1989年にCERNの上司に対して「情報管理のための提案（Information Management: A Proposal）」という文書を提出しました。この文書では、テキストをリンクで結びつけることで情報をシームレスにアクセスできるシステムを提案しています。今では当たり前に溢れている、文字をクリックすると該当のHPにリンクできるテキストリンク（⇦これのことです）案が受け入れられ、HTMLの開発が始まりました。要するに関連するテキスト同士をリンクさせたり、どこからでも閲覧できるようにすれば、便利だし仕事も効率的になるよね〜という発想から生まれたツールだったということです。

1990年、彼は最初のウェブブラウザとウェブサーバを開発し、これを使って初めてのウェブページを公開しました。このウェブページには、HTMLの基本構造やリンクの使い方が示されており、現在のインターネットの基本的な機能が既に含まれていました。
なおその記念すべきページが現在は公開されています。当たり前に利用しているホームページの原点と思うと感慨深いものがありますね。。

The World Wide Web Project

HTMLの進化

HTMLは、初期のシンプルなテキストとリンクだけのものから、現在にかけ以下のように大きく進化してきました。

HTML 2.0（1995年）: 基本的なタグが標準化され、広く普及。
HTML 3.2（1997年）: より多くのレイアウト機能とデザインオプションが追加。
HTML 4.01（1999年）: CSS（Cascading Style Sheets）が強化され、ウェブデザインの自由度が劇的に改善。
HTML5（2014年）: マルチメディア、セマンティックタグ、キャンバス要素など、多くの新機能の導入。

HTMLの発明と進化は、情報の共有とアクセスを劇的に変え、現代のインターネットの基盤を築きました。でもそれはここ30年の話で、今後も進化を続けていくことでしょう。そして現在ではインターネットが生活の一部として切り離せない存在となっていることはご自身の実生活を振り返ってもらえれば明らかかと思います。これからHTMLを学ぶことで、皆さんもこの素晴らしい技術を身につけ、皆さんの中に眠っている新たな可能性を見出すことができます。

実際の活用例

ここでは現在の最先端のHTMLを駆使した結果、普段誰もが利用しているあのサイトが作成されているという事実をわかりやすくお伝えするため3つの代表的なサイトを紹介します。
このサイトを作れるようになりたい、と思うかどうかはあなた次第です、でも誰にでも門は開かれています。

音楽ストリーミングサービス
・Spotify: HTML5のオーディオタグを利用して、ブラウザ上で音楽をストリーミング
できます。音楽の再生や停止、プレイリストの管理もHTMLとJavaScriptで行われています。
動画共有プラットフォーム
・YouTube: HTML5のビデオタグを活用して、動画の埋め込みや再生をスムーズに行います。さらに、JavaScriptを使ってインタラクティブなユーザー体験を提供しています。
インタラクティブな地図
・Google Maps: HTML5のキャンバス機能とJavaScriptを組み合わせて、動的な地図表示やルート案内が可能です。地図上にマーカーを置いたり、リアルタイムで交通情報を表示することもできます。

HTMLを学ぶことでできること

最後にまとめとしてHTMLを学ぶことでできるようになることやその後広がる世界について、簡単に紹介します。

ウェブページの作成
・ポートフォリオサイト: 自分の作品やプロジェクトを世界中に公開できます。例えば、デザイナーやアーティストは自分の作品を展示するためのウェブページを作成できます。
・ブログ: 自分の考えや日々の出来事を簡単に共有できるブログを作成できます。HTMLと少しのCSSを使うだけで、美しいブログデザインが可能です。
ウェブアプリケーション
・インタラクティブなアプリケーション: HTML5の新機能を利用して、インタラクティブなウェブアプリケーションを作成できます。例えば、Google Docsのようなリアルタイムで編集できる文書作成ツールもHTMLを基盤にしています。
・ゲーム開発: HTML5のキャンバス機能を使って、ブラウザ上で動作するシンプルなゲームを作成できます。例えば、HTML5とJavaScriptを使ったブラウザゲームが増えており、これらはモバイルデバイスでも楽しむことができます。
他のプログラミング言語への橋渡し
・オールマイティ開発者: HTMLを学ぶことで、CSSやJavaScript、さらにサーバーサイドの言語（例：Python, Ruby, Node.js）への理解が深まり、フルスタック開発者になるための基礎を築けます。
・データビジュアライゼーション: HTML5とD3.jsを組み合わせることで、データを視覚的に表示するダッシュボードを作成できます。企業では、これを使ってリアルタイムのデータ分析を行っています。

HTMLで広がる未来

いかがでしたでしょうか。この導入編ではHTMLの歴史から現在のHTMLで作られた実際のサイトも紹介しました。皆さんもHTMLを学ぶことで、ウェブサイトやアプリケーションを自分で作成する力を身につけることができます。さらに、ウェブ技術は日々進化しており、新しい可能性が広がっています。この記事を読み、少しでもワクワクした気持ちになってくれたらとても嬉しいことです。これからも続くウェブの世界で、あなたの創造力を存分に発揮してください。
またHTMLを通じて得られる知識とスキルは、他のプログラミング言語や技術の習得にも大いに役立ちます。まずはHTMLの基本から始めて、次のステップへと進んでいくことをオススメします。