Home - HTML Tutorial

HTML Tutorial - Complete A to Z Guide

HTML (HyperText Markup Language) is the backbone of every web page. This guide covers every concept from absolute basics to advanced HTML5 features with live examples.

What is HTML?

HTML stands for HyperText Markup Language. It describes the structure of a web page using a series of elements. Browsers read HTML and render the content visually.

Key Facts HTML is NOT a programming language - it is a markup language. It tells the browser what content is, not how to compute it.
  • HTML was invented by Tim Berners-Lee in 1991.
  • The current standard is HTML5 (2014, updated continuously).
  • HTML files have the .html or .htm extension.
  • HTML works alongside CSS (styling) and JavaScript (behavior).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My First Web Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>
</body>
</html>
? Try It Yourself
Browser Output

Hello, World!

This is my first web page.

HTML Editors

You can write HTML in any text editor. Recommended tools:

EditorTypeBest For
VS CodeDesktop (free)Professional development
EduSmartUp EditorOnline (this site)Quick practice, no install
Sublime TextDesktopFast, lightweight editing
Notepad++Desktop (Windows)Beginners on Windows
BracketsDesktopLive preview feature
Tip Use our built-in editor at EduSmartUp Try It to experiment without any setup.

HTML Basic Structure

Every HTML page starts with a DOCTYPE declaration followed by the root <html> element containing <head> and <body>.

HTML
<!DOCTYPE html>          <!-- Declares HTML5 -->
<html lang="en">         <!-- Root element -->
<head>                   <!-- Metadata section -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>                   <!-- Visible content -->
  <h1>Heading</h1>
  <p>Paragraph text here.</p>
</body>
</html>
► Try It Yourself
TagPurpose
<!DOCTYPE html>Tells browser this is an HTML5 document
<html>Root element - wraps the entire page
<head>Contains metadata (title, meta, link, script, style)
<body>All visible page content goes here

HTML Elements

An HTML element is defined by a start tag, some content, and an end tag:

Syntax
<tagname> content goes here </tagname>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<br>              <!-- Self-closing element -->
<img src="pic.jpg" alt="A picture" />   <!-- Void element -->
► Try It Yourself
Note Some elements are self-closing (void elements) and have no closing tag: <br>, <hr>, <img>, <input>, <meta>, <link>.

Nested elements - elements can contain other elements (must close in correct order):

HTML
<div>
  <p>This is a <strong>nested</strong> element.</p>
</div>
► Try It Yourself

HTML Attributes

Attributes provide additional information about elements. They appear in the start tag as name="value" pairs.

HTML
<a href="https://edusmartup.com" target="_blank">Visit Us</a>
<img src="photo.jpg" alt="A photo" width="300" height="200">
<p id="intro" class="highlight" style="color:blue;">Hello</p>
<input type="text" name="username" placeholder="Enter name" required>
► Try It Yourself
AttributeDescriptionExample
hrefURL for links/resourceshref="page.html"
srcSource URL for images/scriptssrc="img.png"
altAlternate text for imagesalt="logo"
idUnique identifier for elementid="main"
classCSS class name(s)class="btn primary"
styleInline CSS stylesstyle="color:red"
titleTooltip text on hovertitle="Click me"
targetWhere to open linktarget="_blank"
disabledDisables form elementdisabled
requiredField must be filledrequired
data-*Custom data attributesdata-id="42"
langDeclares element languagelang="en"

HTML Headings

HTML has 6 heading levels from <h1> (most important) to <h6> (least important). Headings define document structure and are crucial for SEO and accessibility.

HTML
<h1>Heading 1 - Page Title</h1>
<h2>Heading 2 - Section Title</h2>
<h3>Heading 3 - Sub-section</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
► Try It Yourself
Output

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
SEO Rule Use only one <h1> per page - it should contain the main keyword. Use <h2>-<h6> for sub-sections.

HTML Paragraphs

The <p> element defines a paragraph. Browsers add spacing automatically before and after paragraphs.

HTML
<p>This is the first paragraph.</p>
<p>This is the second paragraph. Multiple
spaces and line breaks are collapsed to one space.</p>

