HTML Tags

HTML tags are special keywords written inside angle brackets that tell the browser how content should be structured and interpreted.

For example:<h1>Welcome to Web4Learners</h1>

Here, <h1> and </h1> are HTML tags. They tell the browser that the text between them is a heading.

HTML tags are the foundation of HTML. They are used to create headings, paragraphs, links, images, lists, tables, forms, navigation areas, sections, articles, and many other parts of a webpage.

Note: HTML tags and HTML elements are closely related, but they are not exactly the same. A tag is the markup such as <p> or </p>, while the complete structure <p>Hello</p> is an HTML element.

What Are HTML Tags?

An HTML tag is a markup keyword enclosed in angle brackets (< and >).

For example: <p>

• The tag tells the browser that a paragraph element is starting.
• A closing paragraph tag looks like this: </p>
• Together, they can create: <p>This is a paragraph.</p>
• HTML tags provide instructions about the structure and meaning of webpage content.

HTML Tag Syntax

A typical HTML element uses an opening tag and a closing tag: <opening-tag>Content</closing-tag>

For example:

<h1>HTML Tags</h1>

The parts are:

Part	Example	Purpose
Opening tag	<h1>	Starts the element
Content	HTML Tags	The actual content
Closing tag	</h1>	Ends the element

The forward slash / indicates that the tag is a closing tag.

Opening Tags

An opening tag marks the beginning of an HTML element.

For example: <h1>

Other opening tags include:

<p>
<a>
<div>
<section>
<table>
<form>

Opening tags can also contain attributes.

For example: <a href=”/html/”>Learn HTML</a>
Here, <a href="/html/"> is the opening tag, and href is an attribute.

Closing Tags

A closing tag marks the end of an HTML element.

For example:</p>

• A paragraph is therefore written as: <p>This is a paragraph.</p>
• The opening and closing tags surround the content.

Important: Closing tags must be written correctly. Incorrectly nested or missing tags can result in unexpected document structure.

HTML Tags and HTML Elements

It is important to understand the difference between a tag and an element.

Consider: <p>Learn HTML</p>

The tags are: <p> </p>

The complete element is: <p>Learn HTML</p>

Term	Example
Opening tag	<p>
Closing tag	</p>
Content	Learn HTML
Complete element	<p>Learn HTML</p>

Understanding this difference will make later HTML concepts easier to learn.

Common HTML Tags

HTML provides many tags for different purposes.

Tag	Purpose
<html>	Root of the HTML document
<head>	Contains document metadata
<title>	Defines the document title
<body>	Contains webpage content
<h1>–<h6>	Create headings
<p>	Creates a paragraph
<a>	Creates a hyperlink
<img>	Displays an image
<ul>	Creates an unordered list
<ol>	Creates an ordered list
<li>	Creates a list item
<table>	Creates a table
<form>	Creates a form
<input>	Creates an input control
<button>	Creates a button
<div>	Generic block container
<span>	Generic inline container

Heading Tags

HTML provides six heading tags:

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

<h1> represents the highest-level heading, while <h6> represents the lowest heading level.

For example:

<h1>HTML Tutorial</h1>

<h2>HTML Tags</h2>

<h3>Heading Tags</h3>

Headings help organize the content of a webpage.

Important: Do not choose heading tags only because of their visual size. Use them according to the structure and importance of the content.

Paragraph Tag

The <p> tag is used to create paragraphs.

• <p>HTML is used to structure webpages.</p>
• <p>CSS is used to style webpages.</p>

Each <p> element represents a separate paragraph.

You can also place other inline elements inside a paragraph:

<p>
    Learn <strong>HTML</strong> with
    <em>practical examples</em>.
</p>

Link Tag

The <a> tag creates a hyperlink. <a href=”https://example.com”>Visit Website</a>

• The href attribute specifies the destination.
• You can create an internal link: <a href=”/html/”>Learn HTML</a>
• Internal links are useful for connecting related tutorials on your website.

