Comprehensive HTML Tutorial

      Ankush More

      Table of Contents

      1. Introduction to HTML
      2. Getting Started
      3. HTML Document Structure
      4. HTML Elements and Tags
      5. Text Formatting
      6. Links and Navigation
      7. Images and Multimedia
      8. Lists
      9. Tables
      10. Forms and Input
      11. Semantic HTML
      12. HTML5 Features
      13. Best Practices
      14. Resources and Next Steps

      Introduction to HTML

      HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure and content of web pages using a series of elements represented by tags.

      What HTML Is:

      • Structure language for web content
      • Not a programming language – it’s a markup language
      • Foundation of all websites
      • Works together with CSS (styling) and JavaScript (interactivity)

      Key Concepts:

      • Elements: Building blocks of HTML (e.g., paragraphs, headings, images)
      • Tags: Markers that define elements (e.g., <p>, <h1>, <img>)
      • Attributes: Additional information about elements (e.g., class, id, src)

      Getting Started

      Tools You Need:

      1. Text Editor:
        • Visual Studio Code (recommended)
        • Sublime Text
        • Notepad++ (Windows)
        • Any plain text editor
      2. Web Browser:
        • Chrome, Firefox, Safari, or Edge
        • Built-in Developer Tools for debugging

      Creating Your First HTML File:

      1. Create a new file named index.html
      2. Add the following code:
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>
      HTML
      1. Save the file and open it in a web browser
      2. You should see your heading and paragraph displayed!

      HTML Document Structure

      Every HTML document follows a basic structure:

      <!DOCTYPE html>
<html lang="en">
<head>
    <!-- Metadata goes here -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <!-- Visible content goes here -->
</body>
</html>
      HTML

      Breaking It Down:

      <!DOCTYPE html>

      • Declares the document as HTML5
      • Must be the very first line
      • Not case-sensitive but conventionally uppercase

      <html> Element

      • Root element of the page
      • Contains all other elements
      • lang attribute specifies the language (important for accessibility)

      <head> Element

      • Contains metadata about the document
      • Not displayed on the page
      • Includes title, character set, styles, scripts, etc.

      <body> Element

      • Contains all visible content
      • Everything users see and interact with

      Essential Meta Tags:

      <head>
    <!-- Character encoding (supports international characters) -->
    <meta charset="UTF-8">

    <!-- Responsive design (mobile-friendly) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO description -->
    <meta name="description" content="A brief description of your page">

    <!-- Author -->
    <meta name="author" content="Your Name">

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

    <!-- Page title (appears in browser tab) -->
    <title>Your Page Title</title>
</head>
      HTML

      HTML Elements and Tags

      Anatomy of an HTML Element:

      <tagname attribute="value">Content goes here</tagname>
      HTML
      • Opening tag: <tagname>
      • Content: Text or other elements
      • Closing tag: </tagname>
      • Attributes: Additional information (optional)

      Self-Closing Tags:

      Some elements don’t have content and use a self-closing format:

      <img src="image.jpg" alt="Description">
<br>
<hr>
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
      HTML

      Nested Elements:

      Elements can contain other elements:

      <div>
    <h2>Section Title</h2>
    <p>This is a <strong>paragraph</strong> with <em>nested</em> elements.</p>
</div>
      HTML

      Comments:

      <!-- This is a comment and won't be displayed -->
<!-- 
    Multi-line comment
    for longer notes
-->
      HTML

      Text Formatting

      Headings:

      HTML provides six levels of headings:

      <h1>Main Heading (Most Important)</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading (Least Important)</h6>
      HTML

      Best Practices:

      • Use only one <h1> per page
      • Don’t skip heading levels (don’t jump from <h2> to <h4>)
      • Use headings for structure, not just for styling

      Paragraphs:

      <p>This is a paragraph. Paragraphs are the most common way to display text content.</p>
<p>Each paragraph creates a new block with spacing above and below.</p>
      HTML

      Line Breaks and Horizontal Rules:

      <p>This is line one.<br>This is line two on a new line.</p>

<hr> <!-- Horizontal rule (divider line) -->
      HTML

      Text Formatting Tags:

      <!-- Bold text (strong importance) -->
<strong>Bold text (semantic)</strong>
<b>Bold text (visual only)</b>

<!-- Italic text (emphasis) -->
<em>Italic text (semantic)</em>
<i>Italic text (visual only)</i>

<!-- Underline -->
<u>Underlined text</u>

<!-- Strikethrough -->
<s>Strikethrough text</s>
<del>Deleted text</del>

<!-- Mark/Highlight -->
<mark>Highlighted text</mark>

<!-- Small text -->
<small>Small text</small>

<!-- Subscript and Superscript -->
<p>H<sub>2</sub>O (subscript)</p>
<p>E=mc<sup>2</sup> (superscript)</p>

<!-- Code and Preformatted Text -->
<code>inline code</code>
<pre>
    Preformatted text
    preserves    spaces
    and line breaks
</pre>

<!-- Quotes -->
<blockquote>
    This is a longer quotation that stands alone as a block.
</blockquote>

<q>This is a short inline quote.</q>
      HTML

      Special Characters (HTML Entities):

      <      <!-- Less than (<) -->
>      <!-- Greater than (>) -->
&     <!-- Ampersand (&) -->
"    <!-- Double quote (") -->
'    <!-- Apostrophe (') -->
     <!-- Non-breaking space -->
©    <!-- Copyright symbol (©) -->
®     <!-- Registered trademark (®) -->
€    <!-- Euro symbol (€) -->
      HTML
      <!-- External link -->
<a href="https://www.example.com">Visit Example</a>

<!-- Link to another page in your site -->
<a href="about.html">About Us</a>

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

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

