HTML INTRODUCTION

June 27, 2026
HTML Language Guide – MI Tech Solution
🌿 HTML Guide

Introduction to HTML Language
& All Essential Tags

A complete beginner-friendly guide to HTML — the backbone of every website.

📅 June 2025 ✍️ MI Tech Solution ⏱ 12 min read 🏷 HTML · Beginner

📋 Table of Contents

  1. What is HTML?
  2. Basic Structure of HTML
  3. Heading Tags (h1–h6)
  4. Text Formatting Tags
  5. Link & Image Tags
  6. List Tags
  7. Table Tags
  8. Form Tags
  9. Semantic HTML5 Tags
  10. Media Tags
Introduction

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. Every website you visit is built with HTML at its core.

HTML uses <tags> — special keywords wrapped in angle brackets — to mark up content. Most tags come in pairs: an opening tag and a closing tag.

💡 Did you know? HTML was created by Tim Berners-Lee in 1991. HTML5 introduced powerful new features like video, audio, and semantic elements.
Structure

Basic Structure of HTML

HTMLbasic-structure.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width"/>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>My first paragraph.</p>
  </body>
</html>
Headings

Heading Tags — <h1> to <h6>

HTMLheadings.html
<h1>H1 – Main Heading</h1>
<h2>H2 – Section Heading</h2>
<h3>H3 – Sub-section</h3>
<h4>H4 – Minor Heading</h4>
<h5>H5 – Small Heading</h5>
<h6>H6 – Smallest</h6>
Best Practice: Use only one <h1> per page — it helps SEO.
Text

Text Formatting Tags

<p>

Paragraph — the most common text container.

<strong>

Makes text bold and semantically important.

<em>

Makes text italic with semantic emphasis.

<br>

Self-closing line break tag.

<hr>

Horizontal dividing line between sections.

<span>

Inline container for styling text portions.

<blockquote>

Long quotes from external sources.

<code>

Inline code in monospace font.

<pre>

Preformatted text — preserves spaces & breaks.

<mark>

Highlights text like a marker pen.

<small>

Smaller text — good for footnotes.

<del> / <ins>

Deleted and inserted text.

Lists

List Tags

HTMLlists.html
<ul><li>HTML</li><li>CSS</li></ul>
<ol><li>Step 1</li><li>Step 2</li></ol>
<dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl>
Tables

Table Tags

HTMLtable.html
<table>
  <thead><tr><th>Name</th><th>Level</th></tr></thead>
  <tbody><tr><td>Rahul</td><td>Beginner</td></tr></tbody>
  <tfoot><tr><td colspan="2">Total: 1</td></tr></tfoot>
</table>
Forms

Form Tags

HTMLform.html
<form action="/submit" method="post">
  <input type="text" placeholder="Name"/>
  <input type="email" placeholder="Email"/>
  <input type="password"/>
  <select><option>HTML</option></select>
  <textarea rows="4"></textarea>
  <button type="submit">Send</button>
</form>
HTML5 Semantic

Semantic HTML5 Tags

<header>

Top part — logo, nav, site title.

<nav>

Navigation links and menus.

<main>

Dominant content — one per page.

<section>

Thematic grouping of content.

<article>

Self-contained content — blog post.

<aside>

Secondary content — sidebar.

<footer>

Bottom — copyright, links.

<figure>

Media with optional figcaption.

<div>

Generic block container.

Media

Media Tags

HTMLmedia.html
<video controls><source src="v.mp4" type="video/mp4"/></video>
<audio controls><source src="a.mp3"/></audio>
<iframe src="https://youtube.com/embed/xyz" allowfullscreen></iframe>
🎯 Next Steps: Now learn CSS to style HTML and check our CSS Animations guide!
Shah

Posted by Shah