All HTML elements can have attributes. Attributes provide additional information about elements and are always specified in the start tag. They usually come in name/value pairs like: name="value".
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
Example:
<a href="https://www.example.com">Visit Example</a>
You will learn more about links in our HTML Links chapter.
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:
Example:
<img src="img_girl.jpg">
There are two ways to specify the URL in the src attribute:
- Absolute URL: Links to an external image hosted on another website. Example:
src="https://www.example.com/images/img_girl.jpg". - Relative URL: Links to an image hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example:
src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example:src="/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission to use them, you may violate copyright laws. Also, you cannot control external images; they can suddenly be removed or changed.
Tip: It is almost always best to use relative URLs. They will not break if you change the domain.
The width and height Attributes
The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):
Example:
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, an error in the src attribute, or if the user uses a screen reader.
Example:
<img src="img_girl.jpg" alt="Girl with a jacket">
Example: See what happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="Girl with a jacket">
You will learn more about images in our HTML Images chapter.
HTML attributes provide additional information about HTML elements and are added within the opening tag of an element. Attributes are used to modify the behavior or appearance of elements and can include information such as IDs, classes, styles, links, and more. Here are some common HTML attributes:
id:
Specifies a unique identifier for an element.
<div id="header">
<!-- Content here -->
</div>class:
Specifies one or more class names for an element (used for styling with CSS).
<p class="important">
This is an important paragraph.
</p>style:
Specifies inline CSS styles for an element.
<div style="color: red; font-size: 16px;">
This text is red and has a font size of 16 pixels.
</div>href:
Specifies the URL of a link.
<a href="https://www.example.com">Visit Example</a>src:
Specifies the URL of the media source (such as an image or video).
<img src="image.jpg" alt="Description of image">alt:
Provides alternative text for images (useful for accessibility).
<img src="cat.jpg" alt="A cute cat">title:
Adds a title or tooltip to an element.
<span title="This is a tooltip">Hover over me</span>target:
Specifies where to open the linked document.
<a href="https://www.example.com" target="_blank">Open in new tab</a>rel:
Specifies the relationship between the current document and the linked document.
<a href="https://www.example.com" rel="nofollow">Visit Example</a>disabled:
Disables an input element or button.
<button disabled>Disabled Button</button>These are just a few examples of HTML attributes. There are many more attributes available for different elements, each serving specific purposes to enhance the functionality and appearance of web pages.
