コンテンツにスキップ

HTML Living Standard

リンクを追加
出典: フリー教科書『ウィキブックス（Wikibooks）』

序章

[編集]

HTMLとは？

[編集]

HTML（HyperText Markup Language）は、ウェブページを作成するための標準的なマークアップ言語です。HTMLは、文書の構造を定義し、テキスト、画像、リンク、フォームなどの要素を組み合わせて、ブラウザ上で表示されるウェブページを形成します。

HTML Living Standardの背景と目的

[編集]

HTML Living Standardは、従来の静的なバージョン管理から脱却し、ウェブ技術の進化に対応するために策定された動的な標準です。この標準は、ウェブ技術の最新の動向を反映し、継続的に更新されることを目指しています。これにより、開発者は最新のベストプラクティスと技術に基づいてウェブページを作成することができます。

この教科書の使い方

[編集]

この教科書は、HTMLの基本から最新の仕様までを包括的にカバーしています。各章は段階的に進むように設計されており、初学者から中級者、上級者までが効果的に学べる内容となっています。各セクションには実例が含まれており、実際のコードを通じて理解を深めることができます。

基本構造と要素

[編集]

HTML文書の基本構造

[編集]

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>こんにちは、世界！</h1>
</body>
</html>

解説

[編集]
  • <!DOCTYPE html>：この宣言は、文書がHTML5仕様に基づいていることをブラウザに示します。
  • <html lang="ja">：HTML文書のルート要素で、文書の言語を指定します。
  • <head>：メタデータを含むセクションです。タイトルや文字エンコーディング、外部リソースのリンクなどが含まれます。
  • <body>：実際にブラウザに表示されるコンテンツを含むセクションです。

最も重要な要素

[編集]

HTMLには多くの要素がありますが、以下は最も重要な要素です。

  • 見出し要素 (<h1>〜<h6>): 文書の見出しを定義します。<h1>が最も重要で、<h6>が最も重要度が低い見出しです。
  • 段落要素 (<p>): テキストの段落を定義します。
  • リンク要素 (<a>): 他の文書やリソースへのハイパーリンクを定義します。
  • 画像要素 (<img>): 画像を表示します。
  • リスト要素 (<ul>, <ol>, <li>): 順序付きリスト（<ol>）、順序なしリスト（<ul>）、およびリスト項目（<li>）を定義します。

コメントとエスケープシーケンス

[編集]

HTMLでは、コメントを使用してコード内に説明やメモを追加できます。コメントは、ブラウザに表示されることはありません。 

<!-- これはコメントです -->
<p>この段落は表示されます。</p>

エスケープシーケンス（実体参照）を使用すると、HTML特殊文字をそのまま表示することができます。 

<p>アンパサンド（&amp;）と小なり（&lt;）と大なり（&gt;）</p>

テキストコンテンツ

[編集]

見出しと段落

[編集]

見出しは文書のセクションを示すために使用され、段落はテキストのブロックを定義します。 

<h1>主要見出し</h1>
<p>これは段落です。文書の本文を構成します。</p>
<h2>副次見出し</h2>
<p>もう一つの段落です。さらに詳細な情報を提供します。</p>

リストとリストアイテム

[編集]

リストは、関連する項目をグループ化するために使用されます。 

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

<ol>
    <li>最初の項目</li>
    <li>二番目の項目</li>
    <li>三番目の項目</li>
</ol>

引用と引用元の指定

[編集]

引用要素は、他のソースからの引用を示します。 

<blockquote cite="https://www.example.com">
    <p>これは引用です。</p>
</blockquote>
<cite>出典: <a href="https://www.example.com">Example</a></cite>
詳細は「blockquote」、「q」、「cite」、「figure」、および「figcaption」を参照

セマンティックなHTML

[編集]

セマンティック要素の重要性

[編集]

セマンティックなHTML要素は、コンテンツの意味を明確にするために使用されます。これにより、検索エンジンや支援技術がコンテンツを正しく理解しやすくなります。

見出し要素、節要素、グループ化要素

[編集]
  • 見出し要素 (<header>, <footer>): 文書やセクションのヘッダーやフッターを定義します。
  • 節要素 (<section>, <article>, <aside>): 文書の論理的なセクションを定義します。
  • グループ化要素 (<div>, <span>): スタイリングやスクリプト用にコンテンツをグループ化します。

HTML5のセマンティック要素

[編集]

HTML5では、多くの新しいセマンティック要素が導入されています。 

<header>
    <h1>サイトのタイトル</h1>
</header>
<nav>
    <ul>
        <li><a href="#home">ホーム</a></li>
        <li><a href="#about">アバウト</a></li>
        <li><a href="#contact">コンタクト</a></li>
    </ul>
</nav>
<main>
    <article>
        <h2>記事のタイトル</h2>
        <p>この記事の内容です。</p>
    </article>
    <aside>
        <h2>サイドバーのタイトル</h2>
        <p>サイドバーの内容です。</p>
    </aside>
</main>
<footer>
    <p>&copy; 2024 会社名</p>
</footer>

リンクとナビゲーション

[編集]

ハイパーリンクの基本

[編集]

ハイパーリンクを使用すると、ユーザーが他の文書やリソースに移動できます。 

<a href="https://www.example.com">Exampleへのリンク</a>

アンカーとフラグメント識別子

[編集]

フラグメント識別子を使用すると、同じ文書内の特定の場所にジャンプできます。 

<a href="#section1">セクション1に移動</a>

<h2 id="section1">セクション1</h2>
<p>セクション1の内容です。</p>

ナビゲーション要素とその利用

[編集]

ナビゲーション要素は、文書やサイトのナビゲーションリンクをグループ化するために使用されます。 

<nav>
    <ul>
        <li><a href="#home">ホーム</a></li>
        <li><a href="#about">アバウト</a></li>
        <li><a href="#contact">コンタクト</a></li>
    </ul>
</nav>

画像とマルチメディア

[編集]

画像の挿入と管理

[編集]

画像を挿入するには、<img>要素を使用します。 

<img src="image.jpg" alt="画像の説明">

音声と動画の埋め込み

[編集]

HTML5では、<audio>と<video>要素を使用して音声と動画を埋め込むことができます。 

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

<video controls>
    <source src="video.mp4" type="video/mp4">
    お使いのブラウザは動画要素をサポートしていません。
</video>
詳細は「audio」、「canvas」、「embed」、「iframe」、「img」、「math」、「object」、「picture」、「svg」、および「video」を参照

代替テキストとアクセシビリティ

[編集]

画像には必ずalt属性を使用して、代替テキストを提供することが重要です。これにより、視覚障害者のユーザーもコンテンツを理解しやすくなります。 

<img src="logo.png" alt="会社のロゴ">

フォームと入力要素

[編集]

フォームの基本構造

[編集]

フォームは、ユーザーがデータを入力し、サーバーに送信するための手段を提供します。 

<form action="/submit" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="送信">
</form>

入力要素の種類と属性

[編集]

HTML5では、多くの新しい入力要素の種類が追加されました。 

<form>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email">
    
    <label for="date">日付:</label>
    <input type="date" id="date" name="date">
    
    <label for="range">範囲:</label>
    <input type="range" id="range" name="range" min="0" max="10">
    
    <input type="submit" value="送信">
</form>

フォームのバリデーションと送信

[編集]

フォームのバリデーションは、ユーザーがデータを送信する前に、入力内容を確認するために使用されます。 

<form>
    <label for="username">ユーザー名:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="age">年齢:</label>
    <input type="number" id="age" name="age" min="18" required>
    
    <input type="submit" value="送信">
</form>

テーブル

[編集]

テーブルの基本構造

[編集]

テーブルは、データを行と列の形式で表示するために使用されます。 

<table>
    <thead>
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
        </tr>
        <tr>
            <td>データ3</td>
            <td>データ4</td>
        </tr>
    </tbody>
