HTML アンカー タグは、Web サイト間の移動、あるページから別のページへの移動、マウスをクリックして何らかの畫像やテキストを開くために使用される HTML の最も重要な要素の 1 つです。これは、含まれるハイパーリンクの開始と終了を定義するために使用されます。ほとんどの場合、これは検索エンジンが宛先 URL を定義するために使用します。これは有益であり、ランディング ページとの関連性がより高くなります。
これらのリンクは、
のような異なるシナリオで異なる意味を表します。- 下線と赤色のリンクはアクティブなリンクを示します
- 下線と紫色のリンクは、訪問済みのリンクを示します。
- 下線と青色のリンクは、未訪問のリンクを示します。
構(gòu)文:
を定義するための実際の構(gòu)文を見てみましょう。タグ。
<a href="Link_URL">Link Home</a>
上に示したように、構(gòu)文 以下に定義されている主要部分へのリンクを含むタグ:
1. href 屬性
この屬性はハイパーリンクを定義するために使用され、宛先アドレスを知ることができます。ハイパーリンクは、Web ページのドキュメントとターゲット リンクの間のコネクタとして機能します。
- 他の Web サイト、畫像、ファイルでも構(gòu)いません。 Href はハイパーテキスト參照の略語で、必要な宛先アドレスを定義するために使用されます。 「=」記號は、屬性とその接続値の接続を定義するために使用されます。
- 上記の構(gòu)文では、href は、間のリンクがその値として知られる屬性とみなされます。 タグの間に置かれた値はアンカーテキストまたはリンクです。ユーザーが表示またはクリックできるもの
- 例: インドの時代
2. 名前屬性
の name 屬性タグは、ページの特定のポイントに移動するために使用されます。
- It’s most useful for defining large pages or to define subdivisions.
- Example:Homepage So in this example we are adding #tag at the anchor name. it’s helpful to the browser to find or jump to the defined location like home. #name can be placed after the filename.
? 3. Target attribute
- The target attribute is used to define the destination page or the defined target page may be opened.
- It’s used as a common option that is used by target attributes to link with other pages.
- If the target attribute defines with a blank value like “target=_blank” then it will open a new tab at the target location.
4. Title Attribute
- The title attribute is one of the important attributes used to give special attention where one can easily move when they click the link.
- If the user moves the mouse pointer onto the link reference, the title text which was given into the attribute point will be shown there.
- It works like a tooltip or details where the link will navigate. This approach makes webpages or documents more user-friendly.
Working of Anchor in HTML
- There are two scenarios through which we can anchor tags like Internal link and External link.
- Internal links are those which are showing entities that are other pages of our domain, where external links are used to show web pages that don’t consider as a part of our domain.
- Let’s see how anchor tag exactly works with both links. Internal links work as a navigator between websites to show navigation menus which are useful to everyone who visits the website can easily navigate on the required menu. As discussed above in the title attribute, internal links are useful to navigate on specific content.
- Those are also used by search engine web crawlers to exactly define the pages of a website as well as for sharing authority purposes.
- External links play an important role in tag, it’s always best practice to provide exact attribution to the source. It is useful for related content, which can show us for referring website visitors.
- Sometimes other sites upload some kind of external links, which are going to point towards our website is considered as backlinks, those give permission to flow into our site which is beneficial to improve the position of our site at SERP. (Search Engine Result Page).
- One more good thing to keep our visitors on our site for a longer time, by using target=”_blank” while writing external links, which will open a new tab.
- The text we are going to use as an Ideal anchor text identifies keywords, which are more suitable to the web page.
- Working with anchor by using Absolute and Relative By using absolute URL one can see the whole description of the destination link. It contains protocol which helps to complete domain name to reach the destination.
- Relative URL used to link given web pages showing the exact position of the relative towards the position of the current page.
- Whenever internal links are written, which are showing other pages of the same site in this case we are going to write relative URLs.
Examples
Here we are going to show some examples having use of actual tag.
1. HTML code
<h4>Examples for Anchor in HTML </h4> <a href="https://timesofindia.indiatimes.com/">Latest News </a><br><br> <a href="HTMLcolor.html">Navigate on other File</a><br>
Output:
?
On clicking the latest news, the output is :
?By clicking on the link “Navigate on other File” it will show another webpage as:
2. HTML Code
<h2>Reach to EDUCBA </h2> <ul> <li><a href="https://www.educba.com/">Website</a></li> <li><a href="mailto:[email protected]">Email US</a></li> <li><a href="tel:+123456789">Phone</a></li> </ul>
?Output :
The output shows some links, and that those links are in blue they are unvisited, the link showing in purple has visited the link and this is used to show the difference in links.
3. HTML Code
<h4>Image and File Demo</h4> <p><a href="C:\Users\\Sonali\Desktop\jerry.jpeg">Image Demo</a> It will open image</p> <a href="./generate-zip?id=4" download="assets.zip">Download File</a>
Output :
While clicking on image demo it will open the image as:
?While clicking on another link it will download the file as :
結(jié)論 - HTML のアンカー
HTML のアンカー タグは、ターゲットの場所に直接移動するリンクを定義するために使用されます。これは、hre 屬性、name 屬性、target 屬性などの主要コンポーネントに基づいています。タグは、內(nèi)部リンクと外部リンク、および絶対 URL と相対 URL に使用されます。
以上がHTMLのアンカーの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
初心者向けの不可欠なHTMLタグ
Jul 27, 2025 am 03:45 AM
HTMLをすばやく開始するには、Webスケルトンを構(gòu)築するためにいくつかの基本的なタグをマスターするだけです。 1.ページ構(gòu)造は不可欠であり、ルート要素であり、メタ情報が含まれ、コンテンツディスプレイ領(lǐng)域です。 2。タイトルを使用します。レベルが高いほど、數(shù)が小さくなります。タグを使用してテキストをセグメント化して、レベルをスキップしないようにします。 3.リンクはタグを使用してHREF屬性を一致させ、畫像はタグを使用し、SRCおよびALT屬性が含まれます。 4.リストは、順序付けられていないリストと順序付けリストに分割されます。各エントリは表され、リストにネストする必要があります。 5.初心者は、すべてのタグを強制的に記憶する必要はありません。あなたが書いている間にそれらを書いてチェックする方がより効率的です。構(gòu)造、テキスト、リンク、寫真、リストをマスターして、基本的なWebページを作成します。
Shadow Domの概念とHTML統(tǒng)合
Jul 24, 2025 am 01:39 AM
Shadowdomは、孤立したDOMサブツリーを作成するためにWebコンポーネントテクノロジーで使用されるテクノロジーです。 1.獨自のスタイルと行動を備えた通常のHTML要素上の獨立したDOM構(gòu)造のマウントを可能にし、メインドキュメントに影響しません。 2。AttachShadowメソッドの使用やモードの設(shè)定など、JavaScriptを介して作成されました。 3。HTMLと組み合わせて使用すると、3つの主要な機能があります。クリア構(gòu)造、スタイル分離、コンテンツプロジェクション（スロット）。 4。ノートには、複雑なデバッグ、スタイルスコープ制御、パフォーマンスオーバーヘッド、フレームワークの互換性の問題が含まれます。要するに、Shadowdomは、再利用可能で汚染されていないUIコンポーネントを構(gòu)築するためのネイティブカプセル化機能を提供します。
html `style`タグ：インラインと內(nèi)部css
Jul 26, 2025 am 07:23 AM
シーンに従ってスタイル配置方法を選択する必要があります。 1。インラインは、操作によるボタンの色の変更など、単一要素または動的JS制御の一時的な変更に適しています。 2。內(nèi)部CSSは、ページが少ないプロジェクトと単純な構(gòu)造に適しています。これは、ログインページの基本スタイル設(shè)定など、スタイルの集中管理に便利です。 3。再利用、メンテナンス、パフォーマンスが優(yōu)先され、大規(guī)模なプロジェクトの外部リンクCSSファイルを分割することをお勧めします。
なぜ私の畫像がHTMLに表示されないのですか？
Jul 28, 2025 am 02:08 AM
表示されていない畫像は、通常、ファイルパスの間違ったパス、ファイル名または拡張機能、HTML構(gòu)文の問題、またはブラウザキャッシュによって引き起こされます。 1. SRCパスがファイルの実際の位置と一致していることを確認し、正しい相対パスを使用します。 2.ファイル名のケースと拡張機能が正確に一致するかどうかを確認し、URLに直接入力して畫像をロードできるかどうかを確認します。 3.IMGタグ構(gòu)文が正しいかどうかを確認し、冗長文字がなく、ALT屬性値が適切であることを確認してください。 4.ページを強制的に更新するか、キャッシュをクリアするか、Incognitoモードを使用してキャッシュ干渉を排除してください。この順序でのトラブルシューティングは、ほとんどのHTML畫像表示の問題を解決できます。
別のタグ內(nèi)にタグを入れることはできますか？
Jul 27, 2025 am 04:15 AM
youcannotnesttagsinsisideantagbecuseit’sinvalidhtml; browsersautomatelycloseThefirsteforeopeningthenext、spedinginselementsied、useinlineelements like like like、orforstylingwithinaparagraph、またはblockainerslikegoriveparagragh
DNSをプリフェッチするためのHTML「リンク」
Jul 23, 2025 am 02:19 AM
処理前のDNSはページの読み込み速度を高速化でき、DNSのHTMLリンクタグを使用することは効果的な方法です。 dnsprefetchingは、事前にドメイン名を解決することにより、後続の要求時間を保存します。該當するシナリオには、サードパーティフォント、広告統(tǒng)計スクリプト、リソースホスティング、CDNドメイン名が含まれます。メインページの依存関係リソースに優(yōu)先順位を付け、3?5の數(shù)を合理的に制御し、Preconnectで使用して効果を高めることをお勧めします。
基本的なHTML5ページテンプレートを書き込む方法は？
Jul 26, 2025 am 07:23 AM
ドキュメントをHTML5として宣言して、ブラウザが奇妙なモードに入るのを避けます。 2。ルート要素を定義し、アクセシビリティとSEOを改善するための言語を指定します。 3.正しい文字エンコードの確保、レスポンシブデザインの実裝、およびページタイトルの設(shè)定が含まれます。 4。目に見えるすべてのコンテンツを配置し、オプションでCSS、Favicon、JavaScriptリンクを追加します。このテンプレートは完全で最新のブラウザと互換性があり、新しいHTMLファイルに適しています。
入力タグの名前屬性は何ですか？
Jul 27, 2025 am 04:14 AM
thenAmeattributeTheTogisusedisedifytheTheInputisputisUbsisubmitted; itstheasthekey-key-key-valuepairsenttotheserver、wheretheuser'sinputisthevalue.1.whenaformissubmitted、thenameattributebecomesthe keyanttheinputtheinupthe becomesthevalueintas
