HTML Attributes

📚 Lesson 5 of 25 • ⏱ 9 min read • Beginner

What are Attributes?

Attributes provide additional information about HTML elements. They are always placed inside the opening tag and follow the format name="value":

HTML

<a href="https://google.com">Go to Google</a>
<!--    ^^^^^^^^^^^^^^^^^^^^^ attribute: name="value" -->

The Most Important Attributes

href — Hyperlink Reference

Used with <a> to define where the link goes:

HTML

<a href="https://annauniversityplus.com">Visit site</a>
<a href="about.html">About page</a>          <!-- relative link -->
<a href="#contact">Jump to contact</a>    <!-- anchor link -->
<a href="mailto:me@email.com">Email me</a> <!-- opens email app -->

src — Source

Used with <img>, <script>, <iframe> to specify the file path:

HTML

<img src="images/photo.jpg" alt="My photo">
<script src="js/main.js"></script>

alt — Alternative Text

Always include alt on images. It shows when the image fails to load and is read by screen readers (accessibility):

HTML

<img src="logo.png" alt="AnnaUniversityPlus logo">
<img src="decorative.png" alt="">  <!-- empty alt = decorative image -->

id and class — For CSS and JavaScript

HTML

<!-- id: unique — only ONE element per page can have a given id -->
<div id="header">...</div>
<section id="contact">...</section>

<!-- class: reusable — many elements can share the same class -->
<p class="highlight">Important text</p>
<p class="highlight">Also important</p>

<!-- Multiple classes (space-separated) -->
<div class="card featured large">...</div>

target — Where to Open a Link

HTML

<a href="https://google.com" target="_blank" rel="noopener">
  Opens in new tab
</a>
<!-- Always add rel="noopener" with target="_blank" for security -->

style — Inline CSS (use sparingly)

HTML

<p style="color: red; font-size: 18px;">Red text</p>
<!-- Better to use a CSS class instead — but good to know -->

title — Tooltip on Hover

HTML

<abbr title="Anna University">AU</abbr>
<!-- Hover over "AU" to see "Anna University" tooltip -->

Boolean Attributes

Some attributes don't need a value — their presence alone means "true":

HTML

<input type="checkbox" checked>       <!-- checked by default -->
<input type="text" disabled>          <!-- grayed out, uneditable -->
<input type="text" required>          <!-- must be filled before submit -->
<video autoplay muted loop></video>  <!-- auto-plays, muted, loops -->

← HTML Elements Next: Headings →