HTML属性一覧まとめ｜初心者向けに使い方・コード例を解説

HTMLで使用する属性一覧
②文書構造・リンク系属性
③画像・メディア系属性
④テキスト・表示関連
⑤テーブル（表）関連
⑥フォーム関連
⑦script・link系
⑧iframe・埋め込み系

HTMLで使用する属性一覧

HTMLで使用する属性を一覧形式で載せていきます。
使用用途やコードの記述例などを説明します。

id

使用用途は、ページ内で一意（1つだけ）の識別子。

<div id=”main”></div>
<a href=”#main”>メインへ移動</a>

ポイント

同じidは1ページ内で重複不可
アンカーリンクにも使用可能

class

使用用途は、要素のグループ名（複数指定可能）。

<a class=”lead highlight”>リード文です</a>

ポイント

CSS指定の基本
半角スペース区切りで複数可

style

使用用途は、要素に直接CSSを書く。

ポイント

優先度が高い（インラインスタイル）
実務では基本的に非推奨（保守性が悪い）

title

使用用途は、補足情報（ホバーでツールチップ表示）

ポイント

アクセシビリティ用途としては弱い
重要情報をtitleのみに依存するのはNG

lang

使用用途は、言語指定。

<a lage=”en”>Hello World</p>

ポイント

スクリーンリーダーの読み上げに影響
HTMLタグに指定が基本

hidden

使用用途は、要素を非表示にする。

<p hidden>この文章は表示されません</p>

ポイント

CSSの「display:none;」相当
アクセシビリティツリーからも除外される

tabindex

使用用途は、キーボードのTab移動順序を制御。

ポイント

0=通常の順序に含める
-1＝Tab移動から除外

contenteditable

使用用途は、要素をブラウザ上で編集可能にする。

<div contentedittable=”true”>
ここは編集出来ます。
</div>

ポイント

true / false
CMS的UIや簡易エディタに使う

draggable

使用用途は、要素をドラッグ可能にする。

ポイント

true / false / auto
Javascriptと組み合わせて使用

dir

使用用途は、文字の方向指定。

<p dir=”rtl”>これはアラビア語で右から読む</p>

ポイント

ltr=左から右 , rtl=右から左
アラビア語やヘブライ語で重要

accessker

使用用途は、キーボードショートカットを設定。

ポイント

ブラウザごとに組み合わせキーが違う
実務ではあまり使われない

data-*

使用用途は、独自データをHTMLに埋め込む。

<div date-user=”xxx2″ data-role=”admin”>
ユーザー情報
</div>

ポイント

Javascriptで「dataset」から取得可能
セマンティクスを壊さないデータ保持方法

②文書構造・リンク系属性

href

使用用途は、リンク先のURLを指定。
主にa要素やlink要素に使用。

<a href=”#”>トップページ</a>

ポイント

相対パス / 絶対パス / ハッシュリンク可能
link要素では外部リソース指定に使う

target

使用用途は、リンクや送信結果の表示場所を指定。
主にa要素やform要素に使用。

<a href=”https://xxx.com”
　　target=”_blank”
　　rel=”noopener noreferrer”>
　　外部サイト
</a>

ポイント

「_blank」を使用する際は「rel=”noopener noreferrer”を併用
_self＝同じタブ ※デフォルト , _blank=新規タブ

rel

使用用途は、現在の文章とリンク先との関係性を指定。
主にa要素やlink要素で使用。

<a href=”https://xxx.com” href=”nofollow”>
　広告リンク
</a>

ポイント

「nofollow」は検索結果を渡さない意味

download

使用用途は、クリック時にファイルをダウンロードさせる。
主にa要素に使用。

<a href=”file.pdf” download>
　PDFをダウンロード
</a>

ポイント

ファイル名の指定も可能
同一オリジンのみ有効

hreflang

使用用途は、リンク先の言語を示す。
主にa要素やlink要素に使用。

