知っておくと便利で役に立つHTMLの属性のまとめ

あまり知られていないけど、知っておくと便利で役に立つHTMLの属性を7つ紹介します。

Google翻訳が翻訳しようとするのを防ぐtranslate属性、リンクをダウンロードするように指示するdownload属性、アップロードできるファイルのタイプを指定できるaccept属性など、HTMLだけで実装できるのかという便利な属性ばかりです。

7 useful HTML attributes you may not know
by Mariana

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• multiple属性
• accept属性
• contenteditable属性
• spellcheck属性
• translate属性
• poster属性
• download属性
• 終わりに

はじめに

HTMLは、Web制作の要です。しかし、多くのプログラマー志望者はその表面をなぞるだけで、CSSやJavaScriptなどに移ってしまい、その可能性を完全に見逃しています。

この記事ではあまり知られていないけど、役に立つHTMLの属性を紹介します。
このリストに他の属性を追加したい場合は、コメントで教えてください 🙂

multiple属性

multiple属性を使用すると、<input>にユーザーが複数の値を入力することを可能にします。この属性は、ファイルやメールアドレスを入力するfileやemailなどのタイプ、および<select>要素で有効なブーリアン属性です。

type="email"の場合にmultiple属性が定義されていると、値はコンマ区切りのメールアドレスのリストにすることができます。リスト内の各アドレスからは、空白スペースは削除されます。

type="file"の場合は、ユーザーは通常通り複数のファイルを選択できます（shiftまたはctrlキーを押しながら）。

accept属性

<input>要素にはaccept属性があり、ユーザーがアップロードできるファイルのタイプを指定することを可能にします。

この属性の値には、ファイルの拡張子を記述します。複数の場合は、拡張子をコンマ区切りで記述します。

この属性を使用して、画像や動画や音声形式のみを指定することもできます。

contenteditable属性

contenteditable属性は、ユーザーがHTMLコンテンツを編集することを可能にするグローバル属性（すべてのHTML要素に共通）です。ただし、可視（visible）コンテンツやDOMコンテンツに行われる編集には注意が必要です。

テキスト要素もユーザーが編集可能に

spellcheck属性

spellcheck属性もグローバル属性の1つで、フォームの入力欄などの編集可能なHTML要素のスペルや文法をチェックするのに使用できます。

注: 通常、編集不可能な要素ではspellcheck属性がtrueに設定されており、ブラウザがスペルのチェックをサポートしていてもスペルエラーはチェックされません。

translate属性

translate属性は、コンテンツを翻訳する必要があるかどうかをブラウザに指示します。

例えば、会社名やブランド名をGoogle翻訳が自動的に翻訳しようとするのを防ぐために使用します。

poster属性

poster属性は、動画のダウンロード中や再生ボタンを押すまでの間に表示する画像を指定します。

画像が指定されていない場合は、最初のフレームが利用可能になるまで何も表示されず、その後、最初のフレームがポスターフレームとして表示されます。

download属性

download属性と<a>要素を組み合わせることで、ブラウザにURLに移動するのではなくダウンロードするように指示し、ユーザーにローカルファイルとしての保存を促すことができます。

download属性は値なしでも使用できますが、値にファイル名を記述すると、保存時のファイル名を指定できます。

終わりに

私は勉強することが大好きで、自分が知っていることを共有することも大好きです。LearnPineでコーディングをライブ動画配信しており、無料（要メールアドレス登録）で見ることができます。また、@simonpaixでコーディングの小ネタを共有しています。気になった人は、フォローしてください😁