For example, Web4Learners also has a JavaScript Introduction tutorial that explains how HTML, CSS, and JavaScript work together.

Image Tag

The <img> tag displays an image.

<img src="html.jpg" alt="HTML code example">

• Unlike <p> or <h1>, <img> does not normally have a closing tag.
• The src attribute specifies the image location, while alt provides alternative text.

Void HTML Tags

Some HTML tags do not have closing tags because they cannot contain child content.

These are called void elements.

Common examples include:

<br>
<hr>
<img src="image.jpg" alt="Example">
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

For example: <p>Hello<br>World</p>

The <br> tag creates a line break.

Note: In modern HTML, void elements do not need a closing slash. <br> is preferred over <br /> in normal HTML syntax.

HTML Tags With Attributes

HTML tags can contain attributes that provide additional information.

For example: <a href=”https://example.com”>Visit Website</a>
The opening tag contains: <a href=”https://example.com”>
Here:

• <a> is the tag.
• href is the attribute.
• "https://example.com" is the attribute value.

Another example: <img src=”logo.png” alt=”Web4Learners logo”>
The <img> tag contains two attributes:

• src
• alt

Nested HTML Tags

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

For example:

<p>
    Learn <strong>HTML</strong> today.
</p>

The <strong> element is inside the <p> element.

Another example:

<section>
    <h2>HTML Tags</h2>

    <p>
        HTML tags define the structure of webpages.
    </p>
</section>

Here, <h2> and <p> are nested inside <section>.

Correctly Nesting Tags

Tags should be closed in the correct order.

Correct:

<p>
    This is <strong>important</strong> text.
</p>

Incorrect:

<p>
    This is <strong>important</p>
</strong>

The <strong> tag is opened after <p>, so it should be closed before </p>.

A simple rule is:

The last tag you open should generally be the first tag you close.

Semantic HTML Tags

Some HTML tags describe the meaning of their content. These are called semantic elements.

Examples include:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

For example:

<header>
    <h1>Web4Learners</h1>
</header>

<nav>
    <a href="/html/">HTML</a>
    <a href="/css/">CSS</a>
</nav>

<main>
    <article>
        <h2>HTML Tags</h2>
        <p>Learn how HTML tags work.</p>
    </article>
</main>

<footer>
    <p>Web4Learners</p>
</footer>

Semantic tags make the structure of a webpage clearer to browsers, search engines, developers, and assistive technologies.

HTML Tags and Browser Rendering

When a browser receives an HTML document, it reads the tags and builds a structured representation of the document.

For example:

<h1>HTML Tags</h1>
<p>HTML creates webpage structure.</p>

The browser understands that:

• <h1> represents a heading.
• <p> represents a paragraph.

It then displays the content according to the browser’s default styles and any CSS applied to those elements.

HTML provides the structure, CSS controls presentation, and JavaScript can add behavior.

You can see this relationship in action in Web4Learners’ JavaScript Introduction tutorial, which explains how HTML provides webpage structure while JavaScript adds interaction.

HTML Tags and CSS

CSS can target HTML elements and change their appearance.

HTML: <h1 class=”title”>HTML Tags</h1>
CSS:

.title {
    font-size: 40px;
    margin-bottom: 20px;
}

The HTML tag creates the heading, while CSS controls how it looks.

HTML Tags and JavaScript

JavaScript can access HTML elements and modify them.

For example:

<h1 id="title">Hello</h1>

<script>
    document.getElementById("title").textContent = "Welcome!";
</script>

• The <h1> tag creates the heading.
• JavaScript then finds the element and changes its content.
• This is one of the fundamental ways HTML and JavaScript work together.

HTML Tags Are Generally Written in Lowercase

HTML tag names are generally not case-sensitive.

• For example, browsers can interpret: <P>Hello</P> and <p>Hello</p> similarly.
• However, lowercase tags are the recommended and conventional style: <p>Hello</p>
  Using a consistent lowercase style makes your HTML easier to read and maintain.

