HTMLの基本構造と属性

HTMLの属性を説明しつつ早見表を作成しました。

---

グローバル属性

`accesskey`

キーボードショートカットキーを指定します。

<button accesskey="s">Save</button>

`class`

CSSクラス名を指定します。複数のクラスはスペースで区切ります。

<div class="container main-content"></div>

`contenteditable`

要素が編集可能かどうかを指定します。

<div contenteditable="true">This is editable content.</div>

`data-*`

カスタムデータ属性を指定します。`data-`で始まる任意の名前を使用します。

<div data-user-id="12345">User Data</div>

`dir`

テキストの方向を指定します（`ltr`, `rtl`）。

<p dir="rtl">This text is right-to-left.</p>

`draggable`

要素がドラッグ可能かどうかを指定します。

<img src="image.jpg" draggable="true">

`hidden`

要素を非表示にします。

<div hidden>This is hidden content.</div>

`id`

要素の一意の識別子を指定します。

<h1 id="main-title">Title</h1>

`lang`

要素の言語コードを指定します。

<p lang="en">This is an English text.</p>

`spellcheck`

要素内のテキストのスペルチェックを指定します。

<textarea spellcheck="true"></textarea>

`style`

インラインCSSスタイルを指定します。

<p style="color: red; font-size: 16px;">Styled Text</p>

`tabindex`

要素のタブ移動順序を指定します。

<input type="text" tabindex="1">

`title`

要素の追加情報（ツールチップ）を指定します。

<button title="Save your changes">Save</button>

イベント属性

マウスイベント

`onclick`

要素がクリックされたときにスクリプトを実行します。

<button onclick="alert('Button clicked!')">Click me</button>

`ondblclick`

要素がダブルクリックされたときにスクリプトを実行します。

<button ondblclick="alert('Button double clicked!')">Double click me</button>

`onmousedown`

マウスボタンが押されたときにスクリプトを実行します。

<button onmousedown="alert('Mouse button down!')">Press mouse button</button>

`onmouseup`

マウスボタンが離されたときにスクリプトを実行します。

<button onmouseup="alert('Mouse button up!')">Release mouse button</button>

`onmouseover`

マウスが要素の上に乗ったときにスクリプトを実行します。

<button onmouseover="alert('Mouse over!')">Mouse over me</button>

`onmousemove`

マウスが要素の上で動いたときにスクリプトを実行します。

<div onmousemove="console.log('Mouse moving!')">Move mouse over me</div>

`onmouseout`

マウスが要素から離れたときにスクリプトを実行します。

<button onmouseout="alert('Mouse out!')">Mouse out from me</button>

キーボードイベント

`onkeydown`

キーが押されたときにスクリプトを実行します。

<input type="text" onkeydown="alert('Key down!')">

`onkeypress`

キーが押されている間にスクリプトを実行します。

<input type="text" onkeypress="alert('Key pressed!')">

`onkeyup`

キーが離されたときにスクリプトを実行します。

<input type="text" onkeyup="alert('Key up!')">

フォームイベント

`onsubmit`

フォームが送信されたときにスクリプトを実行します。

<form onsubmit="alert('Form submitted!'); return false;">
    <input type="submit" value="Submit">
</form>

`onreset`

フォームがリセットされたときにスクリプトを実行します。

<form onreset="alert('Form reset!')">
    <input type="reset" value="Reset">
</form>

`onchange`

要素の値が変更されたときにスクリプトを実行します。

<input type="text" onchange="alert('Value changed!')">

`onfocus`

要素にフォーカスが当たったときにスクリプトを実行します。

<input type="text" onfocus="alert('Focused!')">

`onblur`

要素からフォーカスが外れたときにスクリプトを実行します。

<input type="text" onblur="alert('Blurred!')">

`oninput`

要素に入力があったときにスクリプトを実行します。

<input type="text" oninput="console.log('Input event!')">

フォーム属性

`action`

フォーム送信先のURLを指定します。

