HTML Basic Tags List h1 to h6, p, div, span is an important HTML topic because it shows up in real projects, debugging sessions, and interviews. Learn the meaning first, then connect it to a small working example so the rule does not stay abstract.
Focus on what problem HTML Basic Tags List h1 to h6, p, div, span solves, where developers usually make mistakes, and how to verify the result with output, behavior, or a small test.
A strong understanding of HTML Basic Tags List h1 to h6, p, div, span should include syntax, behavior, one realistic use case, one failure case, and one quick way to check your work.
HTML Basic Tags List h1 to h6 p div span should be studied as a practical HTML lesson, not as a label. Start by naming the input, the rule that changes the input, and the result a learner should be able to predict after reading the page.
In the html > basic-tags page, the notes should connect the definition with a working scenario, a mistake that beginners actually make, and the exact check that proves the fix. That makes the topic useful for coding, debugging, and interview revision.
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.
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.
<!-- Opening tag + content + closing tag = element -->
<p>This is a paragraph.</p>
<!-- href is an attribute -->
<a href="https://example.com">Visit Example</a>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. |
<!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>Most HTML elements have opening and closing tags. Void elements do not contain content and do not use closing 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">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.
<h1>HTML Tutorial</h1>
<h2>Basic Tags</h2>
<h3>Heading Tags</h3>
<h4>Examples</h4>
<h5>Notes</h5>
<h6>Small Detail</h6><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.
<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>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 |
<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>Use <code> for inline code, <pre> for preformatted blocks, <kbd> for keyboard input, and <samp> for sample output.
<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>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.
<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>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="".
<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="">HTML has unordered lists, ordered lists, and description lists. Use a list when the content is a group of related items.
<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>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 class="card">
<h2>Course Card</h2>
<p>Learn HTML step by step.</p>
</div>
<p>Status: <span class="success">Active</span></p>Semantic tags describe page regions and content purpose. They make pages easier for browsers, developers, search engines, and assistive technologies to understand.
<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>HTML has tags for quotations, citations, abbreviations, and contact information. These tags add meaning beyond plain text.
<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>Tables are for tabular data. Basic table tags include <table>, <caption>, <thead>, <tbody>, <tr>, <th>, and <td>.
<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>Forms collect user input. Basic form tags include <form>, <label>, <input>, <textarea>, <select>, <option>, and <button>.
<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>HTML can include audio, video, and embedded content. Use these tags carefully with fallback text and accessibility-friendly attributes.
<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 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" |
| 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. |
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.
<section>
<h2>HTML Basic Tags List h1 to h6 p div span</h2>
<p>Use semantic structure so the content is readable and accessible.</p>
</section><button type="button" aria-label="Review HTML Basic Tags List h1 to h6 p div span">Review</button>Memorizing HTML Basic Tags List h1 to h6 p div span without the situation where it is useful.
Connect HTML Basic Tags List h1 to h6 p div span to a concrete HTML task.
Testing HTML Basic Tags List h1 to h6 p div span only with the perfect input.
Include empty, missing, duplicate, incompatible, or failed cases when relevant.
Changing code before reading the visible symptom or error message.
Inspect the output, state, configuration, or stack trace connected to HTML Basic Tags List h1 to h6 p div span.
Memorizing HTML Basic Tags List h1 to h6 p div span without the situation where it is useful.
Connect HTML Basic Tags List h1 to h6 p div span to a concrete HTML task.
Basic HTML tags include document tags, headings, paragraphs, links, images, lists, text formatting tags, semantic layout tags, table tags, and form tags.
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>.
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>.
Use semantic tags when they describe the content clearly. Use <code><div></code> only when no more meaningful tag fits.
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.
Explore 500+ free tutorials across 20+ languages and frameworks.