HTMLタグ一覧と画像タグの使い方｜初心者向けにやさしく解説

html

Web制作を始めたばかりの人から、よくこんな質問をいただきます。

「HTMLのタグが多すぎて、どれから覚えればいいかわからない」
「画像をページに表示したいけど、どうやって書けばいいの？」
「タグの意味と使い分けが理解できない」

HTMLは、Webページを作るための基本的な言語です。

タグと呼ばれる要素を組み合わせることで、文章の構造を定義し、画像や動画などのコンテンツを表示できます。

この記事では、HTML初心者が最初に覚えるべきタグ一覧と、特に重要な画像タグの使い方を体系的に解説します。

スポンサーリンク

HTMLタグの基本概念

HTMLタグとは何か

HTMLタグは、Webページの構造と内容を定義するための「マークアップ」要素です。

タグの基本構造

<!-- 基本的なタグの構造 -->
<タグ名>内容</タグ名>

<!-- 属性を含む場合 -->
<タグ名 属性名="値">内容</タグ名>

<!-- 空要素（終了タグがない）の場合 -->
<タグ名 属性名="値">

実際の例

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

<!-- 属性を含むリンクタグ -->
<a href="https://example.com">リンクテキスト</a>

<!-- 空要素の画像タグ -->
<img src="image.jpg" alt="画像の説明">

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページタイトル</title>
</head>
<body>
    <!-- ここに表示したい内容を書く -->
</body>
</html>

必須HTMLタグ一覧

文書構造タグ

基本構造を定義するタグ

タグ名役割必須度例
<!DOCTYPE html>HTML5であることを宣言★★★<!DOCTYPE html>
<html>HTML文書の開始・終了★★★<html lang="ja">
<head>メタ情報を含む領域★★★<head>
<title>ページのタイトル★★★<title>ホームページ</title>
<body>実際の表示内容★★★<body>

メタ情報タグ

タグ名役割必須度例
<meta charset>文字エンコーディング★★★<meta charset="UTF-8">
<meta name="viewport">レスポンシブ対応★★★<meta name="viewport" content="width=device-width">
<meta name="description">ページの説明★★☆<meta name="description" content="サイトの説明">
<link>外部ファイルの読み込み★★☆<link rel="stylesheet" href="style.css">

テキスト関連タグ

見出しとテキスト構造

タグ名役割重要度使用例
<h1>最大の見出し★★★<h1>メインタイトル</h1>
<h2>中見出し★★★<h2>章タイトル</h2>
<h3>-<h6>小見出し★★☆<h3>節タイトル</h3>
<p>段落★★★<p>これは段落です。</p>
<br>改行★★☆1行目<br>2行目
<hr>水平線★☆☆<hr>

テキスト装飾タグ

タグ名役割意味使用例
<strong>重要な強調（太字）意味的に重要<strong>重要</strong>
<em>強調（斜体）意味的な強調<em>強調</em>
<b>太字（装飾のみ）視覚的な太字<b>太字</b>
<i>斜体（装飾のみ）視覚的な斜体<i>斜体</i>
<u>下線あまり推奨されない<u>下線</u>
<small>小さなテキスト補足情報<small>※注釈</small>

リンクとナビゲーション

リンクタグ

<!-- 基本的なリンク -->
<a href="https://example.com">外部サイトへのリンク</a>

<!-- 同じサイト内のページへのリンク -->
<a href="about.html">アバウトページ</a>

<!-- メールアドレスへのリンク -->
<a href="mailto:info@example.com">メール送信</a>

<!-- 電話番号へのリンク -->
<a href="tel:03-1234-5678">電話をかける</a>

<!-- 新しいタブで開く -->
<a href="https://example.com" target="_blank">新しいタブで開く</a>

<!-- ページ内リンク -->
<a href="#section1">セクション1へ移動</a>

リスト関連タグ

順序なしリスト（箇条書き）

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

順序付きリスト（番号付き）

<ol>
    <li>手順1</li>
    <li>手順2</li>
    <li>手順3</li>
</ol>

定義リスト

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Languageの略</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheetsの略</dd>
</dl>

表（テーブル）関連タグ

基本的な表の構造

<table>
    <thead>
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>職業</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>田中太郎</td>
            <td>25</td>
            <td>エンジニア</td>
        </tr>
        <tr>
            <td>佐藤花子</td>
            <td>30</td>
            <td>デザイナー</td>
        </tr>
    </tbody>
</table>

表関連タグ一覧

タグ名役割使用例
<table>表全体を定義<table>
<thead>表のヘッダー部分<thead>
<tbody>表のボディ部分<tbody>
<tfoot>表のフッター部分<tfoot>
<tr>表の行<tr>
<th>見出しセル<th>名前</th>
<td>データセル<td>田中</td>