<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>
      HTML
      <!-- Open in new tab -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
    External Site
</a>

<!-- Add a title (tooltip) -->
<a href="page.html" title="Go to the next page">Next</a>

<!-- Download link -->
<a href="document.pdf" download>Download PDF</a>
      HTML
      <nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>
      HTML
      <!-- Navigation link -->
<a href="#contact">Go to Contact Section</a>

<!-- Target section further down the page -->
<section id="contact">
    <h2>Contact Us</h2>
    <p>Contact information here...</p>
</section>
      HTML

      Images and Multimedia

      Images:

      <!-- Basic image -->
<img src="image.jpg" alt="Description of image">

<!-- Image with dimensions -->
<img src="image.jpg" alt="Description" width="500" height="300">

<!-- Responsive image -->
<img src="image.jpg" alt="Description" style="max-width: 100%; height: auto;">
      HTML

      Important Attributes:

      • src: Path to the image file (required)
      • alt: Alternative text for accessibility (required)
      • width and height: Dimensions in pixels
      • title: Tooltip text on hover
      <a href="page.html">
    <img src="thumbnail.jpg" alt="Click to view">
</a>
      HTML

      Picture Element (Responsive Images):

      <picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive image">
</picture>
      HTML

      Figure and Figcaption:

      <figure>
    <img src="image.jpg" alt="Landscape photo">
    <figcaption>A beautiful sunset over the mountains</figcaption>
</figure>
      HTML

      Video:

      <video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser doesn't support video playback.
</video>
      HTML

      Video Attributes:

      • controls: Shows play/pause buttons
      • autoplay: Starts playing automatically (use sparingly)
      • loop: Repeats the video
      • muted: Mutes audio
      • poster: Image shown before playing

      Audio:

      <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser doesn't support audio playback.
</audio>
      HTML

      Embedded Content (YouTube, etc.):

      <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
</iframe>
      HTML

      Lists

      Unordered List (Bullets):

      <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>
      HTML

      Ordered List (Numbered):

      <ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>
      HTML

      Ordered List Attributes:

      <!-- Start from specific number -->
<ol start="5">
    <li>Item 5</li>
    <li>Item 6</li>
</ol>

<!-- Reverse order -->
<ol reversed>
    <li>Third</li>
    <li>Second</li>
    <li>First</li>
</ol>

<!-- Different numbering types -->
<ol type="A">  <!-- A, B, C -->
<ol type="a">  <!-- a, b, c -->
<ol type="I">  <!-- I, II, III -->
<ol type="i">  <!-- i, ii, iii -->
<ol type="1">  <!-- 1, 2, 3 (default) -->
      HTML

      Nested Lists:

      <ul>
    <li>Main item 1
        <ul>
            <li>Sub-item 1.1</li>
            <li>Sub-item 1.2</li>
        </ul>
    </li>
    <li>Main item 2</li>
</ul>
      HTML

      Description List:

      <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - structure of web pages</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets - styling and layout</dd>

    <dt>JavaScript</dt>
    <dd>Programming language for interactivity</dd>
</dl>
      HTML

      Tables

      Basic Table:

      <table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Los Angeles</td>
        </tr>
    </tbody>
</table>
      HTML

      Table Elements:

      • <table>: Container for the table
      • <thead>: Table header section
      • <tbody>: Table body section
      • <tfoot>: Table footer section (optional)
      • <tr>: Table row
      • <th>: Table header cell (bold and centered by default)
      • <td>: Table data cell

      Table with Caption:

      <table>
    <caption>Monthly Sales Report</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Sales</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$10,000</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$12,000</td>
        </tr>
    </tbody>
</table>
      HTML

      Spanning Columns and Rows:

      <table>
    <tr>
        <th>Name</th>
        <th colspan="2">Contact</th> <!-- Spans 2 columns -->
    </tr>
    <tr>
        <td>John</td>
        <td>Email</td>
        <td>Phone</td>
    </tr>
    <tr>
        <td rowspan="2">Jane</td> <!-- Spans 2 rows -->
        <td>Email</td>
        <td>jane@email.com</td>
    </tr>
    <tr>
        <td>Phone</td>
        <td>123-456-7890</td>
    </tr>
</table>
      HTML

      Table with Scope (Accessibility):

      <table>
    <thead>
        <tr>
            <th scope="col">Product</th>
            <th scope="col">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Laptop</th>
            <td>$999</td>
        </tr>
        <tr>
            <th scope="row">Phone</th>
            <td>$699</td>
        </tr>
    </tbody>
</table>
      HTML

      Forms and Input

      Basic Form:

      <form action="/submit" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <button type="submit">Submit</button>
</form>
      HTML

      Form Attributes:

      • action: URL where form data is sent
      • method: HTTP method (GET or POST)
      • enctype: Encoding type (needed for file uploads)

      Input Types:

      <!-- Text input -->
<input type="text" placeholder="Enter text">

<!-- Password (hidden characters) -->
<input type="password" placeholder="Password">

<!-- Email (validation) -->
<input type="email" placeholder="email@example.com">

<!-- Number -->
<input type="number" min="0" max="100" step="1">

<!-- Date -->
<input type="date">

<!-- Time -->
<input type="time">

<!-- Color picker -->
<input type="color">

<!-- File upload -->
<input type="file" accept=".jpg,.png,.pdf">

<!-- Multiple files -->
<input type="file" multiple>

<!-- Range slider -->
<input type="range" min="0" max="100" value="50">

<!-- URL -->
<input type="url" placeholder="https://example.com">

<!-- Telephone -->
<input type="tel" placeholder="123-456-7890">

<!-- Search -->
<input type="search" placeholder="Search...">

