HTML Elements Attributes

HTML Elements and Attributes

An HTML element gives content semantic structure; attributes configure that element's identity, relationships, accessibility, or browser behavior. Valid attributes depend on the selected element.

HTML pages are built from elements. An element describes a piece of content, such as a heading, paragraph, link, image, list, table, form field, or page section. Most elements are written with an opening tag, content, and a closing tag.

Attributes provide extra information about an element. They configure behavior, identify elements for CSS and JavaScript, improve accessibility, connect resources, and describe relationships. Attributes are written inside the opening tag.

Elements define the structure and meaning of page content.
Attributes configure or describe elements.
Correct elements improve readability, SEO, accessibility, and maintainability.
Correct attributes help browsers, search engines, screen readers, CSS, and JavaScript understand your page.

Anatomy of an HTML Element

A normal HTML element has three parts: an opening tag, content, and a closing tag. The tag name tells the browser what type of content the element represents.

The browser reads these elements and builds a document tree called the DOM. CSS styles the DOM, and JavaScript can read or modify it.

Element Anatomy

<!-- Opening tag + content + closing tag -->
<h1>HTML Tutorial</h1>
<p>This is a paragraph of text.</p>
<strong>Important text</strong>

Anatomy of an HTML Attribute

Attributes are written in the opening tag. Most attributes use the format name="value". The attribute name describes what you are configuring, and the value provides the setting.

In the examples above, href, target, src, alt, width, type, name, and required are attributes.

Attribute Anatomy

<a href="https://example.com" target="_blank">Visit Example</a>
<img src="profile.jpg" alt="Portrait of Asha" width="300">
<input type="email" name="email" required>

Elements vs Attributes

Concept	Purpose	Example
Element	Defines content or structure	<p>Hello</p>
Opening tag	Starts an element	<p>
Closing tag	Ends an element	</p>
Attribute	Adds information or configuration	class="intro"
Attribute value	The setting assigned to an attribute	"intro"

Normal Elements and Void Elements

Most HTML elements have opening and closing tags. Some elements are void elements, which means they cannot contain content and do not need a closing tag.

Common Void Element	Purpose
<img>	Displays an image.
<br>	Creates a line break.
<hr>	Creates a thematic break.
<input>	Creates a form input control.
<meta>	Provides document metadata.
<link>	Links external resources such as stylesheets.

Normal and Void Elements

<!-- Normal elements -->
<h2>About Us</h2>
<p>We build learning resources for web developers.</p>
<button>Read More</button>
<!-- Void elements -->
<br>
<hr>
<img src="logo.png" alt="Company logo">
<input type="text" name="username">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">

Nested Elements

HTML elements can be nested inside other elements. The inner element should close before the outer element closes. Correct nesting creates a predictable document structure.

Bad nesting can confuse browsers, validators, screen readers, and future developers reading your code.

Nesting Elements

<!-- Correct nesting -->
<article>
  <h2>HTML Basics</h2>
  <p>Learn <strong>elements</strong> and <em>attributes</em>.</p>
</article>
<!-- Wrong: overlapping tags -->
<!-- <strong><em>text</strong></em> -->

Block, Inline, and Inline-Block Behavior

HTML elements have default display behavior. Some elements naturally start on a new line, while others flow inside text. This behavior can be changed with CSS, but the default behavior matters when writing clean markup.

Type	Behavior	Examples
Block elements	Start on a new line and usually take full width.	div, p, h1, section, ul
Inline elements	Flow inside text and take only needed width.	span, a, strong, em, code
Replaced / inline-block-like elements	Have intrinsic dimensions or special rendering.	img, input, button, select

Block and Inline Elements

<div>This is a block element.</div>
<p>This paragraph contains an <a href="#">inline link</a> inside text.</p>
<span>Inline span</span>
<strong>Inline strong text</strong>

Semantic and Non-Semantic Elements

A semantic element clearly describes the meaning of its content. A non-semantic element is a generic container. Semantic HTML helps browsers, search engines, assistive technologies, and developers understand the page structure.

Semantic Elements

<!-- Less meaningful -->
<div class="header">Site Header</div>
<div class="nav">Navigation</div>
<div class="article">Article content</div>
<!-- More semantic -->
<header>Site Header</header>
<nav>Navigation</nav>
<article>Article content</article>

Common HTML Elements

Element	Purpose	Example
<h1> to <h6>	Headings	<h1>Page Title</h1>
<p>	Paragraph	<p>Text</p>
<a>	Link	<a href="/">Home</a>
<img>	Image	<img src="cat.jpg" alt="Cat">
<ul>, <ol>, <li>	Lists	<li>Item</li>
<table>	Tabular data	<table>...</table>
<form>	User input	<form>...</form>
<section>	Thematic page section	<section>...</section>
<article>	Self-contained content	<article>...</article>
<button>	Clickable button	<button>Save</button>

Global Attributes

Global attributes can be used on almost any HTML element. They are useful for styling, scripting, accessibility, language, interaction, and metadata.

Attribute	Purpose	Example
id	Unique identifier for one element.	id="main-title"
class	Reusable CSS class names.	class="card featured"
style	Inline CSS styles.	style="color: red;"
title	Advisory text, often shown as a tooltip.	title="More details"
lang	Language of the content.	lang="en"
hidden	Hides an element.	hidden
tabindex	Controls keyboard focus behavior.	tabindex="0"
data-*	Stores custom data.	data-user-id="42"
aria-*	Adds accessibility information.	aria-label="Close"

