Code Journey
Html

Html.

HTML (HyperText Markup Language) is the standard language used to create and structure web pages. It defines the layout and organization of content on the internet, including headings, paragraphs, images, links, tables, forms, and more.

HTML uses elements and tags to describe different types of content. Most HTML elements have an opening tag, content, and a closing tag.

HTML provides the basic structure of a webpage by organizing content in a meaningful and semantic way.

Sementic Html Tags

2 Topics

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Title</title>
</head>
<body>
    <h1>My Heading</h1>
    <p>My paragraph.</p>
</body>
</html>

Semantic HTML

<header>Header Section</header>
<nav>Navigation</nav>
<main>Main Content</main>
<section>Section</section>
<article>Article</article>
<aside>Sidebar</aside>
<footer>Footer</footer>

Headings & Text

3 Topics

Headings (h1–h6)

<h1>Heading 1 — Page Title</h1>
<h2>Heading 2 — Section</h2>
<h3>Heading 3 — Subsection</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 — Smallest</h6>

Paragraph

<p>This is a paragraph of text.</p>

<!-- Line break inside a paragraph -->
<p>First line.<br>Second line.</p>

<!-- Horizontal rule (thematic break) -->
<hr>

Text Formatting Tags

<b>Bold (visual only)</b>
<strong>Bold (important, semantic)</strong>
<i>Italic (visual only)</i>
<em>Italic (emphasis, semantic)</em>
<u>Underline</u>
<mark>Highlighted text</mark>
<small>Small / fine print</small>
<del>Strikethrough (deleted)</del>
<ins>Inserted / underlined</ins>
<sub>Subscript</sub> e.g. H<sub>2</sub>O
<sup>Superscript</sup> e.g. x<sup>2</sup>

Images

4 Topics

Basic Image

<img src="image.jpg" alt="A description of the image" width="300" height="200">

Lazy Loading

<!-- Defers loading until the image enters the viewport -->
<img src="photo.jpg" alt="Photo" loading="lazy">

<!-- Eager loading (default for images above the fold) -->
<img src="hero.jpg" alt="Hero" loading="eager">

Clickable Image (Image Link)

<a href="https://example.com">
  <img src="logo.png" alt="Go to Example.com">
</a>

Image Map

<img src="diagram.png" alt="Diagram" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.html">
</map>

Lists

5 Topics

Unordered List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered List

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Ordered List Attributes

<!-- Start numbering from 5 -->
<ol start="5">
  <li>Fifth item</li>
  <li>Sixth item</li>
</ol>

<!-- Count down -->
<ol reversed>
  <li>Third</li>
  <li>Second</li>
  <li>First</li>
</ol>

<!-- Use uppercase Roman numerals -->
<ol type="I">
  <li>Chapter One</li>
  <li>Chapter Two</li>
</ol>

Description List

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of web pages.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the styling of web pages.</dd>

  <dt>JavaScript</dt>
  <dd>A scripting language for interactive behaviour.</dd>
</dl>

Nested List

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Tables

3 Topics

Full Table Structure

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>28</td>
      <td>Mumbai</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>34</td>
      <td>Delhi</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">End of table</td>
    </tr>
  </tfoot>
</table>

Column & Row Span

<table>
  <tr>
    <!-- Spans across 2 columns -->
    <td colspan="2">Merged Columns</td>
    <td>Cell</td>
  </tr>
  <tr>
    <!-- Spans across 2 rows -->
    <td rowspan="2">Merged Rows</td>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
  <tr>
    <td>Cell C</td>
    <td>Cell D</td>
  </tr>
</table>

Table Caption

<table>
  <caption>Monthly Sales Summary</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Forms

8 Topics

Basic Form

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Enter your name" required>

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

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

Input Types

