Objective:
- Understand the role of HTML attributes in providing additional information about HTML elements.
- Learn how to use common attributes like
class, id, src, alt, href, and style.
- Discover how attributes help style, link, and add functionality to elements.
Introduction:
HTML attributes provide additional information about HTML elements. They are written in the opening tag and come in the form of a name-value pair (e.g., src="image.jpg"). Attributes allow us to link elements to external resources, define styles, and specify element behavior.
1. Structure of an HTML Attribute:
An attribute is always specified in the opening tag and consists of:
- Attribute Name: The name of the attribute (e.g.,
href, src).
- Attribute Value: The value assigned to the attribute (e.g., a URL, image source, class name).
Syntax:
<element attribute="value">Content</element>
2. Common HTML Attributes:
Here are some of the most commonly used attributes in HTML:
href: Specifies the URL of a link.
<a href="https://www.google.com">Visit Example</a>
src: Specifies the source of an image, script, or other media.- Used with
<img>, <script>, <audio>, etc.
<img src="image.jpg" alt="A sample image" />
alt: Provides alternative text for images.- Used with the
<img> tag to describe the image if it can’t be displayed.
<img src="image.jpg" alt="A beautiful scenery" />
id: Assigns a unique identifier to an element.- Useful for styling with CSS and accessing elements in JavaScript.
<div id="content">This is a unique content area.</div>
class: Assigns a class name to an element.- Allows styling multiple elements with the same style.
<p class="highlight">This paragraph is highlighted.</p>
style: Allows inline CSS styling.- Can apply specific styles to individual elements
<h1 style="color: blue; font-size: 30px;">Styled Heading</h1>
target: Specifies where to open the linked document.- Used with the
<a> tag to control link behavior.
<a href="https://www.google.com" target="_blank">Open in a new tab</a>
3. Attribute Examples and Usage:
href in Links:The href attribute in the <a> tag links to an external page or resource.
<a href="https://www.example.com">Click here to visit Example</a>
src in Images:The src attribute in the <img> tag tells the browser where to fetch the image file.
<img src="image.jpg" alt="Image description" />
id for Unique Elements:The id attribute allows you to uniquely identify an element and reference it in CSS or JavaScript.
<div id="main-container">This is the main container.</div>
class for Grouping Elements:The class attribute is used to apply a set of styles or target specific elements in JavaScript.
<div class="card">This is a card element</div>
- Inline
style:The style attribute can be used to add CSS directly to an element.
<p style="color: green;">This text is green.</p>
4. Activity:
- Create an HTML page that contains:
- A link to another webpage using the
href attribute.
- An image with an
alt attribute.
- A
class-styled paragraph.
- An
id for a section and apply inline styling with the style attribute.
Example Activity Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Attributes Example</title>
</head>
<body>
<h1 id="main-heading" style="color: red;">Welcome to HTML Learning</h1>
<a href="https://www.example.com" target="_blank">Visit Example</a>
<img src="image.jpg" alt="A beautiful image" />
<p class="highlight" style="font-size: 20px;">This paragraph has a class and inline style.</p>
<div id="content-section">
<p>This is a section with an ID.</p>
</div>
</body>
</html>
Summary:
- HTML attributes provide additional information about elements.
- Attributes are written in the opening tag as name-value pairs.
- Common attributes like
href, src, alt, id, and class allow us to link resources, add functionality, and style elements.
- Inline styles can be added directly to elements using the
style attribute.
Choice-Based Questions:
- What does the
href attribute do in the <a> tag?- a) Specifies the image source.
- b) Specifies the URL of a link.
- c) Defines a class name.
- d) Adds a style to the element.
Answer:
- b) Specifies the URL of a link.
- Which attribute is used to provide a description of an image?
- a)
alt - b)
title - c)
src - d)
desc
Answer:
- What is the purpose of the
id attribute in HTML?- a) To define the class of an element.
- b) To apply styles to an element.
- c) To provide a unique identifier for an element.
- d) To define the width and height of an element.
Answer:
- c) To provide a unique identifier for an element.
Interactive Q&A (Hide/Show Option):
- What is an HTML attribute?
- An HTML attribute provides additional information about an HTML element. It is written inside the opening tag in a name-value pair format.
- What is the difference between
id and class attributes?
- The
id attribute is used to identify a unique element, whereas the class attribute is used to group multiple elements together for styling or scripting.
Final Notes:
- Practice Tip: Experiment with different attributes to understand their effects on HTML elements.
