Introduction to HTML

Beginner · 5 min read

HTML (HyperText Markup Language) is the backbone of every webpage. It defines the structure and meaning of web content using elements represented by tags. HTML is not a programming language — it is a markup language that tells the browser how to display content.

What is HTML?

HTML stands for HyperText Markup Language
Describes the structure of a web page semantically
Consists of a series of elements/tags
Browsers read HTML and render it visually
Current version: HTML5 (living standard by WHATWG)

Your First HTML Page

<!-- Minimal valid HTML5 document -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to my first HTML page.</p>
</body>
</html>

💡 DOCTYPE — <!DOCTYPE html> tells the browser this is an HTML5 document. Always include it as the very first line.

How Browsers Work

When you open an HTML file, the browser parses the tags top-to-bottom, builds a DOM (Document Object Model) tree, and paints the visual result. CSS styles the DOM; JavaScript can query and modify it dynamically.

Document Structure

Beginner · 6 min read

Every HTML page follows a standard structure made of nested elements. Understanding this skeleton is the foundation of all web development.

Core Structure

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Metadata: not visible on page -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title (shown in tab)</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!-- Visible page content goes here -->
  <header>...</header>
  <main>...</main>
  <footer>...</footer>

  <script src="app.js"></script>
</body>
</html>

Key Points

<html> — root element; lang attribute improves accessibility & SEO
<head> — metadata, links to CSS/fonts, page title
<body> — everything users see
Scripts are placed at the end of <body> so they don't block rendering
UTF-8 charset handles all languages and special characters

⚠️ The viewport meta tag is critical for mobile. Without it, mobile browsers zoom out to desktop width and the site looks broken.

Text Elements

Beginner · 7 min read

HTML provides a rich set of text elements that convey meaning (semantics) in addition to appearance.

Headings

<h1>Main page title (one per page)</h1>
<h2>Section heading</h2>
<h3>Sub-section heading</h3>
<h4> ... </h4>
<h5> ... </h5>
<h6>Lowest level heading</h6>

Paragraphs & Inline Elements

<p>A paragraph of text.</p>

<p>Text can be <strong>bold/important</strong>,
   <em>italic/emphasized</em>,
   <mark>highlighted</mark>,
   <del>strikethrough</del>,
   <ins>underlined/inserted</ins>,
   <sub>subscript</sub>, <sup>superscript</sup>.</p>

<code>inline code</code>
<pre><code>preformatted / multi-line code</code></pre>
<blockquote>A long quotation from another source.</blockquote>
<abbr title="HyperText Markup Language">HTML</abbr>
<br>  <!-- line break (use sparingly) -->
<hr>  <!-- horizontal rule / thematic break -->

💡 Prefer <strong> over <b> and <em> over <i> — they carry semantic meaning (importance / emphasis) that screen readers announce.

Links & Navigation

Beginner · 6 min read

The <a> (anchor) element creates hyperlinks — the foundation of the web.

Basic Links

<!-- External link (opens in new tab) -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</a>

<!-- Internal / relative link -->
<a href="/about">About Us</a>

<!-- Anchor to section on same page -->
<a href="#section-id">Jump to Section</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>

<!-- Phone link (mobile-friendly) -->
<a href="tel:+919999999999">Call Us</a>

<!-- Download link -->
<a href="/files/resume.pdf" download="My_Resume.pdf">Download CV</a>

⚠️ Always add rel="noopener noreferrer" when using target="_blank" — it prevents the new tab from accessing your page via window.opener (a security risk).

Navigation Pattern

<nav aria-label="Main Navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Images & Media

Beginner · 8 min read

The <img> Element

<!-- Basic image -->
<img src="/images/photo.jpg"
     alt="A beautiful landscape"
     width="800"
     height="600"
     loading="lazy">

<!-- Responsive image with srcset -->
<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Responsive photo">

<!-- Modern WebP with fallback -->
<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Photo with WebP fallback">
</picture>

<!-- Figure with caption -->
<figure>
  <img src="chart.png" alt="Sales chart for Q3">
  <figcaption>Fig 1: Q3 Sales Performance</figcaption>
</figure>

💡 Always include a meaningful alt attribute — it's read by screen readers and shown if the image fails to load. For decorative images use alt="".