<!-- Line break (no new paragraph) -->
<p>Line one.<br>Line two same paragraph.</p>

<!-- Horizontal rule / divider -->
<hr>

<!-- Preformatted text (preserves spaces & newlines) -->
<pre>
  Name:  Alice
  Score: 100
</pre>
► Try It Yourself

HTML Styles

CSS can be applied to HTML in three ways:

HTML - 3 Ways to Add CSS
<!-- 1. INLINE STYLE (highest specificity) -->
<p style="color: red; font-size: 18px;">Red text</p>

<!-- 2. INTERNAL STYLE (in <head>) -->
<style>
  p { color: blue; font-family: Arial; }
</style>

<!-- 3. EXTERNAL STYLESHEET (recommended) -->
<link rel="stylesheet" href="style.css">
► Try It Yourself
Best Practice Always use external stylesheets (<link>) for real projects. Keep HTML and CSS separate.

HTML Text Formatting Tags

HTML provides tags to format text - bold, italic, underline, strikethrough, superscript, subscript, and more.

HTML
<b>Bold text</b>                     - visual only
<strong>Important text</strong>     - semantic importance
<i>Italic text</i>                  - visual only
<em>Emphasized text</em>           - semantic emphasis
<u>Underlined text</u>
<s>Strikethrough text</s>
<del>Deleted text</del>
<ins>Inserted text</ins>
<mark>Highlighted text</mark>
<small>Smaller text</small>
<big>Bigger text</big>
H<sub>2</sub>O - subscript
E = mc<sup>2</sup> - superscript
<code>print("Hello")</code>         - inline code
<kbd>Ctrl + S</kbd>                 - keyboard input
<samp>Error: file not found</samp>  - sample output
<var>x</var> = <var>y</var> + 2    - variable
<abbr title="HyperText Markup Language">HTML</abbr>
► Try It Yourself
Output

Bold | Strong | Italic | Emphasized | Underline | Strikethrough | Deleted | Inserted | Highlighted | Small | H2O | mc2 | code | Ctrl+S

HTML Quotations

HTML
<!-- Inline short quotation -->
<q>To be or not to be.</q>

<!-- Block quotation -->
<blockquote cite="https://example.com">
  The best way to get started is to quit talking and begin doing.
</blockquote>

<!-- Abbreviation with tooltip -->
<abbr title="World Wide Web">WWW</abbr>

<!-- Contact / address -->
<address>
  Written by <a href="mailto:hello@edu.com">EduSmartUp Team</a>
</address>

<!-- Citation (title of a work) -->
<cite>The Great Gatsby</cite>

<!-- Bi-directional text override -->
<bdo dir="rtl">This will be right-to-left</bdo>
► Try It Yourself

HTML Comments

Comments are not displayed in the browser. They are used to document code, leave notes, or temporarily disable HTML.

HTML
<!-- This is a single-line comment -->

<!--
  This is a
  multi-line comment
-->

<p>This paragraph is visible.</p>
<!-- <p>This paragraph is hidden (commented out).</p> -->
► Try It Yourself
Security Note Never put passwords, API keys, or sensitive data inside HTML comments - they are visible to anyone who views source.

HTML Colors

Colors in HTML/CSS can be expressed in 5 formats:

CSS / HTML
/* 1. Named Colors */
color: red;  color: green;  color: royalblue;  color: tomato;

/* 2. HEX (most common) */
color: #FF0000;   /* red */
color: #04AA6D;   /* EduSmartUp green */
color: #282A35;   /* dark navy */

/* 3. RGB */
color: rgb(255, 0, 0);      /* red */
color: rgb(4, 170, 109);    /* green */

/* 4. RGBA (with opacity) */
color: rgba(255, 0, 0, 0.5);   /* 50% transparent red */

/* 5. HSL (Hue, Saturation, Lightness) */
color: hsl(148, 95%, 34%);     /* green */

/* 6. HSLA */
color: hsla(148, 95%, 34%, 0.7);
► Try It Yourself
Tomato
#FF6347
RoyalBlue
#4169E1
Green
#04AA6D
DarkOrange
#FF8C00
DarkOrchid
#9932CC
Navy
#282A35