レイアウト関連タグ

セクショニング要素

<!-- メインコンテンツ -->
<main>
    <article>
        <header>
            <h1>記事タイトル</h1>
        </header>
        <section>
            <h2>章タイトル</h2>
            <p>本文...</p>
        </section>
        <footer>
            <p>記事フッター</p>
        </footer>
    </article>
</main>

<!-- サイドバー -->
<aside>
    <h3>関連記事</h3>
    <ul>
        <li><a href="#">関連記事1</a></li>
        <li><a href="#">関連記事2</a></li>
    </ul>
</aside>

汎用コンテナ

<!-- ブロックレベル要素 -->
<div class="container">
    <p>ブロックレベルのまとまり</p>
</div>

<!-- インライン要素 -->
<p>この<span class="highlight">部分</span>だけ強調</p>

画像タグ（imgタグ）の完全ガイド

imgタグの基本構文

<img src="画像のパス" alt="代替テキスト">

必須属性

  • src: 画像ファイルのパス（相対パス/絶対パス/URL）
  • alt: 代替テキスト（アクセシビリティとSEOに重要）

基本的な画像表示例

ローカル画像の表示

<!-- 同じフォルダの画像 -->
<img src="photo.jpg" alt="風景写真">

<!-- 相対パスでの指定 -->
<img src="images/sunset.jpg" alt="夕日の写真">

<!-- 上位フォルダからの指定 -->
<img src="../pictures/landscape.png" alt="山の風景">

インターネット上の画像

<img src="https://example.com/images/sample.jpg" alt="サンプル画像">

画像サイズの指定

width属性とheight属性

<!-- 幅のみ指定（高さは自動調整） -->
<img src="photo.jpg" alt="写真" width="300">

<!-- 幅と高さを指定 -->
<img src="photo.jpg" alt="写真" width="300" height="200">

<!-- CSSでの指定（推奨） -->
<img src="photo.jpg" alt="写真" style="width: 300px;">

レスポンシブ画像

<!-- 最大幅を100%に制限 -->
<img src="photo.jpg" alt="写真" style="max-width: 100%; height: auto;">

<!-- レスポンシブ画像用のsrcset属性 -->
<img src="small.jpg" 
     srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="レスポンシブ画像">

高度な画像属性

title属性（ツールチップ）

<img src="photo.jpg" alt="風景写真" title="マウスを乗せると表示されるテキスト">

loading属性（遅延読み込み）

<!-- ページ読み込み時に表示 -->
<img src="hero.jpg" alt="メイン画像" loading="eager">

<!-- スクロールして見えるまで読み込まない -->
<img src="content.jpg" alt="コンテンツ画像" loading="lazy">

decoding属性

<!-- 非同期デコード -->
<img src="large-image.jpg" alt="大きな画像" decoding="async">

<!-- 同期デコード -->
<img src="small-image.jpg" alt="小さな画像" decoding="sync">

画像フォーマットの種類と使い分け

主要な画像フォーマット

フォーマット拡張子特徴用途
JPEG.jpg, .jpeg写真に適している、ファイルサイズ小写真、グラデーション
PNG.png透明背景対応、高画質ロゴ、アイコン、透明が必要な画像
GIF.gifアニメーション対応、色数制限あり簡単なアニメーション
SVG.svgベクター形式、拡大縮小に強いアイコン、ロゴ、イラスト
WebP.webp高圧縮率、モダンブラウザ対応次世代フォーマット

フォーマット別の使用例

<!-- 写真はJPEG -->
<img src="landscape.jpg" alt="風景写真">

<!-- ロゴはPNG -->
<img src="logo.png" alt="会社ロゴ">

<!-- アイコンはSVG -->
<img src="icon.svg" alt="メニューアイコン">

<!-- 次世代フォーマットの使用 -->
<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="代替画像">
</picture>

画像の配置とスタイリング

テキストとの位置関係

<!-- テキストの中央寄せ -->
<div style="text-align: center;">
    <img src="photo.jpg" alt="中央寄せ画像">
</div>

<!-- フロート（左右寄せ） -->
<img src="photo.jpg" alt="左寄せ画像" style="float: left; margin-right: 10px;">
<p>この文章は画像の右側に回り込みます。</p>

<!-- Flexboxを使用した中央寄せ -->
<div style="display: flex; justify-content: center;">
    <img src="photo.jpg" alt="中央寄せ画像">
</div>

画像の装飾

