HTMLの構造を知ろう
みなさん、こんにちは。きぃです。
前回のNoteでは、
・1つ1つのタグの構造
・<h1>タグ
などを
文字で囲むと
「文字の大きさなどが変化する」
ことをお伝えしました。
今回では、
HTMLの構造
を説明していきます。
HTMLの構造を学ぼう
まず最初にやることは、
<!DOCTYPE html>
と書くことです。
<!DOCTYPE html>
と書くことにより、
／
HTML5の文章ですよ
＼
ということを
ブラウザに知らせる
ための
前置きのタグだと思っておいてください。
次に、<html>タグを使い、
<html>と</html>
で囲みます。
<html>タグでは
langと呼ばれる属性
を使うことができ、
文章がどんな言語で書かれてあるのか
を書いておくことができます。
lang属性を書くことによって、
複数の言語に対応できるページ作り
を進めることができます。
次に<head>タグです。
<head>タグの属性は、おもに
・CSSファイル
・画像ファイル
・アイコン
などを書いておくタグになります。
このほか、
「Googleの検索エンジンに情報を伝える役割」
もあります。
実際に使えるタグを例に挙げておきましょう。
metaタグ→文字コード(utf-8が一般的）などを指定する。検索エンジンにタイトル以外の情報を提供するタグでもあります。
titleタグ→ブラウザ・検索エンジンに表示するタイトルを書きます。
linkタグ→アイコンなどを表示するときに使います。
titleタグは
「文字通りタイトルを決めるためのタグ」
ですが、
metaタグの属性には
・charset属性（どんな文字コードか決める。たとえば日本語ならutf-8、euc-jpなど）
・name属性（どんなカテゴリーを指定するのか決める。）
linkタグの属性には
・rel属性（種類を決める。たとえばアイコンなど）
・href属性（リンク。ファイルの場所を決めるときにも使う。）
などがあります。
このように、それぞれ指定することによって、
タグ自体に
「どういう役割を持たせるのか」
を決めます。
そして<head>タグの後に書くのが、
<body>タグです。
この前のNoteで、
<h1>と<p>
で文章を作りましたが、本来
<h1>と<p>は<body>タグ内に
書きます。
<body>タグ内に書く！？もしや…？🤔
と思われた方がいるかもしれません。
実は、HTMLには、
・親要素
・子要素
があり、基本子要素が
親要素に囲まれた状態でなくてはいけません。
たとえば、<h1>と<p>タグを例にあげると、
<h1>と<p>タグは
<body>タグの子要素
なので、
<body>〜</body>の外に書くことができません。
また、<title>タグを
<head>タグの外
に書いてはいけません。
なぜなら、
<title>は<head>タグの子要素
だからです。
なので、
・<head>タグを<html>タグの外
・<body>タグを<head>タグの外
に書いてはいけないのです。
<html>タグは
<head>、<body>の親要素
にあたるからです。
もしも書いてしまうと、
「文法エラー」
になり、
ブラウザはページを
テキストでそのまま表示
してしまいますので、注意が必要です。
コメントを書いてみよう
プログラミングではお馴染みのコメントですが、
HTMLではどう書くのでしょうか？
コメントにしたい文に
<!-- ・・・ -->
のように
<!--、-->で囲みます。
コメントはコードが長くなると、
どういう理由でタグをつけたのかわからなくなってしまう
のを防ぐ
「メモ書きとしての役割」
も果たします。
また、コメント以外にも
「わかりやすくする書き方」
はあります。
・タグ、空白は必ず半角をつかうこと
・全角か半角を見分けられるように、プログラミングフォントが使えるエディタを選ぶこと（たとえば、Visual Studio Codeなど）
で誰にでもわかりやすく書いていきましょう。
なお、コメントは公開されるので、
「漏れてはいけない情報」
を書くのはオススメできません。
また、HTMLのタグは
アルファベットの小文字で書くのが一般的
です。（DOCTYPEタグは除きます。）
話が少し脱線しますが、そもそもHTMLは
文法を間違えても、エラーはおきない
と説明しましたが、
一つでも間違えてしまうとどうなるのでしょうか？？
どうなるかというと、ブラウザでは
「単なるテキストとして出力」
されてしまいます。
例としてコードを挙げてみましょう。
<h1>有給フォーム</2h1>
<p>このページは有給ページになる予定です。</p>こういうふうにわざと間違えてみたとします。
では、実際にページを開いてみましょう。
すると、
あれ？前よりも文字がおかしいぞ・・・？
ということがわかります。
ちゃんとHTMLのルールにそってかけば、
バリエーション豊かなページをかける第一歩
を踏み出すことができますよ。
まとめ
いかがでしたでしょうか？今回は
・コメント <!--・・・-->
・<html>,<head>,<body>タグ
・子要素は親要素で囲まれた中に入れる
以上を押さえておけば、HTMLを
「混乱なく書くこと」
ができるように思います。
では、次のnoteにてお会いしましょう。
この記事が気に入ったらサポートをしてみませんか？