HTML Images

The <img> element embeds an image. Required: src and alt.

HTML
<!-- Basic image -->
<img src="photo.jpg" alt="A scenic photo" width="400" height="300">

<!-- Responsive image (CSS) -->
<img src="photo.jpg" alt="Responsive" style="max-width:100%; height:auto;">

<!-- Image with link -->
<a href="gallery.html">
  <img src="thumb.jpg" alt="Gallery thumbnail">
</a>

<!-- Figure with caption -->
<figure>
  <img src="chart.png" alt="Sales chart 2025">
  <figcaption>Fig 1: Sales growth in 2025</figcaption>
</figure>

<!-- Picture element (responsive art direction) -->
<picture>
  <source media="(max-width:600px)" srcset="small.jpg">
  <source media="(max-width:1024px)" srcset="medium.jpg">
  <img src="large.jpg" alt="Responsive image">
</picture>

<!-- Lazy loading -->
<img src="photo.jpg" alt="Lazy loaded" loading="lazy">
► Try It Yourself
Accessibility Always include a meaningful alt attribute. Screen readers use it. For decorative images, use alt="".

HTML Favicon

A favicon is the small icon shown in the browser tab. Add it in the <head> section:

HTML
<head>
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Apple touch icon -->
  <link rel="apple-touch-icon" href="apple-icon.png">
</head>
► Try It Yourself

HTML Tables

Tables organize data in rows and columns using <table>, <tr>, <th>, and <td>.

HTML
<table border="1">
  <caption>Student Grades</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Subject</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>HTML</td>
      <td>A+</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>CSS</td>
      <td>B+</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Average</td>
      <td>A</td>
    </tr>
  </tfoot>
</table>

<!-- Merging cells -->
<td colspan="2">Spans 2 columns</td>
<td rowspan="3">Spans 3 rows</td>
► Try It Yourself
Table Output
NameSubjectGrade
AliceHTMLA+
BobCSSB+
AverageA

HTML Lists

HTML
<!-- Unordered List (bullet points) -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered List (numbered) -->
<ol type="1">  <!-- type: 1, A, a, I, i -->
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JavaScript</li>
</ol>

<!-- Definition List -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - the structure of web pages.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - the presentation layer.</dd>
</dl>

<!-- Nested List -->
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>
► Try It Yourself

Block vs Inline Elements

Block ElementsInline Elements
Start on a new lineFlow within text
Take full available widthTake only needed width
<div>, <p>, <h1-h6>, <ul>, <table>, <form>, <section>, <article>, <header>, <footer><span>, <a>, <img>, <strong>, <em>, <input>, <label>, <button>

div & span

<div> is a generic block-level container. <span> is a generic inline container. Both have no default styling.

HTML
<div id="header" style="background:#04AA6D; color:white; padding:20px;">
  <h1>EduSmartUp</h1>
</div>

<p>The sky is <span style="color:blue; font-weight:bold;">bright blue</span> today.</p>
► Try It Yourself

HTML Classes

The class attribute applies CSS styles and JS behavior to multiple elements.

HTML + CSS
<!-- HTML -->
<div class="card highlight">First Card</div>
<div class="card">Second Card</div>
<p class="highlight">Important paragraph</p>

