今回は初心者向けにHTMLの基本的なタグをまとめました。
ウェブデザインを勉強している人は確認用にでも使ってください。
また、ここで紹介している基本タグはHTML5までのタグです。
HTML基本タグまとめ
必須要素
HTMLを記述する上で欠かせないタグを紹介していきます。
<!DOCTYPE html>
<!DOCTYPE html>はいわゆる「DOCTYPE宣言」と呼ばれるもので、HTMLファイルの1行目に必ず記述するタグです。
最初の!は必須。 このタグを入れないとHTMLファイルが機能しないので気をつけましょう。 終了タグはありません。
また、最初の「DOCTYPE」は小文字でも大丈夫です。 （間違えてDOCKTYPEと書かないように！）
<html>
<html>は、<!doctype html>の次の行に書くタグです。
このタグは、このファイルがHTMLファイルであることを指定するタグです。
終了タグは</html>なので、開始タグと終了タグは同じタイミングで書いてしまったほうがいいと思います。
<head>
HTMLには大きく分けて「head」と「body」の要素から成り、「head」は読者が見えない部分、「body」は読者が見える部分と分けられています。
<head>には、そのページの見えない情報（読み込む外部ファイル）などを記述し、<body>には見える情報を記述するわけですね。
これも終了タグ</head>を一緒に書いてしまいましょう。
<body>
<body>には文章や見出しなど、読者が見える部分を記述します。
ページの内容をいじる際は基本的にこのタグの中身を編集することになります。
<meta charset=””>
<mata>タグに charset という属性をつけたタグです。
このタグで文字コードを指定し、<meta charset=””> の「””」の中に文字コードを書きます。
日本語のサイトなら基本的に<meta charset="UTF-8"> と入れておけば間違いないです。
<title>
<title>はページのタイトルを指定します。
サイトの内容を簡潔に表すわかりやすいタイトルがいいと思います。
<link rel=”” href=””>
<link>タグに「rel」と「href」という属性をつけたタグで、主にHTMLとCSSの関連付けを行うために使用します。
基本的にCSSファイルは「style.css」という名前をつけて保存します。
rel属性は「 rel=”stylesheet” 」と記述し、href属性は「href=”ファイルなどのパス/style.css”」と記述します。
要するに、<link rel="stylesheet" href=" ファイルなどのパス/style.css">と記述すればOKです。
<header>
ページの一番上のヘッダーと呼ばれる部分を表すタグです。
ここにはサイトのロゴや、メニュー（グローバルメニュー）などを付けます。
<main>
ページのメイン領域を指定するタグです。
ヘッダーとフッターを除いたページ本体の部分は主にこのタグの中に書きます。
特に意味は持ちませんが、HTML内で明示的な区切りを表す役割があります。
<footer>
ページの一番下のフッターと呼ばれる部分を表すタグです。
ここには著作権の表示やプライバシポリシー（サイトに来た人の個人情報をどう管理するかを定めた文章）などを書きます。
<main>と同じく、ただの区切りのタグです。
実際に書いてみた
一からHTMLファイルを作った時の構成はこんな感じになります。（style.cssをCSSファイルとし、「css」フォルダの中に入っていると仮定します）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>基本的な構造はこんな感じになると思います。
<head>～</head>にはサイトの訪問者にはほぼ見えない情報を書き、目に見える内容は<body>～</body>に書きます。
<head> と <header>の違いは？
この二つはパッと見似ているように思えますが、全く違うタグです。
<head>にはサイトをどのように構成するかを指定するタグを書きます（文字コードやcssファイルとの関連付けなど） 一方の<header>は<body>に含まれているので、ページに書く内容を書きます。
あくまで<header>は「ここからここまでがヘッダー部分だよ」と区切るためのタグなので、極論を言うと別に必要ありません。
ただ、ヘッダーにはブログのトップ画像をつけたり、サイト案内（ナビゲーション）をつけたりするので、つけたほうが自分で編集するときもわかりやすいです。
以上、HTMLの基本タグまとめでした。
覚えて使いこなせるようになるためには、やはり何度もHTMLを書くのが手っ取り早いです。 いくつかHTMLを書いているうちに慣れてくるので、「覚えられない！」という人も大丈夫です。 忘れたらその都度確認すれば必ず書けるようになります。 頑張ってください！
