HTMLの基本

HTMLの基本を学ぼう

Webサイトを作るために欠かせないのが HTML（HyperText Markup Language） です。HTMLは「マークアップ言語」と呼ばれ、文章や画像をWebページとして表示するための 構造 を作る役割を持っています。

この記事では、HTMLの基本を 初心者向け にわかりやすく解説します！

1. HTMLとは？

HTMLはWebページの 骨組み を作るための言語です。例えば、次のような要素を定義します。
✅ 見出し（タイトル）
✅ 段落（文章）
✅ 画像やリンク
✅ 表やリスト

HTML単体では「デザイン」や「動き」は作れませんが、 CSS や JavaScript と組み合わせることで、見た目や動きをつけられます。

2. HTMLの基本構造

HTMLのファイルは index.html などの拡張子 .html で保存します。基本的な構造は以下のとおりです。

<!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>これはHTMLの基本的な構造です。</p>
</body>
</html>

コードの解説

タグ役割
<!DOCTYPE html>HTML5を使うことを宣言
<html>HTML文書の開始と終了
<head>ページの設定（文字コード、タイトルなど）
<title>ブラウザのタブに表示されるタイトル
<body>ページに表示する内容

3. よく使うHTMLタグ

以下のタグは、HTMLの基本としてよく使われます。

📌 見出し（タイトル）

見出しは h1 〜 h6 まであり、h1 が最も重要です。

<h1>大見出し（h1）</h1>
<h2>中見出し（h2）</h2>
<h3>小見出し（h3）</h3>

📌 段落と改行

文章は <p> で囲み、改行には <br> を使います。

<p>これは段落です。</p>
<p>ここで<br>改行します。</p>

📌 リンク

別のページへ移動するためのリンクを作成できます。

<a href="https://example.com">Exampleサイトへ</a>

📌 画像

画像を表示するには <img> を使います。

<img src="image.jpg" alt="説明文">

📌 リスト

リストには順序あり（番号付き）と順序なし（点付き）があります。

<ul>
    <li>りんご</li>
    <li>みかん</li>
</ul>

<ol>
    <li>1つ目の項目</li>
    <li>2つ目の項目</li>
</ol>

4. HTMLを書いたらブラウザで確認しよう

  1. メモ帳やVS Codeで index.html を作成
  2. コードを書いたら保存
  3. ファイルをダブルクリックしてブラウザで開く

5. まとめ

✅ HTMLはWebページの構造を作る言語
✅ 基本タグ（h1 p a img ul など）を覚えよう
✅ ファイルを作ってブラウザで確認しよう

タイトルとURLをコピーしました