【HTML】HTML入門

HTMLはマークアップ言語の１つです。

ここではHTMLの基礎について解説します。

検証環境

HTML

macOS

14.1

マークアップ言語

マークアップ言語は“テキストを構造化する言語の総称”です。

HTMLやXMLなどの種類があり、いずれもタグと呼ぶ目印でテキストに意味を持たせて構造化します。

HTML

HTMLはマークアップ言語の１つで、正式名称は『HyperText Markup Language』です。

主に“Webページの構成言語の１つ”として使用します。

一般的にはCSSやJavaScriptなどの言語と合わせて、Webページを構成します。

HTMLファイル

HTMLファイルは“HTMLで記述したテキストファイル”です。

HTMLファイルの内容は人間には読みづらいため、Webブラウザで読み込み、分かりやすく表示します。

また、HTMLで記述したテキストそのものをHTMLドキュメントと呼ぶことがあります。

Webブラウザ

Webブラウザは“Webサーバーに接続するソフトウェア”です。

ChromeやSafari、Micrsoft Edge、Firefoxなどの種類があります。

機能には『Webサーバーの接続』の他に『HTMLファイルの視覚的に分かりやすい表示』などのWebページを動作するために必要な機能を備えています。

開発環境

Webブラウザで動作するHTMLファイルの開発は『テキストエディタ』と『Webブラウザ』を使用します。

いずれもOSに標準で備わっているモノでも構いませんが、Webサイトやアプリケーションの開発を想定する場合は別途使いやすいソフトウェアのインストールを推奨します。

テキストエディタ

テキストエディタは開発効率に大きく影響し、学習においても時間短縮を狙うことが可能です。

様々なテキストエディタがあり、代表的な例にはVisual Studio Codeなどがあります。

OSや好みに合わせてインストールしてみましょう。

Webブラウザ

Webブラウザは学習段階では普段使い慣れたモノで問題ありません。

一般公開（リリース）する場合は、各種ブラウザでテストした方が良いため、利用が想定されるブラウザをインストールすることを推奨します。

要素

開始タグから終了タグまでを要素と呼びます。

上記例ではh1要素とp要素の２つの要素があります。

h1要素

<h1>HTML</h1>

p要素

<p>
    HTMLはマークアップ言語の１つで、正式名称は『HyperText Markup Language』です。
    主に“Webページの構成言語の１つ”として使用します。
</p>

要素の中に要素を作ることが可能で、例えば、p要素内のテキストである“Webページの構成言語の１つ”に重要性を意味するstrongタグを適用すると次のようになります。

<h1>HTML</h1>
<p>
    HTMLはマークアップ言語の１つで、正式名称は『HyperText Markup Language』です。
    ___ih_hl_start
    主に<strong>“Webページの構成言語の１つ”</strong>として使用します。
    ___ih_hl_end
</p>

このようにすると、テキストは構造（階層）化情報を持ちます。

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

ブロック要素

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

インライン要素

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

void要素

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

開発方法

HTMLファイルは次の手順で作成します。

1. ファイルの作成

テキストエディタでファイルを新規作成します。

ファイル名は任意で構いませんが、日本語は環境によって動作しないことがあるため、アルファベットや数字のみを使用することをおすすめします。

また、拡張子はhtmlです。

このサンプルではsample.htmlとします。

sample.html

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

2. ドキュメントタイプ

１行目にドキュメントタイプを宣言します。

ドキュメントタイプはファイルの文書型の定義（DTD : Document Type Definition）を示すモノです。

マークアップ言語はHTML以外にXHTMLやXMLなどの種類が存在し、またバージョンによる違いがあります。

Webブラウザが正しくファイルを読み込み、解析できるように最初にドキュメントタイプで言語やバージョンを指定します。

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

<!DOCTYPE ~>

~の部分をドキュメントタイプに置き換えます。

HTMLの場合は

sample.html

<!DOCTYPE html>

とします。

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

3. 基本構造

HTMLファイルは基本構造として、最初にhtmlタグ、headタグ、bodyタグの３つを作成します。

htmlタグ

htmlタグはHTMLドキュメントであることを示すタグです。

sample.html

<!DOCTYPE html>
___ih_hl_start
<html>
</html>
___ih_hl_end

この要素内のコードはHTMLドキュメントとして扱われます。

headタグ

headタグはファイルのヘッダ（ファイル情報やファイルリンク等）を示すタグです。

sample.html

<!DOCTYPE html>
<html>
    ___ih_hl_start
    <head>
    </head>
    ___ih_hl_end
</html>

html要素の直下に記述し、この要素内のコードはWebブラウザには表示されません。（titleタグなどの一部を除く）

bodyタグ

bodyタグはファイルのコンテンツを示すタグです。

sample.html

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

html要素の直下かつheadタグの下に記述します。

この要素内にファイルの主な内容を記述し、Webブラウザはbody要素の内容を表示します。

4. ヘッダ

head要素内にヘッダ情報を記述します。

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

sample.html

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

文字コードは文字に識別番号を割り当てたモノです。

サンプルではUTF-8を指定していますが、他にもJIS、Shift_JISなどの種類があります。

metaタグで指定する文字コードはテキストエディタの文字コードと一致するようにします。

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

5. コンテンツ

body要素内にコンテンツ（ファイルの主な内容）を記述します。

sample.html

<!DOCTYPE html>
<html>
    <head>
        <title>HTML入門</title>
        <meta charset="UTF-8">
    </head>
    <body>
        ___ih_hl_start
        <h1>HTML</h1>
        <p>
            HTMLはマークアップ言語の１つで、正式名称は『HyperText Markup Language』です。
            主に<strong>“Webページの構成言語の１つ”</strong>として使用します。
        </p>
				___ih_hl_end
    </body>
</html>