HTML Basic Tags List with Examples - h1 to h6, p, div, span

HTML Basic Tags

HTML tags are the building blocks of every web page. They tell the browser what each piece of content means: heading, paragraph, link, image, list, table, form field, page header, navigation, article, footer, and more. Learning basic tags is the first step toward writing clean, accessible, SEO-friendly web pages.

HTML is not only about displaying text. Good HTML gives structure and meaning to content. CSS controls presentation, and JavaScript controls behavior, but HTML defines the document itself.

Tags define the purpose of content.
Elements are usually made from opening tag, content, and closing tag.
Void elements such as <img> and <br> do not have closing tags.
Semantic tags improve accessibility, SEO, and maintainability.
Correct tag choice matters more than visual appearance.

HTML Tag, Element, and Attribute

A tag is the markup written between angle brackets. An element includes the opening tag, content, and closing tag. An attribute adds extra information to an element.

Tag, Element, and Attribute

<!-- Opening tag + content + closing tag = element -->
<p>This is a paragraph.</p>

<!-- href is an attribute -->
<a href="https://example.com">Visit Example</a>

Basic HTML Document Tags

Every HTML page starts with a document structure. These tags tell the browser what type of document it is, what language it uses, what metadata it has, and what content should appear on the page.

Complete Basic HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Welcome to HTML</h1>
  <p>This is a simple web page.</p>
</body>
</html>

Tag	Purpose
`<!DOCTYPE html>`	Declares modern HTML5 document mode.
`<html>`	Root element of the page.
`<head>`	Contains metadata, title, links, scripts, and configuration.
`<meta>`	Provides metadata such as character set and viewport settings.
`<title>`	Sets the browser tab title and search result title.
`<body>`	Contains visible page content.

Normal Tags and Void Tags

Most HTML elements have opening and closing tags. Void elements do not contain content and do not use closing tags.

Normal and Void Tags

<!-- Normal elements -->
<h1>Page Title</h1>
<p>Paragraph content</p>
<button>Save</button>

<!-- Void elements -->
<br>
<hr>
<img src="logo.png" alt="Company logo">
<input type="email" name="email">
<meta charset="UTF-8">

Heading Tags

HTML provides six heading levels: <h1> through <h6>. Use them to create a meaningful document outline. Do not skip heading levels just to change visual size; use CSS for styling.

Headings

<h1>HTML Tutorial</h1>
<h2>Basic Tags</h2>
<h3>Heading Tags</h3>
<h4>Examples</h4>
<h5>Notes</h5>
<h6>Small Detail</h6>

Paragraph, Line Break, and Horizontal Rule

<p> creates a paragraph. <br> creates a line break inside text. <hr> creates a thematic break between sections. Use CSS margins for spacing, not repeated <br> tags.

Paragraph and Break Tags

<p>HTML describes the structure of a web page.</p>

<p>
  Tutorials Logic<br>
  Kaluahi, India
</p>

<hr>

<p>This paragraph starts a new topic.</p>

Text Formatting Tags

Formatting tags mark importance, emphasis, code, inserted text, deleted text, subscript, superscript, and highlights. Prefer semantic tags such as <strong> and <em> over purely visual thinking.

Tag	Meaning	Example
`<strong>`	Strong importance	Warnings, important instructions
`<em>`	Emphasis	Stressed words
`<b>`	Stylistically bold text	Keywords without extra importance
`<i>`	Alternate voice or term	Technical term, phrase, title
`<mark>`	Highlighted text	Search result match
`<small>`	Side note or fine print	Copyright or disclaimer
`<del>`	Deleted text	Old price or removed content
`<ins>`	Inserted text	Newly added content
`<sub>`	Subscript	H₂O
`<sup>`	Superscript	x²

Formatting Text

<p><strong>Important:</strong> Save your work.</p>
<p>HTML is <em>not</em> a programming language.</p>
<p>Price: <del>$99</del> <ins>$49</ins></p>
<p>Water formula: H<sub>2</sub>O</p>
<p>Square: x<sup>2</sup></p>

