こんにちは、Mochiです。
HTMLは基本的な構造ってどんな感じだっけ🤔…。初めて知る方も忘れてしまった方もHTMLの基本構造をこの機会に学びましょう。
HTMLってそもそも何だっけ？と言う方は、こちらの記事を先に読むとわかりやすくなると思います。ぜひ参考にしてみてください。
🌳HTMLの全体構造
HTMLを書く際に必要不可欠な全体構造を見ていきましょう。以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mochi Blog</title>
</head>
<body>
</body>
</html>大枠の構造としては、先頭に<!DOCTYPE html>があります。そして次に<html>要素があり、<html>要素の中には<head>要素と<body>要素が入っています。
VS-Codeを利用されている方は、この全体構造をすぐに自動で呼び出す方法があります。”! + tab”を入力することで、すぐに呼び出せます。便利なので、ぜひ使ってみてください！
しかし、これらの文字を見ただけでは各部分が何をしているのか、よくわからないですよね。ではそれぞれの要素がどのような役割を持っているのでしょうか？確認していきましょう！
🌿各要素の解説
各要素について、それぞれの役割を解説していきます。
<!DOCTYPE>
<!DOCTYPE html>は文章に使うhtmlのバージョンや種類を伝える役割があります。html要素の前に書きます。
<html>
<html>~</html>はHTMLの文章であることを表します。この中に、HTMLの要素を書き込んでいきます。
lang=”ja”の部分はWebページの言語（Japanese）を設定します。英語で書く場合には、lang=”en”と指定してあげます。
<head>
<head>~</head>は読む人からは見えない、ページやHTMLファイルの情報を入れます。例えばページのタイトルや説明文、リンク情報などがあります。
<meta charset="UTF-8">
<meta charset="UTF-8">は文字コードを設定しています。文字コードがうまく設定されていないと文字化けが発生してしまいます。UTF-8という文字コードは世界中でよく使われるものですので、基本はUTF-8を指定しましょう。
ちなみに、<meta>はメタデータを表します。メタデータとは付属させる情報のようなイメージです。今回の場合は、文字コードをメタデータとして付属させています。「情報を入れておく」程度の認識で大丈夫です👌！
<title>
<title>~</title>はページのタイトルを入れます。ここで入れたタイトルは、画像のようなブラウザのタイトルバーや検索された時の表示、ブックマークの名前に利用されます。
<body>
<body>~</body>は読む人が見える、ページの内容・本体を入れます。body内に書いた内容が実際のWebページの見た目となっていきます。
例えば次のようにh1タグ（見出し1）とpタグ（段落）をbodyに入れると、実際のブラウザにも内容が表示されます。headではなく、bodyに書くことに注意しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mochi Blog</title>
</head>
<body>
<h1>Mochi Blog</h1>
<p>
Mochi Blogではさまざまな内容を発信していますが、それらはスキルアップにつながっています。
自分の発信によって、多くの人の役に立つことができると嬉しいです。
</p>
</body>
</html>
まとめ
HTMLの基本的な構成を解説しました。今回解説した要素は必要不可欠ですので、忘れてしまった場合には再度見返して、抜けのないようにしましょう。
「そもそもWebサイトって何だっけ？」という方はこちらの記事を読んでみましょう。Webサイトを簡単に学び直せます！
参考になれば幸いです。
読んでいただきありがとうございました！
