HTML Cheatsheet - ProX Edition

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Every HTML page starts with this structure. The <!DOCTYPE html> declaration ensures proper rendering.

HTML Attributes

Attributes provide extra information to tags.

id — Unique identifier
class — CSS styling group
href — Link URL
src — Media source
alt — Image description

Forms

Forms collect user input like text, selections, or files.

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

Media

Add images, audio, or videos to your page.

<img src="image.jpg" alt="Description">
<audio controls><source src="audio.mp3"></audio>
<video controls><source src="video.mp4"></video>

Tables

Tables organize data in rows and columns.

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Kanishk</td><td>15</td></tr>
</table>

Semantic Tags

Semantic tags improve structure and accessibility.

<header> — Page header
<nav> — Navigation
<main> — Main content
<section> — Content section
<article> — Independent content
<aside> — Sidebar
<footer> — Page footer

Meta Tags

Meta tags provide metadata for SEO and responsiveness.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description">

Links

Links connect pages or resources.

<a href="https://example.com" target="_blank">Visit Example</a>

Lists

Create ordered or unordered lists.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

Iframes

Iframes embed external content.

<iframe src="https://example.com" width="100%" height="300"></iframe>

Canvas

Canvas is used for drawing graphics with JavaScript.

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

SVG

SVG creates scalable vector graphics.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

HTML Entities

Entities display special characters.

© — ©
< — <
> — >
& — &

Accessibility

Make your HTML accessible to all users.

Use alt for images.
Add aria-label for screen readers.
Ensure proper heading hierarchy.

SEO Basics

Optimize HTML for search engines.

Use descriptive <title>.
Add <meta name="description">.
Use semantic tags.

Comments

Comments help explain code but don’t display.

<!-- This is a comment -->

Linking CSS

Connect CSS to style your HTML.

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

Linking JavaScript

Add interactivity with JavaScript.

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

Doctype

The doctype declaration tells browsers this is HTML5.

<!DOCTYPE html>

Block vs Inline Elements

Block elements take full width; inline elements sit in line.

Block: <div>, <p>, <h1>
Inline: <span>, <a>, <img>

Data Attributes

Store custom data in HTML.

<div data-id="123">Content</div>

Global Attributes

Attributes usable on any HTML element.

id — Unique ID
class — CSS class
style — Inline CSS
title — Tooltip text