<!-- Hidden (not visible) -->
<input type="hidden" name="userId" value="123">
      HTML

      Checkboxes and Radio Buttons:

      <!-- Checkboxes (multiple selections) -->
<fieldset>
    <legend>Select your interests:</legend>
    <label>
        <input type="checkbox" name="interests" value="sports"> Sports
    </label>
    <label>
        <input type="checkbox" name="interests" value="music"> Music
    </label>
    <label>
        <input type="checkbox" name="interests" value="reading"> Reading
    </label>
</fieldset>

<!-- Radio buttons (single selection) -->
<fieldset>
    <legend>Select your gender:</legend>
    <label>
        <input type="radio" name="gender" value="male"> Male
    </label>
    <label>
        <input type="radio" name="gender" value="female"> Female
    </label>
    <label>
        <input type="radio" name="gender" value="other"> Other
    </label>
</fieldset>
      HTML

      Textarea:

      <label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="30" placeholder="Enter your message"></textarea>
      HTML

      Select Dropdown:

      <label for="country">Country:</label>
<select id="country" name="country">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
</select>

<!-- Multiple selections -->
<select name="languages" multiple>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
</select>

<!-- Grouped options -->
<select name="food">
    <optgroup label="Fruits">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
    </optgroup>
    <optgroup label="Vegetables">
        <option value="carrot">Carrot</option>
        <option value="broccoli">Broccoli</option>
    </optgroup>
</select>
      HTML

      Buttons:

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

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

<!-- Regular button (requires JavaScript) -->
<button type="button" onclick="alert('Clicked!')">Click Me</button>

<!-- Input button (older style) -->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Click">
      HTML

      Form Validation Attributes:

      <!-- Required field -->
<input type="text" required>

<!-- Minimum and maximum length -->
<input type="text" minlength="3" maxlength="20">

<!-- Pattern matching (regex) -->
<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">

<!-- Minimum and maximum values (for numbers) -->
<input type="number" min="1" max="100">

<!-- Step increment -->
<input type="number" step="5">

<!-- Disable autocomplete -->
<input type="text" autocomplete="off">

<!-- Readonly (cannot be edited) -->
<input type="text" value="Fixed value" readonly>

<!-- Disabled (grayed out, not submitted) -->
<input type="text" disabled>
      HTML

      Complete Form Example:

      <form action="/submit" method="POST">
    <fieldset>
        <legend>Personal Information</legend>

        <div>
            <label for="fullname">Full Name:</label>
            <input type="text" id="fullname" name="fullname" required>
        </div>

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

        <div>
            <label for="age">Age:</label>
            <input type="number" id="age" name="age" min="18" max="120">
        </div>

        <div>
            <label for="country">Country:</label>
            <select id="country" name="country">
                <option value="">Select...</option>
                <option value="us">United States</option>
                <option value="uk">United Kingdom</option>
            </select>
        </div>

        <div>
            <label>
                <input type="checkbox" name="terms" required>
                I agree to the terms and conditions
            </label>
        </div>

        <div>
            <button type="submit">Submit</button>
            <button type="reset">Clear</button>
        </div>
    </fieldset>
</form>
      HTML

      Semantic HTML

      Semantic HTML uses meaningful tags that describe the content’s purpose, improving accessibility, SEO, and code readability.

      Layout Elements:

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic Layout</title>
</head>
<body>
    <!-- Site header -->
    <header>
        <h1>Website Title</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>

    <!-- Main content -->
    <main>
        <!-- Article (self-contained content) -->
        <article>
            <header>
                <h2>Article Title</h2>
                <p>By Author Name | <time datetime="2025-12-17">December 17, 2025</time></p>
            </header>

            <section>
                <h3>Introduction</h3>
                <p>Article content...</p>
            </section>

            <section>
                <h3>Main Points</h3>
                <p>More content...</p>
            </section>

            <footer>
                <p>Article tags: HTML, Web Development</p>
            </footer>
        </article>

        <!-- Sidebar content -->
        <aside>
            <h3>Related Links</h3>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </aside>
    </main>

    <!-- Site footer -->
    <footer>
        <p>© 2025 Your Website. All rights reserved.</p>
    </footer>
</body>
</html>
      HTML

      Semantic Elements Explained:

      • <header>: Introductory content or navigation
      • <nav>: Navigation links
      • <main>: Main content of the page (one per page)
      • <article>: Self-contained, independently distributable content
      • <section>: Thematic grouping of content
      • <aside>: Content tangentially related to main content
      • <footer>: Footer information
      • <figure> & <figcaption>: Self-contained content with caption
      • <time>: Date/time information
      • <mark>: Highlighted/marked text
      • <details> & <summary>: Expandable details

      Details and Summary (Accordion):

      <details>
    <summary>Click to expand</summary>
    <p>Hidden content that appears when expanded.</p>
</details>

<details open>
    <summary>This starts expanded</summary>
    <p>Content visible by default.</p>
</details>
      HTML

      Benefits of Semantic HTML:

      1. SEO: Search engines better understand your content
      2. Accessibility: Screen readers can navigate more effectively
      3. Maintainability: Code is easier to read and update
      4. Consistency: Clear structure for team collaboration

      Non-Semantic vs. Semantic:

      <!-- Non-semantic (avoid) -->
<div id="header">
    <div id="nav">...</div>
</div>
<div id="main">
    <div class="article">...</div>
</div>

<!-- Semantic (preferred) -->
<header>
    <nav>...</nav>
</header>
<main>
    <article>...</article>
</main>
      HTML

      HTML5 Features

      New Semantic Elements:

      HTML5 introduced many semantic elements we’ve already covered:

      • <header>, <footer>, <nav>, <main>, <article>, <section>, <aside>

      Canvas (Drawing Graphics):

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

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 100, 75);
</script>
      HTML

      SVG (Scalable Vector Graphics):

      <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
