🎉 New: Top 75 PHP Interview Questions for 2026 — Free for all learners
Start Learning →

HTML5 Cheat Sheet — Complete Tag Reference & Examples

P
php Guru
· · 6 min read ·
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

📌 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

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

TagDescriptionExample
<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

TagDescriptionExample
<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>SubscriptH<sub>2</sub>O
<sup>Superscriptx<sup>2</sup>

Example:

<a href="https://phponline.in" target="_blank">Visit PHP Online</a>
<img src="logo.png" alt="Website Logo" width="200">
TagAttributeDescription
<a>hrefDefines hyperlink
<img>src, alt, width, heightEmbeds image
<map>usemapImage mapping
<area>coords, shape, hrefDefines clickable area

HTML Lists

TypeTagExample
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

TagDescription
<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 / AttributeExampleDescription
<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.

TagDescription
<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

TagExampleDescription
<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

TagExamplePurpose
<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

FeatureDescriptionExample
Geolocation APIDetects user locationnavigator.geolocation.getCurrentPosition()
Local StorageStores data in browserlocalStorage.setItem("user", "John")
Drag and Drop APIDrag and drop elementsondrop, ondragover
Canvas APIDraw shapes and imagescanvas.getContext("2d")

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.

html for beginners html form elements html multimedia example html semantic tags html table and list tags html tags list html5 attributes html5 cheat sheet html5 elements reference html5 quick reference
P
php Guru
PHP Developer & Technical Writer — phponline.in A seasoned PHP developer with 8+ years of experience in Laravel, MySQL, and REST APIs. Writes practical tutorials and career guides to help developers grow their skills and income. All salary data is researched from real job postings and developer surveys.
← Previous Post
Java Cheat Sheet — Complete Java Syntax, Data Types, Loops, and OOP Concepts for Beginners
Next Post →
Photoshop Cheat Sheet — Tools, Shortcuts & Editing Techniques

Related Articles

📄
Interview Q & A

50+ Python Interview Questions and Answers 2023
📄
Error Fix

How to Fix the “Unable to Render Card Preview” Twitter Error
📄
Interview Q & A

ASP.Net And Web API Interview Questions With Answers
📄
Computer Programming

Computer Programming Strings