Your Quick Reference Guide to HTML

Whether youre getting started with web development or just need a quick refresher, having an HTML cheat sheet on hand can save time and reduce errors. This guide walks you through essential syntax, semantic elements, metadata, forms, multimedia, and accessibility - all in one place.

What is an HTML Cheat Sheet?

An HTML cheat sheet is a compact reference outlining the most frequently used HTML tags, attributes, and patterns - helping streamline your coding sessions and promote semantic, clean markup. It can be an invaluable tool for both novices and seasoned developers.

Document Boilerplate

Begin every HTML file with a proper structure for best compatibility:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Page Title</title>
</head>
<body>
  <!-- Your content here -->
</body>
</html>

<!DOCTYPE html> signals HTML5.

Basic Document Structure

ElementDescriptionExample
<html></html>Root of an HTML document<html> ... </html>
<head></head>Metadata (title, scripts, styles, etc.)<head> ... </head>
<body></body>Content visible to users<body> ... </body>
<title></title>Title of the web page (shows in browser tab)<title>My Page</title>

Text & Formatting

ElementDescriptionExample
<h1>-<h6>Headings (largest to smallest)<h1>This is a Heading</h1>
<p></p>Paragraph<p>This is a paragraph.</p>
<br>Line breakLine1<br>Line2
<strong>Bold text<strong>Important</strong>
<em>Italic text<em>Emphasis</em>
<blockquote>Block quotation<blockquote>Quote here.</blockquote>
<code>Inline code<code>let x = 10;</code>
<pre>Preformatted block<pre>Line1\nLine2</pre>
<span>Inline container<span class="highlight">Text</span>
<div>Block-level container<div>Block of content</div>

Links & Media

ElementDescriptionExample
<a href="URL">text</a>Hyperlink<a href="https://site.com">Link</a>
<img src="url" alt="">Image<img src="img.jpg" alt="desc">
<video> / <audio>Embeds video or audio<video controls>...</video>

Lists

ElementDescriptionExample
<ul> / <li>Unordered list<ul><li>Item</li></ul>
<ol> / <li>Ordered list<ol><li>Item</li></ol>
<dl> <dt> <dd>Description list<dl><dt>Term</dt><dd>Description</dd></dl>

Forms & Inputs

ElementDescriptionExample
<form></form>Form container<form action="/submit"></form>
<input type="text">Single-line text field<input type="text" name="username">
<textarea></textarea>Multiline text box<textarea rows="4" cols="40"></textarea>
<input type="checkbox">Checkbox input<input type="checkbox" checked>
<input type="radio">Radio button<input type="radio" name="r1">
<input type="submit">Submit button<input type="submit" value="Send">
<select> <option>Dropdown menu<select><option>One</option></select>

Tables

ElementDescriptionExample
<table></table>Table container<table>...</table>
<tr></tr>Table row<tr><td>Cell</td></tr>
<th></th>Header cell<th>Header</th>
<td></td>Data cell<td>Value</td>

Useful Attributes and Elements

  • alt: Alternative text for images
  • href: Hyperlink destination
  • src: Source of image/media
  • value: Value for buttons/inputs
  • checked, selected: Pre-selected states

Let's build something
AMAZING together

Head Office

Address: Alsa Sheridan, 12-B, Sridharan St, Ayyavoo Colony, Aminjikarai, Chennai, Tamil Nadu 600029

Developer Hub

Address: S-23, SIPCOT Industrial park, Pillaipakkam, Tamil Nadu 602105

Sales Office

Address: SP-153 2nd Floor, 9th Ln, near Coffee Day, Ambattur Industrial Estate, Chennai, Tamil Nadu 600058

wraptron logo

Let's start working together

info@wraptron.com
+91-909 477 9005

12-B, Alsa Sheridan, Sreedharan Street,
Aminjikarai, Chennai-29, Tamilnadu,
India

Quick links

©2025 Copyright, Wraptron Apptech LLP. All rights reserved.
Made with ♥ in made in love from india