よっす！へこすです！
前回の記事では、HTMLとCSSについて説明しました。
この記事ではHTML講座その1と称して、HTMLの基本タグとその書き方について解説していきます！
画像付きで分かりやすく説明していくので、みなさんも一緒にやってみましょう！
HTMLの基本
前回の記事でも書きましたが、HTMLの基本は文章を<〇〇>と</〇〇>で囲むことです。
＜〇〇＞をタグと言って、始まりを示す<〇〇>を開始タグ、終わりを示す</〇〇>を終了タグ
と言います。
〇〇の中に入れる文字によってタグに囲まれた文章の役割が変わります。
titleを入れるとページタイトルに、h1を入れると大見出しになります。
（例）
・HTMLってなに？を<title>で囲みます
・HTMLとはを<h1>で囲みます
これをウェブブラウザで表示させると、
ページタイトルが「HTMLってなに？」大見出しが「HTMLとは」になっています！
HTMLはこのようにタグで文章を囲み、タグは囲んだ文章に対して
何らかの役割を持たせるという形をとります。
・<〇〇>＝開始タグ
・</〇〇>＝終了タグ
・タグは、囲んだ文章に対して「ページタイトル」や「大見出し」など役割を持たせる
HTMLの基本タグ
それをふまえた上でHTMLの基本タグの説明をしていきます！
- <html>
- <head>
- <body>
この3つがHTMLの基本タグです。ウェブページを構成する必要不可欠なものです。
これがないとウェブページを作成できません。柱が無いのに家を建てるようなもんです。
<html>
このタグは、囲んだ文章に対して「これはHTML文書である」ということを示す役割を持たせます。
文書の基点となるタグで、他の基本タグを全て囲む範囲の大きなタグです。
つまり、<head>タグや<body>タグはこの<html>タグに囲まれています。
<head>
このタグは、囲んだ文章に対して「その文書のタイトルや概要」「著作権に関する情報」
などといったページについての補足情報を示す役割を持たせます。
つまり、<title>のようにページタイトルの役割を持たせるタグは、この<head>タグに囲まれています。
<body>
このタグは、囲んだ文章に対して「文章や画像」といった
ウェブブラウザ上で表示する情報を示す役割を持たせます。
つまり、ぼくのこの記事の文章や画像はこの<body>タグに囲まれています。
・<html>に囲まれた文章「おれたちはHTMLなんだよー(゜o゜)」
・<head>に囲まれた文章「おれたちはページタイトルとか著作権情報を表すよー(゜o゜)」
・<body>に囲まれた文章「おれたちは文章とか画像を表示するよー(゜o゜)」
って感じ。
この説明だけだと「？？？」って感じだと思うので、実際に体験してみましょう！
HTMLの書き方
ではHTMLを書いていきましょう！
まずメモ帳を開きます。
※windowsを使っている方は画面左下の「ここに入力して検索」の所に「メモ帳」と打てば出てきますよ！
ここに、基本タグを以下の順番で打ち込みます。
これでHTMLの枠組みが完成しました。家を建てる土台ができたってところですね。
ここで先ほどのHTML基本タグの説明を見ると、より理解しやすくなると思います。
<html>タグは、囲んだ文章に「これはHTML文書である」という役割を持たせるので<head>タグも<body>タグも囲んでいますよね。
もし<html>タグに囲まれていなかったら、html文書として認識されません。
DOCTYPE宣言をしよう
基本タグは以上ですが、HTMLのバージョンを宣言する必要があります。
DSで3DSのゲームカセットを使えないように、バージョンが違うと使えないタグがあります。
なので、バージョンを最初に宣言する必要があります。それがDOCTYPEです。これはHTML5というバージョンを意味します。
<!DOCTYPE html>というタグを<html>タグの上に書きましょう。
これで「HTML5バージョンで書きますよー」という宣言をしたことになります！
文字コードを宣言しよう
HTML文書の文字コードにはいくつかの種類があります。
その中でもutf-8という文字コードを使うのが一般的とされています。
<meta charset=”utf-8″>というタグを<head>タグの中に書きましょう。
”meta”が付くタグは文書全体に関わる情報を示します。なのでページについての補足情報を示す<head>タグの中に書きます。
これで「utf-8っていう文字コードで書きますよー」という宣言をしたことになります！
まとめ
HTMLの基本タグは
- <html>
- <head>
- <body>
の3つ。それぞれ、以下の役割を持ちます。
・<html>：html文書であることを示す役割を持つ
・<head>：ページタイトルや著作権情報といった補足情報を示す役割を持つ
・<body>：文章や画像といったウェブブラウザ上で表示される情報を示す役割を持つ
ここは直感的に分かってもらえればいいと思います！書いていくうちに理解していくと思うので！
そして、DOCTYPEと文字コードを書くことでHTML文書をどのバージョンで、どの文字コードにするのかを宣言します。
次回は<head>タグや<body>タグの中にページタイトルや文章をいれて実際にウェブブラウザで表示させます！
それではっ！
