HTML Elements & Attributes

What is an HTML Element?

An HTML element is the complete package: opening tag + content + closing tag. It's the fundamental building block of every webpage.

Basic Structure:

<p>This is a paragraph.</p>

<p> — opening tag (starts the element)
This is a paragraph. — content (what users see)
</p> — closing tag (ends the element)

Types of Elements

1) Container Elements (Paired Tags)

Most HTML elements have both opening and closing tags that wrap content:

<h1>Hello World</h1>
<p>This is a paragraph.</p>
<div>This is a container</div>
<strong>Bold text</strong>
<em>Italic text</em>

2) Empty / Self-Closing Elements (Void Elements)

Some elements don't have content or closing tags. They stand alone:

<br>   <!-- line break -->
<hr>   <!-- horizontal rule (divider line) -->
<img src="image.jpg" alt="Sample"> <!-- image -->
<input type="text"> <!-- form input -->
<meta charset="utf-8"> <!-- metadata -->

Note: In HTML5, you don't need the trailing slash (/) for void elements, though <br /> is still valid.

Nested Elements

Elements can contain other elements. This is called nesting. Proper nesting is crucial!

<p>This is a <strong>bold</strong> word inside a paragraph.</p>

<div>
  <h2>Section Title</h2>
  <p>This paragraph is <em>inside</em> a div.</p>
</div>

Correct vs Incorrect Nesting:

<!-- ✅ CORRECT -->
<p>This is <strong>properly</strong> nested.</p>

<!-- ❌ INCORRECT -->
<p>This is <strong>improperly</p> nested.</strong>

Block-level vs Inline Elements

Understanding display behavior is key to controlling layout:

Block-Level Elements:

Start on a new line
Take up the full width available
Can contain other block or inline elements

Examples: <div>, <p>, <h1>-<h6>, <ul>, <ol>, <table>, <header>, <footer>

Inline Elements:

Don't break the line flow
Only take up as much width as needed
Usually contain text or other inline elements

Examples: <span>, <a>, <img>, <strong>, <em>, <b>, <i>

<div>Block element (takes full width)</div>
<div>Another block (starts new line)</div>

<span>Inline element</span> <span>stays on same line</span>

Common HTML Elements Reference

<!-- Headings (h1 is largest, h6 smallest) -->
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Minor Heading</h3>

<!-- Text Content -->
<p>Paragraph text</p>
<strong>Bold/important text</strong>
<em>Italic/emphasized text</em>

<!-- Lists -->
<ul>
  <li>Unordered list item</li>
</ul>

<ol>
  <li>Ordered list item</li>
</ol>

<!-- Links and Images -->
<a href="https://example.com">Link text</a>
<img src="photo.jpg" alt="Description">

<!-- Containers -->
<div>Generic container</div>
<span>Inline container</span>

Complete Example

<!DOCTYPE html>
<html>
<head> 
  <title>Elements Demo</title> 
</head>
<body>
  <h1>HTML Elements Demo</h1>
  <p>This is a <strong>paragraph</strong> with <em>inline</em> text.</p>
  
  <div>
    <h2>Section in a Block</h2>
    <p>Block elements create structure.</p>
  </div>
  
  <hr>
  <img src="https://via.placeholder.com/120" alt="Sample Image">
</body>
</html>

Back to top

Elements Quick Quiz

Q1. Which of the following is an empty/void element?

Q2. Which of these is a block-level element?

Q3. What makes an element "nested"?

Back to top

What are HTML Attributes?

Attributes provide additional information about elements. They appear inside the opening tag as name="value" pairs.

Syntax:

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

Example:

<a href="https://google.com">Visit Google</a>

Here href is the attribute name and "https://google.com" is its value.

Common Global Attributes

These can be used on almost any HTML element:

id       — Unique identifier for the element
class    — One or more class names (for CSS/JS)
style    — Inline CSS styles
title    — Tooltip text on hover
lang     — Language of the element's content
hidden   — Hides the element
data-*   — Custom data attributes

