Learn HTML: A Comprehensive Guide

Welcome to Learn HTML, your definitive resource for mastering HTML, created by Harsh. This guide offers clear, structured lessons with practical examples and hands-on exercises to help you build professional HTML webpages with confidence. Whether you're a beginner or looking to refine your skills in HTML, let’s embark on this journey together.

Explore the topics using the sidebar or begin your learning journey below.

1. HTML Basics

1.1 HTML Structure

Think of HTML as the skeleton of a webpage, like the frame of a house. Every HTML document starts with a specific structure: a DOCTYPE declaration, an <html> tag, a <head> for metadata (like the title), and a <body> for content users see. This is the most important part, so let’s nail it!

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Awesome Page</title>
</head>
<body>
    <h1>Welcome to My Site</h1>
    <p>This is my first webpage, and it’s gonna rock!</p>
</body>
</html>

Explanation: <!DOCTYPE html> tells browsers this is HTML5. <html lang="en"> sets the language to English. <head> holds metadata like <title> (shown in the browser tab). <body> contains everything users see, like headings and paragraphs. This structure is the foundation of every webpage!

1.2 What is HTML?

HTML (HyperText Markup Language) is like the recipe for a webpage. It tells browsers how to display text, images, and more using “tags” that wrap content, like <p> for paragraphs or <h1> for headings.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>About HTML</title>
</head>
<body>
    <h1>What’s HTML?</h1>
    <p>It’s the language that builds the web!</p>
</body>
</html>

Explanation: Tags like <h1> and <p> structure content. HTML is all about organizing info so browsers can show it nicely.

1.3 Setting Up the Environment

Creating HTML is easy: grab a text editor (like VS Code or Notepad) and a browser (like Chrome). Write your code, save it as filename.html, and open it in a browser to see the magic!

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My First Try</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>I just made a webpage!</p>
</body>
</html>

Explanation: Save this as index.html, open it in Chrome, and boom—you’ve got a webpage! No fancy tools needed.

1.4 HTML Doctype and Versions

The DOCTYPE tells browsers which HTML version you’re using. HTML5 is the latest and greatest, with a simple <!DOCTYPE html>. Older versions like HTML4 had clunky DOCTYPEs, but you don’t need those anymore.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML5 Page</title>
</head>
<body>
    <p>This is HTML5, baby!</p>
</body>
</html>

Explanation: <!DOCTYPE html> is short, sweet, and ensures modern browsers understand your code. Always put it at the top!

1.5 HTML Elements, Tags, and Attributes

Elements are the building blocks of HTML, created by tags (e.g., <div>). Attributes add extra info, like id="unique" to identify an element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Elements Demo</title>
</head>
<body>
    <div id="main">This is a div!</div>
    <p class="intro">This is a paragraph.</p>
</body>
</html>

Explanation: <div> and <p> are elements. id and class are attributes that help style or identify them.

1.6 Nesting Elements and Tag Hierarchy

HTML tags can nest inside each other, like boxes in boxes, but they must close properly. Think of it like stacking containers neatly.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nesting Demo</title>
</head>
<body>
    <div>
        <h1>My Blog</h1>
        <p>Welcome to my <span>awesome</span> site!</p>
    </div>
</body>
</html>

Explanation: <span> is nested inside <p>, which is inside <div>. Close tags in reverse order to avoid errors.

2. Text & Content Elements

2.1 Headings

Headings (<h1> to <h6>) are like chapter titles in a book, organizing content and boosting SEO. Use <h1> once per page for the main title.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Headings Demo</title>
</head>
<body>
    <h1>My Website</h1>
    <h2>About Me</h2>
    <h3>My Hobbies</h3>
</body>
</html>

Explanation: <h1> is the biggest and most important, <h2> for subsections, and so on. Search engines love clear heading hierarchies!

2.2 Paragraphs and Line Breaks

