HTML Attributes | HTML Tutorial

∙ Chapter 16

Understanding HTML Attributes

HTML attributes provide additional information about an HTML element. They are written inside the opening tag and usually contain a name and a value.

💡 Think of it this way

Think of an HTML element as a person. The element tells us what the person is, while attributes give us additional information about that person.

For example, an <a> element creates a link. The href attribute tells the browser where the link should go.

HTML Attribute Syntax

An attribute is placed inside the opening tag and normally follows this structure:

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

Simple Example

Here, the href attribute tells the browser where the link should navigate.

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

ℹ️ Most HTML attributes are written as name="value". The attribute value is commonly placed inside quotation marks.

Common HTML Attributes

You will use these attributes frequently when building webpages.

id

Gives an element a unique identifier. It can be used by CSS and JavaScript.

class

Assigns one or more classes to an element for styling and scripting.

href

Specifies the destination of a link.

src

Specifies the location of an external resource such as an image.

alt

Provides alternative text for an image.

title

Provides additional information that browsers can display as a tooltip.

Example: Using the `id` Attribute

The id attribute gives an element a unique name.

<h1 id="main-title">
    Welcome to ManaCoding
</h1>

Example: Using the `class` Attribute

The class attribute is commonly used to apply CSS styles to elements.

<p class="intro">
    Learn HTML with ManaCoding.
</p>

Example: Image Attributes

The src attribute specifies the image location, while alt provides alternative text.

<img
    src="logo.png"
    alt="ManaCoding Logo"
>

Try It Yourself

Edit the HTML code and click Run to see how attributes affect the webpage.

attributes.html

📝 Edit Code

👁 Live Preview

💡 Change the attributes and click Run to see the result.

✅ Remember: Attributes are written inside the opening tag and provide additional information about an HTML element.

←

Previous Nested Elements

HTML Tutorial

Next Global Attributes →