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

HTMLのhref属性の使用方法

href属性

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

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

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

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

<a href="link-path">Click</a>

ユーザーがフロントページをクリックすると、そのページに移動するリンクを作成しましょう。

これをホームと呼びます。

まず、アンカー要素を定義します：

<a>Home</a>

次に、<a>を作成します 要素をハイパーリンクに追加し、hrefを追加します 属性：

<a href>Home</a>

そして、それに"/"の値を割り当てます ：

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

ブラウザでのレンダリング方法：

ホーム

念のため、アンカー要素の例を分解してみましょう。

  • <a> 開始アンカータグです
  • </a> 終了アンカータグです
  • Home コンテンツです（ブラウザに表示される唯一の部分）
  • href 属性name
  • = 代入演算子です
  • "/" 属性value

このWebサイトでは、この正確なアンカー要素がヘッダーの左上隅にあるTechStackerロゴをラップしています（クリックすると、フロントページに移動します）。

ウェブサイトのナビゲーションバー<nav>...</nav>内で使用されているこの正確なコード例をよく目にします。 。

たとえば、ウェブサイトに合計3ページあるとします。ホーム、概要、連絡先、内部にしたい それらのリンク。

まず、各ページのHTMLドキュメントには次のような名前を付ける必要があります。

  • ホームはindex.htmlである必要があります
  • Aboutはabout.htmlである必要があります
  • 連絡先はcontact.htmlである必要があります

次に、各ドキュメントの相対ページルート（URL）を次のように定義します。

<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>

これで、各アンカー要素を<nav>内にラップできます。 要素：

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

これで、ヘッダー、フッターに配置できるナビゲーションコンポーネントができました。 またはサイドバー あなたのウェブサイトで。

自分のウェブサイト以外のウェブサイトにリンクする場合は、外部を使用します 絶対パスを指定するリンク形式：

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

この機会を利用して、自分のYouTubeチャンネルにリンクします：

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


  1. HTMLでリスト属性を使用するにはどうすればよいですか？

    HTMLでは、要素を使用して、事前定義されたオプションのリストを指定します。このリストは入力要素用です。 list属性は、この要素を参照します。 HTML5はリスト属性を導入しました。 list属性は、要素の事前定義されたオプションを含む要素を参照します。 例 次のコードを実行して、HTMLでlist属性を使用する方法を学ぶことができます。 <!DOCTYPE html> <html>    <head>       <title>HTML list attribute</titl

  2. HTML<a>href属性

    href属性は、リンク、つまりページのURLを設定するために使用されます。 構文 以下は構文です- <a href="URL"> 上記のURLは、言及する必要のあるURLであり、相対リンク、絶対リンク、スクリプト、プロトコルなどがあります。 例 要素-のhref属性を実装する例を見てみましょう。 <!DOCTYPE html> <html> <body> <h2>Learning is Fun</h2> <p> Learn the concepts of <a href=&quo