• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Attributes

← Previous Next →

HTML elements provide the structure of a webpage, but attributes add extra information or control over how these elements behave. Attributes allow you to customize elements, set links, insert images, define classes, give IDs, and much more. Understanding attributes is essential because they make your webpages dynamic, organized and functional. In this chapter, you’ll learn what HTML attributes are, how to use them, the most common attributes, and best practices for writing clean, readable code.

What Are HTML Attributes?

Attributes are additional pieces of information added to an HTML element to define its properties or behavior. They appear inside the opening tag of an element and usually come in name/value pairs.

The general syntax is:

<tagname attribute="value">content</tagname>

For example:

<a href="https://example.com">Visit Example</a>

Here:

  • <a> is the element (anchor or link)

  • href="https://example.com" is the attribute

  • Visit Example is the content

  • </a> closes the element

The href attribute tells the browser where the link should go when clicked.

How Attributes Work

Attributes are used to control how an element behaves, how it looks, or to provide extra information. They can:

  • Specify a destination for a link (href)

  • Describe an image (alt)

  • Give an element a unique identifier (id)

  • Assign multiple elements to a group (class)

  • Open a link in a new window (target)

  • Control element size, color or style

For example:

<img src="photo.jpg" alt="A beautiful scenery" width="300" />

Here:

  • src tells where the image is located

  • alt provides alternative text

  • width sets the image width

Attributes make the element more meaningful and functional.

Common HTML Attributes

Here are some of the most commonly used HTML attributes:

1. href

Used with <a> to define the destination of a link.

<a href="https://google.com">Google</a>

2. src

Used with <img> or <script> to specify the source file.

<img src="image.jpg" alt="Example Image" />

3. alt

Used with images to provide descriptive text when the image cannot be displayed.

<img src="logo.png" alt="Company Logo" />

4. id

Gives a unique identifier to an element. Useful for styling or scripting.

<p id="intro">Welcome to my website.</p>

5. class

Groups multiple elements together. Often used for CSS or JavaScript targeting.

<p class="highlight">This paragraph is highlighted.</p>

6. title

Displays extra information when hovering over an element.

<p title="Hover text">Hover over me</p>

7. target

Used with links to define how the link should open. Common values are _blank and _self.

<a href="https://example.com" target="_blank">Open in new tab</a>

8. style

Adds inline CSS styling to an element. Not recommended for large projects, but fine for quick tests.

<p style="color: blue; font-size: 18px;">Styled text</p>

9. width & height

Commonly used with images, videos or iframes to set dimensions.

<img src="photo.jpg" width="400" height="300" />

10. disabled

Used with form elements to prevent user interaction.

<input type="text" disabled />

Boolean Attributes

Some attributes do not need a value. They are either present or not. These are called boolean attributes.

Examples:

  • checked (for checkboxes and radio buttons)

  • disabled (for form elements)

  • readonly (prevents text input)

  • required (forces form field to be filled)

Example:

<input type="checkbox" checked /> Subscribe

Here, the checkbox is checked by default because the checked attribute is present.

Multiple Attributes

You can add more than one attribute to an element by separating them with a space.

Example:

<a href="https://example.com" target="_blank" title="Visit Example">Click Here</a>

This link:

  • Opens in a new tab (target="_blank")

  • Shows a tooltip (title="Visit Example")

Best Practices for Using Attributes

  1. Always use quotes around attribute values.

  2. Keep attribute names lowercase (id, not ID).

  3. Use meaningful id and class names.

  4. Avoid inline styles for large projects—use CSS instead.

  5. Use alt for all images for accessibility.

  6. Keep attribute values simple and clear.

Following these practices makes your code readable, maintainable, and accessible.

Example: HTML Page with Multiple Attributes

<!DOCTYPE html>
<html>
<head>
    <title>Attributes Example</title>
</head>
<body>
    <h1 id="main-title" class="title" style="color: green;">Welcome to My Website</h1>
    <p title="Hover to see tooltip">This paragraph has a tooltip.</p>
    <a href="https://google.com" target="_blank">Search Google</a>
    <img src="photo.jpg" alt="Sample Photo" width="300" height="200" />
</body>
</html>

This page uses id, class, style, title, href, target, src, alt, width, and height attributes in various elements.

Real-Life Uses of HTML Attributes

Attributes are everywhere on modern websites:

  • Forms use name, placeholder, required, and disabled.

  • Links use href, target, and title.

  • Images use src, alt, width, and height.

  • CSS classes and IDs help styling large sections of content.

  • JavaScript uses attributes to dynamically manipulate elements.

Mastering attributes allows you to control not just what appears on the page, but how it behaves.

Practice Task

Create a small webpage that includes:

  1. A heading with id and class.

  2. A paragraph with a title attribute.

  3. A link that opens in a new tab.

  4. An image with src, alt, width and height.

  5. A disabled input field.

This exercise will help you understand how different attributes enhance HTML elements.

Summary of HTML Attributes

HTML attributes add extra meaning and functionality to elements. You learned what attributes are, how they are written, common types of attributes, boolean attributes, and best practices for clean code. With this knowledge, you can make your webpages more dynamic, interactive, and accessible, preparing you for the next chapters where you’ll explore headings, paragraphs, styles, and formatting in detail.

Practice Questions

Q1. Create an anchor tag with an href pointing to https://example.com.

Q2. Insert an image using the src and alt attributes.

Q3. Use the style attribute to change a paragraph's color to green.

Q4. Add a title to a heading that shows “Main Title” when hovered.

Q5. Add a paragraph with id="intro" and class="text".

Q6. Use the width and height attributes to resize an image.

Q7. Create a tooltip using the title attribute in a <p> tag.

Q8. Use multiple attributes (e.g., style, title) in one <div>.

Q9. Create a styled button using style="background-color: blue;".

Q10. Add a class="warning" to two different elements.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top