Code and Preformatted Text

Use <code> for inline code, <pre> for preformatted blocks, <kbd> for keyboard input, and <samp> for sample output.

Code Tags

<p>Use the <code>print()</code> function.</p>

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

<pre><code>
function greet(name) {
  return "Hello " + name;
}
</code></pre>

<p>Output: <samp>Hello Asha</samp></p>

Links

The <a> tag creates hyperlinks. Links can point to another page, another section of the same page, an email address, a phone number, or a downloadable file.

Anchor Tags

<a href="https://example.com">Visit Example</a>
<a href="/contact">Contact us</a>
<a href="#faq">Jump to FAQ</a>
<a href="mailto:info@example.com">Email us</a>
<a href="tel:+918092939553">Call us</a>

Images

The <img> tag displays an image. It is a void element. Always include meaningful alt text for informative images. Decorative images can use empty alt text: alt="".

Image Tags

<img src="logo.png" alt="Tutorials Logic logo">

<img
  src="profile.jpg"
  alt="Portrait of Asha Sharma"
  width="300"
  height="300"
  loading="lazy">

<img src="divider.svg" alt="">

Lists

HTML has unordered lists, ordered lists, and description lists. Use a list when the content is a group of related items.

List Tags

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

<ol>
  <li>Plan the page</li>
  <li>Write the markup</li>
  <li>Validate the page</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>The structure language of the web.</dd>
</dl>

Block and Inline Tags

Some elements naturally start on a new line; these are commonly called block elements. Others flow inside text; these are commonly called inline elements. CSS can change display behavior, but knowing the default helps beginners understand layout.

Type	Examples	Behavior
Block	`<div>`, `<p>`, `<h1>`, `<section>`	Usually starts on a new line and takes available width.
Inline	`<span>`, `<a>`, `<strong>`, `<em>`	Flows inside surrounding text.

div and span

<div class="tl-card">
  <h2>Course Card</h2>
  <p>Learn HTML step by step.</p>
</div>

<p>Status: <span class="success">Active</span></p>

Semantic Structure Tags

Semantic tags describe page regions and content purpose. They make pages easier for browsers, developers, search engines, and assistive technologies to understand.

Semantic Page Structure

<header>
  <h1>Tutorials Logic</h1>
</header>

<nav aria-label="Main navigation">
  <a href="/">Home</a>
  <a href="/tutorials">Tutorials</a>
</nav>

<main>
  <article>
    <h2>HTML Basic Tags</h2>
    <p>Learn the most common HTML tags.</p>
  </article>

  <aside>Related tutorials</aside>
</main>

<footer>Copyright 2026</footer>

Quotation and Citation Tags

HTML has tags for quotations, citations, abbreviations, and contact information. These tags add meaning beyond plain text.

Quotation Tags

<blockquote cite="https://example.com/article">
  <p>Good HTML starts with meaningful structure.</p>
</blockquote>

<p>The book <cite>HTML for Everyone</cite> is beginner friendly.</p>

<p><abbr title="HyperText Markup Language">HTML</abbr> structures web pages.</p>

<address>
  Tutorials Logic<br>
  Kaluahi, India
</address>

Table Tags Preview

Tables are for tabular data. Basic tl-table tags include <table>, <caption>, <thead>, <tbody>, <tr>, <th>, and <td>.

Basic Table

<table>
  <caption>Course List</caption>
  <thead>
    <tr>
      <th>Course</th>
      <th>Level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Beginner</td>
    </tr>
  </tbody>
</table>

Form Tags Preview

Forms collect user input. Basic form tags include <form>, <label>, <input>, <textarea>, <select>, <option>, and <button>.

Basic Form

<form action="/signup" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required>

  <label for="course">Course</label>
  <select id="course" name="course">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
  </select>

  <button type="submit">Join</button>
</form>

Media and Embed Tags Preview

HTML can include audio, video, and embedded content. Use these tags carefully with fallback text and accessibility-friendly attributes.

Media Tags

<audio controls>
  <source src="lesson.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

