Learn HTML by Building a Real E-Commerce Website
HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure and content of a webpage using elements represented by tags.
<tagname>attribute="value"<!-- Basic HTML Element Structure -->
<tagname attribute="value">Content goes here</tagname>
<!-- Example -->
<a href="https://example.com" target="_blank">Click Here</a>
<!-- Self-closing tags (no content) -->
<img src="photo.jpg" alt="Description">
<br>
<hr>
<input type="text">Every HTML document follows a standard structure. This is the skeleton of every web page:
<!-- DOCTYPE tells browser this is HTML5 -->
<!DOCTYPE html>
<!-- Root element - contains everything -->
<html lang="en">
<!-- HEAD - Metadata (not visible on page) -->
<head>
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Responsive design viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO meta tags -->
<meta name="description" content="Best online store for electronics">
<meta name="keywords" content="electronics, laptops, phones">
<meta name="author" content="Ralfiz Technologies">
<!-- Page title (shown in browser tab) -->
<title>ShopKart - Best Online Store</title>
<!-- Favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- External CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<!-- BODY - All visible content -->
<body>
<h1>Welcome to ShopKart</h1>
<p>Your one-stop shop for everything!</p>
<!-- JavaScript (at end for better performance) -->
<script src="script.js"></script>
</body>
</html>| Tag | Purpose | Required? |
|---|---|---|
<!DOCTYPE html> | Declares HTML5 document type | Yes |
<html> | Root element containing all content | Yes |
<head> | Contains metadata, title, links | Yes |
<meta> | Metadata about the document | Recommended |
<title> | Page title in browser tab | Yes |
<link> | Links external resources (CSS, fonts) | Optional |
<body> | Contains all visible page content | Yes |
<script> | JavaScript code or link | Optional |
Headings create a hierarchical structure. Use them in order - don't skip levels!
<!-- E-Commerce Example: Product Page Headings -->
<h1>ShopKart Electronics</h1> <!-- Main page title (ONE per page) -->
<h2>Laptops</h2> <!-- Category heading -->
<h3>Gaming Laptops</h3> <!-- Subcategory -->
<h4>ASUS ROG Series</h4> <!-- Brand -->
<h5>Specifications</h5> <!-- Product section -->
<h6>Technical Details</h6> <!-- Subsection -->
<h3>Business Laptops</h3>
<h2>Smartphones</h2> <!-- Another category --><h1> per page. It should describe the main topic. Search engines use headings to understand page structure.
<!-- Paragraph -->
<p>This laptop features a powerful Intel i7 processor, 16GB RAM, and 512GB SSD storage. Perfect for gaming and professional work.</p>
<!-- Text Formatting Tags -->
<strong>Bold - Important text</strong> <!-- Semantic importance -->
<b>Bold - Stylistic only</b> <!-- Just visual -->
<em>Italic - Emphasis</em> <!-- Semantic emphasis -->
<i>Italic - Stylistic</i> <!-- Just visual -->
<u>Underlined text</u>
<s>Strikethrough - ₹50,000</s> <!-- Original price -->
<mark>Highlighted text</mark> <!-- Yellow highlight -->
<small>Fine print text</small>
<!-- Subscript & Superscript -->
H<sub>2</sub>O <!-- H₂O -->
10<sup>2</sup> = 100 <!-- 10² -->
<!-- Line Break & Horizontal Rule -->
Line 1<br>Line 2 <!-- br = line break -->
<hr> <!-- Horizontal line -->
<!-- Preformatted Text (preserves spacing) -->
<pre>
Product Code: LP-2024-001
Category: Electronics
Status: In Stock
</pre>
<!-- Code Display -->
<code>const price = 49999;</code>
<!-- Blockquote -->
<blockquote cite="https://review.com">
"Best laptop I've ever used! Highly recommended."
<footer>— Customer Review</footer>
</blockquote>
<!-- Abbreviation -->
<abbr title="Goods and Services Tax">GST</abbr> included
<!-- Address -->
<address>
ShopKart Pvt Ltd<br>
123 Tech Park, Bangalore<br>
Karnataka - 560001
</address><!-- Product Features List -->
<h3>Key Features</h3>
<ul>
<li>Intel Core i7 12th Gen Processor</li>
<li>16GB DDR5 RAM</li>
<li>512GB NVMe SSD</li>
<li>15.6" Full HD Display</li>
<li>NVIDIA RTX 3060 Graphics</li>
</ul><!-- Checkout Steps -->
<h3>How to Order</h3>
<ol>
<li>Add items to cart</li>
<li>Review your cart</li>
<li>Enter shipping address</li>
<li>Choose payment method</li>
<li>Place order</li>
</ol>
<!-- Different numbering types -->
<ol type="A">....</ol> <!-- A, B, C -->
<ol type="a">....</ol> <!-- a, b, c -->
<ol type="I">....</ol> <!-- I, II, III -->
<ol type="i">....</ol> <!-- i, ii, iii -->
<ol start="5">...</ol> <!-- Start from 5 -->
<ol reversed>...</ol> <!-- Count down --><!-- Product Specifications -->
<h3>Specifications</h3>
<dl>
<dt>Processor</dt>
<dd>Intel Core i7-12700H</dd>
<dt>Memory</dt>
<dd>16GB DDR5 4800MHz</dd>
<dt>Storage</dt>
<dd>512GB PCIe NVMe SSD</dd>
<dt>Display</dt>
<dd>15.6" FHD (1920x1080) 144Hz</dd>
</dl><!-- Category Menu -->
<ul>
<li>Electronics
<ul>
<li>Laptops
<ul>
<li>Gaming</li>
<li>Business</li>
<li>Student</li>
</ul>
</li>
<li>Smartphones</li>
<li>Tablets</li>
</ul>
</li>
<li>Clothing</li>
</ul>The anchor tag <a> creates hyperlinks to other pages, sections, or resources.
<!-- Basic Link -->
<a href="https://shopkart.com">Visit ShopKart</a>
<!-- Open in New Tab -->
<a href="https://shopkart.com" target="_blank" rel="noopener noreferrer">
Visit ShopKart (New Tab)
</a>
<!-- Internal Page Link -->
<a href="products.html">View Products</a>
<a href="./about.html">About Us</a>
<a href="../index.html">Go Back</a>
<!-- Jump to Section on Same Page -->
<a href="#specifications">View Specifications</a>
...
<section id="specifications">...</section>
<!-- Email Link -->
<a href="mailto:support@shopkart.com">Email Support</a>
<a href="mailto:support@shopkart.com?subject=Order%20Issue&body=Hi%20Team">
Email with Subject
</a>
<!-- Phone Link (clickable on mobile) -->
<a href="tel:+919876543210">Call: +91 98765 43210</a>
<!-- WhatsApp Link -->
<a href="https://wa.me/919876543210?text=Hi%20I%20need%20help">
Chat on WhatsApp
</a>
<!-- Download Link -->
<a href="brochure.pdf" download>Download Brochure</a>
<a href="brochure.pdf" download="ShopKart-Catalog.pdf">
Download (Custom Name)
</a><!-- E-Commerce Navigation -->
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/categories">Categories</a></li>
<li><a href="/deals">Today's Deals</a></li>
<li><a href="/cart">Cart (3)</a></li>
<li><a href="/account">My Account</a></li>
</ul>
</nav><!-- Basic Image -->
<img
src="laptop.jpg"
alt="ASUS Gaming Laptop with RGB keyboard"
width="600"
height="400"
>
<!-- External Image -->
<img src="https://cdn.shopkart.com/images/laptop.jpg" alt="Laptop">
<!-- Image with Loading Optimization -->
<img
src="product.jpg"
alt="Product Image"
loading="lazy" <!-- Lazy load (load when visible) -->
decoding="async" <!-- Non-blocking decode -->
>alt="" only for decorative images<!-- Different images for different screen sizes -->
<img
src="product-medium.jpg"
srcset="
product-small.jpg 400w,
product-medium.jpg 800w,
product-large.jpg 1200w
"
sizes="
(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px
"
alt="Responsive product image"
>
<!-- Picture element for art direction -->
<picture>
<source media="(max-width: 600px)" srcset="product-mobile.jpg">
<source media="(max-width: 1200px)" srcset="product-tablet.jpg">
<img src="product-desktop.jpg" alt="Product">
</picture><figure>
<img src="laptop.jpg" alt="Gaming Laptop">
<figcaption>ASUS ROG Strix G15 - Our Best Seller</figcaption>
</figure><!-- Video -->
<video
width="640"
height="360"
controls <!-- Show play/pause controls -->
autoplay <!-- Start automatically -->
muted <!-- Muted (required for autoplay) -->
loop <!-- Loop forever -->
poster="thumbnail.jpg" <!-- Preview image -->
>
<source src="product-video.mp4" type="video/mp4">
<source src="product-video.webm" type="video/webm">
Your browser doesn't support video.
</video>
<!-- Audio -->
<audio controls>
<source src="notification.mp3" type="audio/mpeg">
<source src="notification.ogg" type="audio/ogg">
Your browser doesn't support audio.
</audio>
<!-- Embedded YouTube Video -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="Product Review"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
allowfullscreen
></iframe>Tables display data in rows and columns. Use them for data, not for page layout!
<!-- Product Comparison Table -->
<table>
<caption>Laptop Comparison</caption>
<!-- Table Header -->
<thead>
<tr>
<th>Feature</th>
<th>Basic</th>
<th>Pro</th>
<th>Ultra</th>
</tr>
</thead>
<!-- Table Body -->
<tbody>
<tr>
<td>Processor</td>
<td>i5</td>
<td>i7</td>
<td>i9</td>
</tr>
<tr>
<td>RAM</td>
<td>8GB</td>
<td>16GB</td>
<td>32GB</td>
</tr>
<tr>
<td>Storage</td>
<td>256GB</td>
<td>512GB</td>
<td>1TB</td>
</tr>
<tr>
<td>Price</td>
<td>₹45,000</td>
<td>₹65,000</td>
<td>₹95,000</td>
</tr>
</tbody>
<!-- Table Footer -->
<tfoot>
<tr>
<td colspan="4">All prices include GST</td>
</tr>
</tfoot>
</table>
<!-- Spanning Cells -->
<td colspan="2">Spans 2 columns</td>
<td rowspan="3">Spans 3 rows</td>Forms collect user data. This is essential for checkout, login, search, and contact forms.
<!-- Complete Checkout Form -->
<form
action="/api/checkout"
method="POST"
enctype="multipart/form-data" <!-- Required for file uploads -->
autocomplete="on"
>
<!-- Text Input -->
<label for="fullName">Full Name:</label>
<input
type="text"
id="fullName"
name="fullName"
placeholder="Enter your full name"
required
minlength="2"
maxlength="50"
autofocus
>
<!-- Email Input -->
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="name@example.com"
required
>
<!-- Password Input -->
<label for="password">Password:</label>
<input
type="password"
id="password"
name="password"
minlength="8"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain uppercase, lowercase, number, and 8+ characters"
required
>
<!-- Phone Input -->
<label for="phone">Phone:</label>
<input
type="tel"
id="phone"
name="phone"
pattern="[0-9]{10}"
placeholder="10-digit mobile number"
>
<!-- Number Input -->
<label for="quantity">Quantity:</label>
<input
type="number"
id="quantity"
name="quantity"
min="1"
max="10"
step="1"
value="1"
>
<!-- Date Input -->
<label for="deliveryDate">Preferred Delivery Date:</label>
<input
type="date"
id="deliveryDate"
name="deliveryDate"
min="2024-01-01"
max="2024-12-31"
>
<!-- Other Date/Time Inputs -->
<input type="time" name="time">
<input type="datetime-local" name="datetime">
<input type="month" name="month">
<input type="week" name="week">
<!-- Range Slider -->
<label for="budget">Budget: <output id="budgetValue">50000</output></label>
<input
type="range"
id="budget"
name="budget"
min="10000"
max="100000"
step="5000"
value="50000"
>
<!-- Color Picker -->
<label for="color">Choose Color:</label>
<input type="color" id="color" name="color" value="#3498db">
<!-- URL Input -->
<input type="url" name="website" placeholder="https://example.com">
<!-- Search Input -->
<input type="search" name="query" placeholder="Search products...">
<!-- File Upload -->
<label for="document">Upload ID Proof:</label>
<input
type="file"
id="document"
name="document"
accept="image/*,.pdf" <!-- Accepted file types -->
multiple <!-- Allow multiple files -->
>
<!-- Hidden Field -->
<input type="hidden" name="productId" value="PRD-12345">
<!-- Checkbox -->
<label>
<input type="checkbox" name="subscribe" value="yes" checked>
Subscribe to newsletter
</label>
<label>
<input type="checkbox" name="terms" required>
I agree to Terms & Conditions
</label>
<!-- Radio Buttons -->
<fieldset>
<legend>Payment Method</legend>
<label>
<input type="radio" name="payment" value="card" checked>
Credit/Debit Card
</label>
<label>
<input type="radio" name="payment" value="upi">
UPI
</label>
<label>
<input type="radio" name="payment" value="cod">
Cash on Delivery
</label>
</fieldset>
<!-- Select Dropdown -->
<label for="state">State:</label>
<select id="state" name="state" required>
<option value="" disabled selected>-- Select State --</option>
<optgroup label="South India">
<option value="KL">Kerala</option>
<option value="TN">Tamil Nadu</option>
<option value="KA">Karnataka</option>
</optgroup>
<optgroup label="North India">
<option value="DL">Delhi</option>
<option value="UP">Uttar Pradesh</option>
</optgroup>
</select>
<!-- Multi-Select -->
<select name="interests" multiple size="4">
<option value="electronics">Electronics</option>
<option value="fashion">Fashion</option>
<option value="home">Home & Living</option>
</select>
<!-- Textarea -->
<label for="address">Delivery Address:</label>
<textarea
id="address"
name="address"
rows="4"
cols="50"
placeholder="Enter complete address with PIN code"
required
></textarea>
<!-- Datalist (Autocomplete suggestions) -->
<label for="brand">Brand:</label>
<input list="brands" id="brand" name="brand">
<datalist id="brands">
<option value="Apple">
<option value="Samsung">
<option value="OnePlus">
<option value="Xiaomi">
</datalist>
<!-- Buttons -->
<button type="submit">Place Order</button>
<button type="reset">Clear Form</button>
<button type="button" onclick="saveForLater()">Save for Later</button>
</form><label> with matching for and id attributestype for better mobile keyboardsrequired for mandatory fieldspattern for custom validation<fieldset> and <legend>Semantic tags give meaning to content, improving accessibility and SEO.
<!-- Complete E-Commerce Page Structure -->
<body>
<!-- HEADER - Site header with logo and navigation -->
<header>
<div class="logo">
<img src="logo.png" alt="ShopKart Logo">
</div>
<!-- NAV - Navigation menu -->
<nav aria-label="Main Navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/cart">Cart</a></li>
</ul>
</nav>
<form role="search">
<input type="search" placeholder="Search...">
<button type="submit">Search</button>
</form>
</header>
<!-- MAIN - Primary content area (ONE per page) -->
<main>
<!-- ARTICLE - Self-contained, reusable content -->
<article class="product-card">
<header>
<h2>ASUS Gaming Laptop</h2>
<p class="category">Electronics > Laptops</p>
</header>
<figure>
<img src="laptop.jpg" alt="ASUS Laptop">
<figcaption>RGB Backlit Keyboard</figcaption>
</figure>
<!-- SECTION - Thematic grouping of content -->
<section>
<h3>Description</h3>
<p>High-performance gaming laptop...</p>
</section>
<section>
<h3>Specifications</h3>
<dl>
<dt>Processor</dt>
<dd>Intel i7</dd>
</dl>
</section>
<footer>
<p>Price: <strong>₹75,000</strong></p>
<time datetime="2024-01-15">Added: Jan 15, 2024</time>
</footer>
</article>
<!-- ASIDE - Related but separate content -->
<aside>
<h3>Related Products</h3>
<ul>
<li><a href="#">Gaming Mouse</a></li>
<li><a href="#">Gaming Keyboard</a></li>
</ul>
</aside>
</main>
<!-- FOOTER - Site footer -->
<footer>
<nav aria-label="Footer Navigation">
<ul>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/privacy">Privacy Policy</a></li>
</ul>
</nav>
<address>
ShopKart Pvt Ltd, Tech Park, Bangalore
<a href="mailto:info@shopkart.com">info@shopkart.com</a>
</address>
<p>© <time datetime="2024">2024</time> ShopKart. All rights reserved.</p>
</footer>
</body>| Semantic Tag | Purpose | Use Case |
|---|---|---|
<header> | Introductory content | Page/article header |
<nav> | Navigation links | Menu, breadcrumbs |
<main> | Main content (ONE per page) | Primary content area |
<article> | Self-contained content | Product card, blog post |
<section> | Thematic grouping | Features, testimonials |
<aside> | Tangentially related | Sidebar, related items |
<footer> | Footer information | Copyright, links |
<figure> | Self-contained media | Image with caption |
<figcaption> | Caption for figure | Image description |
<time> | Date/time | Publication date |
<mark> | Highlighted text | Search results |
<details> | Expandable content | FAQ, accordions |
<summary> | Summary for details | FAQ question |
<!-- FAQ Section -->
<details>
<summary>What is your return policy?</summary>
<p>We offer 30-day returns on all products. Items must be in original packaging.</p>
</details>
<details open> <!-- open by default -->
<summary>Do you offer free shipping?</summary>
<p>Yes! Free shipping on orders above ₹500.</p>
</details><!-- DIV - Block-level container (no semantic meaning) -->
<div class="product-grid">
<div class="product-card">...</div>
<div class="product-card">...</div>
</div>
<!-- SPAN - Inline container (no semantic meaning) -->
<p>Price: <span class="price">₹49,999</span> <span class="discount">(20% off)</span></p><div> for layout/styling purposes only<span> for inline styling without meaningHere's a complete product card using all the HTML concepts we've learned:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Shop the best electronics at ShopKart">
<title>ShopKart - Product Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="logo">
<a href="/">
<img src="logo.png" alt="ShopKart Logo" width="150">
</a>
</div>
<nav class="main-nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/deals">Deals</a></li>
<li><a href="/cart">🛒 Cart (0)</a></li>
</ul>
</nav>
<form class="search-form" action="/search" method="GET">
<input type="search" name="q" placeholder="Search products...">
<button type="submit">Search</button>
</form>
</header>
<!-- Main Content -->
<main>
<!-- Breadcrumb -->
<nav aria-label="Breadcrumb">
<ol class="breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="/electronics">Electronics</a></li>
<li><a href="/laptops">Laptops</a></li>
<li aria-current="page">ASUS ROG</li>
</ol>
</nav>
<!-- Product Article -->
<article class="product-detail">
<div class="product-images">
<figure>
<img
src="laptop-main.jpg"
alt="ASUS ROG Gaming Laptop - Front View"
id="mainImage"
>
<figcaption>Click thumbnails to change view</figcaption>
</figure>
<div class="thumbnails">
<img src="thumb1.jpg" alt="Front view">
<img src="thumb2.jpg" alt="Side view">
<img src="thumb3.jpg" alt="Keyboard view">
</div>
</div>
<div class="product-info">
<header>
<span class="badge">Bestseller</span>
<h1>ASUS ROG Strix G15 Gaming Laptop</h1>
<p class="sku">SKU: ASUS-ROG-G15-2024</p>
</header>
<div class="rating">
⭐⭐⭐⭐⭐ <span>(4.8) - 256 Reviews</span>
</div>
<div class="price-section">
<p class="original-price">
<s>₹99,999</s>
</p>
<p class="sale-price">
<strong>₹79,999</strong>
<mark>20% OFF</mark>
</p>
<small>Inclusive of all taxes</small>
</div>
<section class="highlights">
<h3>Key Highlights</h3>
<ul>
<li>Intel Core i7-12700H Processor</li>
<li>16GB DDR5 RAM</li>
<li>NVIDIA RTX 3060 6GB Graphics</li>
<li>15.6" FHD 144Hz Display</li>
<li>512GB NVMe SSD</li>
</ul>
</section>
<!-- Add to Cart Form -->
<form class="add-to-cart-form" action="/cart/add" method="POST">
<input type="hidden" name="productId" value="ASUS-ROG-G15">
<div class="form-group">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5" value="1">
</div>
<button type="submit" class="btn-primary">
Add to Cart
</button>
<button type="button" class="btn-secondary">
❤️ Add to Wishlist
</button>
</form>
<p class="stock-status">
✅ <strong>In Stock</strong> - Ships within 24 hours
</p>
</div>
</article>
<!-- Product Tabs -->
<section class="product-tabs">
<details open>
<summary>📋 Full Specifications</summary>
<table>
<tbody>
<tr><th>Processor</th><td>Intel Core i7-12700H</td></tr>
<tr><th>RAM</th><td>16GB DDR5 4800MHz</td></tr>
<tr><th>Storage</th><td>512GB PCIe NVMe SSD</td></tr>
<tr><th>Graphics</th><td>NVIDIA RTX 3060 6GB</td></tr>
<tr><th>Display</th><td>15.6" FHD 1920x1080 144Hz</td></tr>
<tr><th>Battery</th><td>90Wh, up to 10 hours</td></tr>
<tr><th>Weight</th><td>2.3 kg</td></tr>
</tbody>
</table>
</details>
<details>
<summary>❓ FAQs</summary>
<dl>
<dt>Is this laptop good for gaming?</dt>
<dd>Yes! With RTX 3060 graphics, it handles most games at high settings.</dd>
<dt>What warranty is included?</dt>
<dd>2 years manufacturer warranty with on-site service.</dd>
</dl>
</details>
</section>
<!-- Related Products -->
<aside class="related-products">
<h2>You May Also Like</h2>
<div class="product-grid">
<!-- Product cards would go here -->
</div>
</aside>
</main>
<!-- Footer -->
<footer class="site-footer">
<div class="footer-grid">
<section>
<h4>About ShopKart</h4>
<p>Your trusted online store since 2020.</p>
</section>
<nav>
<h4>Quick Links</h4>
<ul>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/returns">Returns</a></li>
</ul>
</nav>
<section>
<h4>Contact Us</h4>
<address>
<a href="mailto:support@shopkart.com">support@shopkart.com</a><br>
<a href="tel:+919876543210">+91 98765 43210</a>
</address>
</section>
</div>
<p class="copyright">
© <time datetime="2024">2024</time> ShopKart. All rights reserved.
</p>
</footer>
<script src="script.js"></script>
</body>
</html>