【必ず使うタグ編】初心者向け!WEBサイト制作に最低限必要なこと!

フロントエンドエンジニアの所長です!

今回はHTMLを書いていく上で、書かないといけない約束事や
必ず使うタグについて説明していきます!

必ず書くべき記述

以前のソースを使って説明していきます!

<!DOCTYPE html>

1行目でドキュメントタイプを宣言しています。
HTMLにはバージョンがあり、この記述によって【HTML5のバージョンで書きます】と宣言しています。
難しく考えず必ず最初に書く呪文だと思って下さい。
閉じタグは必要ありません。

<html lang=”ja”>・・・</html>

2行目~11行目がHTML文書であることを示しています。
上記のドキュメントタイプの宣言以外は、全てこのhtmlタグで囲みましょう!
lang=”ja”で言語を日本語に指定しています。
また、この様にタグに【○○=”・・・”】といった形で書くものを【属性】と言います。

<head>・・・</head>

3行目~7行目がこの文書に関する情報であることを示しています。
WEBページに実際に表示されるところではありません。
ここに書けることはたくさんありますが、最低限書いておきたいことを下で説明していきます!

<meta charset=”utf-8″>

metaタグはこの文書に関する様々な情報を指定し設定していきます。
4行目のcharset属性は、この文書の文字エンコーディングを指定しています。
深く考えず【utf-8】を指定しておきましょう。必ず書く呪文です。

<title>・・・</title>

5行目はこのWEBページのタイトルを指定しています。
検索エンジンの検索結果画面やブラウザのブックマーク欄などに表示されるので
このページの内容を表す、相応しいタイトルを書きましょう!

<meta name=”description” content=”・・・”>

6行目のname属性のdescriptionは、このWEBページの説明を指定しています。
content属性の中に説明文を書いていきます。
titleタグと同じく、検索エンジンの検索結果画面に表示されます!
検索結果ページのtitleとdescriptionを見て、ユーザーは閲覧するページを選ぶわけです!
またこの様に属性が2つで初めて意味を持つタグもあります。

<body>・・・</body>

8行目~10行目がブラウザ上に表示されるコンテンツであることを示しています。
やっとこの中に見出しや段落・画像など、WEBページに表現したいものを書いていきます!

記述のときのちょっとした心がけ

見本のソースを見てもらうと、タグの中にタグが入り、さらにその中にもタグが入りと
HTMLはどんどん入れ子構造になっていきます。
実際にWEBサイトを作ると、数え切れないほどの入れ子になります。
それをわかりやすくするために、階層が変わるときは必ず【インデント】を入れましょう!
面倒な作業ですが、入れておけばソースの可読性はグッと良くなります!

以上が必ず使うタグでした!
厳密に言うと無くてもWEBページは作れるタグもあるのですが
上記のタグは必ず覚えておきましょう!
次回は、<body>・・・</body>内に書く、実際にWEB上に表示されるタグを解説していきます!