HTML — Complete Fundamentals & Examples

Introduction

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It provides the structure and meaning (semantics) of content using elements and attributes.

HTML defines the skeleton of web pages; CSS styles it, JS makes it interactive.

Why HTML Matters

Creates the document structure and hierarchy of content.
Improves accessibility by giving meaning to content (headings, lists, forms).
Helps search engines understand and index pages correctly.

HTML Elements and Attributes

Elements are building blocks; attributes add extra information to elements.

<a href="https://example.com" target="_blank">Visit</a>
<img src="logo.png" alt="Company Logo">

Semantics vs Presentation

HTML focuses on meaning, not appearance. Use semantic tags like <header>, <main>, <article>, and <footer> to describe structure.

Minimal Page Example

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

HTML Basics

HTML Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  Content here
</body>
</html>

Tags & Elements

HTML is made of elements, defined with tags. Example: <p>Hello</p>

Essential Head Tags

These tags improve responsiveness, SEO, and correct character rendering.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Short page summary">

Block vs Inline Elements

Block elements start on a new line and take full width. Inline elements stay in flow.

<div>Block</div>
<span>Inline</span>

Common Structural Elements

Use semantic tags to describe sections of a page.

<header>Header content</header>
<nav>Navigation links</nav>
<main>Main content</main>
<section>Section content</section>
<footer>Footer content</footer>

Attributes and Global Attributes

Attributes add extra information. Global attributes like id, class, title, and data-* can be used on most elements.

<button id="saveBtn" class="primary" data-action="save">Save</button>

Text & Formatting

Text in HTML is structured with semantic tags to express meaning. Use headings to define hierarchy, paragraphs for body text, and lists for grouped items.

Headings and Paragraphs

<h1>Main Title</h1>
<h2>Section Title</h2>
<p>This is a paragraph of text.</p>

Use headings in order (h1 → h6) for accessibility and SEO.

<h1>Travel Guide to Jaipur</h1>
<h2>Best Time to Visit</h2>
<p>October to March offers pleasant weather.</p>

Emphasis and Importance

<em> indicates emphasis, <strong> indicates strong importance.

<em>Emphasized text</em>
<strong>Important text</strong>

<p>Please read the <strong>terms and conditions</strong> carefully.</p>
<p>This course is <em>highly recommended</em> for beginners.</p>

Lists

<ul>
  <li>Unordered item</li>
  <li>Another item</li>
</ul>

<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

<h4>Grocery List</h4>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

<h4>Signup Steps</h4>
<ol>
  <li>Create an account</li>
  <li>Verify email</li>
  <li>Complete profile</li>
</ol>

Links

Use target="_blank" to open in a new tab.

<a href="https://example.com" target="_blank">Visit Example</a>

<p>Read our <a href="/privacy">Privacy Policy</a>.</p>
<p>Visit <a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a>.</p>

Other Useful Text Tags

<mark>Highlighted text</mark>
<small>Small text</small>
<code>Inline code</code>
<pre>Preformatted text</pre>
<blockquote>Quoted text</blockquote>

<p>Price dropped to <mark>$49</mark> today!</p>
<p>Use <code>npm install</code> to install packages.</p>
<blockquote>Learning never exhausts the mind.</blockquote>

Images & Media

HTML supports images, audio, and video with built-in elements. Always provide accessible text and consider performance with optimized file sizes.

1) Images

Use alt text for accessibility and SEO.

<img src="image.jpg" alt="Sunset over mountains" width="400" height="250">

2) Responsive Images

Use srcset and sizes for different screen sizes.

<img
  src="image-small.jpg"
  srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 992px) 768px, 1200px"
  alt="Responsive example">

3) Figure and Caption

<figure>
  <img src="chart.png" alt="Sales chart">
  <figcaption>Figure 1: Monthly sales trend</figcaption>
</figure>

4) Audio

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

5) Video

Add controls, poster, and width for better UX.

<video controls width="400" poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support video.
</video>

6) Common Pitfalls

Missing alt text for images.
Using large, uncompressed media files.
Forgetting to provide fallback text.

Tables

Tables are used to display tabular data. Use table semantics like <thead>, <tbody>, and <tfoot> for clarity and accessibility.

Basic Table

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>25</td></tr>
</table>

Table with Head, Body, and Footer

<table>
  <caption>Student Scores</caption>
  <thead>
    <tr><th>Name</th><th>Math</th><th>Science</th></tr>
  </thead>
  <tbody>
    <tr><td>Aman</td><td>88</td><td>92</td></tr>
    <tr><td>Riya</td><td>91</td><td>89</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Average</td><td>89.5</td><td>90.5</td></tr>
  </tfoot>
</table>

Rowspan and Colspan

<table>
  <tr><th>Day</th><th>Topic</th><th>Duration</th></tr>
  <tr>
    <td rowspan="2">Mon</td>
    <td>HTML</td>
    <td>2 hrs</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>1.5 hrs</td>
  </tr>
</table>

Accessibility Tips

Use <th> for headers and scope when needed.
Provide a <caption> to describe the table.
Keep tables for data, not layout.

Forms & Input

Forms collect user input and send it to the server. Proper labels, input types, and validation improve accessibility and user experience.

Basic Form

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input id="name" type="text" name="name" required>
  <button type="submit">Submit</button>
</form>

Common Input Types

<input type="email" name="email" placeholder="you@example.com">
<input type="password" name="password">
<input type="number" name="age" min="1" max="120">
<input type="date" name="dob">
<input type="file" name="resume">

Textarea and Select

<textarea name="message" rows="4" cols="30"></textarea>

<select name="city">
  <option value="delhi">Delhi</option>
  <option value="mumbai">Mumbai</option>
