HTML Attributes

Welcome to the lecture on HTML Attributes. HTML attributes provide additional information and functionality to HTML elements, allowing you to customize and optimize your webpages.

Desired Outcomes:

By the end of this lecture, you should be able to:

  • Understand the purpose and usage of HTML attributes
  • Apply attributes for styling and functionality
  • Enhance the behavior and appearance of HTML elements

In this lecture, you'll explore the power of HTML attributes and learn how to leverage them to enhance the functionality and styling of HTML elements. By the end of this lecture, you should be able to apply attributes effectively and customize your web pages with additional features.

  • All HTML elements can have attributes, but some attributes can be applied to all elements and some are specific to particular elements
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"
  • Attribute values are case sensitive, which means that class=”some-name” is not the same as class=”some-Name”

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.

HTML Style Attribute
HTML Style Attribute

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.