ポイント

多言語サイトで検索エンジンに通知
rel=”alternate”と併用が基本

type

使用用途は、MIMEタイプを指定。
主にa要素やlink要素に使用。

<a href=”manual.pdf” type=”application/pdf”>
　　PDFマニュアル
</a>

ポイント

<link rel=”stylesheet”>では省略可能
a要素ではファイル種別明治に使う

③画像・メディア系属性

src

使用用途は、読み込むファイル（URL）を指定。
主にimg要素、script要素、audio要素、video要素に使用。

ポイント

相対パス / 絶対パス可能
script要素は読み込み順に影響

alt

使用用途は、画像の代替えテキスト。
主にimg要素に使用。

ポイント

画像の内容を説明する
装飾画像なら、alt=””（空白にする）

width / height

使用用途は、表示サイズ指定（px）。
主にimg要素やvideo要素に使用。

ポイント

画像は両方指定推奨
CSSで上書き可能

controls

使用用途は、再生こんとUIを表示。
主にaudio要素やvideo要素に使用。

ポイント

付けないと操作不能になることが多い
カスタムUIはJavascriptで実装可能

autoplay

使用用途は、ページ読み込み時に自動再生。
主にaudio要素やvideo要素に使用。

ポイント

現在のブラウザでは、mutedと併用を推奨
UX的には慎重に使用

loop

使用用途は、再生終了時に繰り返す。
主にaudio要素やvideo要素に使用。

muted

使用用途は、初期状態を無音にする。
主にvideo要素に使用。

ポイント

autoplay属性とセットで使うことが多い
モバイルでは必須条件になることが多い

poster

使用用途は、動画再生前に表示するサムネイル画像。
主にvideo要素に使用。

ポイント

クリック前の視認性向上
UX改善に重要

preload

使用用途は、メディアの事前読み込み制御。
主にaudio要素やvideo要素に使用。

ポイント

auto=自動 , metadata=情報のみ , none=読み込まない
ページ速度対策で「metadate」推奨のケースが多い

④テキスト・表示関連

cite

使用用途は、引用元（出典）のURLを示す。
主にblockquote、q、cite要素に使用。

<blockquote cite=”https://xxx.com”>
継続は力なり。
</blockquote>

<p>
　<q cite=”https://xxx.com”>
　シンプルさは究極の洗練である。
　</q>
</p>

<p>
　出典：<cite>webデザイン完全ガイド</cite>
</p>

ポイント

表示はされない（機械可読）
cite要素はURLではなく、「作品名」などを表す要素

datetime

使用用途は、機械可読な日付・時刻をISO形式で指定。
主にtime要素に使用。
ISO形式には、日付（2026-2-22）や時刻（14:30）などがあります。

ポイント

検索エンジンやスクリーンリーダーに有効
人間向け表示と機械向け値を分けれらる

value

使用用途は、組み合わせる要素により異なる。
li要素：順番付きリストで番号を指定
input要素：フォーム送信時の値
option要素：送信される値

<ol>
　<li value=”3″>3番目から開始</li>
　<li>次の項目</li>
</ol>

ポイント

表示テキスト≠valueの値
サーバー側処理に直結する重要属性

srcset

使用用途は、画像解像度や幅に応じて画像を切り替える。
主にimg要素に使用。

ポイント

画像最適化の基本
モバイル最適化の必須レベル

⑤テーブル（表）関連

colspan

使用用途は、表セルを横方向（列方向）に結合する。
主にtd要素やth要素に使用。

ポイント

値は「何列分結合するか」を数値で指定
データのグループ化に使うのが本来の用途

rowspan

使用用途は、表セルを縦方向（行方向）に結合する。
主にtd要素やth要素に使用。

ポイント

値は「何行分結合するか」
データのカテゴリ分けなどに使われる

headers

使用用途は、td要素が関連付けられるth要素のidを指定する。
主にtd要素に使用。

