HTML属性のステップバイステップガイド

HTML属性は、HTML要素の追加のプロパティを定義します。これらはHTML要素の開始タグで指定され、一部の要素は機能するために属性を必要とします。

---

HTML属性とは何ですか、またそれらをどのように使用しますか？ HTMLを学習しているときに、attributesという用語に出くわすことがあります。 。属性は、HTMLページの特定の要素に関する追加情報を提供するために使用されます。

属性はHTMLドキュメントの開始タグで指定され、通常は名前と値のペアで指定されます。たとえば、nameという属性 値がvalue 次のように表示されます：name =value 。

このチュートリアルでは、例を参照して、HTMLの属性の基本とそれらが使用される理由について説明します。また、HTMLのほとんどの要素に適用され、コーディング時に遭遇する可能性が最も高いいくつかの汎用属性についても説明します。

HTML属性とは何ですか？

HTMLマークアップ言語のすべての要素は、その要素が保持する追加のプロパティを定義するために使用される属性を持つことができます。

たとえば、画像の高さやフォーム要素によって保存される値を定義する属性を指定したい場合があります。これらの属性は要素に固有です。つまり、特定の要素がWebページでどのように機能するかをカスタマイズするために使用できます。

場合によっては、要素に属性が必要です。たとえば、<a>を使用している場合 HTMLタグ、hrefを定義する必要があります タグがクリックされたときにどのURLを指す必要があるかをタグが認識できるようにするための属性。

HTMLの属性には2つのコンポーネントがあります：

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

• 名前 作成する属性の名前を定義します。
• 値 属性が保持する値を定義します。

CareerKarmaWebサイトのホームページを指すリンクを定義したいとします。そのために、<a>を使用できます HTMLのタグ。ただし、タグをCareer Karmaホームページにリンクする場合は、hrefも使用する必要があります。 属性。

これが<a>の例です キャリアカルマのホームページにリンクするタグ：

<a href="https://careerkarma.com/">Career Karma</a>

このタグは、hrefという属性を使用します そして、それに値「https://careerkarma.com/」を割り当てます。これは、CareerKarmaホームページのURLです。

HTMLの属性では大文字と小文字は区別されませんが、属性は通常小文字で記述されます

一重引用符と二重引用符のHTML

属性に値を割り当てる場合は、一重引用符と二重引用符の両方を使用できます。二重引用符を使用するのが最も一般的なアプローチです（これは、前の例で使用したアプローチです）。ただし、使用するアプローチは、属性の内容によって異なります。

John ‘Rocketman’ Smithの値を持つフォーム要素を作成するとします。 。この場合、値には一重引用符が含まれているため、属性名には二重引用符を使用する必要があります。この属性を宣言するために使用するコードは次のとおりです。

<input type="text" value="John 'Rocketman' Smith">

一方、値に二重引用符が含まれていて、代わりにJohn “Rocketman” Smithであったとします。 。この場合、一重引用符を使用して属性を定義します。使用するコードは次のとおりです。

<input type="text" value='John "Rocketman" Smith'>

HTMLブール属性の使用方法

一部の属性は、名前/値ペア構造を使用しません。これらをブール属性と呼びます。これらの属性はtrue-false値のみを持つことができ、指定されている場合はtrueに設定され、指定されていない場合はfalseに設定されます。

ブール属性は、HTMLフォームで一般的に使用されます。ユーザーに名前を尋ねるフォームフィールドを作成するとします。このフォームフィールドはデフォルトで必須です。 requiredを使用できます このタスクを実行するためのブール属性：

<input type="text" value="Name" required>

この例では、3つの属性を持つ入力タグを定義しました。最初の2つの属性、type およびvalue 、名前/値の構造を使用します。 3番目の属性であるrequired 、はブール属性です。 requiredを指定したため ブール属性。その値はtrueに設定されます。

標準のHTML属性の使用方法

HTMLのすべての要素に適用されるHTML属性がいくつかあります。これらはグローバル属性と呼ばれます。

これらはウェブページ全体で発生する可能性が高いため、それらが何であり、どのように機能するかを知っておくことが重要です。要素に適用される最も一般的な4つの標準HTML属性を見ていきましょう。

HTMLid属性

id属性は、要素に一意の識別子を与えます。 id属性自体は、HTML要素の表示方法には影響しませんが、CSSまたはJavaScriptを使用しているときに操作する特定の要素を選択できます。

特定の要素に割り当てるIDは、ドキュメント内で一意である必要があります。

<p>で使用されるid属性の例を次に示します。 タグ：

<p id="secondParagraph">Hello, there! Welcome to my site.</p>

この例では、<p>を割り当てています。 id属性に値secondParagraphのタグを付けます 。

HTMLタイトル属性

HTMLのtitle属性は、要素またはそのコンテンツを説明するためによく使用されます。 title属性内に格納された値は、ユーザーがカーソルで要素にカーソルを合わせたときに表示されるツールチップとして表示されます。

ユーザーの名前を収集する入力フィールドがあるとします。 This field is requiredを表示します ユーザーがフィールドにカーソルを合わせたとき。次のコードを使用して、この目標を達成できます。

<input type="text" title="This field is required">

テキストフィールドにカーソルを合わせると、次のツールチップが表示されます。

HTMLスタイルの属性

HTMLスタイル属性は、特定の要素のCSSスタイルを指定するために使用されます。要素をスタイリングするこのアプローチは、インラインスタイルの作成と呼ばれます。

灰色で表示したいテキストの段落を作成しているとします。 style属性を使用して、テキストの色を指定できます。このタスクを実行するために使用できるコードは次のとおりです。

<p style="color: gray;">Hello, there! This is my website.</p>

コードの出力は次のとおりです。

ご覧のとおり、テキストの色が灰色に変わりました。これは、スタイル属性を指定し、colorを変更したためです。 grayと同じスタイル 。

要素固有のHTML属性

要素に固有の、遭遇する可能性のある他のさまざまな属性があります。次にいくつかの例を示します。

img src

<img src="source.png">

この例では、src属性を指定しています。この属性はimgで使用されます タグは、タグがWebページにレンダリングする必要のあるファイルを指します。

a href

<a href="https://careerkarma.com/">Career Karma homepage</a>

href この例では、属性を使用して<a>に通知します。 リンクがクリックされたときにユーザーを誘導するサイトにタグを付けます。

img alt

<img src="source.png" alt="Image of a book">

このコードでは、altを指定しています 属性。この属性はimgタグに固有であり、画像を表示できない場合にWebページによって処理される代替テキストを指定します。

HTMLのalt属性はスクリーンリーダーで読み取ることができるため、スクリーンリーダーに依存している視覚障害者は、引き続き当社のWebページを理解できます。

HTML属性の使用方法：結論

属性は、HTMLの特定の要素に適用される追加のプロパティです。属性は常に要素の開始タグで指定され、通常は名前と値のペアを使用します。

このチュートリアルでは、例を参照して、HTMLの属性の基本、ブール属性、いくつかの標準HTML属性、およびいくつかの要素固有の属性について説明しました。これで、HTMLで属性を使用する方法がわかりました。