<!-- 枠線付き画像 -->
<img src="photo.jpg" alt="枠線付き画像" 
     style="border: 2px solid #ccc; padding: 5px;">

<!-- 角丸画像 -->
<img src="photo.jpg" alt="角丸画像" 
     style="border-radius: 10px;">

<!-- 円形画像 -->
<img src="portrait.jpg" alt="プロフィール画像" 
     style="border-radius: 50%; width: 100px; height: 100px; object-fit: cover;">

<!-- 影付き画像 -->
<img src="photo.jpg" alt="影付き画像" 
     style="box-shadow: 0 4px 8px rgba(0,0,0,0.3);">

画像とリンクの組み合わせ

画像リンク

<!-- 基本的な画像リンク -->
<a href="https://example.com">
    <img src="banner.jpg" alt="バナー画像">
</a>

<!-- 新しいタブで開く画像リンク -->
<a href="large-image.jpg" target="_blank">
    <img src="thumbnail.jpg" alt="サムネイル画像（クリックで拡大）">
</a>

<!-- ホバー効果付き画像リンク -->
<a href="page.html" style="display: inline-block;">
    <img src="button.jpg" alt="ボタン画像" 
         style="transition: opacity 0.3s;" 
         onmouseover="this.style.opacity=0.8" 
         onmouseout="this.style.opacity=1">
</a>

画像マップ（クリッカブルマップ）

<img src="map.jpg" alt="地図" usemap="#citymap">

<map name="citymap">
    <area shape="rect" coords="34,44,270,350" 
          href="tokyo.html" alt="東京">
    <area shape="rect" coords="290,172,333,250" 
          href="osaka.html" alt="大阪">
    <area shape="circle" coords="337,300,44" 
          href="kyoto.html" alt="京都">
</map>

SEOとアクセシビリティ

適切なalt属性の書き方

良い例

<!-- 情報を伝える画像 -->
<img src="chart.jpg" alt="2023年度売上推移グラフ：1月100万円から12月300万円まで増加">

<!-- 装飾的な画像 -->
<img src="decoration.jpg" alt="" role="presentation">

<!-- ボタン画像 -->
<img src="submit-button.jpg" alt="フォームを送信">

<!-- ロゴ画像 -->
<img src="company-logo.jpg" alt="ABC株式会社">

避けるべき例

<!-- 悪い例 -->
<img src="photo.jpg" alt="写真">
<img src="image1.jpg" alt="画像">
<img src="chart.jpg" alt="グラフ">
<img src="decoration.jpg" alt="装飾">

構造化データとOGP

OGP（Open Graph Protocol）

<head>
    <meta property="og:title" content="ページタイトル">
    <meta property="og:description" content="ページの説明">
    <meta property="og:image" content="https://example.com/ogp-image.jpg">
    <meta property="og:url" content="https://example.com/page.html">
    <meta property="og:type" content="website">
</head>

構造化データ（JSON-LD）

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "記事タイトル",
  "image": [
    "https://example.com/image1.jpg",
    "https://example.com/image2.jpg"
  ],
  "author": {
    "@type": "Person",
    "name": "著者名"
  }
}
</script>

実践的なHTML構成例

基本的なWebページの構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルページ</title>
    <meta name="description" content="HTMLタグの使用例を示すサンプルページです">
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        .hero-image { width: 100%; height: 300px; object-fit: cover; }
        .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
        .gallery img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; }
    </style>
</head>
<body>
    <div class="container">
        <!-- ヘッダー -->
        <header>
            <h1>HTMLタグサンプルページ</h1>
            <nav>
                <ul>
                    <li><a href="#about">About</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </header>

        <!-- メインコンテンツ -->
        <main>
            <!-- ヒーロー画像 -->
            <section>
                <img src="hero-image.jpg" alt="美しい自然の風景" class="hero-image">
            </section>

            <!-- About セクション -->
            <section id="about">
                <h2>About</h2>
                <p>このページは<strong>HTML タグの使用例</strong>を示すサンプルページです。</p>
                <p>様々なタグを組み合わせて、<em>構造化された</em>コンテンツを作成しています。</p>
            </section>

            <!-- 特徴リスト -->
            <section>
                <h2>主な特徴</h2>
                <ul>
                    <li>セマンティックなHTML構造</li>
                    <li>アクセシブルな画像表示</li>
                    <li>レスポンシブデザイン対応</li>
                </ul>
            </section>

            <!-- ギャラリーセクション -->
            <section id="gallery">
                <h2>ギャラリー</h2>
                <div class="gallery">
                    <img src="image1.jpg" alt="花の写真">
                    <img src="image2.jpg" alt="山の写真">
                    <img src="image3.jpg" alt="海の写真">
                    <img src="image4.jpg" alt="街の写真">
                </div>
            </section>

            <!-- 表の例 -->
            <section>
                <h2>データ表示例</h2>
                <table border="1" style="width: 100%; border-collapse: collapse;">
                    <thead>
                        <tr>
                            <th>項目</th>
                            <th>値</th>
                            <th>単位</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>幅</td>
                            <td>300</td>
                            <td>px</td>
                        </tr>
                        <tr>
                            <td>高さ</td>
                            <td>200</td>
                            <td>px</td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </main>

        <!-- フッター -->
        <footer id="contact">
            <h2>お問い合わせ</h2>
            <p>
                <a href="mailto:info@example.com">メール送信</a> | 
                <a href="tel:03-1234-5678">電話: 03-1234-5678</a>
            </p>
            <p><small>&copy; 2024 サンプルサイト. All rights reserved.</small></p>
        </footer>
    </div>
