知っておくべき13のHTML属性
2023年11月7日投稿 • 2023年11月14日更新 • 元はshefali.devで公開されました。
HTMLでは、属性を使ってHTML要素に関する追加情報を提供します。この投稿では、ウェブサイトのビジュアルを向上させるために知っておくべき13のHTML属性について学びます。
さあ、始めましょう！🚀
Accept属性
<input>要素（ファイルタイプのみ）にaccept属性を使用して、サーバーが受け入れ可能なファイルタイプを指定することができます。
<input type="file" accept=".jpg, .jpeg, .png">
Alt属性
画像がウェブページに表示されない場合、<img>要素にalt属性を使用して代替テキストを指定できます。
<img src="nature.png" alt="美しい夕日">
Autocomplete属性
autocomplete属性を<form>、<input>、<textarea>要素と共に使用して、ブラウザの自動補完機能を制御することができます。
<input type="text" name="name" autocomplete="on" />
Contenteditable属性
contenteditable属性を使用して、要素のコンテンツが編集可能かどうかを指定できます。ユーザーが要素内のコンテンツを変更できるようにします。
これはグローバル属性で、すべてのHTML要素で使用できます。
<div contenteditable="true">この内容は編集できます。</div>
Download属性
download属性を<a>要素と共に使用して、ユーザーがリンクをクリックしたときにリンクされているリソースがナビゲートされる代わりにダウンロードされるように指定できます。
<a href="document.pdf" download="document.pdf">PDFをダウンロード</a>
Hidden属性
hidden属性を使用して、ウェブページ上で要素を非表示にすることができます。これは、JavaScriptやCSSを通じて可視性を制御するのに便利です。
これはグローバル属性で、すべてのHTML要素で使用できます。
<div hidden>これは隠された内容です。</div>
Loading属性
loading属性を<img>要素に使用して、ブラウザが画像をどのように読み込むかを制御することができます。"eager"、"lazy"、"auto"の3つの値があります。
<img src="image.png" loading="lazy" />
Multiple属性
multiple属性を<input>や<select>要素に使用して、ユーザーが一度に複数の値を選択/入力することを許可できます。
<input type="file" multiple />
<select multiple>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="typescript">TypeScript</option>
<option value="rust">Rust</option>
</select>
Poster属性
poster属性を<video>要素に使用して、ユーザーがビデオを再生するまでの間、画像を表示できます。
<video controls poster="image.png" width="500">
<source src="video.mp4" type="video/mp4" />
</video>
Readonly属性
readonly属性を<input>要素に使用して、要素が読み取り専用で、編集できないことを指定できます。
<input type="text" value="これは読み取り専用です。" readonly />
Srcset属性
srcset属性を<img>や<source>（<picture>内）要素に使用して、画像ソースのリストを提供することで、異なる画面サイズに対してブラウザが異なる画像を選択するのに役立ちます。
<img src="image.jpg" srcset="image.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x">
Spellcheck属性
spellcheck属性をパスワード以外の<input>要素、コンテンツ編集可能な要素、<textarea>要素と共に使用して、ブラウザによるスペルチェックを有効または無効にすることができます。
<input type="text" spellcheck="false" />
Title属性
title属性を使用して、要素についての追加情報を提供することができます。通常、この情報はユーザーが要素にマウスオーバーしたときに表示されます。
これはグローバル属性で、すべてのHTML要素で使用できます。
<a href="document.pdf" title="ダウンロードするにはクリックしてください">ファイルをダウンロードする</a>
今日はこれでおしまいです。
読んでくれてありがとう。
こんなコンテンツに興味があるならここをクリックしてください。
ウェブ開発についての日々のヒントを入手するために、Twitterでも僕をフォローしてください。
コーディング続けてね!!
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/devshefali/13-html-attributes-you-should-know-about-3nhh
