الصفحة الرئيسية

HTML Cheatsheet

HTML Cheatsheet Beginner → Advanced

🌐 HTML Cheatsheet (Beginner → Advanced)

This cheatsheet covers the most important HTML basics to advanced topics with ready-to-use code examples.

🔹 Boilerplate

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

🔹 Headings (h1 → h6)

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

🔹 Containers

<div> This is a block container </div>
<span> This is an inline container </span>
<p> Paragraph container </p>
<pre> Preformatted Text </pre>
<code> console.log("Code Example"); </code>

🔹 Text Formatting

<b>Bold</b>
<strong>Important</strong>
<i>Italic</i>
<em>Emphasis</em>
<sub>Subscript</sub>
<sup>Superscript</sup>

🔹 Lists

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

<ul>
  <li>Item</li>
  <li>Item</li>
</ul>

🔹 Media (Image, Audio, Video)

<img src="image.jpg" alt="Description">

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>

<video width="400" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

🔹 Table

<table>
  <caption>Demo Table</caption>
  <thead>
    <tr>
      <th>Col1</th>
      <th colspan="2">Col2</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
  </tbody>
</table>

🔹 Forms & Inputs

<form action="/submit" method="post">
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
  <input type="email" placeholder="Email">
  <input type="checkbox"> I agree
  <input type="radio" name="gender"> Male
  <input type="radio" name="gender"> Female
  <select><option>USA</option></select>
  <textarea>Comment</textarea>
  <input type="file">
  <input type="submit" value="Submit">
</form>

🔹 Semantic Elements

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

🔹 Meta Tags

<meta name="description" content="Page description">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Your Name">

🎨 CSS Integration

<style>
  body { background: lightblue; }
</style>

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

📱 Responsive Design

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media (max-width: 600px) {
  body { font-size: 18px; }
}
</style>

⚡ JavaScript Integration

<script>
  alert("Hello World!");
</script>

<script src="script.js"></script>

🔹 Characters & Entities

&copy;  → ©
&lt;    → <
&gt;    → >
&amp;   → &
&dollar; → $

🔹 Blockquote

<blockquote>
  "The best way to predict the future is to invent it."
  <cite>- Alan Kay</cite>
</blockquote>

🔹 Highlight Text

<p>This is <mark>highlighted text</mark> in a paragraph.</p>

🔹 Collapsible Content (details & summary)

<details>
  <summary>Click to expand</summary>
  <p>Hidden content revealed!</p>
</details>

🔹 Figure & Figcaption

<figure>
  <img src="image.jpg" alt="Sample">
  <figcaption>This is a caption for the image.</figcaption>
</figure>

🔹 Progress & Meter

<progress value="70" max="100"></progress>
<meter value="0.6">60%</meter>

🔹 iFrame

<iframe src="https://www.example.com" width="400" height="300"></iframe>

🔹 Audio Autoplay (⚠️ use carefully)

<audio autoplay loop>
  <source src="music.mp3" type="audio/mpeg">
</audio>

🎨 Canvas Example

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

<script>
  const c = document.getElementById("myCanvas");
  const ctx = c.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(20, 20, 150, 75);
</script>

🎨 Inline CSS

<p style="color:blue; font-size:20px;">Styled inline text</p>

🎨 CSS Hover Effect

<style>
  .btn-hover {
    background: #007acc;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
  }
  .btn-hover:hover {
    background: #005fa3;
  }
</style>

<a href="#" class="btn-hover">Hover Me</a>

🎨 CSS Flexbox Layout

<style>
  .flex-container {
    display: flex;
    gap: 20px;
  }
  .flex-item {
    background: lightgray;
    padding: 20px;
    flex: 1;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

🎨 CSS Grid Layout

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .grid-item {
    background: #ddd;
    padding: 20px;
  }
</style>

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
</div>

⚡ JavaScript Toggle

<button onclick="toggleText()">Toggle</button>
<p id="togglePara">Hello World!</p>

<script>
function toggleText() {
  const p = document.getElementById("togglePara");
  p.style.display = (p.style.display === "none") ? "block" : "none";
}
</script>

⚡ Form Validation (JS)

<form onsubmit="return validateForm()">
  <input type="text" id="username" placeholder="Enter name">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  const name = document.getElementById("username").value;
  if (name === "") {
    alert("Name is required!");
    return false;
  }
  return true;
}
</script>

⚡ Dark Mode Toggle (JS)

<button onclick="toggleDarkMode()">Toggle Dark Mode</button>

<script>
function toggleDarkMode() {
  document.body.classList.toggle("dark-mode");
}
</script>

<style>
  .dark-mode { background: #121212; color: #fff; }
</style>

📌 Base URL

<base href="https://example.com/">

🖼️ Responsive Images (Picture)

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="fallback.png" alt="Responsive Image">
</picture>

📑 Template (Hidden HTML)

<template id="myTemplate">
  <p>This content can be cloned using JavaScript.</p>
</template>

🔍 Datalist (Input Suggestions)

<input list="languages" name="lang">
<datalist id="languages">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="Python">
</datalist>

🧮 Output (Form Calculations)

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="5"> +
  <input type="number" id="b" value="10"> =
  <output name="result">15</output>
</form>

✨ Mark (Highlight Text)

<p>You can use <mark>highlight</mark> inside a paragraph.</p>

📊 Meter (Measurement)

<meter value="0.7" min="0" max="1">70%</meter>

🈶 Ruby (Annotations)

<ruby>
  漢 <rt>kan</rt>
  字 <rt>ji</rt>
</ruby>

ℹ️ Abbreviation

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

⏰ Time

<time datetime="2025-08-31">August 31, 2025</time>

📬 Address

<address>
  Written by <a href="mailto:someone@example.com">John Doe</a><br>
  Visit us at: Example.com<br>
  123 Web Street, Internet
</address>

📋 Fieldset & Legend

<form>
  <fieldset>
    <legend>Account Info</legend>
    <label>Username: <input type="text"></label>
    <label>Password: <input type="password"></label>
  </fieldset>
</form>

🧭 Nav (Navigation)

<nav>
  <a href="/">Home</a> |
  <a href="/about">About</a> |
  <a href="/contact">Contact</a>
</nav>

🖼️ Figure & Figcaption

<figure>
  <img src="photo.jpg" alt="Sample">
  <figcaption>This is a sample photo</figcaption>
</figure>

💻 Code, Kbd & Samp

<p>To save a file press <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
<code>console.log("Hello World")</code>
<samp>Program Output: Hello World</samp>

💡 Tips for Beginners → Advanced

Use a modern editor (VS Code) with Emmet.
Always indent & close your tags properly.
Practice responsive design (media queries).
⚠️ Don’t forget alt attributes for images for accessibility.

إرسال تعليق