ポイント

複雑な表（複数の見出しが関係する場合）で重要
スペース区切りで複数指定可能

scope

使用用途は、th要素が、どの範囲を見出しているのかを指定する。
主にth要素に使用。

ポイント

col＝列全体 , row＝行全体
単純な表では、headersよりscopeの方が簡潔

⑥フォーム関連

action

使用用途は、フォーム送信先のURLを指定する。
主にform要素に使用。

ポイント

省略すると「現在ページ」に送信される
サーバー側処理ファイル（PHPなど）を指定

method

使用用途は、送信方法を指定する。
指定値は、grt＝URLデータがつく。post＝HTTPボディに含まれる。

ポイント

個人情報はpostを使用
検索フォームはgetが多い

enctype

使用用途は、送信データ形式を指定。

ポイント

application/x-www-form-urlencoded＝デフォルト
multipart/form-data＝ファイル送信時必須

name

使用用途は、サーバーへ送信する項目名。

ポイント

nameが無いと送信されない

type

使用用途は、入力種別を指定。

ポイント

主に以下の種類があります。

text
password
email
number
checkbox
radio
file
submit
data

など。

value

使用用途は、初期値を指定。

ポイント

checkboxやradioでは送信値になる

placeholder

使用用途は、入力ヒントの表示。

<input type=”email” placeholder=”メールアドレスを入力”

ポイント

ラベルの代わりにはならない（アクセシビリティ的にNG）

required

使用用途は、必須入力にする。

readonly

使用用途は、編集不可（送信はされる）。

disabled

使用用途は、無効化。

ポイント

送信もされない

checked

使用用途は、checkbox / radioの初期チェック。

selected

使用用途は、selectの初期選択。

<select>
<option>選択してください</option>
<option selected>東京</option>
</select>

multiple

使用用途は、複数選択可能にする。

<select multiple>
<option>HTML</option>
<option>CSS</option>
<option>Javascript</option>
</select>

maxlenght

使用用途は、最大文字数。

min / max

使用用途は、数値の範囲制限。

step

使用用途は、増減単位。

pattern

使用用途は、正規表現で入力制限。
以下の記述例は、3桁の数字のみ。

autofocus

使用用途は、ページ表示時に自動フォーカス。

ポイント

多用はUX悪化

form

使用用途は、外部フォームと紐付ける。

ポイント

formタグ以外にinputを置ける

⑦script・link系

src（+script要素と使用想定）

使用用途は、Javascriptファイルの場所（URL）を指定する。
HTMLとは別のJSファイルを読み込むときに使用します。

ポイント

外部Javascriptを読み込むための属性
<script>の中に直接JSを記述することも可能

defer（+script要素と使用想定）

使用用途は、HTML解析（DOM構造）が終わった後にJavascriptを実行する。
その為、ページ表示を高速化出来ます。

ポイント

通常、「HTML解析停止」→「JSダウンロード」→「JS実行」→「HTML解析最適」
defer、「HTML解析継続」→「JSダウンロード」→「DOM完了後に実行」

async（+script要素と使用想定）

使用用途は、Javascriptを非同期で読み込み、読み込み完了後すぐに実行する。
一見deferと似ていますが、実行タイミングがdeferは「DOM完了後」に対して、asyncは「読み込み完了直後」と異なります。

ポイント

asyncは実行順序が保証されない
広告スクリプトなどに使われます

rel（+link要素またはa要素と使用想定）

使用用途は、現在の文章とリンク先の関係性を示す。

ポイント

stylesheetは「CSS」
iconは「favicon」

href（+link要素またはa要素と使用想定）

使用用途は、リンク先のURLを指定。

ポイント

<a>では移動先
<link>では外部リソース

media（+link要素と使用想定）

使用用途は、CSS適用条件を指定。
レスポンシブデザインで使われます。

ポイント

