htmlfreecodes.
Menu

HTML Attributes

Attributes configure element behavior by adding properties to opening tags using name="value" syntax patterns.

Quick Answer

What are HTML attributes?

HTML attributes provide additional information about elements, written as name="value" pairs inside opening tags: <img src="photo.jpg" alt="description">. Common attributes include id, class, style, href, src, and alt. Global attributes (like id, class, title) work on any element, while others are element-specific.

Attributes transform basic HTML elements into powerful, configurable components. Mastering attribute usage enables you to control element functionality, appearance, and interaction with precision.

Understanding Attribute Mechanics

Attributes inject supplementary configuration data into HTML elements. Key characteristics include:

  • Written exclusively within opening tags
  • Structured as name/value combinations like property="setting"
  • Multiple attributes separated by whitespace characters
  • Controls how elements function and render visually
Best Practice: Always wrap attribute values in quotation marks. Double quotes represent the standard convention, though single quotes work equally well.

The href Navigation Property

Links utilize the href property within <a> tags to establish click destinations:

Hyperlink Reference Example

<a href="https://www.htmlfreecodes.com">Explore HTML Free Codes</a>

Result:

Explore HTML Free Codes

Experiment Yourself

Build various link types by manipulating the href property!

Practice href Usage

The src Resource Locator

Image elements require the src property to locate and load visual files within <img> tags:

Image Source Configuration

Unavailable or blocked: image “https://www.htmlfreecodes.com/brand.png”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<img
  src="https://www.htmlfreecodes.com/brand.png"
  alt="Site Branding"
  width="200"
  height="100"
/>

Result:

HTML Free Codes
Logo

The alt Attribute

The alt attribute provides alternative text for an image if it cannot be displayed. It's also used by screen readers for accessibility:

HTML alt Attribute Example

Unavailable or blocked: image “tutorial.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<img src="tutorial.jpg" alt="HTML Tutorial for Beginners" />
Accessibility: Always use the alt attribute for images. It helps visually impaired users understand the content through screen readers.

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more:

HTML style Attribute Examples

<p style="color: red;">This is a red paragraph.</p>
<p style="color: blue; font-size: 20px;">This is a blue, large paragraph.</p>
<p style="background-color: yellow; padding: 10px;"
  >This paragraph has a yellow background.</p
>

Result:

This is a red paragraph.

This is a blue, large paragraph.

This paragraph has a yellow background.

Test Your Knowledge

5 practice questions are available. Choose Start practice to try them.

Related Articles

Continue your learning journey with these related tutorials:

A smaller starting example and practical notes

Attributes add information to an element's opening tag. They can identify a destination, connect a label to a control, describe an image or select a styling hook. Quoted values make the code easier to read and avoid ambiguity when a value includes spaces.

<label for="idea">Your next idea</label>
<input id="idea" name="idea" type="text" maxlength="80">
<button type="button" class="action">Try the example</button>
<a href="#details">Read the details</a>
<section id="details"><h2>Details</h2><p>A small starting point.</p></section>

Connect rather than decorate

The label's for value must equal the input's id. Selecting the label then focuses its control. An id should be unique within a document; a class can be reused on multiple elements. The name identifies a form field in submitted data. An input without a name is generally omitted from normal form submission.

Understand boolean attributes

Attributes such as required, disabled and checked work by being present. Writing disabled="false" still disables a control. Remove the attribute to enable it. For ARIA attributes, values such as aria-pressed="false" have different semantics and must describe the actual state.

Use the smallest useful set

Do not add ARIA labels that repeat visible text unnecessarily. Prefer a visible label for a form input and meaningful link text for a destination. Explicit type="button" prevents an incidental button inside a form from submitting that form.