HTML Basic Tags List h1 to h6, p, div, span: Tutorial, Examples, FAQs & Interview Tips

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.

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.

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>

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	H2O
<sup>	Superscript	x2

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="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 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="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.

Frequently Asked Questions

What are basic HTML tags?

Basic HTML tags include document tags, headings, paragraphs, links, images, lists, text formatting tags, semantic layout tags, table tags, and form tags.

What is the difference between a tag and an element?

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

What is a void tag in HTML?

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

Should I use div or semantic tags?

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

Can I use multiple h1 tags?

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

Previous Next