screen=「画面」, print=「印刷」, all=「すべて」

⑧iframe・埋め込み系

src（+iframe要素と使用想定）

使用用途は、iframe内に表示する外部ページのURLを指定。

ポイント

外部サイトや別ページを埋め込む
YouTube / GoogleMaps / SNS埋め込みでよく使う

width / height（+iframe要素と使用想定）

使用用途は、iframeの表示サイズを指定。

ポイント

単位は通常px
CSSで上書き可能

allowfullscreen（+iframe要素と使用想定）

使用用途は、iframe内コンテンツの全画面表示を許可。

ポイント

主に動画プレイヤー（YouTubeなど）

loading（+iframe要素と使用想定）

使用用途は、遅延読み込み（Lazy Load）。
lazy=必要になるまで読み込まない。
eager=すぐに読み込む

ポイント

ページ表示速度改善
SEOにも影響

sandbox（+iframe要素と使用想定）

使用用途は、iframe内の機能を制限してセキュリティを強化。
【許可出来るオプション例】
allow-scripts：Javascript許可
allow-forms：フォーム送信許可
allow-popups：ポップアップ許可
allow-same-origin：同一オリジン扱い

ポイント

デフォルトでは、Javascript・フォーム送信・ポップアップ禁止となっている

alt

使用用途は、画像が表示されない場合や、スクリーンリーダーが画像の内容を読み上げる為のテキスト。
主な用途としては、
・画像が読み込めない場合の代替表示
・視覚障害者の読み上げ
・検索エンジンが画像内容を理解する

ポイント

装飾画像の場合は空にする
意味のある内容を記述する

aria-*

使用用途は、スクリーンリーダー向けの追加情報。
HTMLだけでは伝わらない情報を補います。
aria-label：要素の説明
aria-hidden：読み上げ無効
aria-expanded：開閉状態
aria-controls：操作対象

ポイント

正式名称は「WAI-ARIA」

title

使用用途は、補足説明を表示。
マウスホバーすると表示されるツールチップです。

ポイント

使いすぎはNG。理由はスマホで表示されない為
補足程度

placeholder

使用用途は、入力欄に入力例やヒントを表示する。
ユーザーが入力を始めると消えます。

<label for=”email”>メールアドレス</label>
<input type=”email” id=”email” placeholder=”xxx@email.com”>

ポイント

ラベルの代わりにはならない
入力例として使う

required

使用用途は、入力を必須項目にする。
未入力の場合は送信できない。

ポイント

ブラウザが自動でバリデーションを行う

autofocus

使用用途は、ぺージ読み込み時に、自動で入力カーソルを当てる。

ポイント

1ページにつき１つが基本
多用する尾UXが悪くなる

pattern

使用用途は、正規表現で入力形式を制限。

ポイント

例：電話番号、郵便番号、数字のみ

formnovalidate

使用用途は、フォーム送信時のバリデーションを無効化。

<form>
　<input type=”text” required>
　<button type=”submit”>送信</button>

　<button type=”submit” foomnovalidate>
　確認なしで送信
　</button>
</form>

ポイント

「required」や「pattern」などのチェックを無視して送信できる

download

使用用途は、リンククリック時にファイルをダウンロード。

<a href=”file.pdf” download>
PDFをダウンロード
</a>

<a href=”file.pdf” downroad=”xxx.pdf”>
ダウンロード
</a>

srcset / sizes

使用用途は、画面サイズに応じて画像を切り替える。
レスポンシブ画像。

ポイント

スマホ、タブレット、PCで最適な画像を表示できる

poster

使用用途は、動画再生前に表示するサムネイル画像。

loop / muted / autoplay

使用用途は、繰り返し再生やミュート再生、自動再生を設定できる。

ポイント

loop=繰り返し再生 , muted=ミュート再生 , autoplay=”自動再生”
音声付きautoplayは禁止なので、「autoplay + muted」で使う。