</select>

Radio and Checkbox

<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>

<label><input type="checkbox" name="subscribe"> Subscribe</label>

Validation Attributes

<input type="text" name="username" required minlength="3" maxlength="12">
<input type="email" name="email" required>
<input type="password" name="pass" required pattern=".{6,}">

Accessibility Tips

Always connect label with for and id.
Group related inputs with fieldset and legend.
Use clear placeholder text and error messages.

Forms allow users to send data to the server.

Semantic HTML

Semantic HTML uses meaningful tags that describe the purpose of content. This improves accessibility, SEO, and code readability.

Common Semantic Elements

<header>Site header</header>
<nav>Main navigation</nav>
<main>Primary content</main>
<section>Related group of content</section>
<article>Independent article</article>
<aside>Sidebar or related info</aside>
<footer>Footer content</footer>

When to Use section vs article

Use <section> for grouped content with a heading. Use <article> for standalone, reusable content (blog post, news item).

Example Page Layout

<header>
  <h1>Tech News</h1>
  <nav>...</nav>
</header>
<main>
  <article>
    <h2>AI in 2025</h2>
    <p>Article content...</p>
  </article>
  <aside>Trending topics</aside>
</main>
<footer>© 2025</footer>

Benefits

Screen readers understand structure better.
Search engines can index content more accurately.
Code becomes easier to maintain and style.

Links & Navigation

Links connect pages and sections, while navigation groups related links for usability. Use semantic <nav> and clear link text.

Basic Links

<a href="https://example.com">Visit Example</a>
<a href="/about">About Us</a>

Opening in New Tab

<a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN Docs</a>

Page Anchors

Link to sections using IDs.

<a href="#intro">Go to Introduction</a>
...
<section id="intro">...</section>

Accessibility Tips

Use descriptive text (avoid “click here”).
Ensure links are keyboard accessible.
Use aria-label when link text isn’t clear.

Lists

Lists organize related items. Use unordered lists for groups without order, ordered lists for steps or rankings, and description lists for term-definition pairs.

Unordered and Ordered Lists

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

<ol>
  <li>Sign up</li>
  <li>Verify email</li>
  <li>Complete profile</li>
</ol>

Nested Lists

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

Description List

<dl>
  <dt>HTML</dt>
  <dd>Structure of a web page</dd>
  <dt>CSS</dt>
  <dd>Styling and layout</dd>
</dl>

Best Practices

Use lists for real lists (not for layout).
Keep nesting levels reasonable for readability.
Use ordered lists only when sequence matters.

HTML5 New Features

HTML5 introduced semantic elements, richer media support, new form controls, and APIs that enable modern web applications without plugins.

<video>, <audio>, <canvas>, <figure>
New input types: date, email, color, range
Local storage & semantic elements

1) Semantic Elements

<header>...</header>
<main>...</main>
<section>...</section>
<article>...</article>
<footer>...</footer>

2) Audio and Video

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>

<video controls width="500">
  <source src="movie.mp4" type="video/mp4">
</video>

3) Canvas (2D Graphics)

<canvas id="box" width="200" height="100"></canvas>
<script>
  const c = document.getElementById("box");
  const ctx = c.getContext("2d");
  ctx.fillStyle = "orange";
  ctx.fillRect(10, 10, 150, 70);
</script>

4) New Form Controls

<input type="email" required>
<input type="date">
<input type="range" min="0" max="100">

5) Storage APIs

Store small amounts of data in the browser.

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");

SEO & Accessibility

Good SEO and accessibility go hand in hand. Semantic structure helps search engines and screen readers understand your content clearly.

1) Semantic Structure

Use correct heading order (h1 to h6).
Use landmark elements: header, nav, main, footer.
Group content with section and article.

2) Metadata

<meta name="description" content="Learn HTML from basics to advanced topics.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3) Images and Media

Always include meaningful alt text for images.
Use captions with figure and figcaption.

4) Forms and Labels

<label for="email">Email</label>
<input id="email" type="email" name="email">

5) ARIA (When Needed)

Only use ARIA if native HTML cannot express the meaning.

<button aria-label="Close">✖</button>

6) Keyboard and Contrast

Ensure all interactive elements are reachable by keyboard.
Maintain sufficient color contrast for readability.

Introduction

What is HTML?

Why HTML Matters

HTML Elements and Attributes

Semantics vs Presentation

Minimal Page Example

HTML Basics

HTML Document Structure

Tags & Elements

Essential Head Tags

Block vs Inline Elements

Common Structural Elements

Attributes and Global Attributes

Text & Formatting

Headings and Paragraphs

Emphasis and Importance

Lists

Links

Other Useful Text Tags

Images & Media

1) Images

2) Responsive Images

3) Figure and Caption

4) Audio

5) Video

6) Common Pitfalls

Tables

Basic Table

Table with Head, Body, and Footer

Rowspan and Colspan

Accessibility Tips

Forms & Input

Basic Form

Common Input Types

Textarea and Select

Radio and Checkbox

Validation Attributes

Accessibility Tips

Semantic HTML

Common Semantic Elements

When to Use section vs article

Example Page Layout

Benefits

Links & Navigation

Basic Links

Opening in New Tab

Page Anchors

Navigation Menu

Accessibility Tips

Lists

Unordered and Ordered Lists

Nested Lists

Description List

Best Practices

HTML5 New Features

1) Semantic Elements

2) Audio and Video

3) Canvas (2D Graphics)

4) New Form Controls

5) Storage APIs

SEO & Accessibility

1) Semantic Structure

2) Metadata

3) Images and Media

4) Forms and Labels

5) ARIA (When Needed)

6) Keyboard and Contrast