Common HTML Tag Mistakes

Mistake	Correct approach
<p>Hello<p>	<p>Hello</p>
<P>Hello</P>	Prefer <p>Hello</p>
Incorrect nesting	Close nested tags in the correct order
Forgetting required closing tags	Close elements that require closing tags
<img></img>	Use <img>
<a>Website</a href="">	Put attributes in the opening tag
Using tags only for appearance	Choose elements based on meaning

Best Practices for HTML Tags

Use meaningful tags

Instead of using <div> for every part of a page, use semantic elements when they describe the content accurately.

<article>
    <h2>HTML Tags</h2>
    <p>Learn HTML tags with examples.</p>
</article>

Keep tags properly nested

<p>
    Learn <strong>HTML</strong>.
</p>

Use appropriate headings

Organize content with <h1> through <h6> based on the document structure.

Use lowercase tags

<h1>HTML Tags</h1>

Keep your HTML readable

Use indentation for nested elements:

<section>
    <h2>HTML Tags</h2>

    <p>
        HTML tags define webpage structure.
    </p>
</section>

Use valid HTML elements

Avoid inventing attributes or tags when a standard HTML element already provides the required functionality.

Note: Good HTML is about more than making content appear in a browser. Properly chosen tags provide structure and meaning, which makes webpages easier to maintain and more accessible.

HTML Tags Quick Reference

Category	Common Tags
Document	<html>, <head>, <body>, <title>
Headings	<h1> to <h6>
Text	<p>, <strong>, <em>, <mark>
Links	<a>
Images	<img>
Lists	<ul>, <ol>, <li>
Tables	<table>, <tr>, <th>, <td>
Forms	<form>, <input>, <label>, <button>
Structure	<header>, <nav>, <main>, <section>, <article>, <footer>
Containers	<div>, <span>
Media	<audio>, <video>

FAQs About HTML Tags

What are HTML tags?

HTML tags are markup keywords enclosed in angle brackets that tell the browser how content should be structured.

For example:

<p>Hello World!</p>

What is the difference between an HTML tag and an HTML element?

A tag is the markup itself, such as <p> or </p>. An element is the complete structure:

<p>Hello World!</p>

Do all HTML tags have closing tags?

No. Some HTML elements are void elements and do not have closing tags. Examples include <img>, <br>, <input>, <meta>, and <link>.

What is an opening tag?

An opening tag marks the beginning of an HTML element.

<p>

What is a closing tag?

A closing tag marks the end of an HTML element.

</p>

What are semantic HTML tags?

Semantic HTML tags describe the meaning or purpose of their content. Examples include <header>, <nav>, <main>, <article>, <section>, and <footer>.

Can HTML tags have attributes?

Yes. Attributes provide additional information about HTML elements.

<a href=”/html/”>Learn HTML</a>

Here, href is an attribute of the <a> element.

Are HTML tags case-sensitive?

HTML tag names are generally not case-sensitive, but lowercase tags are the recommended coding style.

What happens if HTML tags are not properly closed?

Browsers can sometimes recover from incorrect HTML, but missing or incorrectly nested tags can produce unexpected document structures and rendering results.

Why is correct HTML tag nesting important?

Correct nesting creates a predictable document structure and helps browsers, CSS, JavaScript, accessibility tools, and developers understand the relationships between elements.

Can HTML tags be styled with CSS?

Yes. CSS can target HTML elements using element selectors, classes, IDs, attributes, and other selectors.

p {
    font-size: 18px;
}

Can JavaScript interact with HTML tags?

Yes. JavaScript can select HTML elements and change their content, attributes, styles, and behavior.

What are the most commonly used HTML tags?

Common HTML tags include <html>, <head>, <body>, <h1>–<h6>, <p>, <a>, <img>, <ul>, <ol>, <li>, <div>, <span>, <form>, <button>, and semantic elements such as <header>, <main>, <article>, and <footer>.