Class Attribute
The class attribute is used to assign a specific class to an element. It is primarily used for styling purposes. By defining a class name and applying CSS styles to that class, you can customize the appearance of multiple elements simultaneously.
Example:
<h1 class="main-heading">This is a h1 heading</h1>
ID Attribute
The id attribute provides a unique identifier for an element on a webpage. It allows you to target and manipulate specific elements using JavaScript or CSS. Each id must be unique within the HTML document.
Example:
<h1 id="main-heading">This is a h1 heading</h1>
Src Attribute
The src attribute is used with the <img> tag to specify the source URL of an image. It enables you to display images on your webpage. Make sure to provide a valid image file path or URL.
Example:
<img src="images/image1.jpg"/>
Alt Attribute
The alt attribute is used with the <img> tag to provide alternative text for an image. It is displayed if the image fails to load or for accessibility purposes, enabling screen readers to describe the image to visually impaired users.
Example:
<img src="images/image1.jpg" alt="My Image"/>
Href Attribute
The href attribute is used with the <a> tag to specify the destination URL or location of a hyperlink. It allows you to create clickable links that navigate to other web pages or sections within the same page.
Example:
<a href="https://www.example.com/about.html">About</a>
Title attribute
The title attribute specifies extra information about an element.
The information is most often shown as a tooltip text when the mouse moves over the element.
Example:
<a href="https://www.example.com/about.html" title="This is an about page">About</a>
Style attribute
The style attribute specifies an inline style for an element. It will override any style set globally, e.g. styles specified in the <style> tag or in an external style sheet.
The style attribute can be used on any HTML element (However, it is not necessarily useful).
Example:
<h1 style="color:blue;text-align:center;">This is a header</h1> <p style="color:green;">This is a paragraph.</p>
Exercise:
Now, let's see how these attributes can be used in an example.
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="highlight">HTML Attributes</h1>
<img src="images/image1.jpg" alt="A beautiful image" width="120" height="120">
<a href="https://www.example.com" title="Some title">Visit Example.com</a>
</body>
</html>
This code will render the following when opened in a browser.
In this example, we've applied the class attribute to the <h1> element, assigning it the class name "highlight." We've also used the src attribute to specify the image source URL and the alt attribute to provide alternative text for the image. Lastly, the href attribute defines the URL destination for the hyperlink.
By using HTML attributes effectively, you can enhance the functionality, appearance, and accessibility of your webpages. In the next lecture, we'll explore HTML links and how they enable users to navigate between web pages.
Congratulations on gaining knowledge about HTML attributes! Continue practicing and experimenting with these attributes to unleash the full potential of your webpages.