</svg>

<svg width="200" height="100">
    <rect x="10" y="10" width="180" height="80" fill="blue" stroke="black" />
</svg>
      HTML

      Geolocation (via JavaScript):

      <button onclick="getLocation()">Get My Location</button>
<p id="location"></p>

<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
}

function showPosition(position) {
    document.getElementById('location').innerHTML = 
        "Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude;
}
</script>
      HTML

      Local Storage:

      <script>
// Store data
localStorage.setItem('username', 'JohnDoe');

// Retrieve data
let user = localStorage.getItem('username');

// Remove data
localStorage.removeItem('username');

// Clear all data
localStorage.clear();
</script>
      HTML

      Web Workers (Background Scripts):

      <!-- main.html -->
<script>
const worker = new Worker('worker.js');
worker.postMessage('Hello');
worker.onmessage = function(e) {
    console.log('Message from worker:', e.data);
};
</script>

<!-- worker.js -->
onmessage = function(e) {
    postMessage('Worker received: ' + e.data);
};
      HTML

      Drag and Drop:

      <div id="drag1" draggable="true" ondragstart="drag(event)">
    Drag me!
</div>

<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
    Drop here
</div>

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
      HTML

      HTML5 Form Features:

      <!-- Datalist (autocomplete suggestions) -->
<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

<!-- Output element -->
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0"> =
    <output name="result" for="a b">0</output>
</form>

<!-- Progress bar -->
<progress value="70" max="100">70%</progress>

<!-- Meter (gauge) -->
<meter value="0.6" min="0" max="1">60%</meter>
      HTML

      Content Editable:

      <div contenteditable="true">
    This content can be edited by the user!
</div>
      HTML

      Data Attributes:

      <article 
    data-article-id="123" 
    data-author="John Doe" 
    data-category="Technology">
    Article content...
</article>

<script>
const article = document.querySelector('article');
console.log(article.dataset.articleId);  // "123"
console.log(article.dataset.author);     // "John Doe"
</script>
      HTML

      Best Practices

      1. Document Structure:

      ✅ Do:

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Descriptive Title</title>
</head>
<body>
    <main>
        <h1>One main heading per page</h1>
    </main>
</body>
</html>
      HTML

      ❌ Don’t:

      <html>  <!-- Missing DOCTYPE and lang -->
<head>
    <!-- Missing charset and viewport -->
</head>
<body>
    <h1>First heading</h1>
    <h1>Another heading</h1>  <!-- Multiple h1s -->
</body>
      HTML

      2. Semantic HTML:

      ✅ Do:

      <nav>
    <ul>
        <li><a href="/">Home</a></li>
    </ul>
</nav>

<article>
    <h2>Article Title</h2>
    <p>Content...</p>
</article>
      HTML

      ❌ Don’t:

      <div class="nav">
    <div class="menu">
        <div class="item"><a href="/">Home</a></div>
    </div>
</div>
      HTML

      3. Accessibility:

      ✅ Do:

      <!-- Always include alt text for images -->
<img src="photo.jpg" alt="Person smiling at camera">

<!-- Associate labels with inputs -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<!-- Use ARIA when necessary -->
<button aria-label="Close menu">×</button>

<!-- Proper heading hierarchy -->
<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section</h3>
      HTML

      ❌ Don’t:

      <img src="photo.jpg">  <!-- No alt text -->

Email: <input type="text">  <!-- No label -->

<div onclick="close()">×</div>  <!-- Non-semantic button -->

<h1>Title</h1>
<h3>Skipped h2</h3>  <!-- Skipped heading level -->
      HTML

      4. Valid HTML:

      • Close all tags properly
      • Use lowercase for tags and attributes
      • Quote all attribute values
      • Don’t nest block elements incorrectly

      ✅ Do:

      <p>This is <strong>correct</strong> nesting.</p>
<div>
    <p>Block elements properly nested</p>
</div>
      HTML

      ❌ Don’t:

      <p>This is <strong>incorrect</p> nesting.</strong>
<span>
    <div>Block inside inline is invalid</div>
</span>
      HTML

      5. Performance:

      ✅ Do:

      <!-- Load scripts at the end of body -->
<body>
    <!-- Content -->
    <script src="script.js"></script>
</body>

<!-- Or use defer/async -->
<head>
    <script src="script.js" defer></script>
</head>

<!-- Optimize images -->
<img src="optimized.jpg" alt="Description" loading="lazy">
      HTML

      6. Maintainability:

      ✅ Do:

      <!-- Use comments for sections -->
<!-- Header Section -->
<header>
    <nav>...</nav>
</header>

<!-- Main Content -->
<main>
    <!-- Article 1 -->
    <article>...</article>
</main>

<!-- Use consistent indentation -->
<div>
    <p>Properly indented</p>
</div>
      HTML

      7. Meta Tags and SEO:

      <head>
    <!-- Essential meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Clear, concise description (150-160 chars)">

    <!-- Open Graph (social media sharing) -->
    <meta property="og:title" content="Page Title">
    <meta property="og:description" content="Description">
    <meta property="og:image" content="https://example.com/image.jpg">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="favicon.png">

    <title>Descriptive Title | Site Name</title>
</head>
      HTML

      8. Forms:

      ✅ Do:

      <form action="/submit" method="POST">
    <label for="username">Username:</label>
    <input 
        type="text" 
        id="username" 
        name="username" 
        required 
        autocomplete="username">

    <button type="submit">Submit</button>
</form>
      HTML

      ❌ Don’t:

      <form>  <!-- No action or method -->
    Username: <input type="text">  <!-- No label, id, or name -->
    <div onclick="submit()">Submit</div>  <!-- Not a button -->