Paragraphs (<p>) hold text blocks, like sentences in a story. Use <br> for line breaks within a paragraph, like hitting “Enter”.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Paragraph Demo</title>
</head>
<body>
    <p>This is a paragraph about my cat.</p>
    <p>My cat loves to:<br>Play<br>Sleep</p>
</body>
</html>

Explanation: <p> creates a new block, while <br> breaks the line without starting a new paragraph.

2.3 Formatting Tags

Formatting tags like <strong> and <em> add style and meaning. Think of them as highlighters for your text!

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Formatting Demo</title>
</head>
<body>
    <p>I <b>love</b> to code!</p>
    <p>This is <strong>super important</strong> and <em>really cool</em>.</p>
    <p>Check this <u>underlined</u> or <mark>highlighted</mark> text.</p>
</body>
</html>

Explanation: <strong> shows importance (bold), <em> adds emphasis (italic), <u> underlines, and <mark> highlights.

2.4 Quotations & Citations

Use <blockquote> for long quotes, <q> for short ones, and <cite> to credit the source, like quoting a famous line.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Quotes Demo</title>
</head>
<body>
    <blockquote>Be the change you wish to see.</blockquote>
    <p>Gandhi said: <q>Be the change.</q></p>
    <p>Source: <cite>Mahatma Gandhi</cite></p>
</body>
</html>

Explanation: <blockquote> stands out for big quotes, <q> is inline, and <cite> gives proper credit.

2.5 Superscript and Subscript

<sup> and <sub> are like tiny text for math or science, perfect for equations or chemical formulas.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sup/Sub Demo</title>
</head>
<body>
    <p>Area = x<sup>2</sup></p>
    <p>Water = H<sub>2</sub>O</p>
</body>
</html>

Explanation: <sup> raises text (e.g., exponents), <sub> lowers it (e.g., chemical formulas).

2.6 Preformatted Text

<pre> keeps spacing and formatting intact, great for code snippets. Pair it with <code> for inline code.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pre Demo</title>
</head>
<body>
    <pre>
function sayHi() {
    alert("Hello!");
}
    </pre>
    <p>Try this: <code>console.log("Hi");</code></p>
</body>
</html>

Explanation: <pre> preserves spaces and tabs, ideal for showing code exactly as written.

3. HTML Attributes & Values

3.1 Global Attributes

Global attributes like id, class, and lang work on any tag, like labels on boxes to organize or style them.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Global Attributes</title>
</head>
<body>
    <div id="hero" class="banner" lang="en" title="Welcome">Home Section</div>
</body>
</html>

Explanation: id is unique, class groups elements, lang sets language, and title shows a tooltip.

3.2 Boolean Attributes

Boolean attributes (e.g., disabled) don’t need a value—they’re either on or off, like a light switch.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Boolean Attributes</title>
</head>
<body>
    <input type="text" disabled>
    <input type="checkbox" checked>
</body>
</html>

Explanation: disabled grays out the input, checked pre-selects the checkbox.

3.3 Data Attributes

data-* attributes store custom info, like secret notes for JavaScript to use later.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Data Attributes</title>
</head>
<body>
    <div data-user-id="123">User Profile</div>
</body>
</html>

Explanation: data-user-id holds custom data, accessible via JavaScript for dynamic features.

3.4 Style vs. CSS Classes

Use style for quick inline styles, but class with CSS files is better for reusable designs.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Style Demo</title>
</head>
<body>
    <p style="color: blue;">Blue Text</p>
    <p class="highlight">Highlighted Text</p>
</body>
</html>

Explanation: style is one-off, while class lets you style multiple elements consistently via CSS.

5. Images & Visuals

5.1 Image Tag

The <img> tag is like hanging a photo on your webpage’s wall, using src for the image file.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Image Demo</title>
</head>
<body>
    <img src="sunset.jpg" alt="A beautiful sunset">
</body>
</html>

