HTML初心者向けに「HTMLタグ」の書き方を1つずつ解説
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文書に意味を持たせていきます。
また、この作業を「マークアップ」と呼びます。
ここまでお読みいただき、ありがとうございました。