はじめに
前回は軽ーくHTMLとCSSについて説明したと思いますが、今回はもう少し詳しく学んでいきます！
今回学ぶのは以下になります
- HTMLファイルの「基本構造」が理解できる
- よく出るタグ（
html,head,bodyなど）が何をしているかわかる - 今後の学習で必ず使う“最低限のテンプレ”が書けるようになる
それでは始めていきましょう！
HTMLファイルの基本構造とは？
どんなサイトであっても、HTMLファイルには “共通の骨組み” があります。
まずは以下のテンプレートをご覧ください👇
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>ここに本文が入ります。</p>
</body>
</html>これが、HTMLファイルの 基本形（テンプレート） です。
テンプレートの各部分を解説
<!DOCTYPE html>
HTML5 を使うことを宣言するもの。
「これはHTMLの文書ですよ！」とブラウザに伝えます。
<html lang="ja">
HTML文書は <html> タグの中にすべてを入れます。lang="ja" は、日本語ページですよという意味。
<head>（ヘッド）
- 文字コード
- ページタイトル
- CSS の読み込み
など、画面には見えない設定を詰める場所。
特に重要なのがこれ👇
meta charset="UTF-8"
文字化けを防ぐ設定。
常に UTF-8 を使えばOK。
<title>タイトル</title>
ブラウザのタブに表示されるページ名。
例：
「HTML入門②｜基本構造を理解しよう」
<body>（ボディ）
画面に実際に表示される部分。
見出し、段落、画像、ボタンなどすべてここに入ります。
コードでいろいろな要素、例えばタイトルや表、フォームやボタンなどを書いていくのも
この場所なのでしっかり覚えておきましょう！
実際に書いてみよう！
VSCode に index.html を作って、下記コードをそのまま貼ってOK👇
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML入門②</title>
</head>
<body>
<h1>HTML入門②：基本構造</h1>
<p>これは本文の例です。</p>
</body>
</html>保存してブラウザで開けば、
あなたの書いたHTMLが表示されます！
前回に記載した拡張機能の「Live Server」を使ってもOKです！
HTMLの基本構造を理解すると何ができる？
- “正しいHTML” が書けるようになり、エラーが減る
- CSS の読み込みがスムーズになる
- 後々 JavaScript を足しても崩れない
（JavaScriptもwebを構成するためのプログラミング言語です） - Web制作の土台がしっかりする
Web 制作は テンプレを覚えるところから急に楽になる ので、
今回の内容は超重要です。
さらっと終わりましたがこれにて、ではでは！
次回：HTML入門③：よく使うタグ（見出し・段落・リンク・画像）をまとめて学ぼう！
コメント