</table>

テーブルのスタイルとデザイン

[編集]

CSSを使用してテーブルのスタイルをカスタマイズできます。 

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
    }
    th {
        background-color: #f2f2f2;
    }
</style>

複雑なテーブルの構造

[編集]

複雑なテーブルは、複数の見出し行やセルの結合を含むことがあります。 

<table>
    <thead>
        <tr>
            <th rowspan="2">見出し1</th>
            <th colspan="2">見出し2</th>
        </tr>
        <tr>
            <th>サブ見出し1</th>
            <th>サブ見出し2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
            <td>データ3</td>
        </tr>
        <tr>
            <td>データ4</td>
            <td>データ5</td>
            <td>データ6</td>
        </tr>
    </tbody>
</table>

HTMLのAPIとDOM

[編集]

DOM（Document Object Model）とは？

[編集]

DOM（Document Object Model）は、HTMLやXML文書の構造をツリー状に表現したもので、JavaScriptを使って文書の内容や構造を動的に操作するためのインターフェースを提供します。以下では、JavaScriptを使った基本的なDOM操作について説明します。

JavaScriptを使ったDOM操作

[編集]

DOMの基本操作

[編集]
要素の取得
[編集]

JavaScriptを使って、HTML文書内の要素を取得する方法にはいくつかあります。従来は、document.getElementById、document.getElementsByClassName、そしてdocument.getElementsByTagNameを適宜使い分けていましたが、CSSのセレクタと同じ構文が使えるので、document.querySelectorやdocument.querySelectorAllの利用が推奨されます。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>DOM操作の例</title>
</head>
<body>
    <h1 id="main-title">DOM操作の例</h1>
    <p class="content">この段落はクラス名を使って取得されます。</p>
    <p>この段落はタグ名を使って取得されます。</p>
    <script>
        // IDを使って要素を取得
        const title = document.querySelector("#main-title");
        console.log(title);

        // クラス名を使って要素を取得
        const content = document.querySelectorALl(".content");
        console.log(content[0]);

        // タグ名を使って要素を取得
        const paragraphs = document.querySelectorAll("p");
        console.log(paragraphs[0]);

        // CSSセレクタを使って要素を取得
        const firstParagraph = document.querySelector("p");
        console.log(firstParagraph);
    </script>
</body>
</html>
要素の作成と追加
[編集]

新しい要素を作成して、既存の文書に追加するには、document.createElementを使います。作成した要素は、appendChildやinsertBeforeを使って文書に挿入します。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>要素の作成と追加</title>
</head>
<body>
    <div id="container"></div>
    <script>
        // 新しい段落要素を作成
        const newParagraph = document.createElement("p");
        newParagraph.textContent = "この段落はJavaScriptで作成されました。";

        // 作成した段落を既存の要素に追加
        const container = document.querySelector("#container");
        container.appendChild(newParagraph);
    </script>
</body>
</html>
要素の削除
[編集]

既存の要素を削除するには、parentNode.removeChildを使います。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>要素の削除</title>
</head>
<body>
    <p id="remove-me">この段落は削除されます。</p>
    <script>
        // 削除する要素を取得
        const paragraph = document.querySelector("#remove-me");

        // 親要素から子要素として削除
        paragraph.parentNode.removeChild(paragraph);
    </script>
</body>
</html>

属性の操作

[編集]
属性の取得と設定
[編集]

要素の属性を取得するにはgetAttribute、設定するにはsetAttributeを使います。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>属性の操作</title>
</head>
<body>
    <a id="link" href="https://www.example.com">Example</a>
    <script>
        // 要素の取得
        const link = document.querySelector("#link");

        // 属性の取得
        const href = link.getAttribute("href");
        console.log(href); // "https://www.example.com"

        // 属性の設定
        link.setAttribute("href", "https://www.changed.com");
        console.log(link.getAttribute("href")); // "https://www.changed.com"
    </script>
</body>
</html>
クラスの追加と削除
[編集]

要素のクラスを操作するには、classListプロパティを使います。クラスの追加にはadd、削除にはremove、存在確認にはcontains、トグル（切り替え）にはtoggleを使います。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>クラスの操作</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p id="text">この段落はクラスが追加されます。</p>
    <script>
        // 要素の取得
        const text = document.querySelector("#text");

        // クラスの追加
        text.classList.add("highlight");

        // クラスの削除
        text.classList.remove("highlight");

        // クラスのトグル
        text.classList.toggle("highlight");

        // クラスの存在確認
        console.log(text.classList.contains("highlight")); // true
    </script>
</body>
</html>

イベントの操作

[編集]
イベントリスナーの追加
[編集]

イベントリスナーを追加するには、addEventListenerを使います。これにより、ユーザーの操作（クリック、キーボード入力など）に応じて特定の関数を実行できます。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>イベントリスナーの追加</title>
</head>
<body>
    <button id="myButton">クリックして下さい</button>
    <script>
        // 要素の取得
        const button = document.querySelector("#myButton");

        // イベントリスナーの追加
        button.addEventListener("click", function() {
            alert("ボタンがクリックされました！");
        });
    </script>
</body>
</html>
イベントの削除
[編集]

追加したイベントリスナーを削除するには、removeEventListenerを使います。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>イベントリスナーの削除</title>
</head>
<body>
    <button id="myButton">クリックして下さい</button>
    <script>
        // 要素の取得
        const button = document.querySelector("#myButton");

        // イベントリスナーの定義
        function handleClick() {
            alert("ボタンがクリックされました！");
        }

        // イベントリスナーの追加
        button.addEventListener("click", handleClick);

        // イベントリスナーの削除
        button.removeEventListener("click", handleClick);
    </script>
</body>
</html>
イベントオブジェクト
[編集]

イベントが発生したときに提供されるイベントオブジェクトには、イベントに関する情報（発生元の要素、発生した場所など）が含まれています。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>イベントオブジェクト</title>
</head>
<body>
    <button id="myButton">クリックして下さい</button>
    <script>
        // 要素の取得
        const button = document.querySelector("#myButton");

        // イベントリスナーの追加
        button.addEventListener("click", function(event) {
            console.log("クリックされた要素:", event.target);
            console.log("クリックされた位置:", event.clientX, event.clientY);
        });
    </script>
</body>
</html>

以上が、JavaScriptを使った基本的なDOM操作の方法です。これらのテクニックを駆使することで、動的でインタラクティブなウェブコンテンツを作成することができます。

イベントハンドリングとリスナー

[編集]

イベントハンドリングは、ユーザーの操作に応じて動作を実行するための重要な技術です。 

<script>
    document.querySelector("#myButton").addEventListener("click", function() {
        alert("ボタンがクリックされました！");
    });
</script>

<button id="myButton">クリックして下さい</button>

グラフィックと描画

[編集]

SVGの基本

[編集]

SVG（Scalable Vector Graphics）は、ベクター形式の画像を表示するためのXMLベースの言語です。 

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Canvas要素による描画

[編集]

Canvas要素を使用すると、JavaScriptを使って動的なグラフィックを描画できます。 

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.querySelector("#myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(20, 20, 150, 100);
</script>

グラフィックの操作とアニメーション

[編集]

Canvasを使用してアニメーションを作成する例です。 

<canvas id="animationCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.querySelector("#animationCanvas");
    var ctx = canvas.getContext("2d");
    var x = 0;
    var y = 0;
    
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#00FF00";
        ctx.fillRect(x, y, 50, 50);
        x++;
        y++;
        requestAnimationFrame(draw);
    }
    
    draw();
</script>

パフォーマンスと最適化

[編集]

ウェブサイトのパフォーマンスと最適化は、ユーザー体験を向上させるための重要な要素です。以下では、ページの読み込み速度、リソース管理、レンダリングパフォーマンスの向上に関する具体的な方法を説明します。

ページの読み込み速度の改善

[編集]

