HTMLのhrefタグ

HTML href は、ハイパーテキスト参照と省略されます。これは、アンカー () タグ内で使用できる属性です。この href は、www.google.com、www.gmail.com、www.facebook.com などの Web サイト URL に使用されます。

リアルタイムの例: 私たちは日々、非常に多くの Web サイトにアクセスしています。この Web サイトの URL にどうやってアクセスするか考えたことはありますか? href タグのおかげで、あらゆる Web サイトの URL にアクセスできます。 href 属性のこの二重引用符 (href=”website”) 内に Web サイトが必要だっただけです。

HTML での href 属性はどのように機能しますか?

HTML href 属性は、使用している href タグに基づいて機能します。利用可能なすべての href タグの目的は、Web URL にアクセスする場合と同じですが、わずかな違いがあります。

href 属性を許可するタグが 4 つあります。それらは次のとおりです:

1. : このタグは、href 属性内でリンクが必要なページの URL を指定するために使用されます。

構文:

<a href="URL%20link"></a>

2. : このタグは、href 属性内でリンクが必要なページの URL を指定するために使用されます。

構文:

<area href="URL%20link">

3. : このタグは、リンクが href 属性内に含まれる必要があるすべての相対ページ URL のベース URL を指定するために使用されます。

構文:

<base href="Base%20URL%20link">

4. : このタグは、href 属性内で、styles.css、javascript.js などの外部ファイルの場所を指定するために使用されます。

構文:

<link href="external%20link">

HTML での href タグの実装例

以下にさまざまな例を示します:

例 #1 – href 属性

を含むタグ

コード:

<title>href attribute</title>

<!--CSS code-->
<style>
p
{
color: green;
border: 2px solid brown;
font-size: 22px;
}
h1
{
color: blue;
text-align: center;
}
</style>


<h1>The <a> tag with href attribute introduction</a>
</h1>
<p>HTML href is abbreviated as hypertext reference. This is the attribute which is available inside the anchor (<a>) tag. This href is used for website URLs like www.google.com, www.gmail.com, www.facebook.com etc.</a></p>
<p>Real time Example: Day to day life we have accessed so many websites. Have you ever think about how would we access this website URLs? Because of href tag we can access any website URLs. We simply required website within this double quotes (href="website") of href attribute.
</p>
<h1>The <a> tag with href attribute URLs</a>
</h1>

• Duplicate Checker
• EDUCBA
• Google
• Gmail

出力:

例 #2 – href 属性

を含むタグ

コード:

<title>href attribute</title>

<!--CSS code-->
<style>
p
{
color: fuchsia;
border: 2px solid orange;
font-size: 22px;
}
h1
{
color: red;
text-align: center;
}
</style>


<h1>The <a> tag with href attribute introduction</a>
</h1>
<p>HTML href is abbreviated as hypertext reference. This is the attribute which is available inside the anchor (<a>) tag. This href is used for website URLs like www.google.com, www.gmail.com, www.facebook.com etc.</a></p>
<p>Real time Example: Day to day life we have accessed so many websites. Have you ever think about how would we access this website URLs? Because of href tag we can access any website URLs. We simply required website within this double quotes (href="website") of href attribute.
</p>
<h1 id="The-area-tag-with-href-attribute-URLs-Example">The <area> tag with href attribute URLs Example</h1>
<img src="/static/imghwm/default1.png" data-src="planets.gif" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="HTMLのhrefタグ" usemap="#educba">
<map name="educba">
<!--Click on this coordinate gives you that images-->
<area shape="rect" coords="0,0,81,125" href="sun.htm">
<area shape="circle" coords="91,59,4" href="mercur.htm">
<area shape="circle" coords="125,59,9" href="venus.htm">

</map>

出力:

クリック後

例 #3 – href 属性

を含むタグ

コード:

<title>href attribute</title>

<!--From this path image is loaded-->
<base href="https://www.w3schools.com/images/">
<!--CSS code-->
<style>
p
{
color: navy;
border: 2px solid blue;
font-size: 22px;
}
h1
{
color: fuchsia;
text-align: center;
}
</style>


<h1>The <a> tag with href attribute introduction</a>
</h1>
<p><img  src="/static/imghwm/default1.png" data-src="stickman.gif" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="HTMLのhrefタグ" > HTML href is abbreviated as hypertext reference. This is the attribute which is available inside the anchor (<a>) tag. This href is used for website URLs like www.google.com, www.gmail.com, www.facebook.com etc.</a></p>
<p>Real time Example: Day to day life we have accessed so many websites. Have you ever think about how would we access this website URLs? Because of href tag we can access any website URLs. We simply required website within this double quotes (href="website") of href attribute.
</p>

出力:

例 #4 – href 属性

を含むタグ

コード:

<title>href attribute</title>

<!--Including external CSS styles file with link tag-->
<link rel="stylesheet" type="text/css" href="styles.css">


<h1>The <a> tag with href attribute introduction</a>
</h1>
<p>HTML href is abbreviated as hypertext reference. This is the attribute which is available inside the anchor (<a>) tag. This href is used for website URLs like www.google.com, www.gmail.com, www.facebook.com etc.</a></p>
<p>Real time Example: Day to day life we have accessed so many websites. Have you ever think about how would we access this website URLs? Because of href tag we can access any website URLs. We simply required website within this double quotes (href="website") of href attribute.
</p>

CSS コード:styles.css

p
{
color: red;
border: 2px solid green;
font-size: 22px;
}
h1
{
color: orange;
text-align: center;
}

出力:

結論

hrefin HTML は、Web URL にアクセスするために使用されます。 href 属性を許可するタグは、、、 です。と 。最も頻繁に使用されるのは タグが使用されています。

おすすめ記事

これは HTML の href タグのガイドです。ここでは、HTML の href タグの概要とその例、およびコードの実装と出力について説明します。詳細については、推奨記事を参照することもできます –

1. HTML の Span タグのプロパティ トップ 15
2. HTML で div タグはどのように機能しますか?
3. HTML 検索バー |例
4. HTML の Canvas タグ |例

以上がHTMLのhrefタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。