<!-- CSS -->
<style>
  .card      { padding: 20px; border: 1px solid #ccc; margin: 10px; }
  .highlight { background: yellow; font-weight: bold; }
</style>
► Try It Yourself

HTML IDs

An id is a unique identifier for one element on the page. Used for CSS, JS, and anchor links.

HTML
<!-- HTML -->
<h2 id="about">About Us</h2>
<div id="main-nav">Navigation</div>

<!-- CSS -->
#main-nav { background: #282A35; color: white; }

<!-- JS -->
const nav = document.getElementById("main-nav");

<!-- Anchor link to this id -->
<a href="#about">Go to About section</a>
► Try It Yourself

HTML iframes

The <iframe> element embeds another HTML document or webpage within the current page.

HTML
<iframe src="https://example.com"
        width="600" height="400"
        title="Example website"
        frameborder="0"
        allowfullscreen>
</iframe>

<!-- Embed YouTube video -->
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>
► Try It Yourself

HTML Forms

Forms collect user input. The <form> element wraps all form controls. On submission, data is sent to a server via action URL using GET or POST.

HTML
<form action="/submit" method="POST" enctype="multipart/form-data">

  <!-- Text field -->
  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" placeholder="John Doe" required>

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

  <!-- Password -->
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd" minlength="8" required>

  <!-- Dropdown -->
  <label for="lang">Favorite Language:</label>
  <select id="lang" name="lang">
    <option value="">-- Select --</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </select>

  <!-- Radio buttons -->
  <p>Experience level:</p>
  <input type="radio" id="beg" name="level" value="beginner">
  <label for="beg">Beginner</label>
  <input type="radio" id="int" name="level" value="intermediate">
  <label for="int">Intermediate</label>

  <!-- Checkboxes -->
  <p>Skills:</p>
  <input type="checkbox" id="htmlCb" name="skills" value="html">
  <label for="htmlCb">HTML</label>
  <input type="checkbox" id="cssCb" name="skills" value="css">
  <label for="cssCb">CSS</label>

  <!-- Textarea -->
  <label for="bio">Bio:</label>
  <textarea id="bio" name="bio" rows="5" cols="40" placeholder="Tell us about yourself..."></textarea>

  <!-- File upload -->
  <label for="cv">Upload CV:</label>
  <input type="file" id="cv" name="cv" accept=".pdf,.doc">

  <!-- Submit / Reset -->
  <button type="submit">Submit Form</button>
  <button type="reset">Clear</button>

</form>
► Try It Yourself

HTML Input Types

type=DescriptionExample
textSingle-line text<input type="text">
emailEmail address (validates format)<input type="email">
passwordMasked text input<input type="password">
numberNumeric input with up/down<input type="number" min="1" max="100">
rangeSlider control<input type="range" min="0" max="100">
dateDate picker<input type="date">
timeTime picker<input type="time">
datetime-localDate and time picker<input type="datetime-local">
monthMonth/year picker<input type="month">
weekWeek picker<input type="week">
colorColor picker<input type="color">
fileFile upload<input type="file" multiple>
checkboxTick box<input type="checkbox" checked>
radioSingle choice from group<input type="radio" name="g">
submitSubmit button<input type="submit" value="Send">
resetReset all fields<input type="reset">
buttonClickable button<input type="button" value="Click">
hiddenHidden data sent with form<input type="hidden" name="csrf" value="...">
searchSearch field<input type="search">
telPhone number<input type="tel">
urlURL with validation<input type="url">
imageImage as submit button<input type="image" src="btn.png">

HTML Input Attributes

AttributeDescription
valueDefault value or button label
placeholderHint text shown when empty
requiredField must be filled before submit
disabledGrays out and prevents interaction
readonlyCannot be edited but is submitted
min / maxMin/max for number, date, range
stepIncrement step for number/range
maxlengthMaximum number of characters
minlengthMinimum number of characters
patternRegex validation pattern
multipleAllow multiple values (email, file)
autofocusAuto-focus this field on page load
autocompleteon | off - browser autocomplete
sizeVisible width in characters
listReferences a <datalist> for suggestions
formAssociates input with a form element

HTML Form Elements

HTML
<!-- SELECT dropdown -->
<select name="country">
  <optgroup label="Asia">
    <option value="in">India</option>
    <option value="jp">Japan</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="uk">UK</option>
  </optgroup>
</select>

<!-- DATALIST (autocomplete suggestions) -->
<input list="langs" name="language" placeholder="Type a language...">
<datalist id="langs">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="Python">
</datalist>

<!-- FIELDSET + LEGEND -->
<fieldset>
  <legend>Personal Info</legend>
  <label>Name: <input type="text" name="name"></label>
  <label>Age: <input type="number" name="age"></label>
</fieldset>

<!-- OUTPUT element -->
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="range" id="a" value="50"> +
  <input type="number" id="b" value="50"> =
  <output name="result">100</output>
</form>

<!-- PROGRESS bar -->
<label>Course completion:</label>
<progress value="70" max="100">70%</progress>

<!-- METER -->
<label>Disk usage:</label>
<meter value="6" min="0" max="10" low="3" high="8" optimum="2">6 out of 10</meter>
► Try It Yourself

HTML5 Semantic Elements

Semantic elements clearly describe their purpose to both the browser and the developer.

HTML5 Page Structure
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic Page</title>
</head>
<body>

  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <header><h1>Article Title</h1></header>
      <section>
        <h2>Introduction</h2>
        <p>Article content here...</p>
      </section>
      <section>
        <h2>Main Body</h2>
        <p>More content...</p>
      </section>
      <footer>Published: March 2026</footer>
    </article>

    <aside>
      <h3>Related Links</h3>
      <ul><li><a href="#">Related 1</a></li></ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 EduSmartUp</p>
  </footer>

</body>
</html>
► Try It Yourself
ElementPurpose
<header>Page or section header (logo, nav)
<nav>Navigation links block
<main>Primary content of the page (use once)
<article>Self-contained piece of content (blog post, news)
<section>Thematic grouping of content with heading
<aside>Side content (sidebar, callout)
<footer>Page or section footer (copyright, links)
<figure>Self-contained media (image, chart)
<figcaption>Caption for a figure
<details>Expandable/collapsible content
<summary>Heading for <details> element
<mark>Highlighted / relevant text
<time>Represents a time/date value
<dialog>Modal dialog box

HTML Audio & Video

HTML
<!-- Audio -->
<audio controls autoplay loop muted>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support audio.
</audio>

<!-- Video -->
<video width="640" height="360" controls poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <!-- Subtitles/Captions -->
  <track src="captions.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support video.
</video>
► Try It Yourself
AttributeDescription
controlsShows play, pause, volume
autoplayStarts playing automatically
loopRepeats indefinitely
mutedStarts muted
posterVideo thumbnail image
preloadauto | metadata | none

HTML Canvas

The <canvas> element is used to draw 2D graphics via JavaScript.

HTML + JavaScript
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #ccc;"></canvas>

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

  // Draw a filled rectangle
  ctx.fillStyle = "#04AA6D";
  ctx.fillRect(20, 20, 150, 100);

  // Draw a circle
  ctx.beginPath();
  ctx.arc(280, 70, 50, 0, Math.PI * 2);
  ctx.fillStyle = "#282A35";
  ctx.fill();

  // Draw text
  ctx.font = "20px Arial";
  ctx.fillStyle = "white";
  ctx.fillText("Canvas!", 240, 77);

  // Draw a line
  ctx.moveTo(20, 150);
  ctx.lineTo(380, 150);
  ctx.strokeStyle = "#FF6347";
  ctx.lineWidth = 3;
  ctx.stroke();
</script>
? Try Canvas

HTML SVG

SVG (Scalable Vector Graphics) defines vector-based graphics in XML format. SVG scales without quality loss.

HTML SVG
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Circle -->
  <circle cx="100" cy="100" r="80" fill="#04AA6D" stroke="#282A35" stroke-width="4"/>

  <!-- Text inside circle -->
  <text x="100" y="108" font-size="20" text-anchor="middle" fill="white">SVG</text>

  <!-- Rectangle -->
  <rect x="10" y="10" width="80" height="50" fill="none" stroke="#FF6347" stroke-width="2" rx="5"/>

  <!-- Line -->
  <line x1="10" y1="180" x2="190" y2="180" stroke="#ccc" stroke-width="2"/>

  <!-- Polygon -->
  <polygon points="160,20 190,60 130,60" fill="#4169E1"/>

  <!-- Ellipse -->
  <ellipse cx="60" cy="160" rx="40" ry="20" fill="#FF8C00"/>
</svg>
► Try It Yourself SVG

HTML Geolocation API

The Geolocation API lets you get the user's geographical position (requires permission).

JavaScript
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    function(position) {
      const lat = position.coords.latitude;
      const lon = position.coords.longitude;
      console.log(`Latitude: ${lat}, Longitude: ${lon}`);
    },
    function(error) {
      console.error("Geolocation error:", error.message);
    }
  );
} else {
  alert("Geolocation is not supported by this browser.");
}
► Try It Yourself

