Developed by Tim Berners-Lee in 1991 at CERN as the foundational markup language for the World Wide Web.
Originally called HTML (HyperText Markup Language), designed to structure and link documents.
Evolved through versions: HTML 2.0 (1995), HTML 4.01 (1999), XHTML (2000), HTML5 (2014).
HTML5 introduced semantic elements, multimedia support, and APIs for modern web applications.
Who:
Tim Berners-Lee — British computer scientist, inventor of the World Wide Web.
W3C (World Wide Web Consortium) — oversees HTML standards and development.
WHATWG (Web Hypertext Application Technology Working Group) — maintains the living HTML standard.
Why:
To create a universal, platform-independent way to structure and share documents on the web.
To enable hyperlinks connecting documents across the internet.
To provide a foundation for multimedia, interactive, and accessible web content.
Introduction
Advantages
Universal Standard — Supported by all browsers and platforms (Chrome, Firefox, Safari, Edge).
Easy to Learn — Simple tag-based syntax, beginner-friendly.
Semantic Markup — Elements like <header>, <article>, <nav> improve accessibility and SEO.
Multimedia Support — Native <video>, <audio>, <canvas> without plugins.
Accessibility — ARIA attributes and semantic tags support screen readers and assistive technologies.
SEO-Friendly — Proper structure and meta tags improve search engine rankings.
Integration — Works seamlessly with CSS (styling) and JavaScript (interactivity).
Disadvantages
Static by Nature — No logic or dynamic behavior without JavaScript.
Limited Styling — Requires CSS for layout and visual design.
Browser Inconsistencies — Older browsers may not support HTML5 features.
No Built-in Security — Vulnerable to XSS attacks without proper sanitization.
Verbose — Can become repetitive for large documents.
Basics
Document Structure & Entry Point
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Page</title></head><body> <h1>Hello, World!</h1> <p>This is my first HTML page.</p></body></html>
<!DOCTYPE html> — Declares HTML5 document type.
<html> — Root element, contains all content.
<head> — Metadata, links to CSS/JS, title, meta tags.
<body> — Visible content displayed in the browser.
Comments
<!-- This is a single-line comment --><!-- This is a multi-line comment --><!-- TODO: Add navigation menu -->
Text Elements & Formatting
<!-- Headings (h1 is largest, h6 is smallest) --><h1>Main Heading</h1><h2>Subheading</h2><h3>Section Title</h3><h4>Subsection</h4><h5>Minor Heading</h5><h6>Smallest Heading</h6><!-- Paragraphs --><p>This is a paragraph of text.</p><!-- Line break --><p>First line<br>Second line</p><!-- Horizontal rule --><hr><!-- Text formatting --><strong>Bold text (semantic importance)</strong><b>Bold text (visual only)</b><em>Italic text (semantic emphasis)</em><i>Italic text (visual only)</i><mark>Highlighted text</mark><small>Smaller text</small><del>Deleted text</del><ins>Inserted text</ins><sub>Subscript</sub> H<sub>2</sub>O<sup>Superscript</sup> E=mc<sup>2</sup><code>Inline code</code><pre>Preformatted text preserves spaces</pre><kbd>Keyboard input</kbd><samp>Sample output</samp><var>Variable</var><abbr title="HyperText Markup Language">HTML</abbr><q>Short inline quote</q><blockquote cite="https://example.com"> Long block quote with citation</blockquote>
Links & Navigation
<!-- Basic link --><a href="https://example.com">Visit Example</a><!-- Open in new tab --><a href="https://example.com" target="_blank" rel="noopener noreferrer"> External Link</a><!-- Relative links --><a href="/about.html">About Page</a><a href="../index.html">Parent Directory</a><a href="./contact.html">Same Directory</a><!-- Anchor links (jump to section) --><a href="#section1">Go to Section 1</a><h2 id="section1">Section 1</h2><!-- Email link --><a href="mailto:email@example.com">Send Email</a><!-- Phone link --><a href="tel:+1234567890">Call Us</a><!-- Download link --><a href="document.pdf" download>Download PDF</a>
Images
<!-- Basic image --><img src="image.jpg" alt="Description of image"><!-- Image with dimensions --><img src="photo.jpg" alt="Photo" width="300" height="200"><!-- Responsive image --><img src="image.jpg" alt="Responsive" style="max-width: 100%; height: auto;"><!-- Image with link --><a href="https://example.com"> <img src="logo.png" alt="Company Logo"></a><!-- Picture element for 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><!-- Figure with caption --><figure> <img src="chart.png" alt="Sales Chart"> <figcaption>Q4 Sales Performance</figcaption></figure>
Lists
<!-- Unordered list (bullets) --><ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul><!-- Ordered list (numbers) --><ol> <li>First step</li> <li>Second step</li> <li>Third step</li></ol><!-- Ordered list with custom start --><ol start="5"> <li>Item 5</li> <li>Item 6</li></ol><!-- Ordered list with type --><ol type="A"> <li>Item A</li> <li>Item B</li></ol><!-- Description list --><dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd></dl><!-- Nested lists --><ul> <li>Parent Item 1 <ul> <li>Child Item 1.1</li> <li>Child Item 1.2</li> </ul> </li> <li>Parent Item 2</li></ul>
<header> — Introductory content or navigation links (can be used multiple times).
<nav> — Navigation links section.
<main> — Main content of the document (only one per page).
<article> — Self-contained content that could be distributed independently.
<section> — Thematic grouping of content, typically with a heading.
<aside> — Content tangentially related to main content (sidebars, callouts).
<footer> — Footer for document or section (copyright, links, author info).
<figure> — Self-contained content like images, diagrams, code listings.
<figcaption> — Caption for <figure> element.
<time> — Represents a specific time or date.
<mark> — Highlighted or marked text for reference.
<details> — Disclosure widget that can be toggled open/closed.
<summary> — Summary or label for <details> element.
Details & Summary (Interactive)
<details> <summary>Click to expand</summary> <p>Hidden content that appears when expanded.</p> <ul> <li>Item 1</li> <li>Item 2</li> </ul></details><!-- Open by default --><details open> <summary>Already expanded</summary> <p>This content is visible by default.</p></details>
<!-- Basic audio --><audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Your browser does not support the audio element.</audio><!-- Autoplay and loop --><audio controls autoplay loop muted> <source src="background.mp3" type="audio/mpeg"></audio><!-- Preload options --><audio controls preload="auto"> <source src="song.mp3" type="audio/mpeg"></audio><!-- preload values: auto, metadata, none -->
Video
<!-- Basic video --><video controls width="640" height="360"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag.</video><!-- Video with poster and attributes --><video controls width="800" poster="thumbnail.jpg" preload="metadata"> <source src="movie.mp4" type="video/mp4"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish"></video><!-- Autoplay muted (required for autoplay in most browsers) --><video autoplay muted loop playsinline> <source src="background.mp4" type="video/mp4"></video>
<!-- Labels and descriptions --><button aria-label="Close dialog">×</button><input type="text" aria-labelledby="username-label"><label id="username-label">Username</label><button aria-describedby="help-text">Submit</button><span id="help-text">Click to submit the form</span><!-- States and properties --><button aria-pressed="false">Toggle</button><div aria-expanded="false">Collapsed content</div><input type="checkbox" aria-checked="true"><button aria-disabled="true">Disabled Button</button><div aria-hidden="true">Hidden from screen readers</div><div aria-live="polite">Dynamic content updates</div><div aria-live="assertive">Urgent updates</div><!-- Required and invalid --><input type="text" aria-required="true"><input type="email" aria-invalid="true" aria-errormessage="email-error"><span id="email-error" role="alert">Invalid email format</span><!-- Current state --><a href="#" aria-current="page">Current Page</a>
Accessible Forms
<form> <!-- Always associate labels with inputs --> <label for="email">Email Address:</label> <input type="email" id="email" name="email" aria-required="true" aria-describedby="email-help"> <small id="email-help">We'll never share your email</small> <!-- Error messages --> <input type="text" id="username" aria-invalid="true" aria-errormessage="username-error"> <span id="username-error" role="alert"> Username must be at least 3 characters </span> <!-- Fieldset for radio groups --> <fieldset> <legend>Choose payment method</legend> <input type="radio" id="credit" name="payment" value="credit"> <label for="credit">Credit Card</label> <input type="radio" id="paypal" name="payment" value="paypal"> <label for="paypal">PayPal</label> </fieldset></form>
Keyboard Navigation
<!-- Tabindex --><div tabindex="0">Focusable div</div><div tabindex="-1">Programmatically focusable</div><!-- tabindex="0" = natural tab order --><!-- tabindex="-1" = not in tab order, but focusable via JS --><!-- tabindex="1+" = custom tab order (avoid if possible) --><!-- Skip to main content link --><a href="#main-content" class="skip-link">Skip to main content</a><main id="main-content"> <!-- Main content --></main>
Image Accessibility
<!-- Descriptive alt text --><img src="chart.png" alt="Bar chart showing 50% increase in sales"><!-- Decorative images (empty alt) --><img src="decoration.png" alt=""><!-- Complex images with longdesc --><img src="complex-diagram.png" alt="System architecture diagram" aria-describedby="diagram-desc"><div id="diagram-desc"> Detailed description of the diagram...</div>
Advanced HTML5 Features
Data Attributes
<!-- Custom data attributes --><div data-user-id="12345" data-role="admin" data-status="active"> User Profile</div><button data-action="delete" data-item-id="789">Delete</button><script> const div = document.querySelector('div'); console.log(div.dataset.userId); // "12345" console.log(div.dataset.role); // "admin" console.log(div.dataset.status); // "active" // Set data attribute div.dataset.newAttr = "value";</script>
Content Editable
<!-- Make any element editable --><div contenteditable="true"> You can edit this text directly in the browser.</div><p contenteditable="false">This paragraph cannot be edited.</p><!-- Editable list --><ul contenteditable="true"> <li>Edit me</li> <li>Or me</li></ul>
Drag and Drop
<!-- Draggable element --><div draggable="true" id="drag-item"> Drag me!</div><!-- Drop zone --><div id="drop-zone" style="width: 200px; height: 200px; border: 2px dashed #ccc;"> Drop here</div><script> const dragItem = document.getElementById('drag-item'); const dropZone = document.getElementById('drop-zone'); dragItem.addEventListener('dragstart', (e) => { e.dataTransfer.setData('text/plain', e.target.id); }); dropZone.addEventListener('dragover', (e) => { e.preventDefault(); // Allow drop }); dropZone.addEventListener('drop', (e) => { e.preventDefault(); const data = e.dataTransfer.getData('text/plain'); const element = document.getElementById(data); dropZone.appendChild(element); });</script>
Local Storage & Session Storage
<script> // Local Storage (persists after browser close) localStorage.setItem('username', 'JohnDoe'); localStorage.setItem('theme', 'dark'); const username = localStorage.getItem('username'); console.log(username); // "JohnDoe" localStorage.removeItem('theme'); localStorage.clear(); // Remove all items // Session Storage (cleared when tab closes) sessionStorage.setItem('sessionId', '12345'); const sessionId = sessionStorage.getItem('sessionId'); // Store objects (must stringify) const user = { name: 'John', age: 30 }; localStorage.setItem('user', JSON.stringify(user)); const storedUser = JSON.parse(localStorage.getItem('user'));</script>
Geolocation API
<button onclick="getLocation()">Get My Location</button><p id="location"></p><script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { document.getElementById('location').innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { document.getElementById('location').innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } function showError(error) { console.error("Error: " + error.message); }</script>
Best Practices & Performance
HTML Structure Best Practices
Use semantic HTML5 elements (<header>, <nav>, <main>, <article>, <footer>) instead of generic <div>.
Always include <!DOCTYPE html> declaration.
Set lang attribute on <html> tag for accessibility and SEO.
Use lowercase for element names and attributes.
Always close tags properly (even self-closing tags in XHTML).
Indent nested elements for readability.
Use meaningful IDs and class names (kebab-case or camelCase).
