HTML Attributes
HTML attributes are integral to HTML; they add extra information and control the behavior of HTML elements. An attribute is always specified in the start tag and usually comes in name/value pairs like: name=”value”.
Attributes can modify various aspects of an HTML element, such as style, dimensions, and more. They can also provide additional information, such as alternative text for images.
The href Attribute
The href attribute is used within an <a> tag, which defines a hyperlink. This attribute indicates the link’s destination. It’s a critical component of the web, as it allows us to link from one page to another, creating a network of interconnected information.
Example:
<a href="https://www.aptlearn.io">This is a link to aptLearn</a>
Â
In this example, the href attribute is set to “https://www.aptlearn.io“. When this link is clicked, the browser navigates to this URL.
The src Attribute
The src (source) attribute is used in conjunction with the <img> tag to specify the path to the image to be displayed. This path can be a URL pointing to an image hosted elsewhere or a relative path pointing to an image within your site’s file structure.
Example:
<img src="aptlearn_logo.jpg" />
or
<img src="https://bit.ly/44QxQg3" />powered by Advanced iFrame. Get the Pro version on CodeCanyon.
Let’s learn more about these two ways to specify the URL in the src attribute:
- Absolute URL – Links to an external image that is hosted on another website. Example: src=”https://www.aptlearn.io/images/aptlearn_logo.jpg“.
- Relative URL – Links to an image that is 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=”aptlearn_logo.jpg”. If the URL begins with a slash, it will be relative to the domain. Example: src=”/images/aptlearn_logo.jpg”.
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). For example:
powered by Advanced iFrame. Get the Pro version on CodeCanyon.
Here, the image’s width is set to 90 pixels, and the height is set to 90 pixels. This means the image will display as 90 pixels wide by 90 pixels tall, regardless of the original image’s dimensions.
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, or an error in the src attribute, or if the user uses a screen reader. For example:
<img src="aptlearn_logo.png" alt="Logo of aptLearn">
The style Attribute
The style attribute allows you to specify CSS styling directly within your HTML elements. This is known as inline styling. While it provides a quick way to apply styles to individual elements, it’s generally recommended to use external or internal stylesheets for larger projects to keep your HTML clean and separate concerns.
Example:
<p style="color:blue;">This is a blue paragraph.</p>
Here, the style the attribute is used to change the colour of the text inside the <p> tag to blue.
powered by Advanced iFrame. Get the Pro version on CodeCanyon.
The lang Attribute
The lang attribute is used within the <html> tag to declare the language of the webpage. This can help search engines and browsers to better understand and display your content.
Example:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
In this example, the lang attribute is set to “en”, which stands for English. This information helps web browsers and assistive technologies (like screen readers) interpret your content correctly.
The title Attribute
The title attribute is used to provide additional “tool-tip” information. When the mouse hovers over the element, a small box appears with the additional information. This can be used to provide extra context or guidance to the user.
Example:
<p title="Learning to Code">Hover over me</p>
Here, if you hover over the text “Hover over me”, a tooltip box will appear with the text “Learning to Code”.
Quotes in HTML
In HTML, attribute values can be written with either single or double quotes. Double quotes are the most common, but single quotes are also valid. If the attribute value itself contains double quotes, it’s necessary to use single quotes, and vice versa:
<p title='English Premier League'>
or
<p title="English Premier League">
Chapter Summary
- All HTML elements can have attributes
- The href attribute of
<a>specifies the URL of the page the link goes to - The src attribute of
<img>specifies the path to the image to be displayed - The width and height attributes of
<img>provide size information for images - The alt attribute of
<img>provides an alternate text for an image - The style attribute is used to add styles to an element, such as color, font, size, and more
- The lang attribute of the
<html>tag declares the language of the Web page - The title attribute defines some extra information about an element
That’s it for this lesson. In the next lesson, we will be covering more about HTML. Stay tuned!