</form>
      HTML

      9. Validation:

      10. Modern Practices:

      <!-- Use HTML5 semantic elements -->
<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>

<!-- Responsive images -->
<img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" 
     sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
     src="medium.jpg" alt="Description">

<!-- Native lazy loading -->
<img src="image.jpg" alt="Description" loading="lazy">

<!-- Modern video -->
<video controls preload="metadata">
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles.vtt" srclang="en" label="English">
</video>
      HTML

      Resources and Next Steps

      Official Documentation:

      1. MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML
        • Most comprehensive HTML reference
        • Excellent tutorials and guides
      2. W3Schools: https://www.w3schools.com/html/
        • Beginner-friendly tutorials
        • Interactive examples
      3. HTML Specification: https://html.spec.whatwg.org/
        • Official HTML living standard

      Tools:

      1. Validators:
      2. Code Editors:
        • Visual Studio Code (with extensions)
        • Sublime Text
        • Atom
      3. Browser DevTools:
        • Chrome DevTools
        • Firefox Developer Tools
        • Safari Web Inspector

      Learning Path:

      1. Master HTML (You’re here! ✓)
      2. Learn CSS: Style your HTML pages
      3. Learn JavaScript: Add interactivity
      4. Responsive Design: Mobile-first approach
      5. Frameworks: React, Vue, Angular (optional)
      6. Backend: Node.js, Python, PHP (optional)

      Practice Projects:

      1. Personal Portfolio:
        • About page
        • Projects gallery
        • Contact form
      2. Blog Layout:
        • Article listings
        • Individual article pages
        • Navigation and sidebar
      3. Restaurant Website:
        • Menu with images
        • Reservation form
        • Location map
      4. Landing Page:
        • Hero section
        • Features
        • Call-to-action
      5. E-commerce Product Page:
        • Product images
        • Description and specifications
        • Add to cart form

      Common Mistakes to Avoid:

      1. ❌ Forgetting to close tags
      2. ❌ Using deprecated tags (<center>, <font>, <marquee>)
      3. ❌ Not using semantic HTML
      4. ❌ Missing alt text on images
      5. ❌ Improper form structure
      6. ❌ Multiple <h1> tags on one page
      7. ❌ Using tables for layout
      8. ❌ Inline styles everywhere (use CSS instead)
      9. ❌ Not testing across browsers
      10. ❌ Ignoring accessibility

      Tips for Continued Learning:

      1. Build real projects – Theory alone isn’t enough
      2. Read other people’s code – View source on websites you like
      3. Use browser DevTools – Inspect and experiment
      4. Stay updated – Web standards evolve
      5. Join communities – Stack Overflow, Reddit, Discord
      6. Practice daily – Consistency is key

      Next Technologies to Learn:

      1. CSS – Styling and layout
        • Flexbox and Grid
        • Responsive design
        • Animations
      2. JavaScript – Interactivity
        • DOM manipulation
        • Events
        • ES6+ features
      3. Version Control – Git and GitHub
        • Track changes
        • Collaborate with others
      4. Responsive Design
        • Mobile-first approach
        • Media queries
        • Flexible layouts
      5. Web Accessibility (a11y)
        • ARIA attributes
        • Keyboard navigation
        • Screen reader testing

      Helpful Communities:

      • Stack Overflow: Q&A for specific problems
      • r/webdev: Reddit community for web developers
      • Dev.to: Articles and tutorials
      • CodePen: Share and explore HTML/CSS/JS
      • freeCodeCamp: Free coding bootcamp

      Books (Optional):

      1. “HTML and CSS: Design and Build Websites” by Jon Duckett
      2. “Learning Web Design” by Jennifer Robbins
      3. “Eloquent JavaScript” (for next step)

      Conclusion

      Congratulations on completing this comprehensive HTML tutorial! You’ve learned:

      ✅ HTML fundamentals and document structure
      ✅ All major HTML elements and their uses
      ✅ Forms and user input
      ✅ Semantic HTML and accessibility
      ✅ HTML5 modern features
      ✅ Best practices and coding standards

      Remember:

      • HTML is the foundation of all websites
      • Semantic HTML improves accessibility and SEO
      • Valid HTML prevents bugs and ensures compatibility
      • Practice regularly to reinforce learning
      • Keep learning – technology constantly evolves

      Your Next Steps:

      1. Practice – Build actual websites
      2. Learn CSS – Make your HTML look beautiful
      3. Learn JavaScript – Add dynamic functionality
      4. Build a portfolio – Showcase your skills

      Happy coding! 🚀

      Last Updated: December 17, 2025
      Version: 1.0

      Quick Reference Card

      Basic Structure:

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

      Common Tags:

      • <h1> to <h6>: Headings
      • <p>: Paragraph
      • <a href="">: Link
      • <img src="" alt="">: Image
      • <div>: Division/container
      • <span>: Inline container
      • <ul>, <ol>, <li>: Lists
      • <table>, <tr>, <td>: Tables
      • <form>, <input>, <button>: Forms

      Semantic Tags:

      • <header>, <footer>, <nav>, <main>
      • <article>, <section>, <aside>
      • <figure>, <figcaption>

      Special Characters:

      • &lt; (<), &gt; (>), &amp; (&)
      • &nbsp; (space), &copy; (©)

      HTML Cheatsheet

      Quick reference guide for HTML elements, attributes, and syntax

      Document Structure

      <!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="Page description">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <!-- Content here -->
