HTML属性の使用方法

最も一般的に使用される属性名と値のいくつかを見て、HTML属性の使用方法を学びます。

HTML属性とは何ですか？

HTMLでは、属性はHTML要素に追加情報を追加したり、デフォルトの（すぐに使用できる）動作を変更したりするために使用される修飾子ツールです。

属性が追加されていないHTML要素は次のようになります：

<tag>Content</tag>

属性を持つHTML要素 次のように定義されます：

<tag attribute="value">Content</tag>

そのモデルを念頭に置いて、いくつかの実用的な属性の例を見てみましょう。

href属性

href 属性は、HTMLで最も重要な属性の1つです。

href 次のURLを指定するために使用されます：

• ハイパーリンク（単に「リンク」とも呼ばれます）。
• または、スタイルやスクリプトなどの外部リソースをインポートするため。

hrefの最も一般的な使用例 アンカー要素にリンクURLを追加することです<a> ：

<a href="url-path">Link text</a>

これらのリンクを使用すると、ユーザーはページからページへ、内部的にクリックすることができます。 （同じウェブサイト/ドメイン上）、または外部 （他のウェブサイトドメインへ）。

内部リンク

内部リンクは相対パスを使用します：

<a href="/">Home</a>

標準として、"/" index.htmlである任意のWebサイトのフロントページに移動します ページ。

Aboutというページがある場合 およびabout.htmlと呼ばれる対応するHTMLドキュメント 、次のように内部的にリンクできます：

<a href="/about">About</a>

このリンクからTechStackerのAboutページにアクセスできます

外部リンク

外部リンクには絶対パスが必要です：

<a href="https://www.youtube.com">Go to YouTube.com</a>

ターゲット属性

アンカー要素を操作しているときに、もう1つの重要なアンカー要素属性であるtargetを見てみましょう。 属性。

target 属性はwhereを指定します ユーザーがリンクをクリックしたときにリンクを開くには。

たとえば、下の外部リンクをクリックすると、同じでYouTube.comに移動します。 現在表示しているブラウザタブウィンドウ：

<a href="https://www.youtube.com/">Go to YouTube.com</a>

YouTube.comにアクセス

これは、デフォルトで<a>が原因で発生します 要素にはtargetがあります _selfの値を持つ属性 —これは、hrefを開くことを意味します ユーザーがいるのと同じウィンドウのリンク値。

したがって、このリンク要素：

<a href="https://www.youtube.com/"></a>

このようにコンピュータ/ブラウザによって読み取られます：

<a href="https://www.youtube.com/" target="_self"></a>

しかし、新しいブラウザタブでリンクを開きたい場合はどうでしょうか？

問題ありません。デフォルトの_selfを上書きできます _blankの値 値：

<a href="https://www.youtube.com" target="_blank" rel="noopener"
  >Go to YouTube.com (opens in a new tab)</a
>

これで、YouTubeリンクが新しいブラウザタブで開きます：

YouTube.comにアクセスします（新しいタブ）

この機会を利用して、YouTubeチャンネルを宣伝します：

私のYouTubeチャンネル（TechStacker）にリンクします。

アンカー/リンク要素の詳細をご覧ください。

値のない属性

属性通常 アンカー要素の例のように、属性名と属性値で構成されます。

ただし、値 （動作）は属性名に組み込まれています。

たとえば、defer HTMLを変更する属性<script> 要素：

<script defer src="app.js"></script>

deferに注意してください 属性に代入演算子がありません（= ）またはその動作が組み込まれているため価値があります。

defer いわゆるブール値です 属性。ブール値は、 trueの2つの値しか持てないタイプのデータに使用されます またはfalse （または有効/無効 。

deferを詳しく見てみましょう 属性。

この<script> 要素、なし defer 属性は、そのsrcを実行します app.jsのJavaScriptコード ブラウザがロードするとすぐに値が表示されます：

<script src="app.js"></script>

デフォルトでは、HTMLドキュメントは一度に1行ずつ上から下に解析（読み取り）されます。つまり、ドキュメントの先頭にJavaScriptを配置すると、JavaScriptは前に実行されます。 ドキュメントの残りの部分は解析が完了します。

これがデフォルトです スクリプト要素の動作。

ただし、deferを追加すると <script>へ そのデフォルトの動作を無効にする要素：

<script defer src="app.js"></script>

これで、ページ全体の読み込みが完了するまでJavaScriptコードは実行されません。

文字通りの意味で、延期 延期/延期/待機を意味します。

死んだ馬を倒すには：

• deferなし 、JavaScriptは、読み込まれるとすぐに実行されます。
• あり defer JavaScriptは、HTMLページ全体が読み込まれるまで実行を待機します。

属性が混乱しても心配しないでください。実際に属性を使い始めると、常に10倍の意味があります。

カスタム属性

カスタム属性を作成して、JavaScriptで制御することもできます。カスタム属性名の前にはdata-を付ける必要があります ラベル：

<tag data-custom-attribute-name="value">Content</tag>

たとえば、「Apple」という食品要素があるとします。 。ユーザーがクリックすると、タイプを表示します。 ポップアップダイアログボックスに表示されます。

そのために、food-typeというカスタム属性を作成します （data-を覚えておいてください ラベル）そしてそれを<div>に追加します Appleを持つ要素 内部のテキスト：

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

そして、この機能を機能させるJavaScript：

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

これがデモです。

HTMLコードの仕組み：

• 最初に、onclickを追加しました <div>の属性 エレメント。これは、リッスンするイベントリスナーをアタッチするイベント属性です...ご想像のとおり、クリックします！
• 次に、showDetailsBox(this)の属性値を割り当てます。 onclickに移動します 属性。
• showDetailsBox() Appleのテキスト要素をクリックするとすぐに呼び出されるJavaScript関数の名前です。
• this (this)の一部 が属するオブジェクトを参照する引数です（ this 初心者には少し進んでいますが、理解していなくても大丈夫です。
• id HTML要素の一意のIDを指定するために使用される組み込みのHTML属性です。この場合、一意のIDはappleです。 。

JavaScriptコード 作品はこのHTMLチュートリアルの範囲を超えているため、簡単に説明します。

showDetailsBox()の場合 関数はonclickによって呼び出されます イベント属性、コードブロック{ ... }を実行します 内容：

function showDetailsBox(food) {
  ...
}

コードブロック内の最初の行で、JavaScriptはカスタムdata-food-typeを持つ任意のHTML要素を選択します 属性を作成し、それ（およびその属性値）をfoodTypeという変数に割り当てます。 ：

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  ...
}

2行目では、組み込みのalert()を実行します。 メソッド（ポップアップダイアログボックスを表示し、foodTypeの値を表示するように指示します もちろん、これはfruit ：

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

上記のコード例全体を完全に理解していなくても心配しないでください。特に初心者にとっては、消化することがたくさんあります。練習すれば、それは理にかなっています！

HTML属性の詳細については、MDNWebドキュメントのHTML属性リファレンスを調べることをお勧めします。

重要： 支援のため、データ属性内に表示およびアクセスできる重要なコンテンツを保存しないでください。 テクノロジーがそれらにアクセスしないことがあります。クローラーを検索する可能性があります また、データ属性値のインデックスを作成しないため、重要なSEOコンテンツをここに配置しないでください。