Explanation: src points to the image, alt describes it for accessibility.

5.2 Alt, Title, Width, Height, Loading

Attributes make images user-friendly and fast-loading.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Image Attributes</title>
</head>
<body>
    <img src="cat.jpg" alt="Cute cat" title="Hover for info" width="300" height="200" loading="lazy">
</body>
</html>

Explanation: alt helps screen readers, title shows a tooltip, width/height set size, and loading="lazy" speeds up page load.

5.3 Image Optimization

Compress images and use formats like WebP to make your site lightning-fast.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Optimized Image</title>
</head>
<body>
    <img src="photo.webp" alt="Optimized photo">
</body>
</html>

Explanation: WebP is smaller than JPEG, so pages load quicker.

5.4 Image Maps

<map> and <area> turn parts of an image into clickable links, like a treasure map!

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Image Map</title>
</head>
<body>
<img src="boy_image.png" usemap="#image-map">

<map name="image-map">
    <area onclick="one()" target="" alt="" title="" href="" coords="252,102,95" shape="circle">
    <area onclick="two()" target="" alt="" title="" href="" coords="274,380,352,359,337,499" shape="poly">
</map>
</body>
</html>

Explanation: coords define clickable areas, linking to different pages.

5.5 Figure and Figcaption

<figure> and <figcaption> pair images with captions, like a museum display.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Figure Demo</title>
</head>
<body>
    <figure>
        <img src="art.jpg" alt="Painting">
        <figcaption>A stunning artwork.</figcaption>
    </figure>
</body>
</html>

Explanation: <figcaption> adds context, making images more meaningful.

6. Lists & Grouping

6.1 Ordered Lists

<ol> creates numbered lists, perfect for step-by-step guides.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ordered List</title>
</head>
<body>
    <ol>
        <li>Learn HTML</li>
        <li>Practice CSS</li>
    </ol>
</body>
</html>

Explanation: Numbers are automatic, and start="2" can shift the starting number.

6.2 Unordered Lists

<ul> makes bullet-point lists, great for random items.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Unordered List</title>
</head>
<body>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
    </ul>
</body>
</html>

Explanation: Bullets help list items without any order.

6.3 Description Lists

<dl> pairs terms with details, like a dictionary.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Description List</title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>Builds webpage structure</dd>
        <dt>CSS</dt>
        <dd>Styles the webpage</dd>
    </dl>
</body>
</html>

Explanation: <dt> is the term, <dd> its definition.

6.4 Nested Lists

Nest lists inside each other for complex hierarchies, like a family tree.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nested Lists</title>
</head>
<body>
    <ul>
        <li>Skills
            <ul>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Explanation: Nested <ul> creates sub-bullets for deeper organization.

7. Tables

7.1 Basic Table Structure

Tables (<table>) organize data in rows and columns, like a spreadsheet.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Basic Table</title>
</head>
<body>
    <table>
        <tr>
            <th>Name</th>
            <td>Aman</td>
        </tr>
    </table>
</body>
</html>

Explanation: <tr> is a row, <th> a header, <td> a data cell.

7.2 Table Rows, Headers & Data Cells

Use <thead> and <tbody> for better structure.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Table Structure</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Aman</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Explanation: <thead> groups headers, <tbody> data, and scope clarifies header roles.

7.3 Spanning Rows and Columns

colspan and rowspan merge cells for flexible layouts.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Table Span</title>
</head>
<body>
    <table>
        <tr>
            <th colspan="2">Profile</th>
        </tr>
        <tr>
            <td rowspan="2">Aman</td>
            <td>Student</td>
        </tr>
        <tr>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

Explanation: colspan="2" spans two columns, rowspan="2" two rows.

7.4 Table Caption and Styling

<caption> adds a title to explain the table’s purpose.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Table Caption</title>
</head>
<body>
    <table>
        <caption>Student Records</caption>
        <tr>
            <th>Name</th>
            <td>Aman</td>
        </tr>
    </table>
