HTML

GitHub#1

IEEESpectrum#10

JetBrains#3

マークアップ言語Web開発フロントエンド構造ドキュメント

マークアップ言語

HTML（HyperText Markup Language）

概要

HTMLは、Webページの構造と内容を記述するためのマークアップ言語です。タグを使用してテキスト、画像、リンクなどの要素をマークアップし、ブラウザが理解できる形でWebページの骨組みを構築します。すべてのWebサイトの基礎となる技術です。

詳細

HTMLは1993年にTim Berners-Leeによって開発され、World Wide Webの基盤技術として発展してきました。現在のHTML5では、セマンティック要素、フォーム機能の拡張、マルチメディア要素、Canvas、Web API等の機能が追加され、よりリッチなWebアプリケーションの開発が可能になっています。

HTMLの設計哲学は、内容と構造に焦点を当て、見た目の装飾はCSSに委ねることです。これにより、アクセシビリティの向上、SEO対応、メンテナンス性の向上が実現されています。

書き方の例

基本的なHTML構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページタイトル</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>メインタイトル</h1>
        <nav>
            <ul>
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">概要</a></li>
                <li><a href="#contact">連絡先</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>記事タイトル</h2>
            <p>記事の内容...</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2025 サイト名</p>
    </footer>
</body>
</html>

セマンティック要素

<article>
    <header>
        <h1>記事のタイトル</h1>
        <time datetime="2025-01-15">2025年1月15日</time>
    </header>
    
    <section>
        <h2>セクション1</h2>
        <p>内容...</p>
    </section>
    
    <aside>
        <h3>関連記事</h3>
        <ul>
            <li><a href="#related1">関連記事1</a></li>
            <li><a href="#related2">関連記事2</a></li>
        </ul>
    </aside>
</article>

フォーム要素

<form action="/submit" method="post">
    <fieldset>
        <legend>お問い合わせフォーム</legend>
        
        <label for="name">お名前:</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="message">メッセージ:</label>
        <textarea id="message" name="message" rows="5" required></textarea>
        
        <label for="category">カテゴリ:</label>
        <select id="category" name="category">
            <option value="general">一般</option>
            <option value="support">サポート</option>
            <option value="feedback">フィードバック</option>
        </select>
        
        <input type="checkbox" id="newsletter" name="newsletter">
        <label for="newsletter">ニュースレター購読</label>
        
        <button type="submit">送信</button>
    </fieldset>
</form>

マルチメディア要素

<!-- 画像 -->
<figure>
    <img src="example.jpg" alt="説明文" width="800" height="600">
    <figcaption>画像の説明</figcaption>
</figure>

<!-- 動画 -->
<video controls width="800" height="450">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <p>お使いのブラウザは動画をサポートしていません。</p>
</video>

<!-- 音声 -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <p>お使いのブラウザは音声をサポートしていません。</p>
</audio>

テーブル

<table>
    <caption>売上データ</caption>
    <thead>
        <tr>
            <th scope="col">月</th>
            <th scope="col">売上</th>
            <th scope="col">前年比</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1月</td>
            <td>100万円</td>
            <td>+5%</td>
        </tr>
        <tr>
            <td>2月</td>
            <td>120万円</td>
            <td>+8%</td>
        </tr>
    </tbody>
</table>

HTML5の新機能

<!-- Canvas -->
<canvas id="myCanvas" width="400" height="200">
    お使いのブラウザはCanvasをサポートしていません。
</canvas>

<!-- データリスト -->
<label for="browser">ブラウザを選択:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

<!-- 詳細・サマリー -->
<details>
    <summary>詳細を表示</summary>
    <p>ここに詳細な内容が表示されます。</p>
</details>

メリット・デメリット

メリット

標準化された構造: Webの基盤技術として世界標準
学習コストが低い: 基本的なタグは理解しやすい
アクセシビリティ: セマンティック要素によるアクセシビリティの向上
SEO対応: 検索エンジンが理解しやすい構造
クロスプラットフォーム: すべてのブラウザで動作
豊富な機能: HTML5で多くの新機能が追加

デメリット

見た目の制限: 装飾はCSSに依存
動的機能の不足: 対話的な機能にはJavaScriptが必要
ブラウザ互換性: 新機能は古いブラウザで対応していない場合がある
複雑な構造の管理: 大規模サイトでは構造の管理が困難

Developer's Catalog