<form action="/submit-form">
    <input type="submit" value="Submit">
</form>

`method`

フォーム送信方法を指定します（`GET` または `POST`）。

<form action="/submit-form" method="post">
    <input type="submit" value="Submit">
</form>

`enctype`

フォームデータのエンコードタイプを指定します。

<form action="/submit-form" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
</form>

`autocomplete`

フォームの自動補完を有効または無効にします。

<form action="/submit-form" autocomplete="off">
    <input type="text" name="name">
    <input type="submit" value="Submit">
</form>

`novalidate`

フォームのHTML5検証を無効にします。

<form action="/submit-form" novalidate>
    <input type="text" name="name" required>
    <input type="submit" value="Submit">
</form>

`target`

フォーム送信結果の表示場所を指定します。

<form action="/submit-form" target="_blank">
    <input type="submit" value="Submit">
</form>

入力属性

`type`

入力要素の種類を指定します（例：`text`, `password`, `email`, `submit`）。

<input type="text" name="username">
<input type="password" name="password">

`name`

入力要素の名前を指定します。フォーム送信時にサーバーに送信されます。

<input type="text" name="username">

`value`

入力要素の初期値を指定します。

<input type="text" name="username" value="default value">

`placeholder`

入力要素のプレースホルダーテキストを指定します。

<input type="text" name="username" placeholder="Enter your username">

`required`

入力要素を必須にします。

<input type="text" name="username" required>

`disabled`

入力要素を無効にします。

<input type="text" name="username" disabled>

`readonly`

入力要素を読み取り専用にします。

<input type="text" name="username" readonly>

`maxlength`

入力可能な文字数の最大値を指定します。

<input type="text" name="username" maxlength="10">

`min` / `max`

入力可能な数値の最小値と最大値を指定します。

<input type="number" name="age" min="1" max="100">

`step`

数値入力の増減ステップを指定します。

<input type="number" name="quantity" step="1">

リンク属性

`href`

リンク先のURLを指定します。

<a href="https://example.com">Go to Example</a>

`target`

リンク先の表示場所を指定します。

<a href="https://example.com" target="_blank">Open in new tab</a>