<video controls width="640">
  <source src="intro.mp4" type="video/mp4">
  Your browser does not support video.
</video>

<iframe src="map.html" title="Location map"></iframe>

Global Attributes Used with Basic Tags

Global attributes can be used on most HTML elements. They help identify, style, script, label, and describe elements.

Attribute	Purpose	Example
`id`	Unique identifier	`id="main-title"`
`class`	Reusable CSS/JS hook	`class="tl-card"`
`title`	Additional advisory text	`title="More info"`
`style`	Inline CSS	`style="color: red"`
`data-*`	Custom data for scripts	`data-id="42"`
`hidden`	Hide an element	`hidden`
`lang`	Language of content	`lang="en"`

Basic Tags Quick Reference

Category	Tags	Purpose
Document	`<!DOCTYPE>`, `<html>`, `<head>`, `<body>`	Page structure.
Metadata	`<meta>`, `<title>`, `<link>`, `<script>`	Configuration and resources.
Headings	`<h1>` to `<h6>`	Document outline.
Text	`<p>`, `<br>`, `<hr>`	Paragraphs and breaks.
Formatting	`<strong>`, `<em>`, `<mark>`, `<small>`	Meaningful text emphasis.
Code	`<code>`, `<pre>`, `<kbd>`, `<samp>`	Code and technical text.
Links and media	`<a>`, `<img>`, `<audio>`, `<video>`	Navigation and media.
Lists	`<ul>`, `<ol>`, `<li>`, `<dl>`	Grouped items.
Semantic layout	`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`	Meaningful page regions.
Forms	`<form>`, `<label>`, `<input>`, `<button>`	User input.

Accessibility and SEO Tips

Use one clear main <h1> for the page topic.
Use heading levels in order so the page outline makes sense.
Use meaningful link text instead of vague text like "click here".
Add useful alt text to informative images.
Connect form labels to inputs with for and id.
Use semantic layout tags instead of using <div> for everything.
Use tables for data, not for page layout.
Validate your HTML to catch missing closing tags and invalid nesting.

Conclusion

HTML basic tags give structure and meaning to a web page. Document tags create the page shell, heading tags organize content, paragraph and formatting tags mark text, links connect pages, images add visuals, lists group related items, and semantic tags describe page regions.

The best way to write HTML is to choose tags based on meaning first. Once the content is structured correctly, use CSS for design and JavaScript for interaction.

Common Mistakes to Avoid

WRONG Choose h1, h2, h3 only because of their visual size

RIGHT Use headings to create a logical document outline

Use CSS to change appearance; use heading tags for structure.

WRONG Use repeated br tags to create spacing

RIGHT Use CSS margin and padding for spacing

The br tag should represent a real line break in text.

WRONG Use div for every part of the page

RIGHT Use semantic tags such as header, nav, main, article, section, and footer

Semantic HTML improves accessibility, SEO, and code readability.

WRONG Write image tags without alt text

RIGHT Add meaningful alt text to informative images

Alt text helps screen reader users and appears when images fail to load.

WRONG Use tables for page layout

RIGHT Use tables only for tabular data

Use CSS layout tools such as Flexbox and Grid for page layout.

Key Takeaways

HTML tags describe the structure and meaning of web page content.
An element usually includes an opening tag, content, and a closing tag.
Void elements such as img, br, hr, input, and meta do not have closing tags.
Headings should create a logical document outline.
Use semantic tags for meaningful page structure.
Use alt text, labels, and clear links for accessibility.
Use CSS for appearance instead of choosing tags only for visual style.

Frequently Asked Questions

A tag is markup such as <p>. An element includes the opening tag, content, and closing tag, such as <p>Hello</p>.

A void tag does not contain content and does not use a closing tag. Examples include <br>, <hr>, <img>, <input>, and <meta>.

Use semantic tags when they describe the content clearly. Use <div> only when no more meaningful tag fits.

HTML can technically contain more than one <h1>, but for beginner-friendly accessibility and SEO, one clear main <h1> per page is a good practice.