HTMLとは？定義から実装まで
はじめに
この記事を含めて、WEBブラウザ上で表示される大体のサイトはHTMLを使用して構成されます。しかし、WEBとは何なのでしょうか？それともHTMLはWEB上でどうやって動作しますか？
今回はWEBとHTMLについて勉強したことを共有したいと思います。
World Wide Web
WEBとはインターネットを利用してアクセスできるハイパーメディアドキュメントであるWorld Wide Webです。
WEBはインターネットではありません。インターネットは世界中のコンピューターを連結する広大なネットワークです。電子メール、FTPなどのプロトコルを利用したファイル転送、オンラインゲームなど、様々な通信やデータ交換を可能です。
WEBはURLおよびハイパーリンクを使用した相互連結されたテキスト、イメージ、ビデオなどのリソースで構成されてます。
ハイパーメディア
ハイパーメディアはテキスト、イメージ、動画などの色んなタイプのメディアを繋いで情報を探索できるようにします。
例えば、ハイパーテキストは他のテキストに対してるリンクが含まれたテキストを意味します。このようなリンクがテキストを超えてイメージ、動画などマルチメディアコンテンツを含めたら、ハイパーメディアの領域に属するようになります。
HTML
HTMLはWEBを構成する最も基本的な構成要素です。HTMLをいつも通りWikipediaに検索してみました。
HTMLまたはHyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の1つで、プログラミング言語ではない。主にWorld Wide Web（WWW）において、ウェブページを表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。
HTMLはHyper Text Markup Languageです。WEBページを作ったり、WEBページの構造を説明するために使用する標準マークアップ言語です。HTMLはブラウザがコンテンツを表示することを指示する要素で構成されます。
HTML文書はコンテンツを表示するために、ブラウザに指示する要素で構成されます。このような要素はタグを使用して定義します。
- HTML要素はコンテンツを囲んで特定な意味で表現します。例えば
<h1>という要素は文書の一つ目水準おタイトルを意味します。<p>は段落を意味して<a>タグはHyper Linkを表します。各要素は開始タグと終了タグに表示してその間にコンテンツを書きます。- 大体のタグは開始タグ、終了タグが必要ですが、
<img>や<br>みたいに終了タグが不要なタグもあります。
- 大体のタグは開始タグ、終了タグが必要ですが、
- HTMLの文書構造は
<!DOCTYPE html>から始めます。それとhtml、head、bodyタグに構成されてます。htmlタグは文書の最初と最後に作成して、HTML文書を表示して、headタグは文書のメタデータを作成して<body>タグ中では本文も作成します。
<!DOCTYPE html>
<!-- <開始タグ>Content</閉じるタグ>-->
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<h1>こんにちは</h1>
</body>
</html>
MDN
今まで、HTMLに関して軽く扱いました。HTMLについてもっと深く学びたいならMDNのサイトをおすすめします。
MDNはWEBの技術について幅広い文書とガイドを提供して初心者からシニアエンジニアまで有用な参考資料を提供します。
MDNはHTML、CSS、JavaScriptとWEB関連トピックまで、あらゆるものを扱います。オープンソースプロジェクトとして、提案や改善への貢献もできます。
最も良いことは、MDNの信頼性です。Googleの検索を利用して様々なブログと記事を見ることができますが、その内容がいつも最新情報や正確な情報を提供することではありません。一方、MDNは最新仕様と信頼できるリソースを提供します。
それと、MDNはFirefoxを作った組織になるMozillaから管理してます。なので、提供したリソースはWEBの仕様とWEB機関で設定した標準を従ってると思います。
HTMLのベストプラクティス
HTMLはどんどん進化されるので、これに関する書き方も変更されます。なので、最新の変更事項を把握することが重要です。HTMLの標準と新しい機能を統合するためには上記のMDNなどのサイトを利用する方が良いです。
それと、HTMLを作成するのに必要なことはベストプラクティスを従うことです。ベストプラクティスはコードの品質も担保するために、コードの構造、命名規則、一貫性があるインデント、セマンティックタグなどがあります。
それ以外も、より整形化されたHTMLのベストプラクティスを従うため、下記のリポジトリをおすすめします。
Star数も3Kなので、信頼できるベストプラクティスだと思います。
テキストエディターとIDE
HTMLのソースコードを修正するためには、テキストエディターや統合開発環境（Integrated Development Environment、IDE）が必要です。
テキストエディターは文字を書けるソフトウェアです。代表的にはメモ帳、サクラエディターがあります。
統合開発環境はプログラムを開発する時に必要な全ての作業を一つのプログラム上でできるように提供するソフトウェアです。代表的にはEclipse、IntelliJがあります。
2023年Stack Overflowの一番人気があるIDEを参考すると世の中のエンジニア中で一番使われてるツールはVisual Studio Codeでした。
なので、今回はVisual Studio Codeを使ってみたいと思います。
Visual Studio Code
VSCodeと良く言われるVisual Studio Codeはコード完成ツールのIntellisense、様々な拡張機能、デバッグなど色んな機能を提供してくれます。下記のページからインストールすることができます。 インストールされたら、拡張機能を使用して簡単なHTMLを立ち上げたいと思います。
はじめてのHTMLファイル
HTMLファイルを作成する前にリアルタイム変更と簡単なWEBサーバを提供してくれる拡張機能を追加しましょう。
VSCodeを開いて左の拡張ボタンをクリックして、Live Serverを検索してインストールします。
LiveServerは静的WEBサイトに対するローカル開発環境を提供するVisual Studio Codeの拡張機能です。
開発プロセスを改善できる機能とオプションを提供します。おすすめのオプションは下記になります。
- ポート番号：基本的に適用されるポート番号は5500ですが、使用できるポート番号で修正できます。これはAPIを設定する時に便利です。
- Live Reload：Live Serverはコードが変更されたら、自動的にWEBページを再ロードします。この機能を使用して生産性が上がります。
- ファイル除外：イメージまたはVideoなど再ロードする必要がない場合ファイルを除外して速度をあげることができます。
下に開いてるターミナルで下記のコマンドを入力します。ターミナルが開いてない状態であれば、command+jを入力してみてください。
mkdir test
cd test
touch index.html
code .
上記のコマンドを全部入力すると新しいVisual Studio CodeのExploerが開きます。そこでindex.htmlをクリックしてEmmetを利用して簡単なページを作成しましょう。Emmetは!を入力してEnterをすると実行できます。
HTML文書が作成されたら簡単にHello Worldを入力して右下のGo Liveをクリックしましょう。
ちなみに、全てのソースコードは下記になります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
以降LiveServerが問題なくて起動できたら、ローカルホスト5500ポートで下記の画面を確認できます。
まとめ
今回はWEBの定義とHTMLの基本的な構造について勉強しめ見ました。
WEBはインターネットではなく、ハイパーメディアのドキュメントということと、HTMLの書き方とVSCodeを利用してHTMLファイルを作成してみました。最後にはLiveServerという拡張機能を使用して立ち上げることもやってみました。
WEBとHTMLの構造について分かりやすくなりましたか？今までの説明が皆さんにも分かりやすく説明できていればと嬉しいです。
Discussion