ページの読み込み速度は、ユーザーがサイトにアクセスした際の最初の印象を左右します。読み込み速度を改善するための主な方法を以下に示します。

画像の最適化

[編集]

画像はウェブページの読み込み速度に大きな影響を与える要素の一つです。画像の最適化には、以下の方法があります。

  • 画像サイズの調整: 画像を表示するのに必要な最大の解像度に合わせてサイズを調整します。これにより、無駄なデータの転送を防ぎます。
  • 圧縮: 画像圧縮ツールを使って、品質を保ちながらファイルサイズを縮小します。JPEGやPNG画像を圧縮することで、読み込み速度を大幅に向上させることができます。
<img src="optimized-image.jpg" alt="最適化された画像">

キャッシュの活用

[編集]

キャッシュを活用することで、ユーザーが同じページを再度訪れた際の読み込み時間を短縮できます。

  • サーバーキャッシュ: サーバー側でキャッシュを設定し、静的リソース（画像、CSS、JavaScriptなど）のキャッシュ期間を設定します。
  • ブラウザキャッシュ: Cache-ControlやExpiresヘッダーを使用して、ブラウザがリソースをキャッシュするように指示します。
Cache-Control: max-age=31536000

最適なリソース管理

[編集]

リソース管理のベストプラクティスを実践することで、ウェブページのパフォーマンスを大幅に向上させることができます。

CSSとJavaScriptのミニファイ

[編集]

CSSとJavaScriptファイルをミニファイ（圧縮）することで、ファイルサイズを小さくし、読み込み速度を向上させます。

  • ミニファイツール: 例えば、UglifyJSやCSSNanoなどのツールを使用して、余分な空白やコメントを削除し、コードを圧縮します。
<link rel="stylesheet" href="styles.min.css">
<script src="scripts.min.js"></script>

非同期ロード

[編集]

JavaScriptファイルを非同期にロードすることで、ページの初期表示を高速化します。

  • async属性: スクリプトの読み込みと実行を非同期に行います。
  • defer属性: スクリプトの実行をHTML解析後まで遅延させます。
<script src="script.js" async></script>

レンダリングパフォーマンスの向上

[編集]

レンダリングパフォーマンスの向上は、スムーズで高速なユーザーインターフェースを実現するために重要です。

CSSアニメーションの活用

[編集]

アニメーションをJavaScriptではなくCSSで実装することで、性能が向上する場合があります。CSSアニメーションはブラウザによって最適化されているため、よりスムーズに実行されます。 

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.element {
    animation: fadeIn 1s ease-in-out;
}

レイアウトスラッシングの回避

[編集]

レイアウトスラッシングとは、頻繁なレイアウト変更によるパフォーマンス低下のことです。これを回避するために、以下の方法を用います。

  • スタイル変更のバッチ処理: 可能な限り、スタイルの変更を一度にまとめて行います。
  • オフスクリーン操作: レイアウト変更が必要な操作をオフスクリーンで行い、その後一度に反映させます。
// 要素の取得
const element = document.querySelector("#myElement");

// スタイルのバッチ変更
element.style.width = "100px";
element.style.height = "100px";
element.style.backgroundColor = "red";

以上のテクニックを駆使することで、ウェブページのパフォーマンスとユーザーエクスペリエンスを大幅に向上させることができます。

アクセシビリティ

[編集]

アクセシビリティは、すべてのユーザーがウェブコンテンツに容易にアクセスできるようにするための重要な考え方です。ここでは、アクセシビリティの基本概念から、ARIA属性の使用方法、そしてアクセシビリティのテストと評価について詳しく説明します。

アクセシビリティの基本概念

[編集]

ウェブアクセシビリティとは、障害の有無にかかわらず、すべてのユーザーがウェブサイトやウェブアプリケーションを理解し、操作できるようにする原則です。以下は、アクセシビリティを向上させるための基本的な考え方です。

  • セマンティックなHTML: 適切なHTML要素を使用し、コンテンツの意味を正しく伝えます（例: <nav>、<main>、<footer>など）。
  • 適切な色の使用: 色のコントラストを適切に設定し、色覚異常のユーザーも含めてコンテンツを視認しやすくします。
  • キーボード操作のサポート: マウスやタッチパッドが利用できないユーザー向けに、すべての操作がキーボードだけで完了できるようにします。

ARIA属性の使用

[編集]

ARIA（Accessible Rich Internet Applications）属性は、HTML要素に追加して、動的でインタラクティブなコンテンツのアクセシビリティを向上させる役割を果たします。

ARIA属性の例

[編集]

ARIA属性は、role、aria-プレフィックスを持つ様々な属性で構成されています。以下は、ボタンにaria-label属性を使用した例です。 

<button aria-label="閉じる">X</button>

この例では、"閉じる"というラベルがボタンの代替テキストとしてスクリーンリーダーに提供されます。これにより、視覚的に「X」ボタンとして表示されるが、スクリーンリーダーのユーザーには「閉じる」という意味が伝わります。

以下は、一般的に使用されるARIA属性の一覧を、名称、機能、用例の順に表組みで示したものです。

ARIA属性一覧
名称 機能 用例
aria-atomic スクリーンリーダーによる更新を一括して通知 一連の関連する変更がある場合に、更新を一括して通知するために使用
aria-busy コンテンツが読み込み中または処理中であることを示す ページが読み込み中であることを示し、ユーザーに待機状態を伝えるために使用
aria-controls 制御する要素のIDを指定 プルダウンメニューのボタンがコントロールするメニューのIDを指定するために使用
aria-describedby 要素の詳細説明の要素IDを指定 フォームのエラーメッセージを、該当する入力フィールドのIDを指定して関連付けるために使用
aria-disabled 要素の無効化状態を示す 操作不可なボタンや入力フィールドを示すために使用
aria-dropeffect ドラッグアンドドロップの動作を指定 ドロップ可能なエリアに対して、許可される操作（copy/move/link/exec）を指定するために使用
aria-flowto 焦点が移動する次の要素のIDを指定 セクションの内容が順番に表示される場合に、次のフォーカス先の要素のIDを指定するために使用
aria-grabbed ドラッグ可能な要素が現在つかまれているかどうかを示す ドラッグ可能なリストアイテムが現在つかまれているかどうかを示すために使用
aria-haspopup ポップアップウィンドウの有無を示す マウスオーバーで表示されるメニューなどのポップアップウィンドウがある場合に使用
aria-hidden スクリーンリーダーに非表示を指示 一時的に見えない要素をスクリーンリーダーから隠す場合に使用
aria-invalid 入力値の無効性を示す 入力フィールドに不正な値が入力された場合に、エラーメッセージとともに使用
aria-label オブジェクトのラベルを提供 画像やボタンなど、ラベルがない要素に対して代替テキストを提供するために使用
aria-labelledby ラベルの要素IDを指定 複数の要素をまとめてラベル付けする場合や、テキストの部分ラベルを指定する場合に使用
aria-live 動的に変化するコンテンツの更新方法を指定 ダイナミックなコンテンツが更新された際にスクリーンリーダーに通知する方法を指定
aria-owns 所有するポップアップウィンドウやダイアログのIDを指定 ボタンが所有するドロップダウンメニューのIDを指定するために使用
aria-relevant コンテンツの更新の種類を指定 動的なコンテンツの更新がどのようにスクリーンリーダーに通知されるかを指定するために使用

これらの属性を正しく使用することで、ウェブアプリケーションのアクセシビリティを向上させることができます。

アクセシビリティのテストと評価

[編集]

ウェブサイトのアクセシビリティを確保するために、さまざまなツールと手法があります。

スクリーンリーダーテスト

[編集]

スクリーンリーダーを使用して、ウェブサイトのコンテンツが適切に読み上げられるかどうかを確認します。主要なスクリーンリーダーには、VoiceOver（macOS）、NVDA（Windows）、JAWS（Windows）などがあります。

