VIDEO
1. Basic HTML 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 for SEO">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Your Name">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
/* Internal CSS */
</style>
</head>
<body>
<!-- Content goes here -->
<script src="script.js"></script>
</body>
</html>Document Structure Elements
Element Description <!DOCTYPE html>Declares HTML5 document type <html>Root element <head>Contains metadata <title>Page title (browser tab) <meta>Metadata (charset, viewport, SEO) <link>External resources (CSS, favicon) <style>Internal CSS <script>JavaScript <body>Visible content
2. Headings
<h1>Heading 1 — Most Important</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 — Least Important</h6>Best Practices:
Use only one <h1> per page
Don’t skip levels (h1 → h2 → h3)
Don’t use headings just to make text bigger
3. Text Content
Paragraphs
<p>This is a paragraph of text.</p>Text Formatting
Element Description Example <strong>Strong importance (bold) <strong>Important</strong><b>Bold (no semantic meaning) <b>Bold</b><em>Emphasized (italic) <em>Emphasis</em><i>Italic (no semantic meaning) <i>Italic</i><u>Underline <u>Underlined</u><mark>Highlighted <mark>Highlighted</mark><ins>Inserted text <ins>Inserted</ins><del>Deleted text <del>Deleted</del><small>Smaller text <small>Small</small><sub>Subscript H<sub>2</sub>O<sup>Superscript E = mc<sup>2</sup><code>Inline code <code>print()</code><kbd>Keyboard input <kbd>Ctrl</kbd> + <kbd>S</kbd><samp>Sample output <samp>Error!</samp><var>Variable <var>x</var> = 5<abbr>Abbreviation <abbr title="HyperText Markup Language">HTML</abbr><q>Inline quote <q>To be or not to be</q><cite>Citation <cite>Book Title</cite><blockquote>Block quote <blockquote>Quote</blockquote><pre>Preformatted text <pre> spaces preserved</pre><br>Line break Line 1<br>Line 2<hr>Horizontal rule <hr>
<p>This is <strong>bold</strong> and <em>italic</em> text.</p>
<p>Water is H<sub>2</sub>O and E = mc<sup>2</sup>.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<pre>
This text preserves
spaces and line breaks.
</pre>4. Links
<!-- External link -->
<a href="https://www.example.com">Visit Example</a>
<!-- Open in new tab -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">New Tab</a>
<!-- Email link -->
<a href="mailto:info@example.com">Send Email</a>
<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>
<!-- Internal link (same page) -->
<a href="#section-id">Jump to Section</a>
<!-- Download link -->
<a href="file.pdf" download>Download PDF</a>Attribute Description hrefDestination URL target_self (default), _blank, _parent, _toprelRelationship (noopener noreferrer for external) downloadDownloads instead of navigating titleTooltip text
5. Images
<!-- Basic image -->
<img src="image.jpg" alt="Description of 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;">
<!-- Responsive with picture -->
<picture>
<source srcset="image-mobile.jpg" media="(max-width: 768px)">
<source srcset="image-desktop.jpg" media="(min-width: 769px)">
<img src="image-default.jpg" alt="Description">
</picture>Attribute Description srcImage URL altAlternative text (required for accessibility) width / heightDimensions loadinglazy for lazy loadingsrcsetMultiple image sources for responsive
6. Lists
Unordered List (Bullets)
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Nested item</li>
</ul>
</li>
</ul>Ordered List (Numbers)
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<!-- With type attribute -->
<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) -->
<!-- With start attribute -->
<ol start="5">
<li>Item 5</li>
<li>Item 6</li>
</ol>Description List
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>7. Divisions and Spans
<!-- Block-level container -->
<div class="container">
<h2>Section Title</h2>
<p>Content</p>
</div>
<!-- Inline container -->
<p>This is <span style="color: red;">highlighted</span> text.</p>Element Display Use <div>Block Grouping content, layout <span>Inline Styling part of text
8. Tables
<table>
<caption>Product List</caption>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product A</td>
<td>$10.99</td>
<td>45</td>
</tr>
<tr>
<td>Product B</td>
<td>$25.49</td>
<td>18</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>63</td>
</tr>
</tfoot>
</table>Element Description <table>Table container <caption>Table title <thead>Header section <tbody>Body section <tfoot>Footer section <tr>Table row <th>Header cell <td>Data cell colspanMerge columns rowspanMerge rows
9. Forms
Complete Form Example
<form action="/submit" method="post">
<!-- Text Input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name" required>
<!-- Email Input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<!-- Password Input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8">
<!-- Number Input -->
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="120">
<!-- Date Input -->
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<!-- Radio Buttons -->
<fieldset>
<legend>Gender:</legend>
<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>
</fieldset>
<!-- Checkboxes -->
<fieldset>
<legend>Interests:</legend>
<input type="checkbox" id="html" name="interests" value="html">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="interests" value="css">
<label for="css">CSS</label>
</fieldset>
<!-- Select Dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<optgroup label="Europe">
<option value="uk">United Kingdom</option>
<option value="de">Germany</option>
</optgroup>
<optgroup label="Americas">
<option value="us">United States</option>
<option value="ca">Canada</option>
</optgroup>
</select>
<!-- Textarea -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<!-- File Upload -->
<label for="file">Upload File:</label>
<input type="file" id="file" name="file">
<!-- Range Slider -->
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
<!-- Hidden Input -->
<input type="hidden" name="token" value="abc123">
<!-- Buttons -->
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Clicked!')">Click Me</button>
</form>Form Attributes
Attribute Description actionURL to submit to methodget or postenctypemultipart/form-data for file uploadstargetWhere to display response autocompleteon or offnovalidateDisable browser validation
Input Types
Type Description textSingle-line text emailEmail (with validation) passwordHidden characters numberNumeric input telPhone number urlURL (with validation) dateDate picker timeTime picker datetime-localDate + time rangeSlider colorColor picker fileFile upload checkboxToggle radioSingle selection hiddenInvisible data submitSubmit button resetReset button
10. Semantic HTML5 Elements
<header>
<h1>Website Header</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section Title</h2>
<article>
<h3>Article Heading</h3>
<p>Article content...</p>
</article>
</section>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
<details>
<summary>Click to expand</summary>
<p>Hidden content...</p>
</details>Element Description <header>Introductory content <nav>Navigation links <main>Main content (one per page) <section>Thematic grouping <article>Self-contained content <aside>Sidebar / supplementary <footer>Footer content <details>Expandable content <summary>Heading for <details> <figure>Image with caption <figcaption>Caption for <figure> <time>Date/time <mark>Highlighted text
11. Multimedia
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>Video
<video width="320" height="240" controls poster="thumbnail.jpg" muted loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>Attribute Description controlsShow playback controls autoplayAuto-play (requires muted) mutedStart muted loopRepeat posterThumbnail image preloadauto, metadata, none
Iframes
<iframe src="https://www.example.com"
width="500"
height="300"
title="Embedded Content"
allowfullscreen>
</iframe>Embed & Object
<embed src="file.pdf" type="application/pdf" width="500" height="300">
<object data="file.pdf" type="application/pdf" width="500" height="300">
<p>Fallback content</p>
</object>12. SVG (Scalable Vector Graphics)
<svg width="200" height="200" viewBox="0 0 200 200">
<!-- Circle -->
<circle cx="100" cy="100" r="80" fill="blue" stroke="black" stroke-width="2"/>
<!-- Rectangle -->
<rect x="20" y="20" width="100" height="60" fill="red" rx="10"/>
<!-- Line -->
<line x1="0" y1="0" x2="200" y2="200" stroke="green" stroke-width="2"/>
<!-- Polygon -->
<polygon points="100,10 40,180 190,60 10,60 160,180" fill="purple"/>
<!-- Path -->
<path d="M 10 10 L 90 90" stroke="blue" stroke-width="2" fill="none"/>
<!-- Text -->
<text x="100" y="100" text-anchor="middle" fill="white">SVG</text>
</svg>Element Description <svg>SVG container <circle>Circle (cx, cy, r) <rect>Rectangle (x, y, width, height, rx, ry) <ellipse>Ellipse (cx, cy, rx, ry) <line>Line (x1, y1, x2, y2) <polygon>Polygon (points) <polyline>Polyline (points) <path>Complex path (d) <text>Text
13. Attributes
Global Attributes
Attribute Description Example idUnique identifier id="header"classClass name(s) class="btn primary"styleInline CSS style="color: red;"titleTooltip text title="Click me"data-*Custom data data-user-id="123"hiddenHide element hiddenlangLanguage lang="en"dirText direction dir="rtl"tabindexTab order tabindex="1"contenteditableEditable contenteditable="true"draggableDraggable draggable="true"
Data Attributes
<div data-user-id="123" data-role="admin" data-theme="dark">
Content
</div>
<!-- Access with JavaScript -->
<script>
const el = document.querySelector('div');
console.log(el.dataset.userId); // "123"
console.log(el.dataset.role); // "admin"
</script>14. Other Useful Elements
<!-- Horizontal Rule -->
<hr>
<!-- Line Break -->
<br>
<!-- Button -->
<button type="button">Click Me</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<!-- Progress -->
<progress value="70" max="100">70%</progress>
<!-- Meter -->
<meter value="0.6" min="0" max="1">60%</meter>
<!-- Time -->
<time datetime="2024-01-15T14:00">January 15, 2024 at 2 PM</time>
<!-- Details / Summary -->
<details>
<summary>Click to expand</summary>
<p>Hidden content</p>
</details>
<!-- Figure / Figcaption -->
<figure>
<img src="image.jpg" alt="Description">
<figcaption>Figure 1: Description</figcaption>
</figure>
<!-- Address -->
<address>
<a href="mailto:info@example.com">info@example.com</a><br>
123 Main Street, City
</address>
<!-- Code Block -->
<pre><code>
function hello() {
console.log("Hello, World!");
}
</code></pre>15. Comments
<!-- This is a single-line comment -->
<!--
This is a
multi-line comment
-->
<!-- Comments can be used to temporarily disable code -->
<!-- <p>This won't be displayed</p> -->16. Best Practices
✅ Do This
<!-- Always include DOCTYPE -->
<!DOCTYPE html>
<!-- Always set lang attribute -->
<html lang="en">
<!-- Always include viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Always include alt text for images -->
<img src="photo.jpg" alt="Description of photo">
<!-- Use semantic elements -->
<header>, <nav>, <main>, <article>, <footer>
<!-- Use labels with form inputs -->
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<!-- Use lowercase for tags and attributes -->
<div class="container">
<!-- Close all elements properly -->
<p>Content</p>
<!-- Use meaningful class names -->
<div class="product-card">❌ Don’t Do This
<!-- Don't skip DOCTYPE -->
<html>
<!-- Don't forget lang attribute -->
<html>
<!-- Don't use images without alt -->
<img src="photo.jpg">
<!-- Don't use div for everything -->
<div class="header">, <div class="nav">
<!-- Don't use inline styles for everything -->
<p style="color: red; font-size: 16px; margin: 10px;">
<!-- Don't use tables for layout -->
<table><tr><td>Header</td></tr></table>
<!-- Don't use <br> for spacing -->
<br><br><br>
<!-- Don't use outdated elements -->
<center>, <font>, <marquee>Quick Reference Card
DOCUMENT STRUCTURE TEXT FORMATTING FORMS
────────────────── ─────────────── ─────
<!DOCTYPE html> <strong> Bold <form>
<html> <em> Italic <input>
<head> <mark> Highlight <label>
<title> <del> Deleted <select>
<meta> <ins> Inserted <option>
<body> <sub>/<sup> Sub/Super <textarea>
<code> Code <button>
HEADINGS <pre> Preformatted <fieldset>
──────── <blockquote> Quote <legend>
<h1> through <h6> <abbr> Abbreviation
<cite> Citation TABLES
LISTS ──────
───── LINKS <table>
<ul> Unordered ───── <thead>/<tbody>/<tfoot>
<ol> Ordered <a href="url"> <tr> Row
<li> List item <a href="mailto:"> <th> Header
<dl> Description <a href="tel:"> <td> Data
<dt> Term <a target="_blank"> <caption>
<dd> Definition colspan/rowspan
IMAGES SEMANTIC ELEMENTS MULTIMEDIA
────── ───────────────── ──────────
<img src="" alt=""> <header> <audio>
<picture> <nav> <video>
<source> <main> <iframe>
<figure> <section> <embed>
<figcaption> <article> <object>
<aside>
DIV/SPAN <footer> SVG
──────── <details> ───
<div> Block <summary> <svg>
<span> Inline <time> <circle>/<rect>
<figure> <line>/<polygon>
<path>/<text>THE END
← Previous HTML 29 💻 microdata Next → HTML 31 💻 1-29 Full 💻 Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
⚡️ Fast & Private
🔗 Use it now: https://tools.kandz.me
