Demon Tech Roadmap

HTML

HTML Attributes

HTML attributes provide extra information about elements.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

HTML attributes provide extra information about elements. An attribute sits inside the opening tag and uses a name and value pair. They control things like links, images, and identifiers.

Syntax

1<!-- attribute syntax -->
2<div id="main" class="container" style="color:red"></div>

Example

1<!-- this is a link with attributes -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Attributes</title>
8  </head>
9  <body>
10    <a href="https://example.com" target="_blank" rel="noopener">Link</a>
11  </body>
12</html>

Try it Yourself

Hands-on Practice

Modify the code below to see how it affects the output. This is the best way to learn!

Interactive Editor

1234567891011121314151617181920

Live Preview

Key Points

Attributes add settings to elements.
Attributes sit in the opening tag.
Boolean attributes require no value.
Quoted values prevent syntax errors.

Up Next

Continue your journey with the next topic.

Go to HTML Headings ❯