HTML Docs通読ログ2

属性自体を見たいというよりはその属性でできることを知って、あとで「そういえばwebだとこういうことができたな」というのを思い出すための通読です

HTML属性リファレンス 通読ログ

• accept: <form>,<input>: サーバーが受け取れる型のリスト。一般はファイル形式
• accept-charset: <form>: 対応している文字セット
• accesskey: (global): 要素をアクティブ化したりフォーカスを与える足りするためのショートカットキー
  • accesskey="s"でalt+sでそれをフォーカスできるみたい
• async: <script>: 非同期で実行
• autocapitalize: (global): ユーザーによる入力が自動的に大文字化されるかどうか
• cite: <blockquote>,<del>,<ins>,<q>: 引用元または変更点の情報源を指すURI
• cols: <textarea>: テキストエリアの桁数を定義
• colspan: <td>,<th>, テーブルのセル結合する列数
• contenteditable: (global): 要素が編集可能かどうか
• data-*: (global):*に好きな文字を入れられる
• defer: <script>: ページのレンダリングが完了した後に実行するスクリプト
• download: <a>,<area>: ダウンロードのためのハイパーリンクかどうかを示す
• hreflang: <a>,<area>,<link>: リンク先のリソースの言語
• loading: <img>,<iframe>: 要素を遅延読み込みさせたい(lazy)または直ちに読み込ませたいか(eager)を示す
• list: <input>: ユーザーに対案するため、事前に定義した選択肢のリストを示す
• inert:(all):ユーザー入力イベントを無視するようにする。例：クリックイベントを無視したい
• novalidate: <form>: 送信時にフォームが検証しないことを示す
• open:<detailes>,<dialog>:要素が開いているかどうか
• poster:<video>:未ロード時に表示されるURL
• pattern:<text>,<search>,<url>,<tel>,<email>,<password>: 正規表現を与えることで制約に違反した場合エラーを表示できる
• required:text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file および <select> と <textarea> 要素にも: 必須か
• role:(all): 支援技術が使用するための要素の明示的な役割を定義する
  • 視覚障碍者支援だったりとか聴覚障碍者支援とかっぽい
• step:date,month,week,datetime,datetime-local,time,range,number:mix*stepである必要があるようにできる
• slot:(all): > slot はグローバル属性で、シャドウ DOM のシャドウツリー内にあるスロットを、ある要素に割り当てます。 slot 属性をもつ要素には、 <slot> 要素に name 属性の値を指定することで生成されたスロット の値がその slot 属性の値と一致する生成されたスロットに割り当てられます。
• spellcheck:(all):外部の情報を使ってスペルチェックする可能性もあるため、機密情報を格納する場合はfalseにしたほうがいい
• translate:(all):「翻訳しますか？」の時にこれをnoにしておくと翻訳されない
• wrap:<textarea>:テキストを折り返すかどうか

イベントハンドラー属性について

mdn web docsではjavascriptで書くことを推奨している

<input>型

input型で立項されてるとかどんだけ奥深いねん

<input type="button">

歴史的には<button>のほうが新しい
<button>を使ったほうが比較的に好まれる傾向にあるらしい

<input type="checkbox">

チェックされてないときはサーバーには送信されないらしい

<input type="month">

全然ブラウザが対応してない見たいだけでおもしろそう

<input type="search">

検索クエリを入力するために作られた
textと機能的には同じだがユーザーエージェントが別のスタイルを適応する可能性がある

pattern属性

正規表現を入れてこれに合致する必要があるって処理にできるらしい

<input type="time">

互換性低め
対応していない場合は<input type="text">になる

マイクロデータ

検索エンジンが探す際に使ったり、特殊な表示をする際に参考にする
属性で指定する

• itemid
• itemprop: keyとvalueって考えた時のkey,valueはそのhtmltextになる
• itemref:ちょっとよくわからん
• itemscope: itemtypeがあるタグにつきがち。これがついた子要素のitempropはitemtypeに基づいていますよって感じ
• itemtype: 何を参考にitempropに名前を付けているかを書く。基本的にURLになる。だいたいhttps://schema.orgのどこか