</body>
</html>
      HTML

      Text Elements

      ElementDescriptionExample
      <h1> to <h6>Headings (h1 largest)<h1>Main Heading</h1>
      <p>Paragraph<p>Text content</p>
      <br>Line breakLine 1<br>Line 2
      <hr>Horizontal rule<hr>
      <strong>Bold (important)<strong>Bold text</strong>
      <b>Bold (visual)<b>Bold text</b>
      <em>Italic (emphasis)<em>Italic text</em>
      <i>Italic (visual)<i>Italic text</i>
      <mark>Highlighted text<mark>Highlighted</mark>
      <small>Smaller text<small>Small text</small>
      <del>Deleted text<del>Deleted</del>
      <ins>Inserted text<ins>Inserted</ins>
      <sub>SubscriptH<sub>2</sub>O
      <sup>SuperscriptX<sup>2</sup>
      <code>Inline code<code>code()</code>
      <pre>Preformatted text<pre>Formatted text</pre>
      <blockquote>Block quote<blockquote>Quote</blockquote>
      <q>Inline quote<q>Short quote</q>
      <abbr>Abbreviation<abbr title="HyperText Markup Language">HTML</abbr>
      <cite>Citation<cite>Book Title</cite>
      <kbd>Keyboard inputPress <kbd>Ctrl</kbd>
      <samp>Sample output<samp>Output text</samp>
      <var>Variable<var>x</var> = 10
      <!-- Basic link -->
<a href="https://example.com">Link text</a>

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

<!-- Internal link -->
<a href="page.html">Go to page</a>

<!-- Anchor link (same page) -->
<a href="#section-id">Jump to section</a>

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

<!-- Phone link -->
<a href="tel:+1234567890">Call us</a>

<!-- Download link -->
<a href="file.pdf" download>Download PDF</a>

<!-- Link with title -->
<a href="page.html" title="Tooltip text">Hover me</a>
      HTML

      Images

      <!-- Basic image -->
<img src="image.jpg" alt="Description">

<!-- Image with dimensions -->
<img src="image.jpg" alt="Description" width="300" height="200">

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

<!-- Lazy loading -->
<img src="image.jpg" alt="Description" loading="lazy">

<!-- Image with srcset (responsive) -->
<img src="medium.jpg" 
     srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Description">

<!-- Picture element -->
<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Description">
</picture>

<!-- Figure with caption -->
<figure>
    <img src="image.jpg" alt="Description">
    <figcaption>Image caption</figcaption>
</figure>
      HTML

      Lists

      <!-- Unordered list -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<!-- Ordered list -->
<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

<!-- Ordered list with custom start -->
<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
</ol>

<!-- Reversed ordered list -->
<ol reversed>
    <li>Item</li>
</ol>

<!-- Ordered list types -->
<ol type="A">  <!-- A, B, C -->
<ol type="a">  <!-- a, b, c -->
<ol type="I">  <!-- I, II, III -->
<ol type="i">  <!-- i, ii, iii -->
<ol type="1">  <!-- 1, 2, 3 (default) -->

<!-- Nested lists -->
<ul>
    <li>Item 1
        <ul>
            <li>Sub-item 1.1</li>
            <li>Sub-item 1.2</li>
        </ul>
    </li>
    <li>Item 2</li>
</ul>

<!-- Description list -->
<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
</dl>
      HTML

      Tables

      <!-- Basic table -->
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Col 1</td>
            <td>Row 1, Col 2</td>
            <td>Row 1, Col 3</td>
        </tr>
        <tr>
            <td>Row 2, Col 1</td>
            <td>Row 2, Col 2</td>
            <td>Row 2, Col 3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Footer</td>
        </tr>
    </tfoot>
</table>

<!-- Table with caption -->
<table>
    <caption>Table Caption</caption>
    <tr>
        <th>Header</th>
        <td>Data</td>
    </tr>
</table>

<!-- Column spanning -->
<td colspan="2">Spans 2 columns</td>

<!-- Row spanning -->
<td rowspan="2">Spans 2 rows</td>

<!-- Table with scope (accessibility) -->
<th scope="col">Column Header</th>
<th scope="row">Row Header</th>
      HTML

      Forms

      <!-- Basic form -->
<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

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

<!-- Form attributes -->
<form action="/submit" 
      method="POST" 
      enctype="multipart/form-data"
      autocomplete="on"
      novalidate>
</form>
      HTML

      Input Types

      <!-- Text inputs -->
<input type="text" placeholder="Text">
<input type="password" placeholder="Password">
<input type="email" placeholder="email@example.com">
<input type="url" placeholder="https://example.com">
<input type="tel" placeholder="123-456-7890">
<input type="search" placeholder="Search...">

<!-- Number and range -->
<input type="number" min="0" max="100" step="1" value="50">
<input type="range" min="0" max="100" value="50">

<!-- Date and time -->
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">

<!-- Other inputs -->
<input type="color" value="#ff0000">
<input type="file" accept=".jpg,.png,.pdf">
<input type="file" multiple>
<input type="hidden" name="userId" value="123">

<!-- Checkbox -->
<input type="checkbox" id="agree" name="agree" value="yes" checked>
<label for="agree">I agree</label>

<!-- Radio buttons -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
      HTML

      Input Attributes

      <input type="text" 
       name="username"
       id="username"
       value="default value"
       placeholder="Enter username"
       required
       readonly
       disabled
       autofocus
       autocomplete="off"
       minlength="3"
       maxlength="20"
       pattern="[A-Za-z]{3,}"
       title="Tooltip text">
      HTML

      Textarea

      <textarea name="message" 
          rows="5" 
          cols="30" 
          placeholder="Enter message"
          required></textarea>
      HTML

      Select Dropdown

      <!-- Basic select -->
<select name="country" id="country">
    <option value="">Select...</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca" selected>Canada</option>
</select>

