【HTML】タグとは？　簡単な文書を作る

前回、このようなプログラムを実行しました。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Title Here</title>
</head>
<body>
    <p>Hello, World!</p>
</body>
</html>

まずは、このプログラムの解説です。

1.タグとは

上のプログラムを見ると、

<p>...（いろいろ書かれている）</p>

<head> ...(いろいろ書かれている） </head>

のように、
< (文字）> 　...　＜ \（文字）＞という文字列がたくさんありますが、これがタグです。それぞれのタグが色々な役割を持っているので、その役割についてみていきます。

2.代表的なタグ

1.ヘッダータグ

<head>Title Here</head>

はヘッダータグで、＜head＞と＜head＞の間に、ヘッダ部分（記事の先頭部分）の記述をします。

2.タイトルタグ

記事の先頭（ヘッダー部分）に書きたいものとして、例えば、記事のタイトルがありますよね。タイトルにも、タイトル専用のタグがあります。この部分です。

<title>Title Here</title>

この

<title>... <title>

もタグの一つで、「タイトルタグ」と言います。そのまんまです。＜title＞ と＜/title＞の間に書いた文字列がタイトルとなります。

3.段落タグ

また、＜ｐ＞ ... ＜ｐ＞は「段落タグ（paragraph のp）」で、この中に文章を入れると、その文章が表示されます。「段落」として表示されるので、段落同士の間には少し余白があります。

4.見出しタグ

また、＜ｈ1＞ ... ＜ｈ1＞は「見出しタグ」で、この中に文章を入れると、その文章が見出しとして大きく表示されます。
見出しタグは＜ｈ1＞以外にも、＜ｈ2＞、＜ｈ3＞...＜ｈ6＞があり、それぞれ大きさが違います。ｈのあとの数字が大きいほうが見出しの文字が大きく表示されます。

つまり、どういうこと...？こういうことです。

サンプルプログラム　その2

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>サンプルプログラム</title>
</head>
<body>
    <h1>1番大きい見出し</h1>
    <p>一番大きい見出しの段落1</p>
    <p>一番大きい見出しの段落2</p>
    <p>一番大きい見出しの段落3</p>

    <h2>2番大きい見出し　その1</h2>
    <p>二番目に大きい見出し、本文</p>

    <h2>2番大きい見出し　その2</h2>
    <p>二番目に大きい見出し、本文</p>

    <h3>3番目に大きい見出し</h3>
    <h4>4番目に大きい見出し</h4>
    <h5>5番目に大きい見出し</h5>
    <h6>6番目に大きい見出し</h6>
</body>
</html>