<input type="text" placeholder="Full name">
<input type="password" placeholder="Password">
<input type="email" placeholder="Email address">
<input type="number" min="0" max="100" step="1">
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="file" accept="image/*">
<input type="file" multiple>
<input type="checkbox" checked>
<input type="radio" name="group" value="a">
<input type="range" min="0" max="100" value="50">
<input type="color" value="#ff0000">
<input type="search" placeholder="Search...">
<input type="tel" placeholder="+91 1234567890">
<input type="url" placeholder="https://example.com">
<input type="hidden" name="token" value="abc123">

Input Attributes

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

<!-- Disabled field (not submitted with form) -->
<input type="text" value="Read only" disabled>

<!-- Read-only (submitted but not editable) -->
<input type="text" value="Fixed value" readonly>

<!-- Autofocus on page load -->
<input type="search" autofocus>

<!-- Autocomplete off (e.g. OTP fields) -->
<input type="text" autocomplete="off">

<!-- Min/max/step for number inputs -->
<input type="number" min="1" max="10" step="0.5">

Form Validation Attributes

<!-- Pattern validation (only letters) -->
<input type="text" pattern="[A-Za-z]+" title="Letters only">

<!-- Min/Max length -->
<input type="password" minlength="8" maxlength="32">

<!-- Custom validity message via JS -->
<input type="email" id="emailInput" oninvalid="this.setCustomValidity('Please enter a valid email address')" oninput="this.setCustomValidity('')">

Textarea

<label for="bio">Bio:</label>
<textarea
  id="bio"
  name="bio"
  rows="5"
  cols="40"
  maxlength="500"
  placeholder="Tell us about yourself..."
  required
></textarea>

Select Dropdown

<!-- Basic select -->
<select name="country">
  <option value="">Select a country</option>
  <option value="in" selected>India</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</select>

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

<!-- Grouped options -->
<select name="tech">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="node">Node.js</option>
    <option value="py">Python</option>
  </optgroup>
</select>

Radio & Checkbox

<!-- Radio buttons (only one selectable per name group) -->
<p>Gender:</p>
<label><input type="radio" name="gender" value="male" checked> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
<label><input type="radio" name="gender" value="other"> Other</label>

<!-- Checkboxes (multiple selectable) -->
<p>Interests:</p>
<label><input type="checkbox" name="interest" value="coding" checked> Coding</label>
<label><input type="checkbox" name="interest" value="design"> Design</label>
<label><input type="checkbox" name="interest" value="music"> Music</label>

File Upload Form (enctype)

<!-- Required for file uploads -->
<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="avatar" accept="image/*">
  <button type="submit">Upload</button>
</form>

Media

4 Topics

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="640" height="360" controls poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video element.
</video>

Autoplay Background Video

<!-- Autoplaying background video (requires muted) -->
<video autoplay muted loop playsinline>
  <source src="bg.mp4" type="video/mp4">
</video>

Embed YouTube Video

<!-- Embed a YouTube video -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Meta Tags

5 Topics

Character Encoding

<meta charset="UTF-8">

Viewport (Responsive Design)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

SEO Meta Tags

<meta name="description" content="A comprehensive HTML cheatsheet for web developers.">
<meta name="keywords" content="HTML, cheatsheet, web development">
<meta name="author" content="Dev Genie">

Open Graph Meta Tags

<!-- Open Graph (for social media link previews) -->
<meta property="og:title" content="HTML Cheatsheet">
<meta property="og:description" content="A complete HTML reference guide.">
<meta property="og:image" content="https://example.com/preview.jpg">
<meta property="og:url" content="https://example.com/html">
<meta property="og:type" content="website">

Robots & HTTP-Equiv

<!-- Allow indexing and following links (default) -->
<meta name="robots" content="index, follow">

<!-- Prevent search engines from indexing this page -->
<meta name="robots" content="noindex, nofollow">

<!-- HTTP-Equiv: redirect after 5 seconds -->
<meta http-equiv="refresh" content="5; url=https://example.com">

HTML Entities

1 Topics

HTML Entities Reference

<!-- Reserved characters -->
&lt;      <!-- < Less than -->
&gt;      <!-- > Greater than -->
&amp;     <!-- & Ampersand -->
&quot;    <!-- " Double quote -->
&apos;    <!-- ' Single quote / apostrophe -->

