HTML5 Cheat Sheet — Complete Tag Reference & Examples
📌 Key Takeaways
- HTML5 Cheat Sheet — Complete Tag Reference & Examples
- What is HTML5?
- HTML5 Document Structure
- HTML Basic Tags
- HTML Text Formatting
- HTML Links and Images
Table of Contents:
HTML5 is the core markup language of the modern web, used to structure content such as text, images, forms, and multimedia on web pages. This HTML5 Cheat Sheet covers every essential element, from basic structure to advanced APIs, to help beginners and professionals alike build fully functional websites.
What is HTML5?
HTML5 (HyperText Markup Language, version 5) is the latest standard that powers modern websites. It supports multimedia, semantic elements, APIs, and form enhancements, making web pages more interactive and accessible.
HTML5 Document Structure
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Cheat Sheet</title>
</head>
<body>
<h1>Hello HTML5!</h1>
<p>This is a simple webpage structure example.</p>
</body>
</html>
HTML Basic Tags
| Tag | Description | Example |
|---|---|---|
<html> | Root of an HTML page | <html lang="en"> |
<head> | Metadata container | <head>...</head> |
<title> | Title of the page | <title>My Page</title> |
<body> | Visible page content | <body>...</body> |
<h1>–<h6> | Headings | <h1>Main Heading</h1> |
<p> | Paragraph | <p>This is text.</p> |
<br> | Line break | <br> |
<hr> | Horizontal rule | <hr> |
HTML Text Formatting
| Tag | Description | Example |
|---|---|---|
<b> | Bold text | <b>Bold</b> |
<i> | Italic text | <i>Italic</i> |
<u> | Underlined text | <u>Underline</u> |
<strong> | Important text | <strong>Important</strong> |
<em> | Emphasized text | <em>Note</em> |
<mark> | Highlighted text | <mark>Highlight</mark> |
<small> | Smaller text | <small>Fine print</small> |
<sub> | Subscript | H<sub>2</sub>O |
<sup> | Superscript | x<sup>2</sup> |
HTML Links and Images
Example:
<a href="https://phponline.in" target="_blank">Visit PHP Online</a>
<img src="logo.png" alt="Website Logo" width="200">
| Tag | Attribute | Description |
|---|---|---|
<a> | href | Defines hyperlink |
<img> | src, alt, width, height | Embeds image |
<map> | usemap | Image mapping |
<area> | coords, shape, href | Defines clickable area |
HTML Lists
| Type | Tag | Example |
|---|---|---|
| Ordered List | <ol> | <ol><li>Item</li></ol> |
| Unordered List | <ul> | <ul><li>Item</li></ul> |
| Definition List | <dl> | <dl><dt>Term</dt><dd>Definition</dd></dl> |
HTML Tables
| Tag | Description |
|---|---|
<table> | Creates a table |
<tr> | Table row |
<th> | Table header cell |
<td> | Table data cell |
<caption> | Table title |
<thead>, <tbody>, <tfoot> | Table sections |
Example:
<table border="1">
<caption>Student Marks</caption>
<tr><th>Name</th><th>Score</th></tr>
<tr><td>Alice</td><td>95</td></tr>
</table>
HTML Forms and Input Types
| Tag / Attribute | Example | Description |
|---|---|---|
<form> | <form action="submit.php"> | Form container |
<input> | <input type="text" name="user"> | User input field |
<textarea> | <textarea rows="4"></textarea> | Multi-line input |
<select> | <select><option>Yes</option></select> | Dropdown menu |
<button> | <button type="submit">Send</button> | Clickable button |
Common Input Types:
text, password, email, number, date, checkbox, radio, file, submit
HTML5 Semantic Elements
HTML5 introduced semantic tags for better structure and SEO optimization.
| Tag | Description |
|---|---|
<header> | Page header or navigation |
<nav> | Navigation links |
<main> | Main content area |
<section> | Thematic section of a page |
<article> | Independent content block |
<aside> | Sidebar or related content |
<footer> | Footer section |
<figure> / <figcaption> | Image and caption grouping |
HTML5 Multimedia Tags
| Tag | Example | Description |
|---|---|---|
<audio> | <audio controls><source src="song.mp3"></audio> | Embeds audio |
<video> | <video controls><source src="video.mp4"></video> | Embeds video |
<canvas> | <canvas id="draw"></canvas> | Draw graphics via JavaScript |
<svg> | <svg><circle cx="50" cy="50" r="40" /></svg> | Scalable vector graphics |
html5 cheat sheet, html tags list, html5 elements reference, html form elements, html semantic tags, html5 attributes, html multimedia example, html table and list tags, html5 quick reference, html for beginners
HTML Meta & SEO Tags
| Tag | Example | Purpose |
|---|---|---|
<meta charset="UTF-8"> | Character encoding | |
<meta name="description"> | SEO page description | |
<meta name="keywords"> | Search keywords | |
<meta name="viewport"> | Responsive design | |
<link rel="stylesheet"> | Link external CSS | |
<script src="app.js"> | Link JavaScript file |
HTML5 APIs and Advanced Features
| Feature | Description | Example |
|---|---|---|
| Geolocation API | Detects user location | navigator.geolocation.getCurrentPosition() |
| Local Storage | Stores data in browser | localStorage.setItem("user", "John") |
| Drag and Drop API | Drag and drop elements | ondrop, ondragover |
| Canvas API | Draw shapes and images | canvas.getContext("2d") |
Related cheatsheet
FAQ — HTML5 Cheat Sheet
Q1: What is the purpose of HTML5?
HTML5 structures web pages and integrates multimedia, APIs, and mobile-friendly features seamlessly.
Q2: What is the difference between HTML and HTML5?
HTML5 adds support for video, audio, canvas, local storage, and semantic elements like <header> and <article>.
Q3: Are HTML5 tags case sensitive?
No, HTML5 is not case-sensitive — but lowercase is recommended for consistency.
Q4: What are semantic elements?
Semantic elements clearly describe their meaning — for example, <section>, <article>, <footer> improve SEO and accessibility.
Q5: How to validate HTML5 code?
Use the W3C Validator at https://validator.w3.org.
Related Articles
Copy data from one MS Access database to another
Computer Programming Functions
