【HTML】HTML入門

アプリケーションやWEBサイトは生活の必需ツールとなっています。
HTMLはそれらを構築するための１つの技術です。

ここではHTMLについてご紹介します。

HTMLとは

HTMLの正式名称はHyperText Markup Languageです。
コンピュータ言語の１つで、マークアップ言語という分類に属します。

マークアップ言語

マークアップ言語はテキストを構造化する言語です。
コンピュータが理解できるようにタグと呼ばれる構文を使ってテキストに意味を持たせて構造化します。

HTMLファイル

HTMLで記述されたテキストファイルをHTMLファイルと呼びます。
HTMLファイルの内容は人間には読みづらいため、ブラウザで読み込み、分かりやすく表示します。

ブラウザ

ブラウザはChromeやSafari、Microsoft Edge、Firefoxなど様々な種類があります。
一般的なWEBサイトやアプリケーションはアクセスがあるとHTMLファイルを応答（レスポンス）として返しており、ブラウザはその内容を読み込み、ユーザーが分かりやすいように表示する機能が備わっています。

開発環境

HTMLファイルの開発にはテキストエディタとブラウザを使います。
いずれもOSにデフォルトで用意されているものでも構いませんが、WEBサイトやアプリケーションの開発を想定する場合は別途インストールすることをお勧めします。

特にテキストエディタは開発効率に関わり、学習においても時間短縮を狙うことができます。
AtomやVisual Studio Codeなど様々なものがありますので、OSや好みに合わせてインストールしてみてください。

ブラウザは学習段階では普段使い慣れたブラウザで問題ありません。
一般公開（リリース）する場合は、各種ブラウザでテストした方が良いため、想定ブラウザを用意することをお勧めします。

要素

開始タグから終了タグまでを要素と呼びます。
上記の例ではh1タグとpタグの２つの要素があります。

<h1>
    HTMLとは
</h1>

<p>
    HTMLの正式名称はHyperText Markup Languageです。
    コンピュータ言語の１つで、マークアップ言語という分類に属します。
</p>

構造化は要素の中に要素を作ります。
上記の例ではhtml要素の中にhead要素があり、更にその中にtitle要素とmeta要素があるように構造化されています。

また、要素はタグの種類によってブロック要素、インライン要素、void要素の３つに分類されます。

ブロック要素

ブロック要素はテキストや画像などのコンテンツをまとめるような要素です。

インライン要素

インライン要素は文章の一部の要素です。

void要素

void要素は子要素を持たない要素です。
タグには終了タグありません。

<タグ>

開発方法

HTMLファイルを作成する方法をご紹介します。

1. ファイル作成

テキストエディタで新規ファイルを作成しましょう。
ファイル名は任意のもので構いませんが、日本語などは環境によって動作しないことがあるため、アルファベットや数字で命名することをお勧めします。

また、拡張子はhtmlです。
ここの例ではsample.htmlとします。

このファイルにHTMLで内容を記述します。

2. ドキュメントタイプ

１行目にドキュメントタイプを宣言します。
ドキュメントタイプはファイルの文書型の定義（DTD : Document Type Definition）を示すものです。

マークアップ言語にはHTMLだけでなくXHTMLやXMLなど他にも種類があり、更にはHTMLにも複数のバージョンがあります。

言語やバージョンなどによって、コンピュータが読み込む際の解析方法が変わるため、予め指定します。

具体的には次のような記述です。

<!DOCTYPE ~>

『〜』にドキュメントタイプを記述し、一般的に広く使われるHTML5の場合は

sample.html

<!DOCTYPE html>

とします。

なお、ドキュメントタイプはタグではありません。
HTMLタグよりも先に記述する必要があります。

3. 基本構造

基本構造はhtmlタグ、headタグ、bodyタグを使用します。

初めにhtmlタグを記述します。

sample.html

<!DOCTYPE html>
<html>
</html>

htmlタグはhtmlであることを示すタグでこのタグ内にHTMLを記述します。

headタグはhtmlタグ内の直下に記述します。

sample.html

<!DOCTYPE html>
<html>
    <head>
    </head>
</html>

ファイルの情報をheadタグ内に記述します。
基本的にはブラウザには表示されません。

bodyタグはheadタグの下に記述します。

sample.html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

ファイルの内容をbodyタグ内に記述します。
こちらはブラウザで表示されます。

4. ファイル情報

headタグ内にファイルの情報を記述します。
情報には様々な種類がありますが、文書のタイトルを意味するtitleタグと文字コードを指定できるmetaタグを例に使用します。

sample.html

<!DOCTYPE html>
<html>
    <head>
        <title>HTML入門</title>
        <meta charset="UTF-8">
    </head>
    <body>
    </body>
</html>

文字コードは詳しく解説しませんが、ここでは文字を処理する種類を指定するものと認識できれば問題ありません。

例ではUTF-8という文字コードを指定していますが、他にもJIS、Shift_JISなどの種類があります。

なお、metaタグで指定する文字コードはテキストエディタの文字コードと一致するようにしてください。
※ テキストエディタの文字コードを事前に確認しておきましょう。

もし、文字コードが異なると文字化けする原因になりますので注意しましょう。

5. ファイル内容

bodyタグ内にファイルの内容を記述します。
『HTMLとは』の例をbodyタグ内に記述すると次のようになります。

sample.html

<!DOCTYPE html>
<html>
    <head>
        <title>HTML入門</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>
            HTMLとは
        </h1>
        <p>
            HTMLの正式名称はHyperText Markup Languageです。
            コンピュータ言語の１つで、マークアップ言語という分類に属します。
        </p>
    </body>
</html>

タグはh1タグ、pタグ以外にも数多くの種類があります。

6. 保存

ファイルを編集したら忘れないように保存してください。
保存を忘れると、編集内容が消えたり、ブラウザ表示に反映されないことがあります。

7. ブラウザ表示

ファイルをブラウザで表示します。
多くのOSではファイルを開く方法を選択できます。

例えばMacOSではファイルを右クリックしすると『このアプリケーションで開く』という選択肢があります。
そこからブラウザ（SafariやChrome）を選ぶことでファイルをブラウザで開くことができます。

次の画像は例で作成したファイルをChromeで開いたスクリーンショットです。

bodyタグ内の内容が表示されていることが分かります。
ブラウザではタグを解析して表示するため、タグは表示されず、h1タグ（見出し）は大きく太字で、pタグ（段落）は通常サイズの文字で表示されています。

また、headタグは基本的にはブラウザでは表示されないとご紹介しましたが、画像からもブラウザのタブにタイトルが表示されていることから分かるように、titleタグはページのタイトルとして表示されます。

作法

WEBサイトやアプリケーションの開発では１度作成したファイルを編集することがあります。
複数人で開発する場合もあるため、HTMLに限った話ではなく、開発物は自分が見ても、他人が見ても分かりやすくすることが求められます。

分かりやすくする方法は様々ありますが、基本的な作法としてインデントを付けることをおすすめします。

インデントはTabやスペースで段落を付けることで、HTMLではタグの中は１段落付けて記述します。
※ 例でもタグを階層化するたびに段落を付けています。

開発チームで記述方法やルールが決まっている場合は合わせるようにして開発しましょう。

まとめ

HTMLはタグと呼ばれる構文を使ってテキストに意味を持たせて構造化する言語です。
HTMLファイルはブラウザを使うことで、タグを解析し、人間にとって見やすく表示することができます。

WEBサイトやアプリケーションで広く使われる言語になりますので、是非習得を目指してみてください。