</body>
</html>

Explanation: <caption> gives context, styled via CSS for a clean look.

8. Forms & Input Elements

8.1 Form Structure

Forms (<form>) are like questionnaires, collecting user info with action and method.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Form Demo</title>
</head>
<body>
    <form action="/submit" method="POST">
        <input type="text" name="username">
        <input type="submit" value="Send">
    </form>
</body>
</html>

Explanation: action is the server URL, method="POST" sends data securely.

8.2 Input Types

Inputs like text, radio, and file handle different data.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Input Types</title>
</head>
<body>
    <form>
        <input type="text" name="name">
        <input type="radio" name="gender" value="male"> Male
        <input type="checkbox" name="subscribe"> Subscribe
        <input type="file" name="photo">
    </form>
</body>
</html>

Explanation: Each type fits a specific input need, like uploading files or selecting options.

8.3 Label, Fieldset, Legend

<label> and <fieldset> make forms user-friendly and accessible.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Form Accessibility</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>Personal Info</legend>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name">
        </fieldset>
    </form>
</body>
</html>

Explanation: <label for="id"> links to inputs, <legend> describes the group.

8.4 Textarea, Select, Option

<textarea> for long text, <select> for dropdowns.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Textarea & Select</title>
</head>
<body>
    <form>
        <textarea name="bio" rows="4">Tell us about you...</textarea>
        <select name="color">
            <option value="red">Red</option>
            <option value="blue">Blue</option>
        </select>
    </form>
</body>
</html>

Explanation: <textarea> allows multi-line input, <select> offers choices.

8.5 Validation

Attributes like required and pattern ensure valid input.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Form Validation</title>
</head>
<body>
    <form>
        <input type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
        <input type="submit">
    </form>
</body>
</html>

Explanation: required prevents empty fields, pattern checks email format.

8.6 Input Attributes

Attributes like placeholder guide users.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Input Attributes</title>
</head>
<body>
    <form>
        <input type="text" placeholder="Your Name" autocomplete="name">
    </form>
</body>
</html>

Explanation: placeholder shows a hint, autocomplete suggests saved data.

9. Semantic HTML

9.1 Why Semantic HTML?

Semantic HTML is like labeling your webpage’s parts (e.g., header, footer) so browsers, search engines, and screen readers understand it better.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Semantic Demo</title>
</head>
<body>
    <header>
        <h1>My Site</h1>
    </header>
    <main>
        <article>Welcome to my blog!</article>
    </main>
</body>
</html>

Explanation: Semantic tags make your site more accessible and SEO-friendly.

9.2 Semantic Elements

Tags like <header>, <nav>, and <footer> give meaning to sections.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Semantic Elements</title>
</head>
<body>
    <nav>
        <a href="#home">Home</a>
    </nav>
    <aside>Sidebar info</aside>
    <footer>© 2025</footer>
</body>
</html>

Explanation: Each tag has a specific role, like <nav> for navigation links.

9.3 Accessibility Benefits

Semantics help screen readers navigate, making your site inclusive.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Accessible Semantics</title>
</head>
<body>
    <main role="main">
        <h1>Content</h1>
    </main>
</body>
</html>

Explanation: role="main" tells assistive tech this is the primary content.

10. Multimedia

10.1 Audio Tag

<audio> adds sound, like a podcast or music player.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Audio Demo</title>
</head>
<body>
    <audio controls>
        <source src="song.mp3" type="audio/mp3">
        Your browser doesn’t support audio.
    </audio>
</body>
</html>

Explanation: controls adds play/pause buttons, <source> specifies the file.

10.2 Video Tag

<video> embeds videos, like YouTube clips.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Video Demo</title>
</head>
<body>
    <video controls width="400" poster="thumbnail.jpg">
        <source src="clip.mp4" type="video/mp4">
        Your browser doesn’t support video.
    </video>