</body>
</html>

よくある問題と解決方法

画像が表示されない場合

問題の原因と対処法

1. ファイルパスの間違い

<!-- 間違い -->
<img src="image/photo.jpg" alt="写真">

<!-- 正しい（フォルダ名を確認） -->
<img src="images/photo.jpg" alt="写真">

2. ファイル名の大文字小文字

<!-- 間違い -->
<img src="Photo.JPG" alt="写真">

<!-- 正しい -->
<img src="photo.jpg" alt="写真">

3. ファイル形式の間違い

<!-- ファイルの実際の形式を確認 -->
<img src="photo.png" alt="写真">  <!-- JPEGなのにPNGと書いている -->

レイアウトが崩れる場合

画像サイズの問題

<!-- 問題のあるコード -->
<img src="large-image.jpg" alt="大きな画像">

<!-- 解決方法 -->
<img src="large-image.jpg" alt="大きな画像" style="max-width: 100%; height: auto;">

フロートクリアの問題

<!-- フロート後のクリア -->
<img src="photo.jpg" alt="写真" style="float: left;">
<p>回り込みテキスト</p>
<div style="clear: both;"></div>
<p>通常のテキスト</p>

モダンHTMLのベストプラクティス

セマンティックHTML

<!-- 推奨される構造 -->
<article>
    <header>
        <h1>記事タイトル</h1>
        <time datetime="2024-01-15">2024年1月15日</time>
    </header>
    
    <section>
        <h2>セクションタイトル</h2>
        <p>本文...</p>
        <figure>
            <img src="chart.jpg" alt="売上推移グラフ">
            <figcaption>図1: 2023年度売上推移</figcaption>
        </figure>
    </section>
    
    <footer>
        <p>著者: 田中太郎</p>
    </footer>
</article>

アクセシビリティの向上

<!-- WAI-ARIA属性の活用 -->
<img src="loading.gif" alt="読み込み中" aria-hidden="true">

<button type="button" aria-label="メニューを開く">
    <img src="menu-icon.svg" alt="" aria-hidden="true">
</button>

<!-- ランドマークロールの設定 -->
<nav role="navigation" aria-label="メインナビゲーション">
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">会社概要</a></li>
    </ul>
</nav>

パフォーマンス最適化

<!-- 遅延読み込み -->
<img src="placeholder.jpg" 
     data-src="actual-image.jpg" 
     alt="遅延読み込み画像" 
     loading="lazy">

<!-- 重要でない画像のプリロード防止 -->
<link rel="preload" as="image" href="hero-image.jpg">

<!-- WebPフォーマットの利用 -->
<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg" alt="次世代フォーマット対応画像">
</picture>

まとめ

HTMLタグと画像表示について、包括的に解説しました。

重要なポイント

  • 基本構造: DOCTYPE、html、head、bodyの正しい使用
  • セマンティック: 意味のあるタグ選択でアクセシビリティ向上
  • 画像表示: 適切なsrc、alt属性でSEOとアクセシビリティを確保
  • レスポンシブ: モバイル対応を考慮した画像設定

効果的な活用方法

  • 段階的学習: 基本タグから始めて徐々に高度な機能を習得
  • 実践重視: 実際にコードを書いて動作を確認
  • 検証習慣: HTMLバリデーターでの構文チェック
  • アップデート: 新しいHTML仕様の継続的な学習

得られる効果

これらの知識を適切に活用することで、以下の効果が期待できます：

  • SEO効果: 検索エンジンに理解されやすい構造
  • アクセシビリティ: すべてのユーザーが利用可能なコンテンツ
  • 保守性: 構造化されたコードで保守しやすい
  • パフォーマンス: 最適化された読み込み速度

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

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