自動化ツール

[編集]

自動化テストツールを使用することで、アクセシビリティの問題を自動的に検出し、修正する手助けをします。

  • Lighthouse: Googleが提供する開発者向けツールで、アクセシビリティの自動テストを含みます。
  • axe: Deque Systemsが提供する、ウェブアクセシビリティの自動化ツールです。

自動化ツールを使用することで、コード内の問題を効率的に特定し、修正することができます。

結論

[編集]

ウェブアクセシビリティは、すべてのユーザーがウェブコンテンツにアクセスできるようにするための不可欠な要素です。セマンティックなHTMLの使用、適切な色の設定、キーボード操作のサポート、そしてARIA属性の適切な使用は、アクセシビリティを確保する上で重要です。また、スクリーンリーダーテストや自動化ツールを活用して、アクセシビリティの問題を特定し、改善することが推奨されます。

セキュリティ

[編集]

Webセキュリティの基本

[編集]

Webセキュリティは、現代のウェブアプリケーション開発において不可欠な要素です。ウェブセキュリティの基本概念を理解することは、ユーザーのデータ保護やシステムの安全性を確保する上で重要です。

ウェブセキュリティの基本は、次の要素によって構成されています。

  1. 機密性（Confidentiality）: データや情報が不正アクセスから保護されること。暗号化やアクセス制御などの手法が使われます。
  2. 完全性（Integrity）: データが意図しない変更から保護されること。データの改ざんを防ぐために、ハッシュ関数や署名などの技術が用いられます。
  3. 可用性（Availability）: システムやサービスが正常に動作し続けること。サービス遮断攻撃（DoS攻撃）などからの保護が含まれます。

これらの基本原則は、セキュリティの三要素として知られています。ウェブアプリケーションを設計する際には、これらの原則を考慮してセキュリティ対策を実装することが重要です。

セキュリティ脅威とその対策

[編集]

ウェブアプリケーション開発者は、さまざまなセキュリティ脅威に対処する必要があります。以下は、主要なセキュリティ脅威とそれに対する一般的な対策です。

  1. XSS（クロスサイトスクリプティング）
    XSS攻撃は、攻撃者が不正なスクリプトをウェブページに挿入し、ユーザーのブラウザで実行させる攻撃です。これにより、クッキー情報の盗み出しやセッション乗っ取りなどが行われることがあります。
    対策
    ユーザーからの入力データを適切にエスケープする。
    Content Security Policy（CSP）を使用して、許可されたソースからのみスクリプトを実行できるように制限する。
  2. CSRF（クロスサイトリクエストフォージェリ）
    CSRF攻撃では、認証済みユーザーが意図しないリクエストを行うことが可能になります。攻撃者は、ユーザーが認証済みであることを利用して、不正な操作を実行します。
    対策
    リクエストにワンタイムトークン（CSRFトークン）を含めて、正規のリクエストかどうかを確認する。
    SameSite属性を設定したCookieを使用して、クロスサイトリクエストを防止する。

HTMLにおけるセキュリティベストプラクティス

[編集]

HTMLを安全に保つための最善の方法を理解することは、ウェブアプリケーションのセキュリティ向上に不可欠です。具体的なセキュリティベストプラクティスとして以下があります。

  1. 安全なコンテンツ配信（CSP）
    CSPを使用することで、サーバーからの許可されたリソースしか読み込まれないように制限することができます。これにより、XSS攻撃やデータの不正な取得を防止します。
    用例
       <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'">
    上記の例では、スクリプトの実行を同じドメイン内でのみ許可し、インラインスクリプトの使用を許可しています。
  2. セキュアなCookieの使用
    Cookieには、HTTPOnly属性とSecure属性を適用することが推奨されます。
    HTTPOnly
    JavaScriptからCookieにアクセスできなくします。
    Secure
    HTTPS経由でのみCookieを送信します。
    用例
       Set-Cookie: sessionId=abc123; Secure; HttpOnly;
    上記の例では、`sessionId` CookieがセキュアでHTTPOnlyであることが指定されています。

これらのセキュリティ対策を組み合わせて使用することで、ウェブアプリケーションのセキュリティを強化し、ユーザーのデータやシステムを保護することが可能です。

最新のHTML仕様

[編集]

HTML Living Standardの最新アップデート

[編集]

HTML Living Standardは、Web Hypertext Application Technology Working Group (WHATWG)によって継続的に更新されている仕様です。最近の主な更新内容には以下のようなものがあります：

  1. <dialog> 要素の改善：
    モーダルダイアログの実装がより簡単になり、アクセシビリティも向上しました。
  2. <input type="date"> の強化：
    日付入力フィールドがより使いやすくなり、ブラウザ間の一貫性が向上しました。
  3. loading 属性の値 lazy 標準化：
    画像やiframeの遅延読み込みが簡単に実装できるようになりました。
  4. <picture> 要素の拡張：
    レスポンシブ画像の実装がより柔軟になりました。
  5. セキュリティ関連の更新：
    クロスオリジンリソース共有(CORS)やコンテンツセキュリティポリシー(CSP)に関する仕様が改善されました。

将来の仕様と提案

[編集]

HTMLの将来に向けて、いくつかの興味深い提案や仕様が検討されています：

  1. <search> 要素：
    検索フォームやその結果を意味的に表現するための新しい要素です。
  2. <model> 要素：
    3Dモデルを直接HTMLに埋め込むための要素で、AR/VR体験の向上が期待されています。
  3. <portal> 要素：
    シームレスなページ遷移を可能にする新しい要素で、SPAのようなユーザー体験を提供します。
  4. <toast> 要素：
    一時的な通知を表示するための標準化された要素です。
  5. Container Queries：
    親要素のサイズに基づいてスタイルを変更できる新しいCSS機能で、よりきめ細かいレスポンシブデザインが可能になります。

標準化プロセスへの参加方法

[編集]

HTML標準化プロセスへの参加は、Webの未来を形作る重要な機会です。参加方法と意義について以下に説明します：

  1. WHATWG GitHub リポジトリの活用：
    • issueを作成して問題提起や提案を行う
    • 既存のissueにコメントして議論に参加する
    • プルリクエストを送信して直接仕様の改善に貢献する
  2. メーリングリストへの参加：
    WHATWGのメーリングリストに登録し、議論に参加することができます。
  3. 仕様のレビュー：
    公開されている仕様をレビューし、フィードバックを提供することも重要な貢献です。
  4. 実装とフィードバック：
    ブラウザベンダーや開発者として、新しい仕様を実装し、実際の使用経験に基づくフィードバックを提供することができます。
  5. イベントへの参加：
    WHATWGやW3Cが主催するイベントや会議に参加し、直接議論に加わることができます。

標準化プロセスに参加する意義：

  • Webの進化に直接貢献できる
  • 最新の技術動向を把握できる
  • グローバルな開発者コミュニティとの交流ができる
  • 自身のスキルやキャリアの向上につながる

HTML標準化プロセスへの参加は、技術的な貢献だけでなく、Webのオープンな特性を維持し、より良いインターネットを作り上げるための重要な活動です。

附録

[編集]

A. HTMLリファレンス

[編集]

HTML Living Standardの要素を網羅的にリスト化し、それぞれの要素について「名称」、「機能」、「親要素」、「カテゴリ」、「使用例」を表形式でまとめました。以下の表をご覧ください。