<!-- Whitespace -->
&nbsp;    <!-- Non-breaking space -->
&ensp;    <!-- En space (2 units wide) -->
&emsp;    <!-- Em space (4 units wide) -->

<!-- Symbols -->
&copy;    <!-- © Copyright -->
&reg;     <!-- ® Registered trademark -->
&trade;   <!-- ™ Trademark -->
&euro;    <!-- € Euro sign -->
&pound;   <!-- £ Pound sign -->
&yen;     <!-- ¥ Yen sign -->
&cent;    <!-- ¢ Cent sign -->

<!-- Math -->
&times;   <!-- × Multiplication sign -->
&divide;  <!-- ÷ Division sign -->
&plusmn;  <!-- ± Plus-minus sign -->
&ne;      <!-- ≠ Not equal -->
&infin;   <!-- ∞ Infinity -->

<!-- Arrows -->
&larr;    <!-- ← Left arrow -->
&rarr;    <!-- → Right arrow -->
&uarr;    <!-- ↑ Up arrow -->
&darr;    <!-- ↓ Down arrow -->

Iframe

3 Topics

Basic Iframe

<iframe
  src="https://example.com"
  width="600"
  height="400"
  title="Example Website"
></iframe>

Sandboxed Iframe

<!-- Sandboxed iframe with limited permissions -->
<iframe
  src="https://example.com"
  sandbox="allow-scripts allow-same-origin"
  width="600"
  height="400"
  title="Sandboxed content"
></iframe>

Lazy-Loaded Iframe

<iframe
  src="https://example.com"
  loading="lazy"
  title="Lazy-loaded content"
></iframe>

Buttons

3 Topics

Basic Button

<button>Click Me</button>

Button Types

<!-- Submits the form -->
<button type="submit">Submit</button>

<!-- Resets all form fields to default values -->
<button type="reset">Reset</button>

<!-- No default behaviour – used for JavaScript actions -->
<button type="button">Click Me</button>

Disabled Button

<button disabled>Cannot Click</button>

<!-- Conditionally disabled -->
<button type="submit" disabled>Submit</button>

Comments

1 Topics

HTML Comments

<!-- This is a single-line comment -->

<!--
  This is a
  multi-line comment.
  It can span as many lines as needed.
-->

<!-- TODO: Add form validation -->
<!-- NOTE: This section is rendered server-side -->

<!-- Temporarily hiding an element:
<div class="banner">
  <p>Sale ends tonight!</p>
</div>
-->

Details & Summary

1 Topics

Details & Summary

<details>
  <summary>What is HTML?</summary>
  <p>
    HTML (HyperText Markup Language) is the standard language
    used to create and structure web pages.
  </p>
</details>

<!-- Open by default -->
<details open>
  <summary>Expanded by Default</summary>
  <p>This panel is open when the page loads.</p>
</details>

Progress

1 Topics

Progress Bar

<!-- Determinate progress (known value) -->
<label for="upload">Upload Progress:</label>
<progress id="upload" value="70" max="100">70%</progress>

<!-- Indeterminate progress (unknown value — loading spinner) -->
<progress>Loading...</progress>

Meter

1 Topics

Meter Element

<!-- Battery level -->
<label>Battery: <meter value="0.75" min="0" max="1" low="0.2" high="0.8" optimum="1">75%</meter></label>

<!-- Disk usage -->
<label>Disk: <meter value="80" min="0" max="100" low="50" high="90" optimum="0">80 GB used</meter></label>

Div & Span

2 Topics

Block Container — div

<div class="container">
  <p>Block-level container. Takes full width.</p>
</div>

Inline Container — span

<p>This is <span class="highlight">highlighted</span> text.</p>

Linking External Resources

3 Topics

Link External CSS

<link rel="stylesheet" href="styles.css">

Link External JavaScript