### `rel`
リンク先との関係性を指定します。
```html
<a href="https://example.com" rel="nofollow">No Follow Link</a>

`download`

リンク先をダウンロードさせる場合のファイル名を指定します。

<a href="file.pdf" download="custom_filename.pdf">Download PDF</a>

画像属性

`src`

画像ファイルのURLを指定します。

<img src="image.jpg" alt="Description of image">

`alt`

画像の代替テキストを指定します。画像が表示されない場合やスクリーンリーダーで読み上げられるテキストです。

<img src="image.jpg" alt="Description of image">

`width` / `height`

画像の表示幅と高さを指定します。

<img src="image.jpg" width="600" height="400" alt="Description of image">

`loading`

画像の読み込み方法を指定します（`lazy`, `eager`）。

<img src="image.jpg" loading="lazy" alt="Description of image">

テーブル属性

`border`

テーブルのボーダー幅を指定します。

<table border="1">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

`cellpadding`

セル内余白を指定します。

<table cellpadding="10">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

`cellspacing`

セル間余白を指定します。

<table cellspacing="5">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

`colspan`

セルの列結合を指定します。

<table>
    <tr>
        <td colspan="2">Span 2 columns</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

`rowspan`

セルの行結合を指定します。

<table>
    <tr>
        <td rowspan="2">Span 2 rows</td>
        <td>Cell 1</td>
    </tr>
    <tr>
        <td>Cell 2</td>
    </tr>
</table>

メディア属性

`src`

メディアファイルのURLを指定します。

<video src="video.mp4" controls></video>

`controls`

メディアコントロールの表示を指定します。

<video src="video.mp4" controls></video>

`autoplay`

メディアの自動再生を指定します。

<video src="video.mp4" autoplay></video>

`loop`

メディアのループ再生を指定します。

<video src="video.mp4" loop></video>

`muted`

メディアの消音を指定します。

<video src="video.mp4" muted></video>

`preload`

メディアの事前読み込み設定を指定します（`none`, `metadata`, `auto`）。

<video src="video.mp4" preload="auto"></video>

オブジェクト属性

`data`

埋め込みオブジェクトのURLを指定します。

<object data="file.pdf" type="application/pdf" width="600" height="400"></object>

`type`

埋め込みオブジェクトのMIMEタイプを指定します。

<object data="file.pdf" type="application/pdf" width="600" height="400"></object>

`width` / `height`

オブジェクトの幅と高さを指定します。

<object data="file.pdf" type="application/pdf" width="600" height="400"></object>

iframe属性

`src`

埋め込みページのURLを指定します。

<iframe src="https://example.com" width="600" height="400"></iframe>

`width` / `height`

iframeの幅と高さを指定します。

<iframe src="https://example.com" width="600" height="400"></iframe>

`name`

iframeの名前を指定します。

<iframe src="https://example.com" name="example-frame"></iframe>

`sandbox`

iframeのセキュリティ設定を指定します。

<iframe src="https://example.com" sandbox></iframe>

リスト属性

`type`

リストの種類を指定します（`ordered list`の場合）。

<ol type="a">
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

`start`

番号付きリストの開始番号を指定します。

<ol start="5">
    <li>Item 5</li>
    <li>Item 6</li>
</ol>

`reversed`

番号付きリストの逆順を指定します。

<ol reversed>
    <li>Item 3</li>
    <li>Item 2</li>
    <li>Item 1</li>
</ol>

スクリプト属性

`src`

スクリプトファイルのURLを指定します。

<script src="script.js"></script>

`type`

スクリプトのMIMEタイプを指定します。

<script src="script.js" type="text/javascript"></script>

`async`

スクリプトを非同期で読み込みます。

<script src="script.js" async></script>

`defer`

スクリプトの遅延実行を指定します。

<script src="script.js" defer></script>

スタイル属性

`type`

スタイルシートのMIMEタイプを指定します。

<style type="text/css">
    body { background-color: #f0f0f0; }
</style>

`media`

適用するメディアタイプを指定します（例：`screen`, `print`）。

<style type="text/css" media="print">
    body { background-color: white; }
</style>

メタ属性

`name`

メタ情報の名前を指定します（例：`description`, `keywords`）。

<meta name="description" content="This is an example of a meta description.">

`content`

メタ情報の内容を指定します。

<meta name="description" content="This is an example of a meta description.">

`charset`

文書の文字エンコーディングを指定します。

<meta charset="UTF-8">

`http-equiv`

HTTPヘッダー相当のメタ情報を指定します。

<meta http-equiv="refresh" content="30">

その他の属性

`cite`

引用元のURLを指定します（`<blockquote>`, `<q>`など）。

<blockquote cite="https://example.com">This is a blockquote.</blockquote>

`datetime`

日付と時刻を指定します（`<time>`）。

<time datetime="2023-07-31">July 31, 2023</time>

`download`

ダウンロード時のファイル名を指定します（`<a>`）。

<a href="file.pdf" download="example.pdf">Download PDF</a>

`form`

関連付けるフォームのIDを指定します（`<input>`, `<button>`など）。

<input type="text" form="myForm">
<form id="myForm">
    <input type="submit" value="Submit">
</form>

`high`

上限の範囲値を指定します（`<meter>`）。

<meter value="0.6" min="0" max="1" high="0.8">60%</meter>

`low`

下限の範囲値を指定します（`<meter>`）。

<meter value="0.2" min="0" max="1" low="0.3">20%</meter>

`optimum`

最適値を指定します（`<meter>`）。

<meter value="0.5" min="0" max="1" optimum="0.6">50%</meter>

`srcset`

複数解像度の画像URLを指定します（`<img>`）。

<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000