名称 機能 親要素 カテゴリ 使用例
<a> ハイパーリンクを作成 フロー フロー <a href="https://example.com">Example</a>
<abbr> 略語の説明 フロー フロー <abbr title="Internationalization">i18n</abbr>
<address> 連絡先情報を定義 フロー フロー <address>123 Main St, Anytown, USA</address>
<area> イメージマップ内のホットスポット <map> フロー <area shape="rect" coords="34,44,270,350" href="https://example.com">
<article> 自己完結型の フロー セクショニング <article><h2>Article Title</h2><p>Content here...</p></article>
<aside> 補足的な内容 フロー セクショニング <aside><p>Related information...</p></aside>
<audio> オーディオコンテンツを埋め込む フロー 埋め込み <audio controls><source src="audio.mp3" type="audio/mpeg"></audio>
<b> 重要ではないが強調する フロー フロー <b>Bold text</b>
<base> ベースURLを設定 <head> メタデータ <base href="https://example.com/">
<bdi> テキストの双方向性を無視 フロー フロー <bdi>مثال</bdi>
<bdo> テキストの方向性を上書き フロー フロー <bdo dir="rtl">مثال</bdo>
<blockquote> 引用ブロック フロー フロー <blockquote cite="https://example.com">Quote here...</blockquote>
<body> ドキュメントの内容を含む <html> フロー <body><p>Content here...</p></body>
<br> 改行 フロー フロー Line 1<br>Line 2
<button> インタラクティブなボタンを作成 フロー フロー <button type="button">Click me</button>
<canvas> グラフィックスを描画する フロー 埋め込み <canvas id="myCanvas" width="200" height="100"></canvas>
<caption> テーブルキャプション <table> フロー <caption>Table Caption</caption>
<cite> 作品のタイトルを引用 フロー フロー <cite>Book Title</cite>
<code> コードスニペットを表現 フロー フロー <code>console.log('Hello, world!');</code>
<col> テーブル列のプロパティを定義 <colgroup> フロー <col span="2" style="background-color: yellow">
<colgroup> テーブル列のグループを定義 <table> フロー <colgroup><col span="2"><col style="background-color: yellow"></colgroup>
<data> マシン可読なデータを結びつける フロー フロー <data value="12345">Product 12345</data>
<datalist> 入力候補のリストを定義 フロー フロー <datalist id="browsers"><option value="Chrome"><option value="Firefox"></datalist>
<dd> 定義リストの定義 <dl> フロー <dd>A description here...</dd>
<del> 削除されたテキストを示す フロー フロー <del>Deleted text</del>
<details> 折りたたみ可能な内容 フロー インタラクティブ <details><summary>More info</summary><p>Details here...</p></details>
<dfn> 用語の定義を示す フロー フロー <dfn>Term</dfn>
<dialog> ダイアログまたはモーダル フロー インタラクティブ <dialog open><p>Dialog content...</p></dialog>
<div> 汎用コンテナ フロー フロー <div><p>Content here...</p></div>
<dl> 定義リスト フロー フロー <dl><dt>Term</dt><dd>Definition</dd></dl>
<dt> 定義リストの項目 <dl> フロー <dt>Term</dt>
<em> 強調テキスト フロー フロー <em>Emphasized text</em>
<embed> 外部リソースを埋め込む フロー 埋め込み <embed src="file.swf" width="200" height="100">
<fieldset> フォーム内のグループ化 フロー フロー <fieldset><legend>Group</legend><input type="text"></fieldset>
<figcaption> 図のキャプション <figure> フロー <figcaption>Figure Caption</figcaption>
<figure> 図をグループ化する フロー フロー <figure><img src="image.jpg"><figcaption>Caption</figcaption></figure>
<footer> セクションまたはページのフッター フロー フロー <footer><p>Footer content...</p></footer>
<form> ユーザー入力を収集する フロー インタラクティブ <form action="/submit"><input type="text"><button>Submit</button></form>
<h1> - <h6> 見出し フロー フロー <h1>Heading 1</h1>
<head> メタデータを含む <html> メタデータ <head><title>Page Title</title></head>
<header> セクションまたはページのヘッダー フロー フロー <header><h1>Header content...</h1></header>
<hgroup> 見出しのグループを定義。主見出しとサブ見出しなどをグループ化する際に使用 フロー フロー <hgroup><h1>Main Title</h1><h2>Subtitle</h2></hgroup>
<hr> テーマの変更を表す水平線 フロー フロー <hr>
<html> ドキュメントのルート要素 none メタデータ <html><head></head><body></body></html>
<i> 重要ではないが特別なテキスト フロー フロー <i>Italic text</i>
<iframe> 別のHTMLページを埋め込む フロー 埋め込み <iframe src="https://example.com" width="200" height="100"></iframe>
<img> 画像を埋め込む フロー 埋め込み <img src="image.jpg" alt="Description">
<input> ユーザー入力を受け取る フロー インタラクティブ <input type="text" name="name">
<ins> 挿入されたテキストを示す フロー フロー <ins>Inserted text</ins>
<kbd> キーボード入力を表す フロー フロー <kbd>Ctrl+C</kbd>
<label> フォーム要素のラベル フロー フロー <label for="name">Name</label>
<legend> フィールドセットのタイトル <fieldset> フロー <legend>Group Title</legend>
<li> リストの項目 <ul>, <ol>, <menu> フロー <li>List item</li>
<link> 外部リソースのリンク <head> メタデータ <link rel="stylesheet" href="styles.css">
<main> 文書の主要内容 フロー フロー <main><p>Main content...</p></main>
<map> イメージマップを定義 フロー フロー <map name="image-map"><area shape="rect" coords="34,44,270,350" href="https://example.com"></map>
<mark> ハイライトされたテキスト フロー フロー <mark>Highlighted text</mark>
<menu> インタラクティブな操作のためのコマンドリストを表現 フロー フロー <menu><li><button onclick="copy()">Copy</button></li><li><button onclick="paste()">Paste</button></li></menu>
<meta> メタデータを定義 <head> メタデータ <meta charset="UTF-8">
<meter> 測定値の範囲を表す フロー フロー <meter value="0.6">60%</meter>
<nav> ナビゲーションリンクのセクション フロー フロー <nav><ul><li><a href="/">Home</a></li></ul></nav>
<noscript> JavaScriptが無効な場合の代替内容 フロー フロー <noscript><p>JavaScript is disabled.</p></noscript>
<object> 外部リソースを埋め込む フロー 埋め込み <object data="file.pdf" type="application/pdf" width="200" height="100"></object>
<ol> 順序付きリスト フロー フロー <ol><li>First item</li><li>Second item</li></ol>
<optgroup> ドロップダウンリストのグループ <select> フロー <optgroup label="Group 1"><option>Option 1</option></optgroup>
<option> ドロップダウンリストの項目 <select>, <datalist> フロー <option value="value1">Option 1</option>
<output> 計算結果を表示 フロー フロー <output name="result">42</output>
<p> 段落 フロー フロー <p>This is a paragraph.</p>
<param> <object>のパラメータ <object> フロー <param name="autoplay" value="true">
<picture> レスポンシブ画像のコンテナ フロー 埋め込み <picture><source srcset="small.jpg" media="(max-width: 600px)"><img src="large.jpg" alt="Image"></picture>
<pre> 整形済みテキスト フロー フロー <pre>Preformatted text</pre>
<progress> 進行状況を示す フロー フロー <progress value="70" max="100">70%</progress>
<q> インライン引用 フロー フロー <q cite="https://example.com">Quote</q>
<rp> ルビ注釈のかっこ <ruby> フロー <rp>(</rp>漢字<rp>)</rp>
<rt> ルビ注釈のテキスト <ruby> フロー <rt>かんじ</rt>
<ruby> ルビ注釈を含む フロー フロー <ruby>漢字<rt>かんじ</rt></ruby>
<s> 取り消し線を表示 フロー フロー <s>Strikethrough text</s>
<samp> サンプル出力を表す フロー フロー <samp>Sample output</samp>
<script> クライアントサイドのスクリプト フロー スクリプト <script src="script.js"></script>
<search> 検索フォームを定義 フロー インタラクティブ <search placeholder="Search..."></search>
<section> セクションを定義 フロー セクショニング <section><h2>Section Title</h2><p>Section content...</p></section>
<select> ドロップダウンリストを作成 フロー インタラクティブ <select><option>Option 1</option></select>
<slot> Web Componentsにおけるカスタム要素のプレースホルダーとして使用 フロー フロー <slot name="my-text">Default text</slot>
<small> 小さいテキスト フロー フロー <small>Small text</small>
<source> 複数のメディアリソースを指定 <audio>, <video>, <picture> フロー <source src="audio.mp3" type="audio/mpeg">
<span> インラインコンテナ フロー フロー <span>Inline content</span>
<strong> 重要なテキストを強調 フロー フロー <strong>Strong text</strong>
<style> ドキュメント内のスタイルシート フロー メタデータ <style>body { font-family: Arial; }</style>
<sub> 下付き文字 フロー フロー H<sub>2</sub>O
<summary> <details>要素の要約 <details> フロー <summary>Summary here...</summary>
<sup> 上付き文字 フロー フロー E=mc<sup>2</sup>
<table> テーブルを定義 セクショニング フロー <table><tr><th>Header</th></tr><tr><td>Data</td></tr></table>
<tbody> テーブルの本体をグループ化 <table> フロー <tbody><tr><td>Data</td></tr></tbody>
<td> テーブルデータセルを定義 <tr> フロー <td>Data</td>
<template> 再利用可能なテンプレート内容 フロー フロー <template><p>Template content...</p></template>
<textarea> マルチラインテキスト入力 フロー インタラクティブ <textarea rows="4" cols="50"></textarea>
<tfoot> テーブルのフッターをグループ化 <table> フロー <tfoot><tr><td>Footer data</td></tr></tfoot>
<th> テーブルヘッダセルを定義 <tr> フロー <th>Header</th>
<thead> テーブルのヘッダーをグループ化 <table> フロー <thead><tr><th>Header</th></tr></thead>
<time> 日付または時間を表す フロー フロー <time datetime="2022-01-01">January 1, 2022</time>
<title> ドキュメントのタイトルを設定 <head> メタデータ <title>Document Title</title>
<tr> テーブル行を定義 <table>, <tbody>, <thead>, <tfoot> フロー <tr><td>Data</td></tr>
<track> <video>や<audio> のテキストトラック <video>, <audio> フロー <track kind="subtitles" src="subs_en.vtt" srclang="en" label="English">
<u> 下線付きテキストを表す フロー フロー <u>Underlined text</u>
<ul> 順序なしリストを定義 フロー フロー <ul><li>Item 1</li><li>Item 2</li></ul>
<var> 変数を表す フロー フロー <var>x</var>
<video> ビデオコンテンツを埋め込む フロー 埋め込み <video controls><source src="video.mp4" type="video/mp4"></video>
<wbr> 単語の改行可能位置を定義 フロー フロー Super<wbr>califragilisticexpialidocious

