Chapter 02

HTMLとは？

このチャプターの目次

HTMLとは一言で言うと、 全てのwebサイトを構成する、マークアップ言語と呼ばれる言語の1つ です。

他のプログラミング言語で開発されたwebサイトでも、最終的にアウトプットはHTMLが担っています。
HTMLで書かれたHTMLファイルは、 HTML要素 と呼ばれる要素によって構成されています。

HTML要素は、 HTMLタグ というものによって構成されます。
HTMLタグは、山カッコを使って以下のように表記します。

HTML_tag_image

divというHTML要素（divタグ）で、「HTMLタグ」というテキスト文字が構成されていることがわかります。
<div> から開始して、 </div> で、HTMLタグが締めくくられています。

<div> は「開始タグ」と言い、スラッシュのついている </div> は「閉じタグ」と言います。
例外の要素を除き、必ず開始タグと閉じタグがペアになって1つのHTML要素が構成されますので、開始タグと閉じタグがセットで用意されているか、チェックをするようにしましょう。

開始タグと閉じタグで囲まれているテキスト文字の部分を、「コンテンツ」と呼びます。

コンテンツは、ブラウザ上にアウトプットされ、表示される部分になります。
ブラウザに表示したいテキスト文字や画像、ハイパーリンクURLなどをコンテンツ部分に入れることができます。

HTMLファイルの作成: 命名規則を知る

それでは、早速HTMLファイルを作っていきましょう！

その前に、ファイル名を付ける際に少し意識する内容があるので、以下のことを念頭に置いてHTMLファイルを作成していきます。

日本語でファイル名を作成すると、認識されないことが多く、推奨されていません。
打ち間違いを避けるため、アルファベット大文字も使用するのは推奨されていません。

また、空白のスペースもHTMLファイルがきちんと読み込まれない原因になりますので、必ずハイフン（-）か、アンダースコア（_）を使って、複数の単語をつなぎます。

ファイル名は自由につけて構いませんが、基本的にHTMLファイルのファイル名は index と統一することが多いです。

理由は、HTMLファイルなどのプログラミング言語で書かれたコードファイルは、必ずフォルダに入っている必要があり、フォルダ名で各プロジェクトを区別するため、ファイル名でプロジェクトを区別する必要がないのです。

html_file_names

html_bad_file_names

悪い例の方は、ファイル名によってプロジェクトの区別をしようとしているため、ファイル名が長くなったり、瞬時にHTMLファイルと把握しづらいため、ファイルの構成がすぐに理解しにくいですね。

良い例のように、HTMLファイル名は、常にindexと統一してしまって、ファイル名を見ただけでHTMLで書かれていることが把握できるようにしておくとスムーズです。

さて、例を見ていて気が付いたかもしれませんが、indexのすぐ後ろに .html という記述がファイル名についています。
このドットからそれ以降のことを 拡張子 と言います。

拡張子をつけることで、どの言語で書かれているファイルなのかが認識されるようになります。
必ず拡張子はつけて書くようにしましょう。

HTMLであれば拡張子は .html 、CSSは .css です。

HTMLのファイル名をつける上での注意事項を開設しましたが、プログラミングでは、名前の付け方、つまり命名規則がとても重要視されています。

命名規則は、ファイル名だけのことに限りませんので、今後も学んでいく中で命名規則というキーワードが出てきた際には、名前の付け方に留意すべきことがあるのだと意識しておくと理解がしやすくなります。

HTMLファイルのファイル名についての命名規則の理解ができたところで、今度はHTMLファイルで編集した内容を、ファイルを開いて視覚的に見ていく方法を紹介します。

HTMLコードを書いて編集した内容は、視覚的に反映を見る方法があります。
反映を見るには、ブラウザでHTMLファイルを開く方法を使います。

ブラウザでHTMLファイルを開く方法は、以下のいずれかの方法を使います。

Macだと、初期設定されているブラウザがSafariのことが多いので、上記で2つ目の方法をとるとSafariで開きます。

これからweb開発の勉強をしていく上で、ブラウザで反映を確認し、コードを修正していく「検証」をたくさん行います。その際に以下のブラウザをメインに検証を行うことが推奨されているので、初期設定で開くブラウザを以下のブラウザに変更しておくと便利です。

Google Chrome Canary インストール

「マークアップ言語シリーズ: Lesson 0 Visual Studio Codeを導入してみよう」の本にある、「インストールの仕方」の項目で作成したフォルダに、HTMLファイルを作成し、上記の方法を使ってHTMLファイルをブラウザで開いてみましょう。

HTMLファイルに、特に何も記述をしていない場合は、真っ白な画面でブラウザが立ち上がり、URLを確認した時に、準備コースで作成したファイル名と、HTMLファイル名が以下のように表示されていれば成功です！

以下の例は、vscode_tutorialフォルダがデスクトップにある場合です。

ブラウザURLの表示 | file:///Users/パソコンユーザー名/Desktop/vscode_tutorial/index.html