Skip to main content

HTML Attributes Tutorial – A Complete Beginner Guide

HTML attributes provide extra information about HTML tags. They help control how elements behave, look, and function on a webpage. In this guide, you'll learn what HTML attributes are, how they work, the most common attributes, and examples with clean code.

Table of Contents

What Are HTML Attributes?

HTML attributes are special values added inside HTML opening tags to provide additional information about the element. They control behavior, appearance, accessibility, and more.

Example:

<img src="photo.jpg" alt="Beautiful image">

Here:

  • src = image source
  • alt = alternative text

How Attributes Work

Attributes always appear inside the opening tag:

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

Example:

<a href="https://example.com">Visit Site</a>

Here the href attribute tells the browser where the link goes.

HTML Global Attributes

Global attributes can be used with any HTML tag.

  • id – Unique identifier
  • class – CSS class name
  • style – Inline CSS styling
  • title – Tooltip text
  • hidden – Hide an element
  • draggable – Make element draggable
  • contenteditable – Make element editable

Example of Global Attributes

<p id="intro" class="highlight" title="This is a paragraph">
  Hello World!
</p>

Most Common HTML Attributes

1. href – Link Address

<a href="https://google.com">Visit Google</a>

2. src – Image/Video Source

<img src="image.jpg" alt="Example">

3. alt – Alternative Text

<img src="dog.jpg" alt="A cute dog">

4. width & height

<img src="cat.jpg" width="300" height="200">

5. target – Open Link in New Tab

<a href="page.html" target="_blank">Open in New Tab</a>

6. style – Inline CSS

<p style="color:red; font-size:20px;">Styled text</p>

Form-Related HTML Attributes

1. placeholder

<input type="text" placeholder="Enter your name">

2. value

<input type="text" value="Default Text">

3. required

<input type="email" required>

4. maxlength

<input type="text" maxlength="10">

5. type

<input type="password">

Boolean Attributes

Boolean attributes do not need a value. Writing them once activates them.

  • disabled
  • checked
  • required
  • readonly
  • autoplay
  • controls

Examples:

<input type="checkbox" checked>
<button disabled>Can't Click Me</button>
<video src="movie.mp4" autoplay controls></video>

Practical Examples

1. Image With Styling + Alt Text

<img src="hero.png" alt="Hero banner" width="100%" style="border-radius:10px;">

2. Link That Opens in New Tab

<a href="https://example.com" target="_blank" title="Open Example">
  Visit Example.com
</a>

3. Input Field With Placeholder + Required

<input type="email" placeholder="Enter email" required>

4. Button With ID + Class

<button id="mainBtn" class="blue-btn">Click Me</button>

Best Practices for Using HTML Attributes

  • Use meaningful id and class names
  • Keep inline CSS (style) minimal
  • Always use alt attributes for images
  • Avoid unnecessary attributes
  • Use lowercase for attribute names
  • Prefer CSS classes instead of inline styling

Conclusion

HTML attributes are essential for controlling how HTML elements behave and look. Once you master them, you can customize any element, create forms, add images, control links, and build more professional webpages. Keep experimenting to get comfortable with all types of attributes!

Comments

Post a Comment

Popular posts from this blog

HTML Tables Tutorial — Learn Tables with Examples Tables organize tabular data (rows & columns). They are great for schedules, price lists, spec sheets, comparison charts, and any data that fits a grid. This guide covers: Table basics: <table> , <tr> , <td> , <th> Headers, captions, and groups ( <caption> , <thead> , <tbody> , <tfoot> ) Colspan & rowspan Styling and responsive tables Accessibility and best practices Table of Contents Basic Structure Headers & Captions Colspan & Rowspan Grouping Rows: thead / tbody / tfoot Styling Tables Responsive Tables Accessibility Tips Practical Examples Best Practices 1. Basic Structure Minimal valid table: <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> Elements: <table> — container for the table <tr> — table ...
Post a Comment
Read more
HTML Forms Tutorial HTML Forms Tutorial HTML Forms allow users to enter and submit data. They are used everywhere—login forms, signup forms, search boxes, feedback forms, etc. In this complete tutorial, you will learn all form elements with examples and demos. 1. What is an HTML Form? A form collects user input using different form elements like text fields, checkboxes, radio buttons, buttons, and more. <form> Form elements go here... </form> 2. Basic Form Structure <form action="#" method="post"> <input type="text" placeholder="Enter name"> <button>Submit</button> </form> Submit Attributes: action → URL where form data is sent method="POST" → Secure data sending method="GET" → Data shows in URL 3. Text Input Field <input type="text" placeholder="Your Name...
Post a Comment
Read more
What is HTML? A Beginner-Friendly Explanation If you want to become a web developer, HTML is the first language you should learn. It is the foundation of every website on the internet. In simple words: HTML (HyperText Markup Language) is used to create the structure and content of a webpage. Why HTML is important? Websites cannot exist without HTML It is simple and beginner-friendly Used with CSS and JavaScript Works on all browsers How does HTML work? HTML is made of tags . Tags tell the browser what type of content is being shown. Example of an HTML tag: <p>This is a paragraph.</p> Here: <p> is the opening tag </p> is the closing tag The text inside is the content Basic HTML Page Example Below is a simple webpage example you can try: <!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <h1>Hello World!</h1> <p>This is my...
Post a Comment
Read more