HTML attributes provide additional information about HTML elements. They are always placed inside the opening tag and come in name/value pairs like: name="value".
The general syntax for an attribute is:
<tagname attribute="value"> Content </tagname>Example:
<a href="https://www.example.com">Visit Example</a>href is the attribute name"https://www.example.com" is the attribute valueThe <a> tag defines a hyperlink. The href attribute specifies the URL the link goes to:
<a href="https://www.redohub.com">Visit RedoHub</a>The <img> tag embeds an image. The src attribute specifies the path/URL of the image:
<img src="photo.jpg">
<img src="https://www.example.com/photo.jpg">| URL Type | Example | Description |
|---|---|---|
| Absolute URL | src="https://site.com/img.jpg" |
Full internet address to an external image |
| Relative URL | src="images/photo.jpg" |
Path relative to the current page |
The alt attribute provides alternative text for an image if it cannot be displayed. It is also important for screen readers and SEO:
<img src="photo.jpg" alt="A beautiful sunset over the mountains">alt attribute on images. If the image is purely decorative, use an empty alt: alt="".
The width and height attributes specify the size of an image (in pixels):
<img src="photo.jpg" alt="Sunset" width="500" height="300">width and height for images. This helps the browser reserve space before the image loads, preventing layout shifts.
The style attribute is used to add inline CSS styles directly to an element:
<p style="color: red;">This text is red.</p>
<p style="font-size: 20px; color: blue;">Large blue text.</p>
<h1 style="background-color: yellow;">Yellow background heading.</h1>The lang attribute on the <html> tag declares the language of the web page. This is important for accessibility (screen readers) and search engines:
<html lang="en"> <!-- English -->
<html lang="fr"> <!-- French -->
<html lang="es"> <!-- Spanish -->
<html lang="de"> <!-- German -->The title attribute adds extra information about an element. Most browsers show it as a tooltip when you hover over the element:
<p title="This is a tooltip">Hover over this paragraph to see the tooltip.</p>
<a href="page.php" title="Go to our about page">About Us</a>The id attribute gives an element a unique identifier. No two elements on the same page should have the same id:
<h1 id="main-heading">Welcome</h1>
<p id="intro-text">This is the introduction.</p>#main-heading { ... })document.getElementById("main-heading"))href="#main-heading")The class attribute is used to assign one or more CSS class names to an element. Multiple elements can share the same class:
<p class="highlight">This paragraph is highlighted.</p>
<p class="highlight large-text">This has two classes.</p>| Rule | Example |
|---|---|
| Always use lowercase attribute names | href="..." not HREF="..." |
| Always quote attribute values | width="500" not width=500 |
| Use double quotes for values | class="menu" |
| Always add alt to images | <img src="..." alt="..."> |
| Always add lang to <html> | <html lang="en"> |
class=my class only assigns "my" — the browser stops reading at the space. Always quote: class="my class".
id twice. An id must be unique per page. Duplicate ids break getElementById() in JavaScript and anchor links (href="#id"), since only the first match is ever found.
class with id. Use class for styling shared by multiple elements, and id only for a single, unique element you'll target once (e.g. a page anchor or a specific JS hook).
This example combines id, class, and title on real elements at once:
<div id="profile-redohub" class="profile-card" title="Team member profile">
<h3 class="profile-card">Alex Rivera</h3>
<p class="profile-card">Backend Developer</p>
</div>Rendered result:
Backend Developer
Hover over the card above — the title attribute shows a browser tooltip.
Q: Can an element have multiple classes?
A: Yes. List them space-separated: class="card highlight large". All matching CSS rules for each class apply.
Q: What happens if I reuse the same id twice?
A: The page still renders, but it becomes invalid HTML. JavaScript's getElementById() and CSS #id selectors will only ever reach the first one, causing hard-to-spot bugs.
Q: Do attribute names need to be lowercase?
A: Not strictly required, but the MDN HTML attributes reference and virtually every style guide recommend lowercase for consistency.