HTML Web Storage API

Web Storage provides two storage objects: localStorage (persistent) and sessionStorage (tab session only).

JavaScript
// ---- localStorage ---- persists after browser close
localStorage.setItem("username", "Alice");
localStorage.setItem("theme", "dark");
const user = localStorage.getItem("username");   // "Alice"
localStorage.removeItem("theme");
localStorage.clear();                             // remove all

// ---- sessionStorage ---- cleared when tab closes
sessionStorage.setItem("cart", JSON.stringify([{id:1,qty:2}]));
const cart = JSON.parse(sessionStorage.getItem("cart"));

// ---- Check storage availability ----
if (typeof Storage !== "undefined") {
  console.log("Web Storage is supported!");
}
► Try It Yourself

HTML Web Workers

Web Workers run JavaScript in a background thread so the UI doesn't freeze during heavy tasks.

JavaScript
// main.js
const worker = new Worker("worker.js");
worker.postMessage({ num: 1000000 });
worker.onmessage = (e) => {
  console.log("Result from worker:", e.data);
};

// worker.js
self.onmessage = function(e) {
  let sum = 0;
  for (let i = 0; i < e.data.num; i++) sum += i;
  self.postMessage(sum);
};
► Try It Yourself

HTML Meta Tags

Meta tags go inside <head> and provide metadata about the page (for browsers, SEO, social sharing).

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

  <!-- Viewport for responsive design (REQUIRED!) -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO description -->
  <meta name="description" content="Learn HTML A-Z on EduSmartUp - free web dev tutorials.">

  <!-- SEO keywords (less important now) -->
  <meta name="keywords" content="HTML, CSS, JavaScript, web development">

  <!-- Author -->
  <meta name="author" content="EduSmartUp">

  <!-- Refresh page every 30 seconds -->
  <meta http-equiv="refresh" content="30">

  <!-- Open Graph (Facebook, LinkedIn sharing) -->
  <meta property="og:title" content="EduSmartUp - Learn to Code">
  <meta property="og:description" content="Free web developer tutorials.">
  <meta property="og:image" content="https://edusmartup.com/og-image.png">
  <meta property="og:url" content="https://edusmartup.com">
  <meta property="og:type" content="website">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="EduSmartUp">
  <meta name="twitter:image" content="https://edusmartup.com/twitter-card.png">

  <!-- Prevent robots from indexing -->
  <meta name="robots" content="noindex, nofollow">

  <!-- Theme color for mobile browsers -->
  <meta name="theme-color" content="#04AA6D">
