HTML Attributes

Add superpowers to your HTML elements with attributes!

What are HTML Attributes?

HTML Attributes are special words inside HTML tags that give extra information about elements. They control how elements look and behave.

Think of it like this: If an HTML tag is a car, attributes are like the color, size, and features you choose!

How to Write Attributes

Example: Attribute Syntax


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

<!-- Real Example -->
<img src="photo.jpg" alt="My Photo">
  • Attributes go inside the opening tag
  • Format: attribute="value"
  • Use quotes around the value
  • You can add multiple attributes

Most Common HTML Attributes

Example: href (Hyperlink Reference)


<!-- Creates a clickable link -->
<a href="https://crackease.com">Visit CrackEase</a>

<a href="about.html">About Us</a>

What it does: The href attribute tells the browser where to go when you click the link.

src (Source)

Example: Adding Images


<!-- Display an image -->
<img src="sunset.jpg" alt="Beautiful sunset">

<!-- From a URL -->
<img src="https://example.com/logo.png" alt="Company Logo">

What it does: The src attribute tells the browser which image file to display.

alt (Alternative Text)

Example: Describing Images


<img src="dog.jpg" alt="Golden retriever playing in the park">
  • Shows text if image doesn't load
  • Helps screen readers for visually impaired users
  • Improves SEO (search engines read it)

class and id Attributes

Example: Styling and Identification


<!-- class: Can be used multiple times -->
<p class="highlight">This text is highlighted.</p>
<p class="highlight">This too!</p>

<!-- id: Must be unique (use only once) -->
<h1 id="main-title">Welcome to My Website</h1>

Remember: Use class for groups, use id for one special element.

style (Inline Styling)

Example: Quick Styling


<p style="color: blue; font-size: 20px;">Blue text!</p>

<h1 style="background-color: yellow;">Highlighted Heading</h1>

Pro Tip: Use CSS files instead of inline styles for cleaner code!

title (Tooltip Text)

Example: Hover Tooltips


<p title="This appears when you hover!">Hover over me</p>

<a href="#" title="Go to homepage">Home</a>

target (Link Behavior)

Example: Opening Links


<!-- Opens in same tab (default) -->
<a href="page.html">Same Tab</a>

<!-- Opens in new tab -->
<a href="https://google.com" target="_blank">New Tab</a>

Common Values: _blank (new tab), _self (same tab)

width and height

Example: Image Size Control


<img src="photo.jpg" alt="Photo" width="300" height="200">

<!-- Keep aspect ratio by setting only one -->
<img src="logo.png" alt="Logo" width="150">

Using Multiple Attributes

Example: Combining Attributes


<img src="banner.jpg" 
     alt="Welcome banner" 
     width="800" 
     height="400"
     title="Homepage banner"
     class="header-image">

<a href="https://crackease.com" 
   target="_blank" 
   title="Visit CrackEase"
   class="external-link">
   Learn More
</a>

Tip: Separate each attribute with a space!

Best Practices

  • Always use quotes around attribute values
  • Use lowercase for attribute names
  • Add alt text to all images
  • Keep attribute values simple and clear
  • Don't add too many inline styles — use CSS instead

Quick Check: Every <img> needs src and alt. Every <a> needs href!