Always specify width and height attributes to prevent Cumulative Layout Shift (CLS) — a Core Web Vital that affects your Google ranking.

Lists

Beginner · 5 min read

<!-- Unordered list -->
<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Nested list:
    <ul>
      <li>Sub-item</li>
    </ul>
  </li>
</ul>

<!-- Ordered list -->
<ol start="1" type="1">  <!-- type: 1, A, a, I, i -->
  <li>First step</li>
  <li>Second step</li>
</ol>

<!-- Description list (term / definition pairs) -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Tables

Beginner · 8 min read

Tables are for tabular data — rows and columns of related information. Never use tables for layout.

Full Table Structure

<table>
  <caption>Monthly Sales Report</caption>

  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Revenue</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>January</td>
      <td>₹1,20,000</td>
      <td>+12%</td>
    </tr>
    <tr>
      <td>February</td>
      <td colspan="2">Data not available</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Total</td>
      <td>₹1,20,000</td>
      <td>—</td>
    </tr>
  </tfoot>
</table>

💡 Use scope="col" or scope="row" on <th> elements so screen readers know which cells each header describes.

Forms & Inputs

Intermediate · 10 min read

HTML forms collect user input and send it to a server. The <form> element wraps all form controls.

Basic Form

<form action="/submit" method="POST" novalidate>

  <!-- Text input -->
  <label for="name">Full Name</label>
  <input type="text" id="name" name="name"
         placeholder="Enter your name"
         required minlength="2" maxlength="50">

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

  <!-- Textarea -->
  <label for="msg">Message</label>
  <textarea id="msg" name="msg" rows="5" required></textarea>

  <!-- Select dropdown -->
  <label for="role">Role</label>
  <select id="role" name="role">
    <option value="">-- Select role --</option>
    <option value="dev">Developer</option>
    <option value="design">Designer</option>
  </select>

  <!-- Checkbox -->
  <input type="checkbox" id="agree" name="agree" required>
  <label for="agree">I agree to the terms</label>

  <!-- Submit -->
  <button type="submit">Submit</button>
</form>

⚠️ Always pair every <input> with a <label> using matching for/id — this makes clicking the label focus the input and is essential for accessibility.

Input Types & Validation

Intermediate · 8 min read

<input type="text">       <!-- single-line text -->
<input type="email">      <!-- validates email format -->
<input type="password">   <!-- hidden characters -->
<input type="number" min="1" max="100" step="1">
<input type="tel" pattern="[0-9]{10}">
<input type="url">        <!-- validates URL format -->
<input type="date">       <!-- date picker -->
<input type="time">       <!-- time picker -->
<input type="color">      <!-- color picker -->
<input type="range" min="0" max="100">  <!-- slider -->
<input type="file" accept=".pdf,.jpg,.png" multiple>
<input type="checkbox">   <!-- multi-select boolean -->
<input type="radio" name="group">     <!-- single-select in group -->
<input type="search">     <!-- search field with clear button -->
<input type="hidden" value="csrf_token_here">

HTML5 Validation Attributes

required — field must not be empty
min / max — numeric or date range
minlength / maxlength — character count
pattern — custom regex validation
step — increments for number/range
autocomplete="off" — disable browser autofill

Semantic HTML5 Elements

Intermediate · 9 min read

Semantic elements clearly describe their meaning to both the browser and the developer. They improve SEO, accessibility, and code maintainability.

Page Structure Elements

<header>
  <!-- Site logo, main nav, hero banner -->
  <nav aria-label="Main">...</nav>
</header>

<main>
  <!-- Primary content (one per page) -->

  <article>
    <!-- Self-contained content: blog post, product card -->
    <h2>Article Title</h2>
    <p>...</p>
  </article>

  <section>
    <!-- Thematic grouping with a heading -->
    <h2>Section Title</h2>
  </section>

  <aside>
    <!-- Sidebar, related links, ads -->
  </aside>
</main>

<footer>
  <!-- Copyright, social links, legal -->
</footer>

<!-- Other semantic elements -->
<time datetime="2024-06-15">June 15, 2024</time>
<address>Greater Noida, UP, India</address>
<details>
  <summary>Click to expand</summary>
  <p>Hidden content revealed on click.</p>