<!-- Multiple select -->
<select name="languages" multiple size="4">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
</select>

<!-- Grouped options -->
<select name="food">
    <optgroup label="Fruits">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
    </optgroup>
    <optgroup label="Vegetables">
        <option value="carrot">Carrot</option>
        <option value="broccoli">Broccoli</option>
    </optgroup>
</select>
      HTML

      Buttons

      <button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Click</button>

<!-- Input buttons (older style) -->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Click">
      HTML

      Fieldset and Legend

      <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
</fieldset>
      HTML

      Datalist (Autocomplete)

      <input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>
      HTML

      Other Form Elements

      <!-- Progress bar -->
<progress value="70" max="100">70%</progress>

<!-- Meter (gauge) -->
<meter value="0.6" min="0" max="1" low="0.3" high="0.7" optimum="0.8">60%</meter>

<!-- Output -->
<output name="result">0</output>
      HTML

      Semantic HTML

      <!-- Page structure -->
<header>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <header>
            <h1>Article Title</h1>
            <p>By <span>Author</span> | <time datetime="2025-12-17">Dec 17, 2025</time></p>
        </header>

        <section>
            <h2>Section Title</h2>
            <p>Content...</p>
        </section>

        <footer>
            <p>Tags: HTML, Web</p>
        </footer>
    </article>

    <aside>
        <h3>Related</h3>
        <p>Sidebar content</p>
    </aside>
</main>

<footer>
    <p>© 2025 Company Name</p>
</footer>
      HTML

      Semantic Elements

      ElementPurpose
      <header>Introductory content
      <nav>Navigation links
      <main>Main content (one per page)
      <article>Self-contained content
      <section>Thematic grouping
      <aside>Sidebar/tangential content
      <footer>Footer information
      <figure>Self-contained content
      <figcaption>Caption for figure
      <time>Date/time
      <mark>Highlighted text
      <details>Expandable details
      <summary>Summary for details

      Media

      Audio

      <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser doesn't support audio.
</audio>

<!-- Audio attributes -->
<audio controls autoplay loop muted preload="auto"></audio>
      HTML

      Video

      <video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track kind="subtitles" src="subs.vtt" srclang="en" label="English">
    Your browser doesn't support video.
</video>

<!-- Video attributes -->
<video controls autoplay loop muted poster="thumbnail.jpg" preload="metadata"></video>
      HTML

      Iframe

      <!-- Embedded content -->
<iframe src="https://example.com" 
        width="600" 
        height="400"
        frameborder="0"
        allowfullscreen>
</iframe>

<!-- YouTube embed -->
<iframe width="560" 
        height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media"
        allowfullscreen>
</iframe>
      HTML

      Container Elements

      <!-- Generic block container -->
<div class="container">Content</div>

<!-- Generic inline container -->
<span class="highlight">Text</span>

<!-- Containers with semantic meaning -->
<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
      HTML

      Meta Tags

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

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

    <!-- SEO -->
    <meta name="description" content="Page description (150-160 chars)">
    <meta name="keywords" content="keyword1, keyword2, keyword3">
    <meta name="author" content="Author Name">

    <!-- Social media (Open Graph) -->
    <meta property="og:title" content="Title">
    <meta property="og:description" content="Description">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com/page">
    <meta property="og:type" content="website">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Title">
    <meta name="twitter:description" content="Description">
    <meta name="twitter:image" content="https://example.com/image.jpg">

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

    <!-- Canonical URL -->
    <link rel="canonical" href="https://example.com/page">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="styles.css">

    <!-- Scripts -->
    <script src="script.js" defer></script>
    <script src="script.js" async></script>
</head>
      HTML

      HTML Entities

      CharacterEntityDescription
      <&lt;Less than
      >&gt;Greater than
      &&amp;Ampersand
      “&quot;Double quote
      ‘&apos;Apostrophe
      &nbsp;Non-breaking space
      ©&copy;Copyright
      ®&reg;Registered trademark
      ™&trade;Trademark
      €&euro;Euro
      £&pound;Pound
      ¥&yen;Yen
      °&deg;Degree
      ±&plusmn;Plus/minus
      ×&times;Multiplication
      ÷&divide;Division
      ½&frac12;One half
      ¼&frac14;One quarter
      ¾&frac34;Three quarters
      →&rarr;Right arrow
      ←&larr;Left arrow
      ↑&uarr;Up arrow
      ↓&darr;Down arrow

      HTML5 Features

      Canvas

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

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 75);
</script>
      HTML

      SVG

      <!-- Inline SVG -->
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
    <rect x="10" y="10" width="80" height="80" fill="blue" />
    <line x1="0" y1="0" x2="100" y2="100" stroke="black" />
    <polygon points="50,10 90,90 10,90" fill="green" />
</svg>
      HTML

      Details/Summary (Accordion)

      <details>
    <summary>Click to expand</summary>
    <p>Hidden content revealed when expanded.</p>
</details>

<details open>
    <summary>Starts expanded</summary>
    <p>Content visible by default.</p>
</details>
      HTML

      Dialog

      <dialog id="myDialog">
    <h2>Dialog Title</h2>
    <p>Dialog content</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>
      HTML

      Data Attributes

      <div data-user-id="123" 
     data-role="admin" 
     data-status="active">
    Content
</div>

<script>
const div = document.querySelector('div');
console.log(div.dataset.userId);  // "123"
console.log(div.dataset.role);    // "admin"
</script>
      HTML

      Content Editable

      <div contenteditable="true">
    This content can be edited!
</div>
      HTML

      Draggable

      <div draggable="true" ondragstart="drag(event)">
    Drag me!
