【Web初心者向け】HTMLとは？HTMLの書き方【簡単に解説】

2021.09.24

この記事について
Web制作やWebコーディングに興味を持ち始めた方へ、さっそく耳にするのは「まずはHTMLから！」とい言葉ではないでしょうか？
本記事では、まずはHTMLというけど・・・「そもそもHTMLって何！？」という方に向けて、Webページ作りにおけるHTMLの基礎から簡単に解説していきます！

HTML（えいちてぃーえむえる）とは？

HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略称で、Webページの構造をコンピューターへ意味を理解させるための『マークアップ言語』です。

※「マークアップ」とは、文章にどんな意味があるのかを指示することを言います。

なぜ、HTMLでマークアップをする必要があるの？

コンピュータに対して、文書の意味を理解させるためです。

例えば、コンピュータに対して「これは見出しです！」や「ここは写真です！」などを、HTMLを使って伝える必要があります。人間の目では、見た目（デザインされてること）で何となく分かる要素ですよね。

でも、『コンピュータへ伝えるためには、HTMLを使う必要がある！』

ということです。ちなみに、HTMLを使ったマークアップが正しくできていることで、検索エンジンへの最適化などに影響を与える可能性があります。（※こちらについては、別記事にて解説予定です）

では、実際にコンピュータに理解してもらうための、HTMLの基本構造とHTMLの書き方について説明していきます。

HTMLの基本構造

HTMLファイルの記述例

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

HTMLでは、DOCTYPE（ドキュメント）宣言をした後に、HTMLの文書を表す<html>、その中に大きく分けて<head>と<body>の2つの要素で構成されています。

2つの要素について、簡単に説明します。

head要素

head要素内には、Webページの情報となるタイトルや説明など「ページに関する情報」を記述します。※このタグ内で記述した内容は、ブラウザ上の見た目には反映されません。

body要素

body要素内には、Webページで表示したいコンテンツ＝「実際にブラウザにて表示する内容」記述します。※このタグ内で記述した内容が、ブラウザ上の見た目に反映されます。

つまり、Webページで表示したい内容は、body要素内に記述していきます。

では、body要素内でコンピュータに対して「これは見出しです！」などが伝わるHTMLの書き方（マークアップ）について説明していきます。

HTMLの書き方

まず、HTMLをマークアップをするためには「タグ」を使用します。

タグとは、下記のようにHTML上で「<>」で囲った文字列です。

<h1>タイトル</h1>
<p>テキスト</p>

上記のようなHTMLの文書があったとすると、「<h1>」と「<p>」がタグと呼ばれます。

つまり、この場合は「<h1>～</h1>」で囲まれた「タイトル」という文書が、<h1>を定義した「<h1>要素」となります。

上記の例の場合を、もう少しわかりやすくまとめます。
↓

h1要素＝タイトル
「<h1>」のタグで囲んだ文書を「h1要素」と定義。
p要素＝テキスト
「<p>」のタグで囲んだ文章を「p要素」と定義。

ということで、簡単に言うとタグ「<>」を使って文書を囲んでいく＝マークアップになります。

そして、HTMLで使うタグ「<>」をHTMLタグと呼びます。また、HTMLタグにはそれぞれ意味があります。

HTMLタグ

HTMLタグで囲むことによって「囲まれた文書をマークアップ」していく・・・という手順は何となく分かりましたか？

ちなみに「<>」を開始タグ。
スラッシュ付きの「</>」を閉じタグまたは終了タグと言います。

タグの始まりと終わりを意味しているので、例）<p>タグで囲んだ場合「（ここから）<p>～～～～</p>（ここまで）」ということなので、開始タグと閉じタグは必ずセットで必須です！

ちょっと注意！
例外として、<br>というタグがあります。<br>は改行を表します。改行は囲む必要がありません。記述は<br>のみでOKです。

Webサイト制作のコーディングでは、HTMLを使ってコーディングしていく中で、このHTMLタグを使って文書を正しくマークアップしていくことが、重要になっていきます。

今回使った基本のHTMLタグを簡単に解説

見出しタグ（hタグ）
文章の中で『見出しを意味するタグ』です。<h1>タグから<h6>タグまで設定することができます。
段落タグ（pタグ）
文章の中で『段落を指定するためのタグ』です。段落は文章のまとまりを区切ったものをいいます。

※更に詳しい各タグの使い方については、別途記事にて解説していきます。

まとめ

HTMLとは、Webページの構造をコンピューターへ意味を理解させるための『マークアップ言語』です。

その書き方をするために、HTMLタグを使用していきます。

HTMLタグについて説明した記事はこちら

ここまでお読みいただき、ありがとうございました。