</head>
► Try It Yourself

HTML Responsive Web Design

Responsive design ensures a page looks good on all screen sizes - desktop, tablet, and mobile.

HTML + CSS
<!-- Step 1: Add viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Step 2: Use % or vw/vh units -->
<img src="photo.jpg" style="width: 100%; max-width: 800px;">

<!-- Step 3: Media Queries in CSS -->
<style>
  .container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

  /* Tablet */
  @media (max-width: 768px) {
    .container { grid-template-columns: 1fr 1fr; }
  }

  /* Mobile */
  @media (max-width: 480px) {
    .container { grid-template-columns: 1fr; }
  }
</style>
► Try It Yourself

HTML Entities

HTML entities are used to display reserved characters or characters not on a keyboard.

CharacterEntity NameEntity NumberDescription
&&amp;&#38;Ampersand
<&lt;&#60;Less than
>&gt;&#62;Greater than
"&quot;&#34;Double quote
'&apos;&#39;Apostrophe
 &nbsp;&#160;Non-breaking space
©&copy;&#169;Copyright
®&reg;&#174;Registered trademark
™&trade;&#8482;Trademark
€&euro;&#8364;Euro sign
£&pound;&#163;Pound sign
¥&yen;&#165;Yen sign
←&larr;&#8592;Left arrow
→&rarr;&#8594;Right arrow
♥&hearts;&#9829;Heart
✓&check;&#10003;Check mark

