What is Anchor element in HTML?
Anchor Element in HTML: An anchor element is an element that creates a hyperlink to web pages, files, e-mail, or any site that a URL can address.
How to use Anchor tag in HTML?
The anchor element is shortened to the letter a, and the name of the page or file is written between the open and close tags.
For example:
<body>
<a>Name</a>
</body>
note:
The anchor element has several private and public attributes, the most important of which are:
Element attributes:
href attribute:
what is href attribute in HTML?
The href property allows you to include links or files. Some HTML elements that require this property, and I will explain them during the course.
How to use href attribute in Anchor?
The URL of the site, page name, or email is written in the href value.
For example:
<body>
<p>
<span>site URL:</span>
<a href="https://www.3nifwan.com/">beddai</a>
<p>
<p>
<span>file:</span>
<a href="index.html">home</a>
<p>
</body>
note:
If you write an email or phone number, you must write the following:
<body>
<a href="mailto:mail">ID name</a>
<a href="tel:phone number">ID name</a>
</body>
Target attribute:
what is Target attribute in anchor element?
The target attribute in the anchor gives you different ways to open the anchor.
How to use Target attribute in anchor element?
The most important and most widely used method is _blank. This value allows you to open the anchor in a new page.
For example:
<body>
<a href="https://www.3nifwan.com/" target="_blank">beddai</a>
</body>
note:
There are also other values such as _self, _parent, and _top
Title attribute:
what is Title attribute in HTML?
The title attribute gives the user a simple definition of some HTML elements that need to be defined, such as images and anchors. Once the mouse is hovered over the anchors, the definition is displayed.
How to use Title attribute in anchor element?
The anchor’s meta name is placed in the title value.
For example:
<body>
<a href="https://www.3nifwan.com/" target="_blank" title="Go to Mymobily website">Mymobily</a>
</body>
global attributes:
id attribute:
How to use id attribute in anchor element?
- You go to the part you want to link to and add in the opening tag of the element the ID attribute with the value.
- After that, you go back to the anchor element, go to the href attribute, then add #, then the same value as in the id.
Illustrative example:
<h1>The Story</h1>
<span href="#Chapter1">Chapter One</span>
<span href="#Chapter2">Chapter Two</span>
<span href="#Chapter3">Chapter Three</span>
<h2 id="Chapter1">Content Title</h2>
<p>Contents of the first chapter</p>
<p>Contents of the first chapter</p>
<p>Contents of the first chapter</p>
<p>Contents of the first chapter</p>
<p>Contents of the first chapter</p>
<p>Contents of the first chapter</p>
<p>Contents of the first chapter</p>
<p>Contents of the first chapter</p>
<p>Contents of the first chapter</p>
<p>Contents of the first chapter</p>
<h2 id="Chapter2">Content Title</h2>
<p>Content of the second chapter</p>
<p>Content of the second chapter</p>
<p>Content of the second chapter</p>
<p>Content of the second chapter</p>
<p>Content of the second chapter</p>
<p>Content of the second chapter</p>
<p>Content of the second chapter</p>
<p>Content of the second chapter</p>
<p>Content of the second chapter</p>
<p>Content of the second chapter</p>
<h2 id="Chapter3">Content Title</h2>
<p>Content of Chapter Three</p>
<p>Content of Chapter Three</p>
<p>Content of Chapter Three</p>
<p>Content of Chapter Three</p>
<p>Content of Chapter Three</p>
<p>Content of Chapter Three</p>
<p>Content of Chapter Three</p>
<p>Content of Chapter Three</p>
<p>Content of Chapter Three</p>
<p>Content of Chapter Three</p>
Note: English is not my official language. Mostly I use Google Translate. Therefore, if you encounter a problem or find some errors, you can inform me of the error on the contact us page or comments, or go to Mozilla developer website to understand the lesson well.
Here we have finished. We will see you in the next lesson
Thank you for reading the article and do not forget to share it with friends