Specific Attributes

Some attributes only make sense on certain elements. For example, href belongs on links, src belongs on media elements, and type configures form controls or scripts.

Element-Specific Attributes

<a href="/contact" target="_blank" rel="noopener">Contact Us</a>
<img src="banner.jpg" alt="Students learning HTML" loading="lazy">
<input type="email" name="email" placeholder="you@example.com" required>
<button type="submit">Create Account</button>
<video src="lesson.mp4" controls width="640"></video>

Boolean Attributes

Boolean attributes are true when they are present and false when they are absent. They do not need a value. Writing disabled, disabled="", or disabled="disabled" all means the attribute is present.

Boolean Attributes - HTML Example

<input type="checkbox" checked>
<input type="email" required>
<button disabled>Submit</button>
<video controls muted></video>
<details open>
  <summary>Read more</summary>
  <p>Extra content is visible by default.</p>
</details>

id vs class

id and class are two of the most used HTML attributes. Both are used by CSS and JavaScript, but they have different purposes.

Attribute	Rule	Use Case
id	Should be unique on the page.	Fragment links, unique JS lookup, unique landmark.
class	Can be reused across many elements.	Reusable styling and grouping.

id and class

<h1 id="page-title">HTML Elements and Attributes</h1>
<p class="intro highlight">This paragraph has two classes.</p>
<p class="intro">This paragraph reuses the intro class.</p>
<a href="#page-title">Back to top</a>

data-* Attributes

data-* attributes store custom data on HTML elements. They are useful when JavaScript needs extra information from the markup without inventing invalid attributes.

Product Metadata Attributes

<button
  class="buy-button"
  data-product-id="42"
  data-price="499">
  Buy Now
</button>

data-* Attributes - JavaScript Example

const button = document.querySelector('.buy-button');
console.log(button.dataset.productId); // "42"
console.log(button.dataset.price);     // "499"

ARIA Attributes

ARIA attributes can improve accessibility when native HTML alone cannot express enough information. Use semantic HTML first, then add ARIA only when it is needed.

Do not use ARIA to replace good HTML. For example, use <button> for a button instead of <div role="button"> whenever possible.

ARIA Attributes - HTML Example

<button type="button" aria-label="Close dialog">
  ×
</button>
<div role="alert" aria-live="polite">
  Your profile was saved successfully.
</div>

Event Attributes

HTML supports event attributes such as onclick, onchange, and onsubmit, but modern best practice is to keep JavaScript in separate files and attach listeners with JavaScript.

Event Attributes - HTML Example

<!-- Works, but mixes HTML and JavaScript -->
<button onclick="alert('Saved')">Save</button>

Event Attributes - HTML Example 2

<button id="save-button" type="button">Save</button>

Event Attributes - JavaScript Example

document
  .querySelector('#save-button')
  .addEventListener('click', () => {
    alert('Saved');
  });

Attribute Quoting and Case Rules

HTML tag names and attribute names are not case-sensitive in normal HTML documents, but lowercase is the standard convention. Attribute values should normally be quoted, especially when they contain spaces, special characters, or URLs.

Attribute Style

<!-- Recommended -->
<input type="text" name="full-name" placeholder="Your full name">
<!-- Avoid inconsistent casing and missing quotes -->
<INPUT TYPE=text NAME=full-name>

Valid and Invalid Attribute Usage

Attributes should be used on elements that support them. Browsers may ignore unknown or invalid attributes, but invalid markup makes your page harder to maintain and may break accessibility or validation.

Valid Attribute Usage

<!-- Correct: href belongs on anchor -->
<a href="/about">About</a>
<!-- Correct: src and alt belong on image -->
<img src="team.jpg" alt="Our team">
<!-- Avoid: href does not make a div a real link -->
<div href="/about">About</div>

Complete Example

The following example combines semantic elements, global attributes, element-specific attributes, boolean attributes, data attributes, and accessibility attributes.

Complete HTML Example

<article class="product-card" data-product-id="101">
  <img src="keyboard.jpg"
       alt="Mechanical keyboard with backlit keys"
       width="400"
       loading="lazy">
  <h2 id="product-title">Mechanical Keyboard</h2>
  <p>Compact keyboard for developers and writers.</p>
  <button type="button"
          class="buy-button"
          aria-describedby="product-title">
    Add to Cart
  </button>
</article>

Best Practices

Choose the element that matches the meaning of the content.
Use semantic elements before generic <div> and <span>.
Keep attribute names lowercase and quote attribute values.
Use one unique id per element and reusable class names for styling.
Always write meaningful alt text for informative images.
Use data-* for custom JavaScript data, not made-up attributes.
Avoid inline event attributes in production code.
Validate your HTML when learning or debugging.

Conclusion

HTML elements and attributes are the foundation of every web page. Elements define what content is, while attributes describe or configure that content. When you choose meaningful elements and write clear attributes, your pages become easier to style, script, maintain, index, and use with assistive technology.

The best way to master HTML is to think in terms of meaning first. Use headings for headings, links for navigation, buttons for actions, images with useful alt text, forms with labels, and semantic sections for page structure. Attributes should support that structure, not hide poor markup.

Wrong nesting

Correct nesting