こんにちは。ましゅりです。
今、私はCSSを学んでいる途中ですが、HTMLの基礎をしっかり理解しておきたくて、改めておさらいしながら記事にしてみます！
まだ学び始めたばかりの初心者なので、ちょっとずつ進んでいきますが、HTMLの基礎を押さえることが大切だと思って、今回はそのあたりを説明していきますね。
HTMLの基本をおさらい
まず、HTMLとは、「HyperText Markup Language」「ハイパーテキスト・マークアップ・ランゲージ」の略で、ウェブページを作るための言語です。
ウェブページを作るには、HTMLのコードを使ってページの内容を構造化します。
ウェブページの見出しや段落、リンク、画像などを指定するのがHTMLの役目なんです。
HTML文書の基本構成
HTMLの文書は基本的に、いくつかのタグで構成されています。
タグは、< と > で囲まれた記号のことです。
例えば、ページのタイトルを決めるために使う <title> タグや、段落を作る <p> タグなどがあります。
HTML文書の基本的な構成は次のようになります。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ページのタイトル</title>
<meta name=”description” content=”ここにページの説明を書く”>
</head>
<body>
<h1>ウェブページの見出し</h1>
<p>これは段落のテキストです。</p>
</body>
</html>
タグの説明
<!DOCTYPE html>
「ドックタイプ エイチティーエムエル」 または 「ドックタイプ宣言」 と読みます。
これを使って、HTML5で書かれていることを宣言します。
簡単に言うと、これは「このファイルはHTML5で書かれていますよ！」とブラウザに教えるためのものです。
なぜ必要なのか？もし <!DOCTYPE html> を書かないと、ブラウザが古いバージョンのHTML（例えばHTML4）と勘違いして、レイアウトが崩れたり、正しく表示されなかったりすることがあるみたいです。
👉 覚え方：「HTMLの最初には <!DOCTYPE html> を入れるのがルール！」
<html lang=”ja”>
「エイチティーエムエル ラング イコール ジャ 」と読みます。
この文書が日本語で書かれていることを指定します。jaとは日本語のこと。
<head></head>
「ヘッド タグ」と読みます。
ページのメタ情報を記述する部分で、タイトルや文字コード、レスポンシブデザインの設定などを行います。
HTMLの中で 「ページの情報をまとめる場所」 です！
簡単に言うと、「このページはどんなものか？」をブラウザに伝える場所。
見えないけど、大事な情報を書く場所
👉 覚え方：「ページは見えないけど、大事な情報を入れる場所」
<meta charset=”UTF-8″>
「メタ キャラセット イコール ユーティーエフ エイト」と読みます。
ウェブページの文字コードを「UTF-8」に指定するためのHTMLのタグです。
簡単に言うと
- 文字化けを防ぐために使われます。
- 世界中のほとんどの言語を正しく表示できます。
- HTMLの 内に書きます。
具体的な例：
もしこれがないと、日本語が「?????」や「文字化け」してしまうことがあります。
なので、HTMLの最初にこれを書いておくと、正しく表示されるようになります
<title>ページのタイトル</title>
「タイトル」と読みます。
<title>ページのタイトル</title> は、Webページのタイトルを指定するHTMLのタグです。
ポイント
- <title> タグは <head> の中 に書く。
- タイトルは ブラウザのタブ や 検索結果 に表示される。
- 短く分かりやすいタイトルをつけるとSEO（検索エンジン対策）にも良い。
補足
<title>は 1つのページに1つだけ 書く。- 長すぎると途中で省略されるため 30文字以内が理想。
- 検索エンジンで目立たせるために、 キーワードを入れると良い（例：「楽天ROOMの始め方 初心者向けガイド」）。
<meta name=”description” content=”ここにページの説明を書く”>
ウェブページの説明文を指定するためのHTMLタグです。
簡単に言うと：
- 設定しないと、検索エンジンが自動的にページの一部を抜き出して表示します。
- HTMLの <head> 内に書きます。
- Googleなどの検索結果に表示される説明文（概要）を設定できます。
なぜ重要？
- SEO対策（検索エンジンで上位表示されやすくなる）
- クリック率UP（検索結果でわかりやすい説明があると、訪問者が増える）
ポイント：
説明文は 120文字以内 にすると、検索結果で見やすく表示されやすいです！
<body></body>
<body></body> は、HTMLの基本的な部分の1つで、「ウェブページの本体」を表します。
簡単に言うと:
実際に画面に表示される内容（文章、画像、ボタンなど）はすべてこの
タグの中に書きます。具体的なポイント
- ページの「見える部分」を囲むタグ
- <body> の中に書いたものが、ブラウザに表示される
- <body> の外に書いたもの（例：<head> の中の情報）は、見えない設定やメタデータ
例：
<!DOCTYPE html>
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これはウェブページの本文です。</p>
</body>
</html>
このコードでは、<body> の中にある <h1> や <p> がブラウザで表示されます。
ブラウザのタブには「はじめてのHTML」と書かれています。
まとめ
<body> の中に、見せたいコンテンツ（テキスト、画像、ボタンなど）を入れれば、ウェブページとして表示されます！
今回はここまでです♪
続きはまた次回お届けします！最後まで読んでいただき、ありがとうございました。
