HTML attributes provide extra information about HTML elements. They modify how an element behaves or appears on the web page.
Attributes are always written inside the opening tag. They usually come in name-value pairs like name="value".
<a href="https://example.com" target="_blank">Visit Web Page</a>
Here are the most common attributes you will use daily:
href: Defines the URL destination for anchor link (<a>) tags.src: Specifies the file path to an image (<img>) or script file.alt: Provides fallback text for images if they fail to load or for screen readers.id: Assigns a unique identifier to a single element on the page.class: Assigns one or more class names to group elements for CSS styling.lang: Declares the primary language of the web page inside the <html> tag.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Attributes Example</title>
</head>
<body>
<!-- Link attribute with secure new tab target -->
<p>Check out <a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Web Docs</a> for references.</p>
<!-- Image tag with source, alt text, width, and height -->
<img src="profile.jpg" alt="Developer portrait photo" width="150" height="150">
<!-- Division element with id and class attributes -->
<div id="main-card" class="card highlight">
<p title="Hover tooltip text">Hover over this text to see the tooltip title attribute!</p>
</div>
</body>
</html>
src="logo.png" instead of src=logo.png. Quoting values prevents syntax bugs when attribute values contain spaces.alt attribute on images: Screen readers depend on alt text to describe images to visually impaired users. If an image is purely decorative, use an empty alt="".target="_blank", always add rel="noopener noreferrer" to prevent tab-nabbing security risks on legacy browsers.class="" instead of CLASS="") are the standard across modern frontend projects.Create an <a> link tag that opens your favorite website in a new browser tab. Make sure to include the href, target, and rel attributes correctly!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.