Attributes

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".

Attribute Syntax

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 value

The href Attribute

The <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 src Attribute

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

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">

Note: Always include the alt attribute on images. If the image is purely decorative, use an empty alt: alt="".

The width and height Attributes

The width and height attributes specify the size of an image (in pixels):

<img src="photo.jpg" alt="Sunset" width="500" height="300">

Tip: Always specify width and height for images. This helps the browser reserve space before the image loads, preventing layout shifts.

The style Attribute

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

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

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.html" title="Go to our about page">About Us</a>

The id Attribute

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>

Used to target elements with CSS (#main-heading { ... })
Used to target elements with JavaScript (document.getElementById("main-heading"))
Used for anchor links (href="#main-heading")

The class Attribute

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>

Attribute Best Practices

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">`

« Previous Lesson Next Lesson »