HTML Elements and Tags Explained with Examples

If you have been following this series you already know how an HTML document is structured the DOCTYPE the html tag, the head and the body. Now its time to zoom into what actually goes inside that body elements and tags. These two words get thrown around constantly in HTML tutorials and honestly a lot of beginners use them interchangeably without realizing theres a small but important difference between them.

In this post we are going to clear up that confusion once and for all and then walk through the most commonly used HTML tags with practical easy to follow examples. By the end you will not only know what these tags are called you will understand exactly when and why to use each one.

What Is an HTML Tag?

A tag is a piece of markup wrapped in angle brackets that tells the browser how to treat a specific piece of content. Tags almost always come in pairs an opening tag and a closing tag though there are a handful of exceptions we will get to shortly.

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

Here, <p> is the opening tag and </p> is the closing tag. Notice the forward slash in the closing tag that's what tells the browser this section of content ends here.

What Is an HTML Element?

An element is the complete package the opening tag, the content inside it and the closing tag all together. So technically speaking <p>This is a paragraph.</p> as a whole is called an element while <p> and </p> individually are tags.

It's a subtle distinction, and honestly in casual conversation most developers use tag and element interchangeably without anyone getting confused. But if you are reading official documentation like MDN or W3C you will notice they are careful about using the correct term, so it's worth knowing the difference.

Anatomy of an HTML Element

Lets break down a slightly more detailed element to understand all its parts.

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

Opening tag: <a href="https://example.com">
Attribute: href="https://example.com"
Content: Visit Example
Closing tag: </a>

Attributes provide extra information about an element and are always written inside the opening tag in the format name="value". In this case href is the attribute name and the URL is its value, telling the browser where this link should take the user.

Types of HTML Tags: Container Tags vs Self-Closing Tags

HTML tags generally fall into two categories and knowing the difference will save you a lot of confusion down the road.

1. Container (Paired) Tags

These are tags that wrap around content and require both an opening and a closing tag. Most HTML tags fall into this category <p>, <div>, <h1>, <a>, and so on.

<div>
  <p>This paragraph is wrapped inside a div.</p>
</div>

2. Self-Closing (Void) Tags

Some tags do not wrap around any content at all they simply do their job on their own and do not need a closing tag. These are called void elements. Common examples include <img>, <br>, <hr>, <input>, and <meta>.

<img src="cat.jpg" alt="A cute cat">
<br>
<hr>

You might sometimes see these written with a trailing slash like <br />. That style comes from XHTML conventions and while it still works fine in HTML5 its not required. Both versions are valid so you can pick whichever style you (or your team) prefer and stay consistent.

Block-Level Elements vs Inline Elements

This is one of those concepts that seems minor at first but ends up being genuinely important once you start working with CSS and layouts.

Block-Level Elements

Block-level elements always start on a new line and take up the full width available to them pushing whatever comes after them down to the next line. Common examples include <div>, <p>, <h1> through <h6>, <ul>, and <section>.

<p>First paragraph.</p>
<p>Second paragraph.</p>

In the example above each paragraph automatically appears on its own line even though we did not add any line breaks ourselves. Thats block level behavior in action.

Inline Elements

Inline elements on the other hand only take up as much width as their content needs and they do not force a line break. They sit comfortably next to other content on the same line. Common examples include <a>, <span>, <strong>, and <em>.

<p>This sentence has a <strong>bold word</strong> inside it.</p>

Here bold word stays right in the middle of the sentence instead of jumping to a new line because <strong> is an inline element.

Commonly Used HTML Tags - With Examples

Now lets go through some of the tags you will be using constantly as you build web pages. We will cover most of these in much greater depth in future posts but heres a solid overview to get you comfortable with them.

Heading Tags: `<h1>` to `<h6>`

Headings are used to structure your content hierarchically similar to how chapters and subheadings work in a book. <h1> is the most important heading (usually the page title) and it gets progressively less important down to <h6>.

<h1>Main Page Title</h1>
<h2>A Section Heading</h2>
<h3>A Sub-section Heading</h3>

A good rule of thumb use only one <h1> per page and do not skip heading levels just for styling purposes (like jumping from <h2> straight to <h5>). Search engines actually pay attention to your heading structure so keeping it logical helps with SEO too.

Paragraph Tag: `<p>`

This one is straightforward its used to wrap blocks of text content.

<p>HTML is the standard markup language used to build web pages.</p>

Division Tag: `<div>`

A <div> is a generic block level container that does not carry any specific meaning on its own its mainly used to group other elements together usually for styling or layout purposes with CSS.

<div>
  <h2>Contact Info</h2>
  <p>Email: someone@example.com</p>
</div>

Span Tag: `<span>`

Think of <span> as the inline version of <div>. Its also a generic container without any built in meaning but since its inline its typically used to style a small piece of text within a larger sentence.

<p>The price is <span style="color:red;">$49</span> today only.</p>

Anchor Tag: `<a>`

This is the tag responsible for hyperlinks its what lets users click and navigate to another page or website.

<a href="https://example.com">Visit our website</a>

We will dedicate an entire post to anchor tags later in this series since theres quite a bit more to cover like opening links in new tabs and linking to specific sections of a page.

Image Tag: `<img>`

Used to embed images into a webpage. Note that this is a self closing tag.

<img src="sunset.jpg" alt="Sunset over the ocean">

The alt attribute here is not optional if you care about accessibility or SEO it describes the image for screen readers and also displays as fallback text if the image fails to load.

List Tags: `<ul>`, `<ol>`, `<li>`

