Anchor Tag
what is an anchor tag?
Anchor tag utilizing for creating a link on the web page. Using anchor tag we able to jump on different sections within a page or create a link between two web pages.
Anchor tag having an attribute ( href ) in which we provide the link of a particular web page or a particular section. The anchor tag is also used for Internal links to jump to different sections. Also, we can embed the link on an image of a web page. Let's learn one by one how those things implement in HTML.
Let's start with ...
Internal Link
Creating an internal link to jump to different sections within a web page.
For example:
<!Doctype HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<A href="#section1">Move to section one</A>
<DIV id="section1">
Section 1
</DIV>
<DIV id="section 2">
Section 2
</DIV>
</BODY>
</HTML>
Giving the link using #section on href attribute to anchor tag. Also, provide the same section on id attribute to any Div tag for jumping that section on the web page.
NOTE: you guys can change the #section1 to any content. It must be an identical name on href attribute and id attribute.
Let's understand the working of the above example, In a web page, Move to section one shown. That is the link for the jump to section 1 within a web page.
I think you guys would not able to see any effect when you guys try this example and click on that link. But consider a situation in which there are lots of sections on a web page like about us, contact us, media, and many other sections. So we need these internal links for the jump to one of these sections (About us, Contact us, media).
Embed link on Image
To embed the link on Image, we need an IMG tag along with an Anchor tag. The process of embed link on the image similar to the previous one but instead of text ("Move to section one") we use the IMG tag to show the image on a web page. When any person clicked on those images in which links are embedded then the browser would jump to that link and show that webpage/section of a web page.
Syantax
<a href="#link"><img src="image link"/></a>
Example:-
I use the Google image link for this example and when you guys click u jump to the google page.
------------------------------
<!Doctype HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<A href="https://www.google.com">
<IMG src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAEsCAMAAABgwwj8AAABJlBMVEUAAADqQzU0qFNChfT7vAVEiv0UKEk/gOruRDY2rlYkSYU1rFXyRTf/vwX/wgX/wQXiQTMTBQQzpFGyMygdCAbWPTAvDQv/xQDYogTtsQXOmgQeYC8fZTIbVytDgv4phUItkkhbGhSGJh6jLyXANyuOKSBqHhhOFhKbLCN3IhspDAl9JBxUGBPNOy7bPzFDEw+uKSksKAD+liDpNTe0hgP4qhPtWy98XQLxfCb2nBr6sw3rTDNUPwHwayuUbwO1bhULFihsVAAyZLg4cdCPhB6Cr0IrV6DvuxBLqk4ePXHOtyUIER+esTkPpldorEgQNhoEEAgoUJM8JgDEvC8MKBQsZpIURCE1rkk8lbgldjo4no0HGQw1pmM+kM0zqz86maY3onk3er/g4FIyAAADRUlEQVR4nO3X2VbTQACA4TRNIKFJKS07xQYom4Co4L6hqIhaKS7FuqC+/0uYpoVO0iQsFzO5+L+rnpO5+JnJzARNAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAmbOwuFSp1+uVpeWVm6pbEq0uTTiOY3X5v0qVFdVJcZZLfmMuxHKspUnVXRFrflQuhuVUxlW3CdZzTlxlL3VZdd65enJmhzORjX21motddHFSrQXVkb719OnsTeqG6kxt4zKdVkn5jrrUfFol1ZnaZkxn57iPdI6p7hwfjHSsCf8K3cr1T/8MdGpbkalzSmurvUeTi1vdKyALnYvhhXduhe/27S0nG51jTng6B2+gFSsLndptceGt3HbMkMkJ5eeSpt25uyPu7AwUJdiduifMaHY7NdcYNe73JtXZVF2T7EHRMIyph0Gps6a6JsWsa3RKHwWlqmPSBJ2GUXz8JOcsqo5J8bRo9BSf7aiOSfN89CzUmHoRebY3lGhPeuiuex5afBl5NmImeiU9dFoIjT4bMfNJ9qWHzpx3GjNXCB2WHtrvdKevEJqXHtrfS+7sFUJNQpNcc+nlh15zM8l/R695PMnf9ekHfmKo/HNUuEJHX0dD88MhQqj8m6n/UeK+aVwwtj/B5lspcSG9pXcP3jUK86kjhTfBPJRUJ+h+OLvvG7qul1NH7gun0wdJdYLgXxH3Y6dTt9spA4eErSV/02udtXeNT0GnX3qUPE6cUAWvqH9AjR7ofc2kYcfChJpDMgPPfP7SEELLCaWH4pmqZOU1rVbQxdKvcWNCneaI7MSupi2G6vbc4JBv4TtKfmNXNVLqtcLP58sn32+on1Cfp4fZ5er5C9Bq6/7fcfqjX6roDe34WYiU6gVb92q1mle27e6zk1/Dpsot39Oyo6VBrdhfOPkdTKp5rLDTfw1jS8NO//ilCv6jD5u7ROnJ37wp/0M06jJzauv/VGf6jvSBLTUQWlMdGWh6F0xq3FWgxlwhZVJtL/ZyVaSdlGqX0z//pWtWy3bM8e9lLDPQanfuo+7UFgr+T6+apUUPabaq7Zrn+bdoez7lox8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKjxH41kQc70Rgs/AAAAAElFTkSuQmCC"/>
</A>
</BODY>
</HTML>
We you have any doubt let me know :)