<!-- Defer: executes after HTML is parsed -->
<script src="app.js" defer></script>

<!-- Async: loads in parallel, executes immediately -->
<script src="analytics.js" async></script>

Favicon

<link rel="icon" href="favicon.ico" type="image/x-icon">

Code & Preformatted Text

5 Topics

Inline Code

<p>Use the <code>console.log()</code> method to debug.</p>

Preformatted Block

<pre>
  <code>
    function greet() {
      console.log("Hello, World!");
    }
  </code>
</pre>

Keyboard Input

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

Sample Output

<p>The terminal printed: <samp>Error: File not found</samp></p>

Variable

<p>The area formula: <var>A</var> = π<var>r</var>²</p>

Quotations & Citations

5 Topics

Block Quotation

<blockquote cite="https://www.example.com">
  <p>The only way to do great work is to love what you do.</p>
  <footer>— <cite>Steve Jobs</cite></footer>
</blockquote>

Inline Quotation

<p>He said <q>HTML is the backbone of the web.</q></p>

Abbreviation

<p><abbr title="HyperText Markup Language">HTML</abbr> is a markup language.</p>

Time & Date

<p>Published on <time datetime="2026-04-22">April 22, 2026</time>.</p>

Address

<address>
  Written by <a href="mailto:author@example.com">John Doe</a><br>
  Mumbai, India
</address>

Figure & Figcaption

1 Topics

Figure with Caption

<figure>
  <img src="chart.png" alt="Sales Chart 2026">
  <figcaption>Fig. 1 — Annual sales growth in 2026.</figcaption>
</figure>

Responsive Images

2 Topics

Picture Element

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

srcset Attribute

<img
  src="image-400.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Responsive image using srcset"
>

Canvas

1 Topics

Canvas Element

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

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#3498db';
  ctx.fillRect(20, 20, 150, 100);
</script>

Datalist & Form Enhancements

2 Topics

Datalist (Autocomplete)

<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Fieldset & Legend

<fieldset>
  <legend>Personal Information</legend>
  <label>Name: <input type="text" name="name"></label><br>
  <label>Age: <input type="number" name="age"></label>
</fieldset>

Accessibility (ARIA)

4 Topics

aria-label

<button aria-label="Close dialog">✕</button>

role Attribute

<div role="alert">Your form was submitted successfully.</div>
<nav role="navigation">...</nav>
<div role="dialog" aria-modal="true">...</div>

Common ARIA Attributes

<input type="text" aria-required="true" aria-describedby="hint">
<span id="hint">Enter your full name</span>

<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" aria-hidden="true">...</ul>

tabindex

<!-- Included in natural tab order -->
<div tabindex="0">Focusable div</div>

<!-- Removed from tab order but programmably focusable -->
<button tabindex="-1">Not tab-reachable</button>

Data Attributes (data-*)

1 Topics

Custom Data Attributes

<!-- HTML -->
<button data-user-id="42" data-action="delete">Delete User</button>

<!-- JavaScript -->
<script>
  const btn = document.querySelector('button');
  const userId = btn.dataset.userId;   // "42"
  const action = btn.dataset.action;   // "delete"
</script>

Global Attributes

2 Topics

Common Global Attributes

<!-- id: unique identifier -->
<div id="main-content">...</div>

<!-- class: CSS class(es) -->
<p class="text-muted small">...</p>

<!-- style: inline CSS -->
<span style="color: red; font-weight: bold;">Alert</span>

<!-- hidden: hides element -->
<div hidden>Not visible</div>

<!-- contenteditable: makes content editable -->
<div contenteditable="true">Edit me</div>

<!-- draggable: enables drag-and-drop -->
<img src="logo.png" draggable="true" alt="Logo">

lang & dir Attributes

<!-- Language attribute (improves SEO and screen readers) -->
<html lang="en">

<!-- Language for a specific section -->
<p lang="fr">Bonjour le monde.</p>

<!-- Text direction (RTL) -->
<p dir="rtl">مرحبا بالعالم</p>