</details>

💡 Search engines use semantic tags to understand page hierarchy. A page with correct use of <article>, <section>, and heading levels ranks better than one using only <div>.

Audio & Video

Intermediate · 7 min read

<!-- Video with fallback formats -->
<video controls autoplay muted loop
       width="800" poster="thumbnail.jpg">
  <source src="video.mp4"  type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Your browser does not support HTML5 video.</p>
</video>

<!-- Audio player -->
<audio controls preload="none">
  <source src="song.mp3"  type="audio/mpeg">
  <source src="song.ogg"  type="audio/ogg">
</audio>

<!-- Embedded YouTube video (iframe) -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
        title="YouTube video"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
        allowfullscreen></iframe>

⚠️ Use autoplay only with muted — browsers block autoplay with audio by default unless the user has interacted with the page.

HTML5 Canvas API

Advanced · 10 min read

The <canvas> element is a drawable surface. You draw on it with JavaScript using a 2D context.

<canvas id="myCanvas" width="600" height="400"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // Draw a rectangle
  ctx.fillStyle = '#1a6aff';
  ctx.fillRect(50, 50, 200, 100);

  // Draw a circle
  ctx.beginPath();
  ctx.arc(400, 100, 60, 0, Math.PI * 2);
  ctx.fillStyle = '#f59e0b';
  ctx.fill();

  // Draw text
  ctx.font = 'bold 28px Arial';
  ctx.fillStyle = '#0f1b2d';
  ctx.fillText('Hello Canvas!', 50, 250);

  // Draw a line
  ctx.beginPath();
  ctx.moveTo(50, 300);
  ctx.lineTo(550, 300);
  ctx.strokeStyle = '#ef4444';
  ctx.lineWidth = 3;
  ctx.stroke();
</script>

Inline SVG

Advanced · 8 min read

SVG (Scalable Vector Graphics) can be embedded directly in HTML. Unlike Canvas, SVG elements are part of the DOM and can be styled with CSS and scripted with JS.

<!-- Basic SVG shapes -->
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

  <!-- Rectangle -->
  <rect x="10" y="10" width="120" height="80"
        fill="#1a6aff" rx="10"/>

  <!-- Circle -->
  <circle cx="200" cy="60" r="50" fill="#f59e0b"/>

  <!-- Line -->
  <line x1="10" y1="150" x2="390" y2="150"
        stroke="#ef4444" stroke-width="3"/>

  <!-- Path -->
  <path d="M 300 100 L 380 50 L 380 150 Z" fill="#10b981"/>

  <!-- Text -->
  <text x="10" y="190" font-size="14" fill="#374151">SVG is resolution-independent</text>
</svg>

💡 Use SVG for logos, icons, and charts — they look sharp on retina/4K screens. Use Canvas for pixel manipulation, games, and real-time graphics.

Web Storage API

Advanced · 8 min read

HTML5 provides two storage mechanisms accessible via JavaScript: localStorage and sessionStorage. Both store key-value pairs as strings.

// localStorage — persists after browser closes
localStorage.setItem('username', 'Aftab');
localStorage.setItem('prefs', JSON.stringify({ theme: 'dark' }));

const name  = localStorage.getItem('username');   // 'Aftab'
const prefs = JSON.parse(localStorage.getItem('prefs'));

localStorage.removeItem('username');
localStorage.clear();   // remove everything

// sessionStorage — cleared when tab closes
sessionStorage.setItem('step', '2');

// Check storage size (approximate)
const size = new Blob(Object.values(localStorage)).size;
console.log(`Storage used: ${size} bytes`);

⚠️ Never store sensitive data (passwords, tokens) in localStorage — it's accessible by any JavaScript on the page including injected scripts (XSS). Use secure HttpOnly cookies for auth tokens.

Meta Tags & SEO

Advanced · 10 min read

Meta tags live in <head> and provide metadata about the page to search engines and social platforms.

