DEV Community

Cover image for HTML Elements and Attributes Explained with Examples
CodePractice
CodePractice

Posted on

HTML Elements and Attributes Explained with Examples

#webdev #beginners #tutorial #html

If you've ever opened a webpage and wondered "how does this thing actually work?" — this article is for you.

HTML is the skeleton of every website you've ever visited. Before you touch CSS or JavaScript, before you build React apps or deploy to the cloud — you need to understand two fundamental concepts: HTML Elements and HTML Attributes.

Let's break both of them down, with real examples you can try right now.

What is an HTML Element?

An HTML element is the basic building block of any webpage. Think of it as a container that holds content and gives it meaning.

A typical HTML element looks like this:

<p>This is a paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

Here's what's happening:

  • <p> — this is the opening tag
  • This is a paragraph. — this is the content
  • </p> — this is the closing tag

Together, the opening tag + content + closing tag = one complete HTML element.

Types of HTML Elements

Not all elements are created equal. There are two broad categories:

1. Block-level elements — These take up the full width of the page and always start on a new line.

<h1>I am a heading</h1>
<p>I am a paragraph.</p>
<div>I am a division block.</div>
Enter fullscreen mode Exit fullscreen mode

2. Inline elements — These only take up as much space as their content needs, and they don't start on a new line.

<span>I am inline</span>
<strong>I am bold</strong>
<a href="#">I am a link</a>
Enter fullscreen mode Exit fullscreen mode

Self-Closing (Void) Elements

Some elements don't have any content — and therefore don't need a closing tag. These are called void elements or self-closing elements.

<br />     <!-- Line break -->
<hr />     <!-- Horizontal rule -->
<img />    <!-- Image -->
<input />  <!-- Input field -->
Enter fullscreen mode Exit fullscreen mode

Nested Elements

HTML elements can be placed inside other elements. This is called nesting.

<div>
  <h2>My Blog</h2>
  <p>Welcome to <strong>my website</strong>.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

The key rule: always close inner elements before closing outer ones. Improper nesting breaks your layout and causes unexpected bugs.

💡 Want to understand how all these elements fit into a full webpage structure? Check out this beginner-friendly guide: HTML Basics for Beginners

What are HTML Attributes?

If elements are the what, attributes are the how and why.

An HTML attribute provides additional information about an element. Attributes are always placed inside the opening tag and usually follow a name="value" pattern.

<a href="https://example.com">Visit Example</a>
Enter fullscreen mode Exit fullscreen mode

Here:

  • href is the attribute name
  • "https://example.com" is the attribute value

Commonly Used HTML Attributes

Let's look at some attributes you'll use on almost every project:

href — Hyperlink Reference

Used with <a> tags to define where a link points.

<a href="https://codepractice.in">Learn to Code</a>
Enter fullscreen mode Exit fullscreen mode

src — Source

Used with <img> and <script> to specify the file location.

<img src="logo.png" alt="Site Logo" />
Enter fullscreen mode Exit fullscreen mode

alt — Alternative Text

Used with <img> to describe the image. This is important for accessibility and SEO.

<img src="banner.jpg" alt="A banner showing coding tutorials" />
Enter fullscreen mode Exit fullscreen mode

class and id

These are used to target elements in CSS and JavaScript.

<div class="card">Content here</div>
<h1 id="main-title">Hello World</h1>
Enter fullscreen mode Exit fullscreen mode
  • class can be reused on multiple elements
  • id must be unique on the page

type — Input Type

Used with <input> to define what kind of data the field accepts.

<input type="text" placeholder="Enter your name" />
<input type="email" placeholder="Enter your email" />
<input type="password" placeholder="Enter password" />
Enter fullscreen mode Exit fullscreen mode

style — Inline CSS

You can apply CSS directly inside an element (though external stylesheets are preferred for larger projects).

<p style="color: red; font-size: 18px;">This text is red.</p>
Enter fullscreen mode Exit fullscreen mode

target — Link Behavior

Controls how a link opens.

<a href="https://example.com" target="_blank">Opens in new tab</a>
Enter fullscreen mode Exit fullscreen mode

Boolean Attributes

Some attributes don't need a value — just their presence is enough to activate a behavior.

<input type="checkbox" checked />
<button disabled>Can't Click Me</button>
<input type="text" required />
Enter fullscreen mode Exit fullscreen mode

Putting It All Together: A Real Example

Let's combine everything — elements and attributes — into a simple webpage section:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Profile</title>
</head>
<body>

  <div class="profile" id="user-card">
    <img src="avatar.jpg" alt="User Profile Picture" width="100" />
    <h2>John Doe</h2>
    <p>Full Stack Developer | Open Source Enthusiast</p>
    <a href="https://github.com/johndoe" target="_blank">View GitHub</a>
  </div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Let's break this down:

  • <div class="profile" id="user-card"> — a block element with both a class and an ID
  • <img src="..." alt="..." width="100" /> — a self-closing element with three attributes
  • <a href="..." target="_blank"> — a link that opens in a new tab

Every attribute is doing something specific. Remove any one of them and the behavior changes.

HTML Semantic Elements — A Quick Mention

Once you're comfortable with basic elements and attributes, the next step is learning semantic HTML — elements that carry meaning, not just structure. Tags like <header>, <nav>, <main>, <article>, and <footer> tell both browsers and developers what kind of content lives inside.

📖 Read more: HTML Semantic Tags Explained with Examples

And if you're just beginning your coding journey overall, it helps to have a roadmap:

🗺️ How to Learn Coding from Scratch (Step-by-Step Guide)

Summary

Concept What It Does Example
HTML Element Defines structure and content <p>Hello</p>
Opening Tag Starts the element <h1>
Closing Tag Ends the element </h1>
Self-Closing Tag No content, no closing tag <br />
Attribute Adds info to an element class="card"
Boolean Attribute True by presence alone disabled

HTML elements and attributes are the foundation everything else in web development is built on. Take time to understand them properly — not just copy-paste them — and you'll write cleaner, more maintainable code from day one.

Practice them. Break them. Build small things with them.

That's how it clicks. 🚀

📚 Want to go deeper? Explore the full tutorials:

Top comments (0)