HTML Cheatsheet

Basic Structure Headings Paragraphs Links Images Lists Tables Forms Buttons Semantic Tags Media Meta Tags Comments Entities Block vs Inline Classes & IDs Attributes Input Types Form Validation Accessibility

Basic Structure

Structure 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="theme-color" content="#000000">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  </head>
  <body>
    ...
  </body>
</html>

Headings

Heading 
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<!-- h4, h5, h6 for deeper levels -->

Paragraphs

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

Links

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

Images

Image 
<img src="logo.png" alt="Logo" width="100" height="50" />

Lists

List 
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Tables

Table 
<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

Forms

Form 
<form action="/submit" method="post">
  <input type="text" name="name" />
  <input type="submit" value="Send" />
</form>

Buttons

Button 
<button type="button">Click Me</button>
<input type="submit" value="Submit" />

Semantic Tags

Semantic 
<header>...</header>
<nav>...</nav>
<main>...</main>
<section>...</section>
<article>...</article>
<aside>...</aside>
<footer>...</footer>

Media

Media 
<img src="img.png" alt="desc" />
<audio controls><source src="audio.mp3" type="audio/mpeg" /></audio>
<video controls width="320" height="240">
  <source src="movie.mp4" type="video/mp4" />
</video>
<iframe src="https://example.com"></iframe>

Meta Tags

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

Comments

Comment 
<!-- This is a comment -->

Entities

Entity 
&lt; &gt; &amp; &copy; &nbsp;

Block vs Inline

Block/Inline 
<div>, <p>, <h1>... (block)
<span>, <a>, <img>... (inline)

Classes & IDs

Class/ID 
<div class="my-class" id="main">...</div>

Attributes

Attribute 
<img src="logo.png" alt="Logo" width="100" height="50" />
<a href="#" title="Tooltip">Link</a>

Input Types

Input 
<input type="text" />
<input type="email" />
<input type="password" />
<input type="checkbox" />
<input type="radio" />
<input type="date" />

Form Validation

Validation 
<input type="email" required />
<input type="text" minlength="3" maxlength="10" />
<input type="number" min="1" max="10" />

Accessibility

A11y 
<img src="logo.png" alt="Logo description" />
<button aria-label="Close">X</button>
<input aria-required="true" />
<nav role="navigation">...</nav>