<head>
  <!-- Character encoding -->
  <meta charset="UTF-8">

  <!-- Viewport for responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- SEO basics -->
  <title>Service Name | Company | Location</title>
  <meta name="description"
        content="Short, compelling description (120–160 chars)">
  <meta name="keywords" content="keyword1, keyword2">
  <link rel="canonical" href="https://yoursite.com/this-page">

  <!-- Open Graph (Facebook, LinkedIn, WhatsApp) -->
  <meta property="og:title"       content="Page Title">
  <meta property="og:description"  content="Description for social preview">
  <meta property="og:image"       content="https://yoursite.com/og.png">
  <meta property="og:url"         content="https://yoursite.com/this-page">
  <meta property="og:type"        content="website">

  <!-- Twitter Card -->
  <meta name="twitter:card"        content="summary_large_image">
  <meta name="twitter:title"       content="Page Title">
  <meta name="twitter:image"       content="https://yoursite.com/og.png">

  <!-- Robots (default: index, follow) -->
  <meta name="robots" content="index, follow">

  <!-- JSON-LD Structured Data (Google rich results) -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Seven Digital Services",
    "url": "https://sevendigital.in"
  }
  </script>
</head>

Accessibility & ARIA

Advanced · 12 min read

Web accessibility ensures people with disabilities can use your site. The WCAG 2.1 guidelines define accessibility standards. ARIA (Accessible Rich Internet Applications) attributes fill semantic gaps.

Key ARIA Attributes

<!-- Describe the purpose of interactive elements -->
<button aria-label="Close modal">✕</button>

<!-- Live regions: announce dynamic changes to screen readers -->
<div aria-live="polite" aria-atomic="true">
  Form submitted successfully!
</div>

<!-- Hide decorative elements from screen readers -->
<span aria-hidden="true">🎉</span>

<!-- Navigation landmark -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li aria-current="page">Tutorials</li>
  </ol>
</nav>

<!-- Tab-accessible custom widget -->
<div role="tablist">
  <button role="tab" aria-selected="true"  aria-controls="panel-1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2">Tab 2</button>
</div>
<div id="panel-1" role="tabpanel">Content 1</div>
<div id="panel-2" role="tabpanel" hidden>Content 2</div>

Accessibility Checklist

Sufficient color contrast (4.5:1 for text)
All images have meaningful alt text
Keyboard navigation works (Tab, Enter, Space, arrow keys)
Focus indicators are visible (:focus-visible)
Form inputs have labels
Error messages are descriptive and linked to the input
Page has a logical heading structure (h1 → h2 → h3)

Templates & Web Components

Advanced · 10 min read

The <template> element holds HTML that is not rendered immediately but can be cloned and inserted via JavaScript. Combined with Custom Elements, it forms the basis of Web Components.

<!-- Define a reusable template -->
<template id="card-template">
  <div class="card">
    <h2 class="card-title"></h2>
    <p  class="card-body"></p>
  </div>
</template>

<div id="cards"></div>

<script>
  const tmpl = document.getElementById('card-template');
  const data = [
    { title: 'Java', body: 'Backend powerhouse' },
    { title: 'React', body: 'UI library' }
  ];

  data.forEach(item => {
    const clone = tmpl.content.cloneNode(true);
    clone.querySelector('.card-title').textContent = item.title;
    clone.querySelector('.card-body').textContent = item.body;
    document.getElementById('cards').appendChild(clone);
  });
</script>

HTML Best Practices

Advanced · 8 min read

Do's & Don'ts

✅ Use semantic elements (header, main, article) instead of generic divs everywhere
✅ One <h1> per page — it defines the page topic for SEO
✅ Validate HTML at validator.w3.org
✅ Use lowercase tag and attribute names
✅ Always close tags, even optional ones (</li>, </tr>)
✅ Prefer loading="lazy" on below-the-fold images
✅ Use rel="preload" for critical fonts/scripts
❌ Don't use inline styles — use CSS classes
❌ Don't use <table> for page layout
❌ Don't use deprecated elements (<font>, <center>, <marquee>)
❌ Don't skip heading levels (h1 → h3 skipping h2)

Performance Tips

Put <script> tags at end of <body> or use defer / async
Use <link rel="preconnect"> for third-party origins (Google Fonts, CDNs)
Minify HTML in production (Spring Boot: compress with Thymeleaf + htmlcompressor)
Use loading="lazy" on images and iframes below the fold
Serve WebP images with <picture> + <source type="image/webp">