【HTML入門】HTMLの基本構造を覚えよう【初心者向け】

1. HTMLとは
2. HTMLの基本的な文法
3. HTMLの基本的な構造
4. 色々なタグの使い方について

HTMLとは

WEBサイトやホームページ内の文章にあらゆる意味付けを行う言語のことです。

ただの文章（Text）を進化させたハイパーな文章（Hyper Text）を作るために、文章に対して意味付け（Markup）を行うための言語（Language）なので、Hyper Text Markup Language略してHTMLと呼びます。

HTMLの基本的な文法

文章に対して、「ここは見出しですよ」「ここは箇条書きですよ」「ここは図ですよ」といったことをひとつひとつ指示していきます。

下記はHTMLの書き方のイメージです。

<ここから見出し>
HTMLとは
<ここまで見出し>
<ここから段落>
WEBサイトやホームページ内の文章にあらゆる<ここから色を付けたい>意味付け<ここまで色を付けたい>を行う言語のことです。
<ここまで段落>

実際には、見出しに対応するのはhタグ、段落に対応するのはpタグ、…というふうにルールが決まっています。
上のイメージを本来のHTMLのように書くとすると、以下のようになります。

<h2>
HTMLとは
</h2>
<p>
WEBサイトやホームページ内の文章にあらゆる<span class="marker">意味付け</span>を行う言語のことです。
</p>

同じような<>(タグ)で文章を囲うこと、「ここまで」という方には / (スラッシュ)が入ること、<>の中には複数の単語が入ることがあること、を覚えておきましょう。

HTMLの基本的な構造

HTMLを書く時には、お作法としてよく使われる基本的な構造があります。

<今回のHTMLは最新バージョンだよ>
<ここからHTML>
    <ここからサイトの情報>
        <使う文字の種類>
        <ここからページのタイトル>
            【HTML入門】HTMLの基本構造を覚えよう【初心者向け】 │ 理系のひとりごと
        <ここまでページのタイトル>
    <ここまでサイトの情報>
    <ここからページに表示する内容>
        <ここから見出し>
            HTMLとは
        <ここまで見出し>
        <ここから段落>
            WEBサイトやホームページ内の文章にあらゆる<ここから色を付けたい>意味付け<ここまで色を付けたい>を行う言語のことです。
        <ここまで段落>
    <ここまでページに表示する内容>
<ここまでHTML>

ポイントは、

HTMLを使うには、「ここからHTML」という宣言が必要。
サイトに関する情報（画面には表示されないもの）とページに表示する情報は分けて書く。
タグの中でさらにタグを使うときは段落（インデントと呼びます）を一段下げることが多い。

というところです。

実際のHTMLらしく書いてみると、

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            【HTML入門】HTMLの基本構造を覚えよう【初心者向け】 │ 理系のひとりごと
        </title>
    </head>
    <body>
        <h2>
            HTMLとは
        </h2>
        <p>
            WEBサイトやホームページ内の文章にあらゆる<span class="marker">意味付け</span>を行う言語のことです。
        </p>
    </body>
</html>

それぞれのタグの詳しい意味はここでは解説しませんが、こういった構造がよくあるんだ！ということを頭の片隅に置いておきましょう。