これらはHTML Living Standardに含まれる主要な要素です。各要素の詳細な仕様や使い方については、最新のHTML Living Standardのドキュメントを参照してください。

A.2 コンテンツカテゴリー

[編集]

HTML Living Standardにおけるコンテンツカテゴリーは、HTML要素を9つのグループに分類したものです。各カテゴリーは、要素の役割や特性を共有しており、コンテンツモデルを定義する上で重要な役割を果たします。

コンテンツカテゴリーは以下の9つです

  1. メタデータ・コンテンツ
    • ドキュメント全体に関する情報などを記述する要素
    • <html>, <head>, <title>, <meta> など
  2. フロー・コンテンツ
    • 文脈の流れに沿って配置される要素
    • <p>, <div>, <span>, <img>, <a> など
  3. セクショニング・コンテンツ
  4. ヘディング・コンテンツ
    • 文書の見出しを定義する要素
    • <h1>、<h2>、<h3>、<h4>、<h5>、<h6> など
  5. フレージング・コンテンツ
  6. インタラクティブ・コンテンツ
  7. エンベッディッド・コンテンツ
  8. 非フロー・コンテンツ
    • フローコンテンツの流れに影響を与えない要素
    • <script>, <style> など
  9. トランスペアレント・コンテンツ
    • 親要素のコンテンツモデルを継承する要素
    • <br>, <hr> など

各コンテンツカテゴリーの詳細については、HTML Living Standardの公式ドキュメントを参照してください。

コンテンツカテゴリーの役割

コンテンツカテゴリーは、以下の役割を果たします。

  • 要素の許可と禁止を制御する
    • 各コンテンツカテゴリーには、許可されている要素と禁止されている要素が定義されています。
    • 例えば、<table> 要素はセクショニングコンテンツにのみ許可されており、フローコンテンツには許可されていません。
  • 要素のネスト構造を制限する
    • 親要素に許可されているコンテンツカテゴリーの子要素のみをネストできます。
    • 例えば、フローコンテンツ要素はセクショニングコンテンツ要素の子要素としてのみネストできます。
  • 要素のデフォルトのスタイルを定義する
    • 各コンテンツカテゴリーには、デフォルトのスタイルが定義されています。
    • 例えば、ヘディングコンテンツ要素はデフォルトで太字で表示されます。

コンテンツカテゴリーを理解することで、HTMLドキュメントの構造と意味をより深く理解することができます。また、適切なコンテンツカテゴリーの要素を使用することで、より構造化された、メンテナンスしやすいHTMLドキュメントを作成することができます。

なお、HTML Living Standardでは、コンテンツカテゴリーに加えて、コンテンツモデルという概念も導入されています。コンテンツモデルは、コンテンツカテゴリーに加えて、要素の許可と禁止の関係、ネスト構造、デフォルトのスタイルなどをより詳細に定義したものです。

A.3 コンテンツモデル

[編集]

HTML Living Standardのコンテンツモデルとは、HTML要素がどのような種類のコンテンツを含むことができるかを定義する概念です。これにより、各要素が適切に使用されることを保証し、HTML文書の構造と意味論的な一貫性を保つことができます。

HTMLのコンテンツモデルには以下の主要なカテゴリがあります：

  1. メタデータコンテンツ（Metadata content）
    文書のメタデータを定義する要素。例えば、<title>, <base>, <link>, <meta>, <style>, <script>, <noscript> など。
  2. フローコンテンツ（Flow content）
    文書の大部分を構成する要素。例えば、見出し（<h1>～<h6>）、段落（<p>）、リスト（<ul>, <ol>）、<div>, <main> など。
  3. セクショニングコンテンツ（Sectioning content）
    文書に新しいセクションを作成する要素。例えば、<article>, <aside>, <nav>, <section> など。
  4. ヘディングコンテンツ（Heading content）
    セクションの見出しを定義する要素。例えば、<h1>～<h6> など。
  5. フレージングコンテンツ（Phrasing content）
    テキストの内容を構成する要素。例えば、<span>, <a>, <strong>, <em>, <img> など。
  6. 埋め込みコンテンツ（Embedded content）
    他のリソースを埋め込むための要素。例えば、<img>, <video>, <audio>, <iframe>, <object>, <embed> など。
  7. インタラクティブコンテンツ（Interactive content）
    ユーザーが操作可能な要素。例えば、<a>, <button>, <input>, <textarea>, <select>, <details> など。
  8. 透明コンテンツモデル（Transparent content model）
    親要素のコンテンツモデルに従う要素。例えば、<a>, <del>, <ins> など。
使用例
[編集]
フローコンテンツ
<div>要素はフローコンテンツを含むことができ、フローコンテンツの中に配置することができます。
<div>
  <p>This is a paragraph inside a div.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</div>
セクショニングコンテンツ
<section>要素は他のセクショニングコンテンツを含むことができます。
<section>
  <h1>Section Title</h1>
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>
</section>
埋め込みコンテンツ
<video>要素は埋め込みコンテンツを含むことができます。
<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

A.4.2 既存要素の説明の補足

[編集]

<details>要素

  • カテゴリ：フロー
  • open属性：要素を開いた状態で表示するかどうかを制御
  • 使用例の補足：
