HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML属性とは？基本構文からol・textareaの実用例までわかりやすく解説

HTML属性（attribute）は、画像やキャンバスの幅・高さのように、要素に対してプロパティを設定するために使用されます。すべての要素は属性を持つことができ、要素に関する追加情報をブラウザに伝える役割を果たします。

属性は「名前」と「値」のペアで構成されます。以下はその基本的な例です。

<canvas id="newCanvas" width="400" height="300">

その他の属性の例も見てみましょう。

<img alt="代替テキスト">

HTML5の標準仕様では、属性値を引用符で囲むことは必須ではありません。しかし、コードの可読性や保守性を高めるため、常に引用符を付けることがベストプラクティスとされています。

それでは、HTMLにおける属性の具体的な使用例をいくつか見ていきましょう。

HTML <ol> 要素の start 属性

<ol>（順序付きリスト）要素の start 属性は、リストの最初の項目に設定される開始番号を指定するために使用されます。通常は1から始まる番号を、任意の数値から開始させたい場合に便利です。

構文

start 属性の基本的な構文は以下の通りです。

<ol start="num">

上記の num には、最初のリスト項目の開始値として設定したい数値を指定します。

使用例

ここで、<ol> 要素の start 属性を実装した具体例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Last Semester MCA Result</h1>
<h2>Rank from 1-5</h2>
<ol>
<li>Steve</li>
<li>David</li>
<li>Kane</li>
<li>William</li>
<li>John</li>
</ol>
<h2>Rank from 5-10</h2>
<ol start="5">
<li>Tom</li>
<li>Jack</li>
<li>Will</li>
<li>Harry</li>
<li>Tim</li>
</ol>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

HTML属性とは？基本構文からol・textareaの実用例までわかりやすく解説

この例では、2つ目のリストに start="5" を指定しているため、「Tom」が5位として表示され、以降の項目が6、7、8、9と連続した番号で表示されます。

HTML <textarea> 要素の autofocus 属性

<textarea>（複数行テキスト入力欄）要素の autofocus 属性は、ページが読み込まれた時点で自動的にそのテキストエリアへフォーカスを設定するために使用されます。この属性は HTML5 で新たに導入されました。

構文

autofocus 属性の基本的な構文は以下の通りです。

<textarea autofocus>

なお、autofocus 属性はブール型属性のため、値を指定せずに属性名だけを記述します。

使用例

続いて、<textarea> 要素の autofocus 属性を実装した例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Interview Questions</h2>
<p>Why do you want go for the Technical Writer Job Profile? (100 words)</p>
<textarea rows="6" cols="70" autofocus>
Write the answer in 100 words only...
</textarea>
<p>What are your strengths? (50 words)</p>
<textarea rows="4" cols="70" autofocus>
Write the answer in 50 words only...
</textarea>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

HTML属性とは？基本構文からol・textareaの実用例までわかりやすく解説

ページを読み込むと、autofocus 属性が指定されたテキストエリアにカーソルが自動的に移動し、すぐに入力を始められる状態になります。アンケートフォームや面接質問フォームなど、ユーザーに速やかに入力してもらいたい場面で特に有効な属性です。

  1. HTMLのrequired属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのrequired属性は、フォームを送信する前に該当要素の入力または選択が必須であることを指定するためのブール型属性です。この属性は、input、select、textarea の各要素に適用できます。required属性が設定されたフィールドが空のままフォームを送信しようとすると、ブラウザが自動的にバリデーションを行い、「このフィールドは必須です」といったエラーメッセージを表示して送信を阻止します。JavaScriptを使わずに簡単な入力チェックを実現できるため、フォーム作成時には非常に便利な属性です。構文（シンタックス）required属性の基本的な構文は以下の通りです。<t

  2. HTML pattern属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのpattern属性は、<input>要素に入力された値が、あらかじめ指定した正規表現に一致するかどうかを検証するための属性です。この属性を活用すれば、JavaScriptを書かなくてもブラウザ側で手軽に入力チェック（バリデーション）を実装でき、フォームの利便性を高めることができます。pattern属性を指定した入力欄に正規表現と一致しない値が入力された場合、フォーム送信時にエラーメッセージが表示され、送信がブロックされます。利用できるのはtext・search・tel・url・email・passwordなどのテキスト系入力タイプです。構文pattern属性の基本構文は次