HTML 2 💻 Elements - KandZ

An element is the building block of an HTML page. It typically consists of an opening tag, attributes, content, and a closing tag.

Basic Structure of an Element

<h1>Hello World</h1>

<h1> — opening tag
Hello World — content
</h1> — closing tag

Important Rules to Remember

Always close your elements — forgetting the closing tag can break your page layout.

  <h2>This is correct</h2>

Elements can contain other elements — this is called nesting. For example, the <body> element contains all visible content:

  <body>
      <h1>Welcome</h1>
      <p>This is a paragraph.</p>
  </body>

Empty elements have no content — they are written with a self-closing tag or just an opening tag:

  <h1></h1>  <!-- Empty heading -->
  <br>       <!-- Line break (self-closing) -->

W3C recommends using lowercase for all HTML tags and attributes for better readability and consistency.

Element Attributes

Attributes provide additional information about an element. They are always written inside the opening tag and are optional.

An attribute consists of a name and a value:

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

Example:

<h1 id="main-title" class="header">Welcome to My Site</h1>

The 4 Categories of Attributes

Category	Description	Example
Universal (Global) Attributes	Can be used on almost all HTML elements	`id`, `class`, `style`, `title`
Specific Attributes	Only work on specific elements	`src` (for `<img>`), `href` (for `<a>`)
Event Attributes	Trigger actions when events occur (click, hover, etc.)	`onclick`, `onmouseover`
Data Attributes	Store custom information for use in scripts	`data-user="John"`

Universal (Global) Attributes Explained

These attributes can be applied to nearly every HTML element:

Attribute	Purpose	Example
`id`	Uniquely identifies an element (must be unique on the page)	`id="header"`
`class`	Assigns one or more class names to an element (used for styling or scripting)	`class="button primary"`
`style`	Defines inline CSS styles directly on the element	`style="color: blue; font-size: 2em"`
`title`	Displays a tooltip when the user hovers over the element	`title="Click here for more info"`
`lang`	Specifies the language of the element’s content	`<html lang="en">`
`dir`	Defines the text direction — `ltr` (left-to-right) or `rtl` (right-to-left)	`dir="rtl"`

Quick Example Using Multiple Attributes

<h1 id="main-heading" class="title large" style="color: navy;" title="This is the main title" lang="en" dir="ltr">
    Welcome to HTML
</h1>

This foundation in elements and attributes will help you build well-structured, interactive, and styled web pages. 🚀

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!