Table of Contents

HTML Cheat Sheet

Basic Structure

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Headings

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

Paragraphs and Line Breaks

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<br> <!-- Line Break -->

Text Formatting

<b>Bold Text</b>
<strong>Strong Text</strong>
<i>Italic Text</i>
<em>Emphasized Text</em>
<u>Underlined Text</u>
<del>Strikethrough</del>
<mark>Highlighted Text</mark>

<a href="https://www.example.com">Visit Example</a>
<a href="mailto:someone@example.com">Send Email</a>
<a href="#section">Jump to Section</a>

Images

<img src="image.jpg" alt="Description" width="300" height="200">

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>

Tables

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

Forms

<form action="submit.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <input type="submit" value="Submit">
</form>

Input Types

<input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="radio">
<input type="checkbox">
<input type="file">
<input type="date">

Div and Span

<div style="background-color: lightgray; padding: 10px;">
    This is a block element (div).
</div>

<span style="color: red;">This is an inline element (span).</span>

Semantic Elements

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

Multimedia Elements

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

<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
</video>

HTML Entities

&lt; - Less Than (<)
&gt; - Greater Than (>)
&amp; - Ampersand (&)
&quot; - Double Quote (")
&apos; - Single Quote (')

Meta Tags

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML Cheatsheet">
<meta name="keywords" content="HTML, Web Development">
<meta name="author" content="Your Name">

Inline Frames (iFrames)

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

Scripts

<script>
    alert('Hello, World!');
</script>

Comments

<!-- This is a comment -->

Progress Bar & Meter Elements

<progress value="70" max="100"></progress>
<meter value="75" min="0" max="100" low="30" high="80" optimum="90">75%</meter>

Details and Summary Elements

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

Canvas for Graphics

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(10, 10, 100, 50);
</script>

SVG Graphics

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

Responsive Images

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

Web Components

<template id="my-template">
    <style>
        p { color: blue; }
    </style>
    <p>Custom Component Content</p>
</template>
<script>
    class MyComponent extends HTMLElement {
        constructor() {
            super();
            let template = document.getElementById('my-template').content;
            this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true));
        }
    }
    customElements.define('my-component', MyComponent);
</script>
<my-component></my-component>