1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

HTMLの属性一覧

Last updated at Posted at 2023-11-11

はじめに

基本的な属性一覧は以下から参照することが可能です。

しかし、こちらに列挙されていない属性も存在します。
この記事ではMDN Web Docsから取得できるHTML要素の属性を列挙します。

結果

attr tags
abbr <th>
accept <form>
accept-charset <form>
align <hr>
alink <body>
allow <iframe>
allow-downloads <iframe>
allow-downloads-without-user-activation <iframe>
allow-forms <iframe>
allow-modals <iframe>
allow-orientation-lock <iframe>
allow-pointer-lock <iframe>
allow-popups <iframe>
allow-popups-to-escape-sandbox <iframe>
allow-presentation <iframe>
allow-same-origin <iframe>
allow-scripts <iframe>
allow-storage-access-by-user-activation <iframe>
allow-top-navigation <iframe>
allow-top-navigation-by-user-activation <iframe>
allow-top-navigation-to-custom-protocols <iframe>
allowfullscreen <iframe>
allowpaymentrequest <iframe>
alt <area>, <img>
anonymous <link>, <audio>, <img>, <video>
archive <object>
as <link>
async <img>, <script>
auto <link>, <img>, <img>, <script>
autocapitalize <form>
autocomplete <button>, <form>, <select>, <textarea>
autocorrect <textarea>
autofocus <button>, <select>, <textarea>
autoplay <audio>, <video>
background <body>
baseProfile <svg>
behavior <marquee>
bgcolor <body>, <marquee>
blocking <link>, <style>, <script>
border <object>
bottommargin <body>
charset <meta>
checked <menuitem>
cite <blockquote>, <q>, <del>, <ins>
classid <object>
codebase <object>
codetype <object>
color <hr>, <font>
cols <pre>, <textarea>, <frameset>
colspan <td>, <th>
command <menuitem>
compact <ul>, <dir>
content <meta>
contentScriptType <svg>
contentStyleType <svg>
controls <audio>, <video>
controlslist <audio>, <video>
coords <area>
credentialless <iframe>
crossorigin <link>, <audio>, <img>, <video>, <script>
csp <iframe>
data <object>
datetime <time>, <del>, <ins>
declare <object>
decoding <img>
default <track>, <menuitem>
defer <script>
dir <bdo>
direction <marquee>
dirname <textarea>
disabled <link>, <button>, <fieldset>, <optgroup>, <option>, <select>, <textarea>, <menuitem>
disablepictureinpicture <video>
disableremoteplayback <audio>, <video>
display <math>
download <a>, <area>
eager <img>, <iframe>
elementtiming <img>
face <font>
fetchpriority <link>, <img>, <script>
for <label>, <output>
form <object>, <button>, <fieldset>, <meter>, <output>, <select>, <textarea>
formaction <button>
formenctype <button>
formmethod <button>
formnovalidate <button>
formtarget <button>
frameborder <frame>
headers <td>, <th>
height <img>, <video>, <embed>, <iframe>, <object>, <source>, <svg>, <canvas>, <marquee>
hide <button>
high <link>, <img>, <script>, <meter>
href <base>, <link>, <a>, <area>
hreflang <link>, <a>
hspace <marquee>
http-equiv <meta>
icon <menuitem>
imagesizes <link>
imagesrcset <link>
importmap <script>
integrity <link>, <script>
ismap <img>
kind <track>
label <track>, <optgroup>, <option>, <menuitem>
lazy <img>, <iframe>
leftmargin <body>
link <body>
loading <img>, <iframe>
loop <audio>, <video>, <marquee>
low <link>, <img>, <script>, <meter>
manifest <html>
marginheight <frame>
marginwidth <frame>
max <meter>, <progress>
maxlength <textarea>
media <link>, <style>, <source>
min <meter>
minlength <textarea>
module <script>
moz-opaque <canvas>
multiple <select>
muted <audio>, <video>
name <meta>, <map>, <iframe>, <object>, <button>, <fieldset>, <form>, <output>, <select>, <textarea>, <slot>, <frame>, <param>
no-referrer <iframe>
no-referrer-when-downgrade <iframe>
nomodule <script>
nonce <style>, <script>
noresize <frame>
noshade <hr>
nowrap <dd>
off <textarea>
on <textarea>
onafterprint <body>
onbeforeprint <body>
onbeforeunload <body>
onblur <body>
onerror <body>
onfocus <body>
onhashchange <body>
onlanguagechange <body>
onload <body>
onmessage <body>
onoffline <body>
ononline <body>
onpopstate <body>
onredo <body>
onresize <body>
onstorage <body>
onundo <body>
onunload <body>
open <details>, <dialog>
optimum <meter>
origin <iframe>
origin-when-cross-origin <iframe>
ping <a>, <area>
placeholder <textarea>
playsinline <video>
popovertarget <button>
popovertargetaction <button>
poster <video>
preload <audio>, <video>
preserveAspectRatio <svg>
profile <head>
radiogroup <menuitem>
readonly <textarea>
referrerpolicy <link>, <a>, <area>, <img>, <iframe>, <portal>, <script>
rel <link>, <a>, <area>, <form>
required <select>, <textarea>
reversed <ol>
rightmargin <body>
rows <textarea>, <frameset>
rowspan <td>, <th>
same-origin <iframe>
sandbox <iframe>
scope <th>
scrollamount <marquee>
scrolldelay <marquee>
scrolling <frame>
selected <option>
shape <area>
show <button>
size <hr>, <select>, <font>
sizes <link>, <img>, <source>
span <col>, <colgroup>
speculationrules <script>
spellcheck <textarea>
src <audio>, <img>, <track>, <video>, <embed>, <iframe>, <portal>, <source>, <script>, <frame>
srcdoc <iframe>
srclang <track>
srcset <img>, <source>
standby <object>
start <ol>
strict-origin <iframe>
strict-origin-when-cross-origin <iframe>
sync <img>
target <base>, <a>, <area>
text <body>
title <link>, <style>
toggle <button>
topmargin <body>
truespeed <marquee>
type <link>, <li>, <ol>, <ul>, <a>, <embed>, <object>, <source>, <script>, <button>, <menuitem>, <param>
unsafe-url <iframe>
use-credentials <link>, <audio>, <img>, <video>
usemap <img>, <object>
value <li>, <data>, <button>, <meter>, <option>, <progress>, <param>
valuetype <param>
version <html>, <svg>
viewBox <svg>
vlink <body>
vspace <marquee>
width <hr>, <pre>, <img>, <video>, <embed>, <iframe>, <object>, <source>, <svg>, <canvas>, <marquee>
wrap <pre>, <textarea>
x <svg>
xmlns <html>
y <svg>