</div>
      HTML

      Global Attributes

      Can be used on any HTML element:

      AttributeDescriptionExample
      idUnique identifier<div id="unique">
      classCSS class(es)<div class="btn primary">
      styleInline CSS<div style="color: red;">
      titleTooltip text<div title="Info">
      langLanguage<p lang="es">
      dirText direction<p dir="rtl"> (rtl/ltr)
      hiddenHide element<div hidden>
      tabindexTab order<div tabindex="1">
      accesskeyKeyboard shortcut<button accesskey="s">
      contenteditableEditable content<div contenteditable="true">
      draggableDraggable<div draggable="true">
      spellcheckSpell checking<input spellcheck="true">
      translateTranslation<p translate="no">
      data-*Custom attributes<div data-id="123">

      ARIA Attributes (Accessibility)

      <!-- Roles -->
<nav role="navigation">
<main role="main">
<button role="button">

<!-- Labels -->
<button aria-label="Close">×</button>
<input type="text" aria-labelledby="label-id">

<!-- States -->
<button aria-pressed="true">Toggle</button>
<div aria-expanded="false">Collapsed</div>
<input aria-required="true">
<div aria-hidden="true">Hidden from screen readers</div>

<!-- Live regions -->
<div aria-live="polite">Updates announced</div>
<div aria-live="assertive">Urgent updates</div>

<!-- Descriptions -->
<button aria-describedby="description-id">Button</button>
<p id="description-id">Description text</p>
      HTML

      Comments

      <!-- Single line comment -->

<!-- 
    Multi-line
    comment
-->

<!-- TODO: Fix this later -->

<!-- Conditional comments (IE only, deprecated) -->
<!--[if IE]>
    <p>You are using Internet Explorer</p>
<![endif]-->
      HTML

      Special Elements

      <!-- Script -->
<script>
    console.log('JavaScript code');
</script>
<script src="external.js"></script>
<script src="external.js" defer></script>
<script src="external.js" async></script>

<!-- Style -->
<style>
    body { color: blue; }
</style>

<!-- No script fallback -->
<noscript>
    <p>JavaScript is disabled in your browser.</p>
</noscript>

<!-- Base URL -->
<base href="https://example.com/" target="_blank">

<!-- Template (not rendered) -->
<template id="my-template">
    <div class="item">Template content</div>
</template>
      HTML

      Common Patterns

      <nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>
      HTML

      Card Component

      <article class="card">
    <img src="image.jpg" alt="Card image">
    <h3>Card Title</h3>
    <p>Card description text.</p>
    <a href="#" class="btn">Read More</a>
</article>
      HTML

      Contact Form

      <form action="/contact" method="POST">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
    </div>

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

    <div>
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="5" required></textarea>
    </div>

    <button type="submit">Send Message</button>
</form>
      HTML

      Hero Section

      <section class="hero">
    <h1>Welcome to Our Website</h1>
    <p>Discover amazing content and services</p>
    <a href="#cta" class="btn">Get Started</a>
</section>
      HTML
      <div class="gallery">
    <figure>
        <img src="photo1.jpg" alt="Photo 1">
        <figcaption>Caption 1</figcaption>
    </figure>
    <figure>
        <img src="photo2.jpg" alt="Photo 2">
        <figcaption>Caption 2</figcaption>
    </figure>
    <figure>
        <img src="photo3.jpg" alt="Photo 3">
        <figcaption>Caption 3</figcaption>
    </figure>
</div>
      HTML

      Best Practices

      ✅ Do

      <!-- Use semantic HTML -->
<header>, <nav>, <main>, <article>, <section>, <footer>

<!-- Always include DOCTYPE -->
<!DOCTYPE html>

<!-- Set language -->
<html lang="en">

<!-- Use proper meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Alt text for images -->
<img src="photo.jpg" alt="Descriptive text">

<!-- Associate labels with inputs -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<!-- One h1 per page -->
<h1>Main Title</h1>

<!-- Proper heading hierarchy -->
<h1> → <h2> → <h3>

<!-- Close all tags -->
<p>Text</p>

<!-- Use lowercase -->
<div class="container"></div>

<!-- Quote attribute values -->
<img src="image.jpg" alt="Description">
      HTML

      ❌ Don’t

      <!-- No DOCTYPE -->
<html>

<!-- Missing language -->
<html>

<!-- Missing alt text -->
<img src="photo.jpg">

<!-- No label association -->
Email: <input type="text">

<!-- Multiple h1 tags -->
<h1>Title 1</h1>
<h1>Title 2</h1>

<!-- Skip heading levels -->
<h1> → <h3>

<!-- Unclosed tags -->
<p>Text

<!-- Mixed case -->
<DIV CLASS="container"></DIV>

<!-- Unquoted attributes -->
<img src=image.jpg>

<!-- Using deprecated tags -->
<center>, <font>, <marquee>

<!-- Tables for layout -->
<table><tr><td>Layout</td></tr></table>

<!-- Divs for everything -->
<div class="header">
    <div class="nav">
      HTML

      Validation & Testing

      W3C Validator

      Browser DevTools

      • Right-click → Inspect
      • Console for errors
      • Network tab for resources
      • Mobile device emulation

      Accessibility Testing

      Quick Template

      <!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="Page description">
    <meta name="author" content="Your Name">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h1>Page Title</h1>
            <p>Content goes here.</p>
        </article>
    </main>

    <footer>
        <p>© 2025 Your Name. All rights reserved.</p>
    </footer>

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

      Resources

      Last Updated: December 17, 2025
      Version: 1.0

      Print this cheatsheet or keep it handy for quick reference while coding!

      Discover more from Altgr Blog

      Subscribe to get the latest posts sent to your email.

      Related Posts

      Leave a Reply

      Your email address will not be published. Required fields are marked *