HTML Cheat Sheet

In html

HTML (Hypertext Markup Language) is the standard markup language used for creating web pages. It defines the structure and content of a web page using tags, which are enclosed in angle brackets (< and >). HTML tags can be used to define headings, paragraphs, lists, links, images, and many other elements.

If you’re new to HTML or just need a refresher, this HTML cheat sheet can be a valuable resource. It provides a quick reference for some of the most commonly used HTML tags and attributes, arranged in a table format for easy reading and understanding.

The cheat sheet covers everything from basic text formatting tags like <h1> for headings and <p> for paragraphs, to more complex tags like <table> for creating tables and <form> for creating input forms. It also includes tags for embedding multimedia content, defining metadata, and creating navigation menus.

Cheat Sheet

HTML TagDescriptionExample
<!DOCTYPE>Defines the document type<!DOCTYPE html>
<html>Defines an HTML document<html></html>
<head>Contains metadata for the document<head></head>
<title>Defines the title of the document<title>My Title</title>
<body>Defines the document body<body></body>
<h1>-<h6>Defines headings of different levels<h1>Heading 1</h1>
<p>Defines a paragraph<p>This is a paragraph.</p>
<a>Defines a hyperlink<a href=””>Link</a>
<img>Defines an image<img src=”image.jpg” alt=”Alt text”>
<ul>Defines an unordered list<ul><li>Item 1</li><li>Item 2</li></ul>
<ol>Defines an ordered list<ol><li>Item 1</li><li>Item 2</li></ol>
<li>Defines a list item<li>Item 1</li>
<table>Defines a table<table><tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr><tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td></tr></table>
<tr>Defines a table row<tr><td>Cell 1</td><td>Cell 2</td></tr>
<td>Defines a table cell<td>Cell</td>
<form>Defines a form for user input<form action=”/submit” method=”POST”><input type=”text” name=”input”></form>
<input>Defines an input field<input type=”text” name=”input”>
<select>Defines a drop-down list<select><option value=”value1″>Option 1</option><option value=”value2″>Option 2</option></select>
<option>Defines an option in a drop-down list<option value=”value1″>Option 1</option>
<button>Defines a clickable button<button>Click me</button>
<textarea>Defines a multiline input field<textarea name=”message”></textarea>
<label>Defines a label for an input element<label for=”input”>Label text</label><input type=”text” id=”input”>
<br>Defines a line breakText<br>more text
<hr>Defines a horizontal rule<hr>
<div>Defines a section of the document<div>Content</div>
<span>Defines a small section of the document<span>Content</span>
<style>Defines CSS style information<style>body {background-color: white;}</style>
<script>Defines a client-side script<script>alert(‘Hello, world’);</script>
<meta>Defines metadata for the document<meta charset=”UTF-8″>
<link>Defines a link to an external resource, typically a stylesheet<link rel=”stylesheet” href=”style.css”>
<header>Defines a header for a document or section<header><h1>My Website</h1></header>
<nav>Defines a navigation menu<nav><a href=”/”>Home</a><a href=”/about”>About</a></nav>
<section>Defines a section of a document<section><h2>Section Title</h2><p>Section content.</p></section>
<article>Defines an article, typically a blog post or news article<article><h2>Article Title</h2><p>Article content.</p></article>
<footer>Defines a footer for a document or section<footer>&copy; 2023 My Website</footer>
<aside>Defines content that is tangentially related to the surrounding content<aside>Related links</aside>
<iframe>Defines an inline frame for embedding another document<iframe src=””></iframe>
<audio>Defines an audio file<audio src=”audio.mp3″ controls></audio>
<video>Defines a video file<video src=”video.mp4″ controls></video>
<source>Defines a source file for media elements<video><source src=”video.mp4″ type=”video/mp4″><source src=”video.webm” type=”video/webm”></video>
<canvas>Defines an area for graphics drawing with JavaScript<canvas id=”myCanvas”></canvas>
<svg>Defines an area for scalable vector graphics<svg width=”100″ height=”100″><circle cx=”50″ cy=”50″ r=”40″ stroke=”black” stroke-width=”3″ fill=”red”/></svg>
<progress>Defines a progress bar for displaying the completion of a task<progress value=”50″ max=”100″></progress>
<meter>Defines a meter for displaying a value within a range<meter value=”50″ min=”0″ max=”100″>50%</meter>
<details>Defines a disclosure widget for showing or hiding additional content<details><summary>More information</summary><p>Additional content.</p></details>
<summary>Defines a summary for a disclosure widget<details><summary>More information</summary><p>Additional content.</p></details>