はじめに
ウェブ制作について学ぶためには、HTMLの基本的な知識は必須になります。一つのウェブページはHTMLやCSS、JavaScriptといった複数の形式のファイルを読み込むことで構成されますが、ブラウザが最初に読み込むファイルはHTMLファイルであり、これを起点にCSSファイルやJavaScriptファイルが読み込まれます。ウェブサイトを制作できるようになるためには、まずはHTMLの基本について学ぶ必要があります。
この記事では、HTMLの基本的な概念から、HTMLファイルを作成してウェブブラウザに表示させる方法までを解説します。HTMLを初めて学ぶ方に向けた内容なので、HTMLをどこかで学んだことがある方はスキップしても問題ありません。
HTMLを学ぶためには、PCの操作や仕組みに精通している必要はありません。高性能なPCも必要なく、PCをお持ちの方であればどなたでも気軽に学び始めることができます。ウェブ制作に興味のある方はぜひチャレンジしてみてください。
この記事の対象者
- HTMLを初めて学ぶ方
- HTMLの基本的な概念を理解したい方
- ウェブ制作を基礎から学びたい方
この記事で学べること
- HTMLの基本的な概念
- HTMLファイルの作り方
- HTMLファイルをブラウザに表示させる方法
HTMLとは
HTMLはウェブページを構築するための基本的となるマークアップ言語であり、HyperText Markup Languageの略称です。
ハイパーテキスト（HyperText）は、ウェブページ内に設置されている他のページやウェブサイトへ遷移するためのリンクを指します。ユーザーはリンクをクリックすることで関連する情報にアクセスすることができます。
マークアップ言語（Markup Language）は、文書に意味付けを行うための言語です。意味付けとは、文書内の見出しや段落、リストなどを区別することを指します。これにより文書構造を表現することができます。
マークアップ言語はHTML以外にもいろいろありますが、いずれもプログラミング言語とは異なるものです。プログラミング言語はコンピューターに命令を与えるための言語であり、マークアップ言語とは目的や役割が違います。
HTMLにはバージョンがあり、2024年現在の最新バージョンはHTML5です。HTML5は最も普及しており、ほとんどのウェブページはHTML5で記述されています。
HTMLをウェブブラウザに表示する流れ
以下の手順で行います。
- フォルダを作成する
- 作成したフォルダをVisual Studio Codeで開く
- フォルダの中にHTMLファイルを作成する
- HTMLファイルにコンテンツを書き込む
- HTMLファイルをブラウザに表示する
それでは順番に解説します。
1. フォルダを作成する
デスクトップなど分かりやすいところに新しいフォルダを作成しましょう。Windowsなら【デスクトップ画面で右クリック】→【新規作成】→【フォルダー】と進めれば作れます。
フォルダ名やファイル名の決め方についてはいくつか注意しなければいけません。
- 半角のアルファベットで記述する
- スペースは使わない
- 単語の区切りはハイフンやアンダーバーを使用する
ウェブサーバー上にアップロードした際に問題が発生する可能性があるので、これらのルールを守った上で自由な名前をつけましょう。考えるのが面倒な人は「hoge」で大丈夫です。
2. 作成したフォルダをVisual Studio Codeで開く
作成したフォルダをVisual Studio Code（以降、VSCodeと表現します）で開く方法はいくつかありますが、ここではVSCodeの起動から行います。インストールがお済みの方はVSCodeを起動してください。インストールがまだの方は、以下の記事を参考にしてインストールしていただけると幸いです。
Visual Studio Codeが起動したらメニューバーから【ファイル】→【フォルダーを開く】と進んでください。
先ほど作成したフォルダを選択し、【フォルダーの選択】をクリックします。
Visual Studio Code上で作成したフォルダを開くことができました。
3. フォルダの中にHTMLファイルを作成する
続いて、作成したフォルダの中に新たにHTMLファイルを作成します。まずはファイルを新規作成するために【新しいファイル…】アイコンをクリックしてください。
フォルダ名の下に入力欄が現れるのでファイル名を入力します。
HTMLファイルはファイル名の末尾に「.html」という拡張子をつけることで作成することができます。今回は「hello.html」というファイル名にします。
作成したファイルが正常にHTMLファイルと認識されていれば、ファイル名の横にオレンジ色で「<>」のアイコンが表示されます。
フォルダの中にHTMLファイルを作成することができました。
4. HTMLファイルにコンテンツを書き込む
次に、HTMLファイルにブラウザに表示させる内容を記述します。通常、ウェブページを構成する要素には、見出しや段落、画像、リンク、ナビゲーションメニューなど様々なものがあります。HTMLでは、これらの要素を定義するために「タグ」と呼ばれる印をテキストに記述していきます。
タグには開始タグと終了タグがあります。例として、段落を定義する場合は以下のように記述します。
<p>これは段落です。</p>段落の定義にはp（Paragraphの略）タグを使用します。タグは必ず半角文字で記述する必要があります。<p>の箇所が開始タグで、</p>の箇所が終了タグです。その間に記述されているテキストがpタグの内容となり、これらで構成されるものをp要素といいます。
HTMLは基本的に文書なので、段落以外にも文書としての構造を表現するためのタグが多数用意されています。次は見出しを定義してみましょう。
<h1>はじめてのHTML</h1>見出しの定義にはh1（headingの略）タグを使用します。見出し用のタグにはh1～h6までのレベルがあり、数字が小さいほど大きな見出しとなります。
これらがHTMLにおいての要素の基本的な構造であり、実際のウェブページはもう少し複雑です。HTMLはGoogle ChromeやMicrosoft Edge、Safariといったブラウザが解析します。ブラウザが適切にHTMLを解析するには、ページに表示させる内容以外にも、HTMLのバージョンやファイルの文字コード、ファイルの参照といった情報をブラウザに読み取ってもらう必要があります。
以下は文書として意味を成すための最低限のHTMLファイルの内容です。先ほど作成したHTMLファイルに記述しましょう。コードの解説は次のステップで行うので、ここでは理解しなくても問題ありません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>Hello World!</p>
</body>
</html>上記をご覧のとおり、HTMLの要素はその内側にも要素を配置することができ、これによって文書構造の柔軟な表現を行うことができます。また、コードを読みやすくするために「インデント」というスペースを記述することで、要素の階層構造を表現します。
インデントは通常、Tabキーあるいは2つか4つの半角スペースで記述します。注意点として、インデントに全角スペースは使用できません。HTMLでは全角スペースのインデントはテキストノードとして解釈され、ブラウザ上で不要な余白を形成します。
上記の記述でHTMLファイルをブラウザに表示させるための準備ができました。
5. HTMLファイルをブラウザに表示する
HTMLファイルをウェブブラウザに表示させる方法はいくつかありますが、いずれもパソコンの基本操作が出来る方であれば難しくありません。まずはGoogle Chromeなどのブラウザを起動します。
続いて、VSCodeからhello.htmlファイルをブラウザにドラッグ＆ドロップします。ファイルをドラッグ＆ドロップできない場合は、ファイル名を右クリックして「パスのコピー」を選択してブラウザのアドレスバーに貼り付けます。
以下のように表示されれば成功です。
表示結果が異なる場合は以下を見直してみてください（アドレスバーの表示は違っていても問題ありません）。
- タグの閉じ忘れはないか
- インデントや行の末尾に全角スペースが含まれていないか
- タグ名は間違っていないか
続いて、HTMLファイルに変更を加えてみましょう。以下を追加してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>Hello World!</p>
<!-- 以下を追加 -->
<p>HTMLの学習を始めます。</p>
</body>
</html>続いて、ブラウザを再読み込みします。以下のように変更されたことを確認してください。
問題が無ければHTMLの学習を進めることができます。
最後に
この記事では、HTMLファイルを作成してブラウザに表示する方法について学びました。HTMLファイルをブラウザに表示させることは、HTMLを学び始めるための第一歩です。
HTMLファイルで構成されたウェブサイトを静的サイトといいますが、静的サイトは基本的として1ページに1つのHTMLファイルを用意します。この記事で記述したコードはどのようなウェブページでも記述するものです。このコードの意味や書き方を理解するためには、タグに指定できる属性やその書き方、HTMLの基本構造について学ぶ必要があります。
以下の記事では、これらについてHTMLを学び始めた方向けに解説しています。この記事の次のステップとして学習を進めていただけると幸いです。