HTML入門 ① - 基本構造と主要タグ

この講座では、HTMLの基本的な構造とよく使われるタグについて学びます。

Webページの仕組みを理解するための最初の一歩です。

1. HTMLとは

2. 最小のHTML構造

<!DOCTYPE html>
<html>
  <head>
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>Hello, HTML</h1>
    <p>これは段落です。</p>
  </body>
</html>
タグ 説明
<!DOCTYPE html> HTML5であることを宣言する
<html> ページ全体を囲む
<head> ページ情報（タイトルや設定）を記述
<title> タブに表示されるページ名
<body> 実際に表示される内容を記述
<h1> 見出し（最も大きなタイトル）
<p> 段落（文章）

3. よく使うタグ一覧

タグ 用途 使用例
<h1>〜<h6> 見出し <h2>小見出し</h2>
<p> 段落 <p>文章です。</p>
<a> リンク <a href="URL">リンク</a>
<img> 画像 <img src="画像URL" />
<ul> 箇条書き（順不同） <ul><li>項目</li></ul>
<ol> 箇条書き（順序あり） <ol><li>項目</li></ol>
<div> 区切り・箱 <div>内容</div>
<span> インラインの装飾 <span>文字</span>
<br> 改行 文章<br>改行されます

4. 画像の表示

<img src="https://futon362.github.io/assets/images/logo.png" alt="ページロゴ">

結果

5. リンクの作成

<a href="https://futon362.github.io">ホームページへ</a>

結果

ホームページへ

6. 箇条書きリスト

順不同リスト（ul）

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

結果

順序付きリスト（ol）

<ol>
  <li>ステップ1</li>
  <li>ステップ2</li>
</ol>

結果

  1. ステップ1
  2. ステップ2

7. ページの区切り

div（ブロック）

<div>
  <h2>セクションタイトル</h2>
  <p>この部分はひとまとまりです。</p>
</div>

結果

セクションタイトル

この部分はひとまとまりです。

span（インライン）

<p>この文章の <span>一部だけ</span> を強調します。</p>

結果

この文章の 一部だけ を強調します。

このように単体では意味をなさないので、CSSというものを用いないと活用できないので詳しい内容は次回以降で説明します。

8. コメントの書き方

<!-- これはコメントです -->
<p>表示される文章</p>

結果

表示される文章

9. よくあるミスと注意点

タグの閉じ忘れ

<p>文章</p>

タグは必ず閉じる（例：</p>）

属性の書き方ミス

<a href=https://example.com>リンク</a>  <!-- x -->

10. 次のステップ