HTML Symbols & Emojis

Use Unicode code points for symbols and emojis directly in HTML (page must use UTF-8 encoding).

HTML
<!-- Math symbols -->
&#8721; = ?  &#960; = p  &#8734; = 8

<!-- Currency -->
&#36; = $  &#8364; = -  &#163; = -  &#8377; = ?

<!-- Emojis (direct or code point) -->
??  ?  ?  ?  ??  ??  ??
&#128640; = ??   &#9989; = ?
► Try It Yourself

HTML Accessibility (ARIA)

Accessible HTML helps users with disabilities - screen readers, keyboard navigation, etc.

HTML - ARIA Attributes
<!-- ARIA Roles -->
<div role="navigation" aria-label="Main navigation">...</div>
<div role="main">...</div>

<!-- ARIA Labels -->
<button aria-label="Close dialog">?</button>
<input type="search" aria-label="Search tutorials">

<!-- ARIA Describedby -->
<input type="password" aria-describedby="pwd-help">
<small id="pwd-help">Password must be at least 8 characters.</small>

<!-- ARIA Expanded (for menus) -->
<button aria-expanded="false" aria-controls="dropdown">Menu</button>
<ul id="dropdown">...</ul>

<!-- ARIA Live Region (dynamic updates) -->
<div aria-live="polite" id="status"></div>

<!-- Tab order -->
<a href="#" tabindex="1">First focusable</a>
<a href="#" tabindex="-1">Skip in tab order</a>

<!-- Skip navigation link (screen reader / keyboard) -->
<a href="#main" class="skip-link">Skip to main content</a>
► Try It Yourself
Rule Always use semantic HTML first (<nav>, <button>, <header>). Use ARIA only when semantic HTML isn't enough.

HTML Best Practices

  • Always declare <!DOCTYPE html> at the top.
  • Always specify charset="UTF-8" and the viewport meta tag.
  • Use lowercase for tag names and attributes.
  • Always quote attribute values: class="name" not class=name.
  • Always include alt text for images.
  • Use semantic elements (<header>, <nav>, <main>) instead of generic <div> where possible.
  • Keep HTML structure clean - use CSS for presentation.
  • Use external CSS and JS files; avoid inline styles.
  • Validate your HTML at validator.w3.org.
  • Always close tags properly (except for void elements).
  • Use rel="noopener noreferrer" with target="_blank".
  • Keep forms accessible with <label> elements.
  • Load scripts at end of body or use defer attribute.
  • Use loading="lazy" for images below the fold.

All HTML Tags - A to Z Reference