</body>
</html>

Explanation: poster shows a preview image, width sets size.

10.3 Attributes

Attributes like autoplay and loop control playback.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Video Attributes</title>
</head>
<body>
    <video autoplay loop muted>
        <source src="bg.mp4" type="video/mp4">
    </video>
</body>
</html>

Explanation: muted is needed for autoplay, loop repeats the video.

10.4 Source and Track

<source> supports multiple formats, <track> adds subtitles.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Video Tracks</title>
</head>
<body>
    <video controls>
        <source src="clip.mp4" type="video/mp4">
        <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
    </video>
</body>
</html>

Explanation: <track> makes videos accessible with captions.

11. HTML APIs & Advanced Media

11.1 Drag and Drop API

draggable lets users drag elements, like moving files on a desktop.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Drag Demo</title>
</head>
<body>
    <div draggable="true">Drag me!</div>
</body>
</html>

Explanation: draggable="true" enables dragging, but needs JavaScript for full functionality.

11.2 Geolocation API

Get the user’s location (with permission) for maps or local services.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Geolocation Demo</title>
</head>
<body>
    <button onclick="getLocation()">Find My Location</button>
</body>
</html>

Explanation: The button triggers JavaScript to access location data.

11.3 Media Capture

accept and capture let users take photos or videos.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Media Capture</title>
</head>
<body>
    <input type="file" accept="image/*" capture="camera">
</body>
</html>

Explanation: capture="camera" opens the camera on mobile devices.

11.4 File API

Handle file uploads with multiple.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>File Upload</title>
</head>
<body>
    <input type="file" multiple>
</body>
</html>

Explanation: multiple allows selecting multiple files.

11.5 Canvas & SVG Introduction

<canvas> and <svg> create graphics, like drawing apps or logos.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Canvas & SVG</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill="blue"/>
    </svg>
</body>
</html>

Explanation: <canvas> needs JavaScript, <svg> is vector-based for sharp graphics.

12. HTML5 New Features

12.1 New Elements

HTML5 added tags like <details> and <article> for richer content.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML5 Elements</title>
</head>
<body>
    <details>
        <summary>Click to Expand</summary>
        <p>Hidden info here!</p>
    </details>
    <article>Blog post content</article>
</body>
</html>

Explanation: <details> creates collapsible sections, <article> for standalone content.

12.2 Dialog, Template, Output

New tags for modals, reusable content, and form results.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dialog Demo</title>
</head>
<body>
    <dialog open>
        <p>This is a modal!</p>
    </dialog>
    <template id="myTemplate">
        <p>Reusable text</p>
    </template>
    <output>Form result</output>
</body>
</html>

Explanation: <dialog> shows popups, <template> stores content for later.

12.3 Autofocus, Required, Placeholder

Make forms smarter with HTML5 attributes.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Form Enhancements</title>
</head>
<body>
    <form>
        <input type="text" autofocus required placeholder="Your Name">
    </form>
</body>
</html>

Explanation: autofocus highlights the field, required enforces input.

12.4 Native Form Validation

HTML5 validates inputs automatically, no JavaScript needed.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Validation Demo</title>
</head>
<body>
    <form>
        <input type="email" required>
        <input type="submit">
    </form>
</body>
</html>

Explanation: Browsers check email format and block submission if invalid.

13. IFrames & Embedding

13.1 IFrame Tag

<iframe> embeds another webpage, like a window to another site.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>IFrame Demo</title>
</head>
<body>
    <iframe src="https://www.youtube.com/embed/DnoJEwYlImg?si=p37DgiaNHl1M2m86" width="600" height="400" title="Embedded site"></iframe>
</body>
</html>

Explanation: title describes the iframe for accessibility.

13.2 Embedding Maps, Videos, PDFs

Iframes are great for maps or YouTube videos.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Map Embed</title>
</head>
<body>
    <iframe src="https://www.google.com/maps/embed" width="600" height="450"></iframe>
