コンニチハ
パンに塗り塗りジャム太郎です！
「HTMLってよく聞くけど、なんなの？ホームページってこれで作るの？」なんて思っていませんか？
今日はそんなあなたに向けて、HTMLってそもそも何？何ができるの？ をわかりやすく解説していきます！
1.HTMLってなに？
HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略。
めちゃくちゃ噛みそうな名前ですが、簡単に言えば、
- テキストを書いたり
- 見出しをつけたり
- 画像を表示したり
- リンクを貼ったり
そんな「内容そのもの」をHTMLで記述します。
ラーメンで例えると、HTMLは「麺とスープ」。CSSは「トッピングと器のデザイン」！
2.HTMLの基本構造
HTMLは「タグ」と呼ばれる記号で囲って書きます。
<!DOCTYPE html>
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これはHTMLのサンプルです。</p>
</body>
</html>この中で特に大事なのは：
<html>：HTML文書のはじまり<head>：タイトルなど、見えない情報<body>：ここに見える内容を全部書く！
3.よく使うタグいろいろ
| タグ | 意味 | 例 |
|---|---|---|
| <h1>〜<h6> | 見出し（数字が小さいほど大きい） | <h1>大見出し</h1> |
| <p> | 段落 | <p>これは文章です。</p> |
| <a> | リンク | <a href=”https://example.com”>リンク</a> |
| <img> | 画像 | <img src=”neko.jpg” alt=”猫”> |
| <ul>/<li> | リスト | <ul><li>項目1</li></ul> |
HTMLは「タグで意味を伝える」もの。見た目じゃなく、意味が大事！
4.よくあるミス
- タグを閉じ忘れる（
</p>を忘れる） - 入れ子の順番がぐちゃぐちゃになる
- 画像の
altを忘れる（アクセシビリティ的にもNG）
焦らず、丁寧に書くのが大事！
5.まとめ
- HTMLはWebページの土台
- 内容を「タグ」で囲って意味づける
- CSSとセットで見た目を整える
6.次にやるべきことは？
- 自分でHTMLファイルを作ってみよう
<h1>や<p>など、基本タグを試してみよう- ブラウザで開いて、どう表示されるかチェック！
「HTML？なんかやれそうかも！」って思ってもらえたら嬉しいです！
最初は意味がわからなくても大丈夫。少しずつ触って、少しずつ覚えていきましょう！
では、また次の記事で〜