Examples:

<div id="main-content">...</div>
<p class="highlight important">...</p>
<span style="color: red;">Red text</span>
<abbr title="HyperText Markup Language">HTML</abbr>
<button data-user-id="123">Click me</button>

Element-Specific Attributes

Some attributes only work with certain elements:

<!-- Links -->
<a href="https://example.com" target="_blank" rel="noopener">Link</a>
  href    — URL destination
  target  — Where to open (_blank, _self, _parent, _top)
  rel     — Relationship (noopener, nofollow, etc.)

<!-- Images -->
<img src="photo.jpg" alt="Description" width="300" height="200">
  src     — Image source/path
  alt     — Alternative text (accessibility!)
  width   — Width in pixels
  height  — Height in pixels

<!-- Forms -->
<input type="text" name="username" placeholder="Enter name" required>
  type        — Input type (text, email, password, etc.)
  name        — Form field name
  placeholder — Hint text
  required    — Field must be filled

<!-- Media -->
<video src="video.mp4" controls autoplay muted>
  src      — Video source
  controls — Show play/pause controls
  autoplay — Start automatically
  muted    — No sound by default

Boolean Attributes

Some attributes don't need values—their presence means "true":

<input type="checkbox" checked>
<input type="text" disabled>
<input type="email" required>
<script src="app.js" defer></script>
<video src="video.mp4" autoplay muted></video>

Complete Attributes Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes Demo</title>
</head>
<body>
  <h1 id="main-heading" class="title" style="color: navy;">
    HTML Attributes Demo
  </h1>
  
  <p class="info" title="Hover for tooltip">
    Hover over this text to see a tooltip.
  </p>
  
  <a href="https://www.wikipedia.org" 
     target="_blank" 
     rel="noopener noreferrer">
    Go to Wikipedia (opens in new tab)
  </a>
  
  <br><br>
  
  <img src="https://via.placeholder.com/150" 
       alt="Placeholder Image" 
       width="150" 
       height="150"
       title="Sample placeholder image">
  
  <br><br>
  
  <input type="text" 
         placeholder="Enter your name" 
         required
         data-validation="name">
</body>
</html>

Best Practices for Attributes

Always use alt for images (accessibility)
Use id for unique elements only
Use class for styling multiple elements
Quote attribute values with double quotes
Use lowercase for attribute names
Use semantic attributes when available

Back to top

Attributes Quick Quiz

Q4. Which attribute provides alternate text for an image?

Q5. Which attribute is used to apply inline CSS?

Q6. Which attribute makes a link open in a new tab?

Back to top

Attribute Reference Table

Quick reference for common HTML attributes:

Attribute	Used With	Purpose
href	<a>	Defines link URL destination
src	<img>, <script>, <video>	Source file path or URL
alt	<img>	Alternative text for accessibility
id	Any element	Unique identifier
class	Any element	CSS class name(s)
style	Any element	Inline CSS styles

Back to top

Practice Exercises

Create a page that includes:
- A heading with id="main-title"
- A paragraph with class="description" and title="Hover me!"
- An image with src, alt, width="200" and height="200"
- A link with href and target="_blank"
Demonstrate block vs inline: Create a page showing the difference between <div> (block) and <span> (inline) elements using borders or background colors.
Nesting practice: Create a nested structure with a div containing a heading, paragraph, and list.
Attributes challenge: Build a card component using only semantic HTML and inline styles (no external CSS).

Back to top

Lesson Summary

Key Takeaways:

Elements are the building blocks of HTML—either container (paired tags) or void (self-closing)
Block-level elements create structure and start on new lines; inline elements flow with text
Nesting allows complex structures—always close tags in the correct order
Attributes add metadata and control element behavior/presentation
Common attributes: href, src, alt, id, class, style
Always use alt attributes for images (accessibility!)

Practice building pages using various elements and attributes. The more you code, the more natural it becomes!

Back to top