取得するためのコード

Pythonでスクレイピングを行いました。

# %%
import requests
from bs4 import BeautifulSoup

from time import sleep

from collections import defaultdict


# %%
def get(url):
    sleep(4)
    return requests.get(url)


def fetch(url):
    response = get(url)
    return BeautifulSoup(response.text, "html.parser")


def ok(url):
    response = get(url)
    return response.status_code // 100 == 2


# %%
base_url = "https://developer.mozilla.org"
url = "/en-US/docs/Web/HTML/Element"
soup = fetch(base_url + url)
anchors = soup.select("td:first-child a")
urls = {a.get_text(): url for a in anchors if (url := a.attrs.get("href")) is not None}


# %%
attrs = defaultdict(list)

for tag, url in urls.items():
    if url is None:
        continue

    soup = fetch(base_url + url)
    codes = soup.select("#attributes+div dt code")

    for code in codes:
        attr = code.get_text().strip('"')
        attrs[attr].append(tag)


# %%
print("|attr|tags|")
print("|:--|:--|")


def ref(label, url):
    return f"[{label}]({url})"


attr_base_url = base_url + "/en-US/docs/Web/HTML/Attributes/"

for attr in sorted(attrs):
    tags = attrs[attr]

    attr_url = attr_base_url + attr
    if not ok(attr_url):
        tag = tags[0]
        tag_url = base_url + urls[tag]
        attr_url = f"{tag_url}#{attr}"

    attr_ref = ref(attr, attr_url)
    tag_refs = ", ".join([ref(f"`{tag}`", base_url + urls[tag]) for tag in tags])

    print(f"|{attr_ref}|{tag_refs}|")
1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?