TagDescription
<!DOCTYPE>Defines document type (not a tag, a declaration)
<a>Anchor / hyperlink
<abbr>Abbreviation with tooltip
<address>Contact information block
<area>Clickable area in an image map
<article>Self-contained content piece
<aside>Sidebar / tangential content
<audio>Embeds audio
<b>Bold text (visual only)
<base>Base URL for all relative links
<bdi>Bi-directional isolation
<bdo>Bi-directional text override
<blockquote>Block-level quotation
<body>Visible page content container
<br>Line break (void element)
<button>Clickable button
<canvas>2D/3D drawing surface
<caption>Table caption
<cite>Title of a cited work
<code>Inline code snippet
<col>Column properties in colgroup
<colgroup>Group of table columns
<data>Links content to machine-readable value
<datalist>Predefined options list for input
<dd>Definition description
<del>Deleted text (strikethrough)
<details>Expandable/collapsible content
<dfn>Term being defined
<dialog>Modal dialog box
<div>Generic block-level container
<dl>Definition list
<dt>Definition term
<em>Emphasized text (semantic)
<embed>Embeds external content
<fieldset>Groups form elements
<figcaption>Caption for figure element
<figure>Self-contained media content
<footer>Page or section footer
<form>HTML form for user input
<h1>-<h6>Headings (h1 = most important)
<head>Metadata container (not visible)
<header>Page or section header
<hr>Horizontal rule / thematic break
<html>Root element of the page
<i>Italic text (visual or semantic)
<iframe>Inline frame (embed page)
<img>Embeds an image
<input>Interactive form input control
<ins>Inserted text (underlined)
<kbd>Keyboard input text
<label>Label for form control
<legend>Caption for fieldset
<li>List item
<link>External resource link (CSS, favicon)
<main>Main content of the document
<map>Client-side image map definition
<mark>Highlighted text
<menu>Menu list (context menu)
<meta>Metadata about the document
<meter>Scalar measurement within range
<nav>Navigation links
<noscript>Content if JS is disabled
<object>Embedded object (PDF, Flash)
<ol>Ordered (numbered) list
<optgroup>Group of options in select
<option>Option in select/datalist
<output>Result of a calculation
<p>Paragraph
<picture>Responsive image container
<pre>Preformatted text (preserves whitespace)
<progress>Progress bar
<q>Short inline quotation
<rp>Ruby fallback parenthesis
<rt>Ruby text annotation
<ruby>Ruby annotation (East Asian text)
<s>Strikethrough text
<samp>Sample output from program
<script>JavaScript code or link
<section>Thematic content section
<select>Dropdown selection list
<small>Small print/fine print
<source>Media source for audio/video/picture
<span>Generic inline container
<strong>Strong importance (bold, semantic)
<style>Internal CSS styles
<sub>Subscript text
<summary>Visible heading for details element
<sup>Superscript text
<table>Table container
<tbody>Table body rows
<td>Table data cell
<template>Hidden template content (for JS)
<textarea>Multi-line text input
<tfoot>Table footer rows
<th>Table header cell
<thead>Table header row group
<time>Date/time representation
<title>Page title (in head)
<tr>Table row
<track>Subtitles/captions for media
<u>Underlined text
<ul>Unordered (bulleted) list
<var>Variable in math or programming
<video>Embeds a video
<wbr>Word break opportunity

Quick Quiz: Which HTML tag creates a hyperlink?

SEO & Social Metadata

Good HTML helps search engines, link previews, and browsers understand your page. Students should learn this early because metadata is part of shipping a real page, not an optional extra.

HTML Head
<head>
  <title>Learn HTML Forms | EduSmartUp</title>
  <meta name="description" content="Step-by-step guide to HTML forms, validation, and accessibility.">
  <link rel="canonical" href="https://example.com/html/forms">

  <meta property="og:title" content="Learn HTML Forms | EduSmartUp">
  <meta property="og:description" content="Practical examples of accessible HTML forms.">
  <meta property="og:type" content="article">
  <meta property="og:image" content="https://example.com/cover.png">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="theme-color" content="#0f766e">
</head>
TagWhy it matters
<title>Shown in browser tabs and search result titles
meta descriptionHelps explain page purpose in search previews
canonicalAvoids duplicate-content confusion
Open GraphControls previews on social platforms and chat apps

Accessible Forms

Forms are often where users fail. Every important input should have a label, helpful instructions, clear errors, and keyboard-friendly controls.

HTML
<form novalidate>
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" aria-describedby="email-help email-error" required>
  <small id="email-help">Use an address you check regularly.</small>
  <p id="email-error" role="alert" hidden>Please enter a valid email.</p>

  <fieldset>
    <legend>Preferred contact method</legend>
    <label><input type="radio" name="contact" value="email"> Email</label>
    <label><input type="radio" name="contact" value="phone"> Phone</label>
  </fieldset>

  <button type="submit">Create account</button>
</form>
Checklist Use labels, explain required fields, connect help text with aria-describedby, and put real error messages near the failing field.

Performance Patterns

  • Use semantic markup to reduce unnecessary wrapper elements.
  • Add loading="lazy" to below-the-fold images and iframes.
  • Prefer responsive images with <picture>, srcset, and sizes.
  • Use defer for most scripts so HTML can parse first.
  • Reserve space for media with width/height attributes to reduce layout shift.
? Home CSS Tutorial ?