<details>
    <summary>詳細を表示</summary>
    <p>詳細なコンテンツをここに記述します。</p>
</details>

<time>要素

  • datetime属性の形式：
    • 日付：YYYY-MM-DD
    • 時刻：HH:mm:SS
    • 日時：YYYY-MM-DDTHH:mm:SS
  • マイクロフォーマットとの互換性あり
  • 使用例の補足：
<time datetime="2024-01-07T15:00:00">
    2024年1月7日 15:00
</time>

<data>要素

  • value属性に機械可読な値、要素の内容に人間可読な値を指定
  • 使用例の補足：
<data value="398">398円</data>
<data value="PRODUCTID001">商品番号：001</data>

A.4.3 追加のコンテンツカテゴリー

[編集]
  1. パルパブルコンテンツ（Palpable content）
    • ユーザーが直接知覚できるコンテンツを含む要素
    • 特徴：
      • 空ではない要素であること
      • 視覚的または聴覚的に認識可能な内容を持つこと
    • 例：
      • 空でない<p>要素
      • テキストを含む<div>要素
      • <img>要素
      • <canvas>要素
  2. スクリプトサポーティングコンテンツ（Script-supporting content）
    • スクリプトの実行やテンプレート機能をサポートする要素
    • 特徴：
      • 直接的なレンダリングを目的としない
      • JavaScriptやテンプレートエンジンと連携
    • 例：
    • 使用場面：
      • カスタム要素の定義
      • テンプレートベースのレンダリング
      • 動的コンテンツの生成

HTML Living Standardのコンテンツモデルは、要素の正しい使用方法をガイドし、構造化された意味論的に正しいHTML文書を作成するための重要な基礎です。

B. よくある質問（FAQ）

[編集]
  1. HTMLとは何ですか？
    HTML（HyperText Markup Language）は、ウェブページを作成するための標準的なマークアップ言語です。文書の構造を定義し、テキスト、画像、リンク、メディアなどの要素を指定するために使用されます。
  2. HTMLの最新バージョンは何ですか？
    HTMLの最新バージョンは「HTML Living Standard」です。これは、WHATWG（Web Hypertext Application Technology Working Group）によって策定されており、継続的に更新されています。HTML5のすべてのバージョンはW3Cによって廃止・失効が宣言され、現在ではHTMLに関する唯一の有効な規格はWHATWGのHTML Living Standardです。この標準はバージョン番号を持ちません。
  3. HTML要素とは何ですか？
    HTML要素は、開始タグ、コンテンツ、終了タグで構成される構文を指します。例えば、段落を表す<p>要素は次のようになります。
    <p>This is a paragraph.</p>
  4. HTMLタグとは何ですか？
    HTMLタグは、要素の開始と終了を示すためのマークアップです。開始タグは要素の名前で囲まれ、終了タグはスラッシュで始まります。例えば、<h1>は見出しレベル1の開始タグ、</h1>は終了タグです。
  5. HTMLとCSSの違いは何ですか？
    HTMLはウェブページの構造と内容を定義するための言語で、CSS（Cascading Style Sheets）はウェブページの外観やスタイルを指定するための言語です。HTMLは骨組みを作り、CSSはその骨組みに装飾を施します。
  6. HTMLファイルの基本的な構造は何ですか？
    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>
    <h1>Hello, World!</h1>
    <p>段落</p>
</body>
</html>
  7. フローコンテンツとは何ですか？
    フローコンテンツは、文書の大部分を構成する要素のことです。これには、段落、見出し、リスト、リンク、フォーム、セクションなどが含まれます。フローコンテンツは他のフローコンテンツと自由に混在することができます。
  8. メタデータコンテンツとは何ですか？
    メタデータコンテンツは、文書のメタデータを定義するための要素です。これは、文書の設定や外部リソースのリンク、スクリプト、スタイルシートなどを含みます。代表的な例として、<meta>, <link>, <style>, <script>があります。
  9. セクショニングコンテンツとは何ですか？
    セクショニングコンテンツは、文書に新しいセクションを作成するための要素です。これにより、文書を論理的な部分に分割し、各セクションに独自の構造と意味を持たせることができます。代表的な例として、<article>, <section>, <nav>, <aside>があります。
  10. インタラクティブコンテンツとは何ですか？
    インタラクティブコンテンツは、ユーザーが操作できる要素です。これには、リンク、ボタン、フォームコントロール（入力フィールド、チェックボックス、ラジオボタンなど）、詳細情報を表示するための要素などが含まれます。代表的な例として、<a>, <button>, <input>, <textarea>, <select>があります。
  11. 埋め込みコンテンツとは何ですか？
    埋め込みコンテンツは、他のリソースをHTML文書内に埋め込むための要素です。これには、画像、ビデオ、オーディオ、iframe、オブジェクトなどが含まれます。代表的な例として、<img>, <video>, <audio>, <iframe>, <embed>があります。
  12. HTMLファイルをどのように表示できますか？
    HTMLファイルは、ウェブブラウザで表示することができます。HTMLファイルを作成したら、ファイルをダブルクリックするか、ブラウザで開くことでその内容を表示できます。また、開発者向けツールを使用してHTMLを編集しながらリアルタイムでプレビューすることも可能です。
  13. HTMLとJavaScriptの関係は何ですか？
    HTMLはウェブページの構造を定義し、JavaScriptはそのページに動的な機能を追加します。JavaScriptを使用して、ユーザーインタラクションに応じてページの内容を変更したり、アニメーションを追加したり、データを処理したりすることができます。JavaScriptはHTML内で<script>タグを使用して追加されます。
  14. HTML要素の属性とは何ですか？
    HTML要素の属性は、要素に追加の情報を提供するために使用されます。属性は開始タグ内で指定され、キーと値のペアで構成されます。例えば、<a>要素のhref属性はリンク先のURLを指定します。
    <a href="https://example.com">Visit Example</a>
  15. コメントをHTMLに追加する方法は？
    HTMLにコメントを追加するには、<!--で始まり、-->で終わるコメントタグを使用します。コメントはブラウザに表示されません。
    <!-- This is a comment -->
<p>This is visible content.</p>

これらの質問と回答が、HTMLに関する基本的な理解を深める助けとなれば幸いです。HTMLの詳細については、公式のHTML Living Standardドキュメントを参照してください。

C. HTMLの廃止技術

[編集]

HTMLの廃止要素

[編集]

HTMLの廃止要素の一覧を表形式でまとめました:

HTMLの廃止要素
要素 代替手段
applet embed または object を使用
acronym abbr を使用
bgsound audio を使用
dir ul を使用
frame iframe と CSS を使用、またはサーバーサイドインクルードを使用
frameset iframe と CSS を使用、またはサーバーサイドインクルードを使用
noframes iframe と CSS を使用、またはサーバーサイドインクルードを使用
isindex 明示的なフォームとテキスト入力を使用
keygen Web Cryptography API を使用
listing pre と code を使用
menuitem contextmenuイベントを処理するスクリプトを使用
nextid GUIDを使用
noembed fallbackが必要な場合は object を使用
plaintext "text/plain" MIMEタイプを使用
rb ruby要素内に直接ルビのベーステキストを記述
rtc 入れ子のruby要素を使用
strike 編集を示す場合は del を、そうでない場合は s を使用
xmp pre と code を使用し、"<"と"&"をエスケープ
basefont 適切な要素またはCSSを使用
big 適切な要素またはCSSを使用
blink 適切な要素またはCSSを使用
center 適切な要素またはCSSを使用
font 適切な要素またはCSSを使用
marquee 適切な要素またはCSSを使用
multicol 適切な要素またはCSSを使用
nobr 適切な要素またはCSSを使用
spacer 適切な要素またはCSSを使用
tt 適切な要素またはCSSを使用

