HTML Attributes

In this lecture, we are going to talk about some HTML attribute.

HTML Attributes

1. All html element can have Attributes
2. Attribute can provide some additional information About html elements
3. Attributes usually come in name/value pairs like: name="value"

Let's talk about herf tag

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

<a href="https://www.html.org.in">Go to HTML.ORG.IN</a>

Let's talk about Download file when clicking on the link (instead of navigating to the file) tag

The download inside the a tag specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.

<a href="file.pdf" download>
    <img src="download_logo.jpg" alt="W3Schools" width="100" height="100">
</a>

Let's talk about src tag

The <img> tag defines an image. The src attribute specifies the URL of the image:

<img src="https://www.html.org.in/img-1.png">

There are two ways to specify the URL in the src attribute

1. Absolute URL: https://www.html.org.in/img-1.png
   Now question is, how do we know that the URL is absolute?
   Absolute URL is a URL that starts with http:// or https://, Links to an external image that is hosted on another website.
   
   Note:- Maybe you don't own the copyright of the image & Then if you use this image, you may be violated copyright law.

2.  Relative URL: ./html-img/a
Now question is, What is relative URL?
Relative URL is a URL that starts with ./ or ../, Links to an image that is hosted on the same website.

Tip:- If you ask me I'll recommend you to use a relative URL. Because in the future you may want to move your website to another domain, Then your website will never break.

Let's talk about alt tag

The <img> tag defines an image. The alt attribute specifies an alternate text for the image, if the image cannot be displayed:

<img src="https://www.html.org.in/img-1.png" alt="HTML.ORG.IN">

Note:- The alt attribute is used to specify an alternate text for an image, if the image cannot be displayed.

Let's talk about title tag

The <img> tag defines an image. The title attribute specifies extra information about the image:

<img src="https://www.html.org.in/img-1.png" alt="HTML.ORG.IN" title="HTML.ORG.IN">

Note:- The title attribute is used to specify extra information about an image.

Let's talk about width tag

The <img> tag defines an image. The width attribute specifies the width of the image:

<img src="https://www.html.org.in/img-1.png" alt="HTML.ORG.IN" title="HTML.ORG.IN" width="100">

Let's talk about height tag

The <img> tag defines an image. The height attribute specifies the height of the image:

<img src="https://www.html.org.in/img-1.png" alt="HTML.ORG.IN" title="HTML.ORG.IN" width="100" height="100">