この記事で解決すること

「HTMLを書いてみたいけど、何から始めればいいか分からない」

この記事では、HTMLファイルの最低限の構造と、コピペで使えるテンプレートを紹介します。

HTMLとは

HTMLは、Webページの「骨組み」を作る言語です。ブラウザで見ているすべてのWebページは、HTMLで書かれています。

HTMLは「プログラミング言語」ではなく「マークアップ言語」です。計算や処理をするのではなく、「ここは見出し」「ここは段落」「ここは画像」と、コンテンツの構造を指定するだけです。

最低限のHTMLテンプレート

以下をコピペして、index.html というファイル名で保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>はじめてのWebページ</title>
</head>
<body>
  <h1>はじめてのWebページ</h1>
  <p>HTMLで作った最初のページです。</p>
</body>
</html>

保存したファイルをブラウザにドラッグ＆ドロップすると、Webページとして表示されます。

各行の意味

<!DOCTYPE html>

「このファイルはHTML5で書かれています」という宣言です。おまじないだと思ってください。必ず1行目に書きます。

<html lang="ja">

HTMLの始まりを示すタグです。lang="ja" は「このページは日本語です」という意味。

<head> の中身

ページの「裏方情報」を書く場所です。ブラウザの画面には表示されません。

  • <meta charset="UTF-8"> → 文字化けを防ぐ設定
  • <meta name="viewport" ...> → スマホで見たときにちゃんと表示される設定
  • <title> → ブラウザのタブに表示されるタイトル

<body> の中身

ここに書いたものがブラウザに表示されます。

  • <h1> → 一番大きい見出し
  • <p> → 段落（普通の文章）

よく使うタグ一覧

<!-- 見出し（h1が最大、h6が最小） -->
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

<!-- 段落 -->
<p>これは段落です。</p>

<!-- リンク -->
<a href="https://example.com">リンクテキスト</a>

<!-- 画像 -->
<img src="photo.jpg" alt="写真の説明">

<!-- リスト -->
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<!-- 太字 -->
<strong>太字のテキスト</strong>

<!-- 改行 -->
<br>

<!-- 水平線 -->
<hr>

実践：自己紹介ページを作ってみよう

以下をコピペして profile.html として保存し、ブラウザで開いてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自己紹介</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 2rem;
      background: #f5f5f5;
    }
    h1 { color: #333; }
    .card {
      background: white;
      padding: 1.5rem;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>自己紹介</h1>
    <p>名前：あなたの名前</p>
    <p>趣味：プログラミング学習</p>
    <h2>好きな技術</h2>
    <ul>
      <li>HTML / CSS</li>
      <li>Python</li>
      <li>JavaScript</li>
    </ul>
    <h2>リンク</h2>
    <a href="https://github.com">GitHub</a>
  </div>
</body>
</html>

<style> タグの中にCSSを書くと、見た目を変えられます。色やフォントを変えて遊んでみてください。

まとめ

  • HTMLはWebページの「骨組み」を作る言語
  • <!DOCTYPE html> <html> <head> <body> が基本構造
  • <head> は裏方情報、<body> が表示される内容
  • まずはテンプレートをコピペして、中身を変えてみる

関連リソース

Web開発をもっと学びたい方へ：