HTML Attributes

Attributes are extra pieces of information added to HTML tags to define their behavior or appearance. They provide additional details about an element that the tag alone cannot express.

Think of attributes like options or settings for an element. For example, a link element uses an attribute to know which page to go to, and an image element uses an attribute to know which image file to display.

Attribute Syntax

Attributes are always written inside the opening tag. They come in name="value" pairs.

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

<!-- Example -->
<a href="https://example.com">Click Here</a>

<!-- Here:
  href  = attribute name
  "https://example.com" = attribute value
-->

Common HTML Attributes

1. href – Hyperlink Reference

Used with the <a> tag to specify the destination URL of a link.

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

2. src – Source

Used with the <img> tag to specify the path or URL of an image file.

<img src="cat.jpg" alt="A cute cat">

3. alt – Alternative Text

Used with <img> to provide a text description of the image. This text is shown when the image cannot be loaded, and is also used by screen readers for visually impaired users.

<img src="mountain.jpg" alt="A beautiful mountain view">

4. width and height

Used to define the size of an element such as an image. Values are in pixels.

<img src="logo.png" alt="Logo" width="200" height="100">

5. title

Adds a tooltip text that appears when hovering over an element with a mouse.

<p title="This is a tooltip">Hover over this text to see a tooltip.</p>

6. id

Gives a unique identity to an element on a page. No two elements should have the same id on the same page. Often used with CSS and JavaScript.

<h1 id="main-title">Welcome to HTML</h1>
<p id="intro-text">This is the introduction.</p>

7. class

Assigns one or more class names to an element. Multiple elements can share the same class. Commonly used with CSS to apply styles to a group of elements.

<p class="highlight">This paragraph has a class.</p>
<p class="highlight">This one shares the same class.</p>

8. style

Applies inline CSS styling directly to a single element. Useful for quick styling, but using a separate CSS file is the better practice for larger projects.

<p style="color:blue; font-size:18px;">This text is blue and larger.</p>

9. target

Used with the <a> tag to specify where to open the linked document. The value _blank opens the link in a new browser tab.

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

10. placeholder

Used with <input> and <textarea> to show hint text inside the field before the user types anything.

<input type="text" placeholder="Enter your name here">

Multiple Attributes on One Tag

An element can have more than one attribute. Simply add them one after another inside the opening tag, separated by spaces.

<img src="banner.jpg" alt="Banner Image" width="600" height="200" title="Website Banner">

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

Attribute Quick Reference Table

Key Points to Remember

• Attributes are always placed inside the opening tag
• Attribute values must be wrapped in double quotes " "
• An element can have multiple attributes
• Attribute names are written in lowercase (best practice)
• Some attributes are required (e.g., src for images, href for links)
• The id attribute must be unique on a page; class can be shared