</body>
</html>

Explanation: Copy embed codes from services like Google Maps.

13.3 Security & Sandbox Attributes

sandbox locks down iframes for safety.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sandbox IFrame</title>
</head>
<body>
    <iframe src="page.html" sandbox="allow-scripts"></iframe>
</body>
</html>

Explanation: sandbox restricts actions, like disabling popups.

14. Meta Tags & SEO

14.1 Meta Charset

charset ensures text displays correctly.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Charset Demo</title>
</head>
<body>
    <p>Text looks perfect!</p>
</body>
</html>

Explanation: UTF-8 supports all characters, like emojis. 😎

14.2 Meta Description, Keywords

Help search engines find and summarize your page.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="description" content="Learn HTML with fun examples">
    <meta name="keywords" content="HTML, tutorial, web">
    <title>SEO Demo</title>
</head>
<body>
    <h1>Learn HTML</h1>
</body>
</html>

Explanation: description appears in search results, keywords hint at content.

14.3 Viewport Tag

Make your site mobile-friendly.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Demo</title>
</head>
<body>
    <p>Looks great on any device!</p>
</body>
</html>

Explanation: viewport adjusts the layout for phones and tablets.

14.4 Open Graph Tags

Control how your page looks when shared on social media.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta property="og:title" content="Learn HTML">
    <meta property="og:image" content="preview.jpg">
    <title>Social Demo</title>
</head>
<body>
    <h1>Share this page!</h1>
</body>
</html>

Explanation: og:title and og:image make shares look awesome on Facebook or Twitter.

15. Accessibility

15.1 ALT Text & ARIA Labels

Make your site usable for everyone with alt and aria-label.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Accessibility Demo</title>
</head>
<body>
    <img src="dog.jpg" alt="A happy dog">
    <button aria-label="Close menu">X</button>
</body>
</html>

Explanation: alt describes images, aria-label explains buttons for screen readers.

15.2 Tab Index & Keyboard Navigation

Ensure users can navigate with a keyboard.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Keyboard Nav</title>
</head>
<body>
    <button tabindex="1">Click Me</button>
</body>
</html>

Explanation: tabindex sets the focus order for keyboard users.

15.3 Semantic Elements Role

Semantic tags help assistive tech understand your site.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Semantic Roles</title>
</head>
<body>
    <main role="main">
        <h1>Main Content</h1>
    </main>
</body>
</html>

Explanation: role="main" marks the primary content area.

15.4 Skip to Content Links

Let keyboard users jump past navigation.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Skip Link</title>
</head>
<body>
    <a href="#main-content" class="skip-link">Skip to content</a>
    <main id="main-content">
        <h1>Content</h1>
    </main>
</body>
</html>

Explanation: skip-link improves accessibility for keyboard navigation.

16. HTML Sizes, Units & Dimensions

16.1 Width, Height in px, %, em, rem

Control element sizes with units like pixels or percentages.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Size Demo</title>
</head>
<body>
    <img src="photo.jpg" width="200" height="50%">
    <div style="font-size: 1.5em;">Big Text</div>
</body>
</html>

Explanation: px is fixed, % is relative to the parent, em scales with font size.

16.2 Responsive Sizing

Use relative units to make your site fit any screen.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Responsive Size</title>
</head>
<body>
    <img src="image.jpg" style="width: 100%; max-width: 600px;">
</body>
</html>

Explanation: max-width keeps images from getting too big on large screens.

16.3 Viewport Units

vw and vh size elements based on the viewport.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Viewport Units</title>
</head>
<body>
    <div style="height: 50vh;">Half the screen height</div>
</body>
</html>

Explanation: vh is 1% of the viewport’s height, great for responsive designs.

Code Playground

Try HTML right here! Write code, hit “Run,” and see it live. Go wild! đŸ§Ș