These tags are used to create bullet point or numbered lists.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ul> stands for unordered list (bullet points) while <ol> stands for ordered list (numbered). Each individual item inside either list uses the <li> tag.

Strong and Emphasis Tags: `<strong>`, `<em>`

These tags add semantic weight to text not just visual styling.

<p><strong>Warning:</strong> Please read the instructions <em>carefully</em>.</p>

<strong> typically renders as bold and signals important content while <em> typically renders as italic and signals emphasized content. We will go deeper into the difference between these and their purely visual counterparts <b> and <i> in an upcoming post dedicated to text formatting.

Line Break Tag: `<br>`

Used to insert a line break without starting a new paragraph. Its a self closing tag.

<p>Roses are red <br>Violets are blue.</p>

Horizontal Rule Tag: `<hr>`

Adds a horizontal line, often used to visually separate sections of content.

<p>Section one content.</p>
<hr>
<p>Section two content.</p>

Nested Elements - Building More Complex Structures

As you start combining tags you will frequently nest elements inside one another to build more complex pieces of content. For example:

<div>
  <h2>Latest Blog Posts</h2>
  <ul>
    <li><a href="post1.html">Getting Started with HTML</a></li>
    <li><a href="post2.html">Understanding CSS Basics</a></li>
  </ul>
</div>

Here we have got a <div> containing a heading and a list and inside each list item theres an anchor tag. This kind of nesting is completely normal and is exactly how real websites are built small elements combining to form bigger meaningful sections.

Attributes - Adding Extra Information to Elements

We briefly touched on attributes earlier but they deserve a bit more attention since you will be using them constantly. Attributes are always written inside the opening tag and follow the pattern name="value".

<a href="https://example.com" target="_blank">Open in a new tab</a>

In this example, there are two attributes: href, which specifies the destination URL and target="_blank" which tells the browser to open the link in a new tab instead of the current one. Some other attributes you will run into constantly include id, class, src, alt, and style.

The `id` Attribute

Gives an element a unique identifier, useful for CSS styling or JavaScript targeting. An id should only be used once per page.

<div id="main-header">...</div>

The `class` Attribute

Unlike id a class can be reused across multiple elements making it perfect for applying the same style to a group of elements.

<p class="highlight">This text is highlighted.</p>
<p class="highlight">So is this one.</p>

Common Mistakes Beginners Make with Tags and Elements

1. Forgetting to Close Tags

It's easy to forget a closing tag especially in longer documents. This can cause your entire layout to shift unexpectedly since the browser might interpret everything after the missing tag as being nested inside it.

2. Using the Wrong Tag for the Job

A common bad habit is wrapping everything in <div> tags even when a more meaningful tag exists. For example, using a <div> for your main heading instead of <h1>. This might look fine visually but it hurts accessibility and SEO since search engines and screen readers rely on the meaning of these tags not just their appearance.

3. Overusing Inline Styles

Adding style attributes directly on individual tags might work for quick testing but it becomes very hard to maintain as your site grows. Its almost always better to use CSS classes and keep your styling in a separate stylesheet.

4. Mixing Up Block and Inline Behavior

Beginners often get confused when a <span> does not behave like a <div> or vice versa. Remembering that block elements stack vertically and inline elements sit side by side will save you a lot of head scratching.

Why Choosing the Right Tag Matters

One theme that will come up again and again in this series is semantic HTML the idea of using tags based on what they mean not just how they look. A <strong> tag and a <b> tag might look identical in a browser (both bold) but <strong> tells search engines and assistive technologies that this text is genuinely important while <b> is purely visual with no extra meaning attached.

This distinction matters a lot more than it seems at first glance. Search engines use these semantic cues to better understand your content, and screen readers use them to communicate meaning to visually impaired users. Choosing tags carefully rather than just picking whatever "looks right" is what separates well-built websites from sloppy ones.

Practice Exercise

Let's put what you have learned into practice with a small hands on exercise.

Open the HTML file you created in the last posts exercise (or create a new one).
Add an <h2> heading titled "My Favorite Things".
Below it add an unordered list (<ul>) with at least three items you like.
Add a paragraph with one word wrapped in <strong> and another in <em>.
Add an anchor tag linking to your favorite website set to open in a new tab.
Save and open the file in your browser to see the result.

This exercise combines several of the tags we have covered today and doing it hands on will help these concepts stick far better than just reading about them.

Frequently Asked Questions (FAQs)

Whats the actual difference between a tag and an element?

A tag is just the markup itself like <p> or </p>. An element is the full package the opening tag the content and the closing tag combined.

Can I use a `<div>` for everything instead of learning all these other tags?

Technically you could but its a bad practice. Using meaningful tags improves both accessibility and SEO and makes your code far easier to understand and maintain.

Do self-closing tags need a closing slash?

Not in HTML5. Writing <br> or <br /> both work fine its mostly a matter of personal or team preference.

How many attributes can a tag have?

Theres no strict limit. A single tag can carry multiple attributes as long as each one is properly written with a name and value separated by spaces.

Conclusion - You Now Know How Tags and Elements Work

In this post we covered the real difference between tags and elements looked at block level versus inline behavior walked through the most commonly used HTML tags and talked about why choosing the right tag actually matters for accessibility and SEO. This knowledge is going to come up constantly as we move forward in this series.

In the next post we will dive into HTML Headings and Paragraphs Complete Guide where we will take a much closer look at structuring text content properly something that sounds simple on the surface but has a surprising number of best practices behind it. Until then keep practicing what you have learned here building small test pages is genuinely the fastest way to make all of this second nature.

HTML Elements and Tags Explained