これらの要素は完全に廃止されており、マークアップに使用してはいけません。代わりに、表の「代替手段」列に記載された方法を使用することが推奨されています。

HTML要素の廃止属性

[編集]

以下は、廃止された属性の一覧を表にまとめたものです。この表では、要素とその廃止された属性、および推奨される代替方法を示しています。

HTML要素の廃止属性
要素 廃止属性 推奨される代替方法
全要素 contextmenu カスタムのコンテキストメニューを実装するには、スクリプトでcontextmenuイベントを処理する。
dropzone スクリプトでdragenter と dragover イベントを処理する。
onshow カスタムのコンテキストメニューを実装するには、スクリプトでcontextmenuイベントを処理する。
<a> charset HTTP Content-Type ヘッダーを使用する
coords area 要素を使用する
datafld XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
methods HTTP OPTIONS 機能を使用する
name id 属性を使用する
rev rel 属性を反対の用語で使用する (例: rev="made" → rel="author")
shape area 要素を使用する
urn href 属性で識別子を指定する
<area> hreflang 使用しない
nohref href 属性を省略する
type 使用しない
<body> alink CSS を使用する
background CSS を使用する
bgcolor CSS を使用する
bottommargin CSS を使用する
leftmargin CSS を使用する
link CSS を使用する
marginheight CSS を使用する
marginwidth CSS を使用する
rightmargin CSS を使用する
text CSS を使用する
topmargin CSS を使用する
vlink CSS を使用する
<br> clear CSS を使用する
<button> datafld XMLHttpRequest を使用して動的にページを更新する
dataformatas XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
<caption> align CSS を使用する
<col> align CSS を使用する
char CSS を使用する
charoff CSS を使用する
valign CSS を使用する
width CSS を使用する
<div> align CSS を使用する
datafld XMLHttpRequest を使用して動的にページを更新する
dataformatas XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
<dl> compact CSS を使用する
<embed> align CSS を使用する
hspace CSS を使用する
name id 属性を使用する
vspace CSS を使用する
<fieldset> datafld XMLHttpRequest を使用して動的にページを更新する
<form> accept input 要素に直接 accept 属性を指定する
<frame> datafld XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
<h1>—<h6> align CSS を使用する
<head> profile 不必要
<hr> align CSS を使用する
color CSS を使用する
noshade CSS を使用する
size CSS を使用する
width CSS を使用する
<html> manifest サービスワーカーを使用する
version 使用しない
<iframe> align CSS を使用する
allowtransparency CSS を使用する
datafld XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
frameborder CSS を使用する
framespacing CSS を使用する
hspace CSS を使用する
longdesc 通常の <a> 要素を使用して説明へのリンクを作成するか、（画像の場合）イメージマップを使用して画像から画像の説明へのリンクを提供する。
marginheight CSS を使用する
marginwidth CSS を使用する
scrolling CSS を使用する
vspace CSS を使用する
<img> align CSS を使用する
border CSS を使用する
datafld XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
hspace CSS を使用する
longdesc 通常の <a> 要素を使用して説明へのリンクを作成するか、（画像の場合）イメージマップを使用して画像から画像の説明へのリンクを提供する。
lowsrc 2 つの別々の画像を使用する代わりに、src 属性で指定されたプログレッシブ JPEG 画像を使用する。
name id 属性を使用する
vspace CSS を使用する
<input> align CSS を使用する
border CSS を使用する
datafld XMLHttpRequest を使用して動的にページを更新する
dataformatas XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
hspace CSS を使用する
ismap 不要
usemap イメージマップに <img> 要素を使用する。
vspace CSS を使用する
<label> datafld XMLHttpRequest を使用して動的にページを更新する
dataformatas XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
<legend> align CSS を使用する
datafld XMLHttpRequest を使用して動的にページを更新する
dataformatas XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
<li> type CSS を使用する
<link> charset HTTP Content-Type ヘッダーを使用する
methods HTTP OPTIONS 機能を使用する
rev rel 属性を反対の用語で使用する (例: rev="made" → rel="author")
target 不要
urn href 属性で識別子を指定する
<marquee> datafld XMLHttpRequest を使用して動的にページを更新する
dataformatas XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
<menu> compact CSS を使用する
label カスタムのコンテキストメニューを実装するには、スクリプトでcontextmenuイベントを処理する。
type カスタムコンテキストメニューを実装するには、スクリプトを使用し contextmenu イベントを処理する。ツールバーメニューの場合は省略する。
<meta> scheme フィールドごとにスキーマを1つだけ使用するか、スキーマ宣言を値の一部とする。
<object> align CSS を使用する
archive データ属性とタイプ属性を使ってプラグインを呼び出す
border CSS を使用する
classid データ属性とタイプ属性を使ってプラグインを呼び出す
code データ属性とタイプ属性を使ってプラグインを呼び出す
codebase データ属性とタイプ属性を使ってプラグインを呼び出す
codetype データ属性とタイプ属性を使ってプラグインを呼び出す
datafld XMLHttpRequest を使用して動的にページを更新する
dataformatas XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
declare データ属性とタイプ属性を使ってプラグインを呼び出す
hspace CSS を使用する
standby データ属性とタイプ属性を使ってプラグインを呼び出す
typemustmatch データ属性とタイプ属性を使ってプラグインを呼び出す
usemap イメージマップに <img> 要素を使用する。
vspace CSS を使用する
<ol> compact CSS を使用する
<option> dataformatas XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
name id 属性を使用する
<p> align CSS を使用する
<pre> width CSS を使用する
<script> charset HTTP Content-Type ヘッダーを使用する
event DOMのイベントを使用する
for DOMのイベントを使用する
language 不要、JavaScriptとされる。type属性で指定できる。
<select> datafld XMLHttpRequest を使用して動的にページを更新する
dataformatas XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
<span> datafld XMLHttpRequest を使用して動的にページを更新する
dataformatas XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
<style> type CSS 用には属性を省略する
<table> align CSS を使用する
background CSS を使用する
bgcolor CSS を使用する
border CSS を使用する
bordercolor CSS を使用する
cellpadding CSS を使用する
cellspacing CSS を使用する
dataformatas XMLHttpRequest を使用して動的にページを更新する
datapagesize 不要
datasrc XMLHttpRequest を使用して動的にページを更新する
frame CSS を使用する
height CSS を使用する
rules CSS を使用する
summary <table>要素参照
width CSS を使用する
<tbody> align CSS を使用する
background CSS を使用する
char CSS を使用する
charoff CSS を使用する
height CSS を使用する
valign CSS を使用する
<td> abbr
background CSS を使用する
scope <th>を使用
<th> <td> align CSS を使用する
axis <th>のscope属性を使用
bgcolor CSS を使用する
char CSS を使用する
charoff CSS を使用する
height CSS を使用する
nowrap CSS を使用する
valign CSS を使用する
width CSS を使用する
<textarea> datafld XMLHttpRequest を使用して動的にページを更新する
datasrc XMLHttpRequest を使用して動的にページを更新する
<tfoot> align CSS を使用する
background CSS を使用する
char CSS を使用する
charoff CSS を使用する
height CSS を使用する
valign CSS を使用する
<th> background CSS を使用する
<thead> align CSS を使用する
background CSS を使用する
char CSS を使用する
charoff CSS を使用する
height CSS を使用する
valign CSS を使用する
<tr> align CSS を使用する
background CSS を使用する
bgcolor CSS を使用する
char CSS を使用する
charoff CSS を使用する
height CSS を使用する
valign CSS を使用する
<ul> compact CSS を使用する
type CSS を使用する

この表は、HTML Living Standard に基づいて廃止された属性とその代替方法をわかりやすくまとめたものです。各属性の使用を避け、推奨される代替手段を採用してください。

下位階層のページ

[編集]
"https://ja.wikibooks.org/w/index.php?title=HTML_Living_Standard&oldid=267861" より作成