HTML初心者向けに「HTMLタグ」の書き方を１つずつ解説
2021.09.26
HTMLタグとは、HTMLにて使用するタグのことを言います。
HTMLとは、Webページの構造をコンピューターへ意味を理解させるための『マークアップ言語』です。
⇒ HTMLとは？を説明した記事はこちら
では、実際にHTMLを書くときに、どんなHTMLタグを使用しているのかを本記事にて紹介しています。
HTMLで必須の記述
DOCTYPE宣言（※必須）
HTMLを書くなら、HTMLタグよりも先頭に「この文書は”HTML”です」という宣言を書く必要があります。
その宣言を「DOCTYPE宣言」と呼び、記述は下記の一行のみです。
<!DOCTYPE html>その次に書くのが、「<html>タグ」です。
<html>タグ（※必須）
<html>タグは、HTMLの記述を「開始（終了）する」宣言をすることができます。
<!DOCTYPE html>
<html>
</html>この<html>タグ内に入るのが、大きく分けて「<head>タグ」・「<body>タグ」になります。
＜head＞タグ（※必須）
<head>タグには、このページの情報となるタイトルや説明など「ページに関する情報」を記述します。※このタグ内で記述した内容は、ブラウザ上の見た目には反映されません。
<!DOCTYPE html>
<html>
<head>
</head>
</html><head>タグ内に入れる基本のタグ
| タグ | 説明 |
|---|---|
| <title> | ページのタイトル。 |
| <meta> | ページに関する情報。 様々な情報を伝えるためのmetaタグ（メタ情報）があります。 |
＜body＞タグ（※必須）
<body>タグは、「実際にブラウザにて表示する内容」を指定するタグになります。※このタグ内で記述した内容が、ブラウザ上の見た目に反映されます。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html><body>タグ内に入れる基本のタグ
| タグ | 説明 |
|---|---|
| <div> | ブロックレベルのタグ。 文書に意味を持たせません。 |
| <span> | インラインレベルのタグ。 文書に意味を持たせません。 |
| <h1> | ページの見出し。 |
| <p> | ページの段落。 |
よく使う基本のタグ一覧まとめ
| タグ | 説明 |
|---|---|
| <html> | DOCTYPE宣言の次に書くタグです。 |
| <head> | HTML文書のヘッダです。 この中に、ページの情報となるタイトルや説明など「ページに関する情報」を記述します。 ※<html>タグ内に記述します。 |
| <title> | ページのタイトルです。 ※<head>タグ内に記述します。 |
| <meta> | ページに関する情報です。 様々な情報を伝えるためのmetaタグ（メタ情報）があります。 ※<head>タグ内に記述します。 |
| <body> | HTML文書のコンテンツです。 この中に、ブラウザに「表示したい情報」を記述します。 ※<html>タグ内に記述します。 |
| <div> | ブロックレベルのタグです。 文書に意味を持たせません。 ※<body>タグ内に記述します。 |
| <span> | インラインレベルのタグです。 文書に意味を持たせません。 ※<body>タグ内に記述します。 |
| <h1> | ページの見出しです。 ※<body>タグ内に記述します。 |
| <p> | ページの段落です。 ※<body>タグ内に記述します。 |
上記のようなタグを使用していきながら、HTMLを記述していきます。
HTMLの書き方
まずは、一番基本となるシンプルなHTMLを用意しました。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
<meta name="description" content="このページの説明文が入ります">
</head>
<body>
<h1>ページの見出し</h1>
<p>テキストを入れましょう。</p>
</body>
</html>※上記で使用している<meta>タグは「meta descriptionタグ（メタ・ディスクリプションタグ）」です。ページの説明文を追加するために使用します。
meta description ＝ ページの説明。
では、 実際の表示を見てみましょう。
See the Pen
HTML基本構造 by homari (@homariweb)
on CodePen.
<body>タグ内に書いた要素だけが、ブラウザにて表示されます。
今回使用したHTMLタグは一例です。
数々の意味のあるHTMLタグを適切に使用しながら、HTML文書に意味を持たせていきます。
また、この作業を「マークアップ」と呼びます。
ここまでお読みいただき、ありがとうございました。