HTML Attributes — Complete Guide | TipsInLearning

Lesson 5 of 22

HTML Attributes

Learn how HTML attributes add extra information and behaviour to elements — covering src, href, id, class, style, alt, lang, and more essential HTML5 attributes.

10 min read

Beginner

HTML Basics

In This Lesson

10 min read Beginner

What are Attributes?
Attribute Anatomy
Quick Reference
src Attribute
href Attribute
alt Attribute
width & height
id Attribute
class Attribute
style Attribute
title Attribute
lang Attribute
Try It Yourself

Progress0/22

What You'll Learn

What HTML attributes are

Attribute syntax — name="value"

src, href, alt, width, height

id and class attributes

style, title, lang attributes

Global vs element-specific attrs

What are HTML Attributes?

An HTML attribute is extra information added to the opening tag of an HTML element. Attributes modify the element's behaviour, appearance, or provide additional data that the browser needs to render it correctly.

Think of attributes like settings on an element — for example, the src attribute on an <img> tag tells the browser which image to load.

Key Rules: Attributes are always placed in the opening tag, always written as name="value" pairs, and values should always be in double quotes.

Attribute Anatomy

Here's how an attribute is structured inside an HTML tag:

<img

src

=

"photo.jpg"

>

Tag Name

Attribute Name

Attribute Value

Quick Reference

The most used HTML attributes at a glance:

HTML Attributes Reference

Attribute	Used On	Description
src	<img> <script>	Source URL of a resource
href	<a> <link>	URL of a hyperlink
alt	<img>	Alternative text — required for accessibility
width / height	<img> <video>	Dimensions in pixels
id	Any element	Unique identifier — Global
class	Any element	CSS class names — Global
style	Any element	Inline CSS styles — Global
title	Any element	Tooltip text on hover — Global
lang	<html> <p>	Language declaration — Global

Global vs Element-specific: Global attributes (id, class, style, title, lang) work on any HTML element. Element-specific attributes (src, href, alt) only work on certain tags.

The src Attribute

The src attribute specifies the source URL of a resource. Used with <img>, <script>, <video>, and <audio>.

HTML — src

<!-- Local image -->
<img src="photo.jpg" alt="A photo">

<!-- Image from a URL -->
<img src="https://example.com/image.png" alt="Online image">

<!-- External JavaScript file -->
<script src="script.js"></script>

The href Attribute

The href attribute specifies the URL a link points to. Used with <a>. Combine with target="_blank" to open in a new tab.

HTML — href & target

<!-- Opens in same tab -->
<a href="https://tipsinlearning.blogspot.com">TipsInLearning</a>

<!-- Opens in new tab -->
<a href="https://tipsinlearning.blogspot.com" target="_blank">Open New Tab</a>

<!-- Link to section on same page -->
<a href="#section1">Jump to Section 1</a>

The alt Attribute

The alt attribute provides alternative text for an image. It displays when the image fails to load and is read by screen readers. It also helps search engines understand image content.

Always include alt text — it is required for accessible, SEO-friendly HTML.

HTML — alt

<!-- Descriptive alt text -->
<img src="html-logo.png" alt="HTML5 orange shield logo">

<!-- Decorative image — empty alt -->
<img src="divider.png" alt="">

The width and height Attributes

These set the dimensions of an image in pixels. Always specify both to prevent layout shifts while the image loads — this improves page performance and Core Web Vitals scores.

HTML — width & height

<img
  src="photo.jpg"
  alt="A landscape photo"
  width="600"
  height="400"
>

The id Attribute

The id attribute gives an element a unique name. No two elements should share the same id. Used to target elements with CSS (#myid), JavaScript (getElementById), and to create anchor links.

HTML — id

<style>
  #main-title { color: #7c3aed; font-size: 2rem; }
</style>
<h1 id="main-title">Welcome to TipsInLearning</h1>
<a href="#main-title">Back to top</a>

The class Attribute

The class attribute assigns one or more CSS class names. Unlike id, multiple elements can share the same class. This is the most common way to apply CSS to groups of elements.

HTML — class

<style>
  .highlight { background-color: yellow; }
  .bold-text  { font-weight: bold; }
</style>
<p class="highlight">This is highlighted.</p>
<p class="highlight bold-text">Highlighted and bold.</p>

The style Attribute

The style attribute adds inline CSS directly to an element. It overrides any external stylesheets. Best for quick testing — for real projects use external CSS files.

HTML — style

<h2 style="color: #7c3aed; font-family: Arial;">Purple Heading</h2>
<p style="font-size: 20px; color: #e85d04;">Orange large text</p>
<p style="background:#7c3aed;color:white;padding:10px;">
  Purple box paragraph
</p>

The title Attribute

The title attribute provides a tooltip — extra text that appears when a user hovers over the element. Works on any HTML element.

HTML — title

<h3 title="This is TipsInLearning">Hover to see tooltip!</h3>
<abbr title="HyperText Markup Language">HTML</abbr>

The lang Attribute

The lang attribute declares the language of the content. Most important on the <html> tag. Helps screen readers pronounce content correctly and improves SEO.

HTML — lang

<html lang="en">  <!-- English -->
<html lang="hi">  <!-- Hindi -->
<html lang="fr">  <!-- French -->

<!-- Individual element -->
<p lang="hi">नमस्ते दुनिया</p>

Try It Yourself

Challenge — Build a Mini Profile Card

1Add an <img> with src, alt, width, and height

2Add a heading with an id and style to color it purple

3Add a paragraph with a class and style that class in CSS

4Add a link with href and target="_blank"

5Add lang="en" to <html> and a title tooltip to your heading

Quick Summary

1Attributes go in the opening tag as name="value" pairs

2Global attributes (id, class, style, title, lang) work on any element

3src = source for images/scripts; href = URL for links

4alt is required for accessibility and SEO on every image

5id = unique; class = reusable — use class for styling groups

6Always add lang="en" to your <html> for accessibility & SEO

HTML Elements

Next Lesson

HTML Heading

HTML Attributes Explained with Examples (Beginner Guide)