Codeskill

Learn to code, step by step

The Power of Attributes

HTML attributes

Attributes sit on HTML tags and change how elements behave or what extra information they carry. Links open in new tabs, images get alt text, form fields become required – all through attributes. The ones you will use most.

What are HTML attributes?

Attributes go in the opening tag, usually as name="value" pairs. They configure the element without changing which tag it is.

A basic example

Same link, with and without target="_blank":

<!-- Without target -->
<a href="https://www.example.com">Visit Example.com</a>

<!-- Opens in a new tab -->
<a href="https://www.example.com" target="_blank">Visit Example.com</a>

target="_blank" tells the browser to open the link in a new tab.

Commonly used attributes

A run-through of the attributes that turn up constantly in real pages.

The src attribute

On <img>, <audio>, and <video>, src points to the file URL.

<img src="image.jpg" alt="A beautiful landscape">

The alt attribute

Alternative text for an image when it cannot be displayed.

<img src="image.jpg" alt="A beautiful landscape">

Screen readers read this text aloud. Write something useful, not “image”.

The href attribute

On <a> tags, href is the destination URL.

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

The title attribute

Extra advisory text, often shown as a tooltip on hover.

<p title="A helpful tooltip">Hover over this text.</p>

The style attribute

Inline CSS on a single element.

<p style="color: blue; font-size: 18px;">This is a styled paragraph.</p>

It works, but external CSS is easier to maintain – keep inline styles for quick tests or one-offs.

The class and id attributes

  • class assigns a class name – used by CSS and JavaScript to target groups of elements.
  <div class="container">...</div>
  • id assigns a unique identifier – one per page, for JavaScript hooks or anchor links.
  <div id="header">...</div>

The placeholder attribute

Hint text inside an empty input field.

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

The disabled and readonly attributes

  • disabled makes a field non-interactive.
  <input type="text" disabled>
  • readonly shows the value but prevents editing.
  <input type="text" readonly>

The checked and selected attributes

  • checked pre-selects a checkbox or radio button.
  <input type="checkbox" checked>
  • selected pre-selects an option in a drop-down.
  <option selected>Option 1</option>

The data-* attribute

HTML5 lets you store custom data on any element with data-* attributes.

<div data-user="johnDoe" data-status="active">...</div>

Handy for passing values to JavaScript without extra markup.

Attributes and accessibility

alt, title, and aria-* attributes (Accessible Rich Internet Applications) help people using assistive tech. For example, aria-label names an element when visible text is not available:

<button aria-label="Close">X</button>

Attributes in form validation

HTML5 added validation attributes – required, pattern, min, max – so the browser can catch basic errors before the form is submitted.

<input type="text" required pattern="[A-Za-z]{3}">

Attributes are small additions to tags, but they do a lot of the heavy lifting – linking, labelling, validating, and storing data. Worth knowing properly rather than copying and hoping.

PreviousSemantic HTML