In this tutorial, we are going to see the Image and Anchor Tags in HTML. As always firstly create a "index.html" file. And run the file in your web browser.
Then you have to copy the given source code below and paste into the body tag of your "index.html" file.
Image Tag in HTML
- <img> tag is used to add the image on our webpage.
- It doesn't require any closing tag.
Image Tag Attributes
- src: It is used to specify the path of the image.
- alt: If users are unable to see an image then they will see the alt value.
- style: This attribute is used to add style to the image like width, height, etc.
- width: It is used to specify the width of the image.
- height: It is used to specify the height of the image.
- title: This attribute is used to set the title on the image.
Example:
<img src="myImage.png" width="50px" height="50px" alt="raju_webdev image" title="I am raju Frontend Web Developer">
Output:
Anchor Tag in HTML
- <a> tag is used to create hyperlinks on the web page.
- It contains the content between the opening and closing tags which will be hyper content.
Anchor Tag Attributes
- href: This attribute is used to set the URL.
- target: This will specify where the linked content will be opened.
- _blank: This will open the link in a new tab.
- _self: This will open the link in a current browser tab.
- _top: This works the same as _self.
Example:
<a href="https://www.geekshelp.org" target="_blank"> Geeks Help </a>
Output:
Let's do some cool things with Anchor Tag
i). Link to an email address:
<a href="mailto:contact.geekshelp.@gmail..com">Send email</a>
ii). Link to a phone number:
<a href="tel:+91123456789">123456789</a>
iii). Go to a section on the webpage:
<a href="#section">Go to Section</a>
