HTML (HyperText Markup Language) is the foundation of every website on the internet. Whether you’re building a personal blog, a corporate website, or a dynamic web app, understanding essential HTML tags and attributes is a must. This cheat sheet serves as a quick reference guide to help you write cleaner, more semantic, and well-structured HTML.
In this tutorial, we’ll cover:
-
The most commonly used HTML tags
-
Important global attributes
-
HTML5 structural elements
-
Input types and form elements
-
Meta and link tags for SEO and styling
1. Basic Structure of an HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- Your content here -->
</body>
</html>2. Common HTML Tags
| Tag | Description | Example |
|---|---|---|
<h1>–<h6> |
Headings | <h1>Main Heading</h1> |
<p> |
Paragraph | <p>This is a paragraph.</p> |
<a> |
Anchor / Link | <a href="https://...">Link</a> |
<img> |
Image | <img src="image.jpg" alt="desc" /> |
<strong> / <em> |
Bold / Italic emphasis | <strong>Bold</strong> |
<ul> / <ol> / <li> |
Lists | <ul><li>Item</li></ul> |
<br> |
Line break | <br /> |
<hr> |
Horizontal rule | <hr /> |
3. HTML5 Structural Elements
| Tag | Use Case |
|---|---|
<header> |
Top section of the page |
<nav> |
Navigation links |
<main> |
Main content |
<section> |
Thematic grouping of content |
<article> |
Independent self-contained content |
<aside> |
Sidebar or complementary content |
<footer> |
Bottom of the page |
4. Form Tags and Input Types
| Tag / Attribute | Description | Example |
|---|---|---|
<form> |
Form container | <form action="/submit"> |
<input type="text"> |
Text input | <input type="text" /> |
<input type="email"> |
Email input | <input type="email" /> |
<input type="password"> |
Password input | <input type="password" /> |
<input type="submit"> |
Submit button | <input type="submit" /> |
<textarea> |
Multi-line input | <textarea></textarea> |
<label> |
Label for form control | <label for="name">Name</label> |
<select> / <option> |
Dropdown | <select><option>One</option></select> |
5. Important Global Attributes
| Attribute | Purpose | Example |
|---|---|---|
id |
Unique identifier | <div id="main"> |
class |
CSS class name | <div class="box"> |
style |
Inline styles | <p style="color:red;"> |
title |
Tooltip text | <abbr title="World Health Organization">WHO</abbr> |
alt |
Alternate text for images | <img alt="description" /> |
href |
URL for links | <a href="...">Link</a> |
src |
Source URL for media (e.g., images) | <img src="image.png" /> |
target="_blank" |
Open link in new tab | <a href="..." target="_blank"> |
6. Meta Tags for SEO and Social
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A handy HTML cheat sheet." />
<meta property="og:title" content="HTML Cheat Sheet" />
<meta property="og:description" content="Essential HTML tags and attributes." />7. Link External CSS and JS
<link rel="stylesheet" href="styles.css" /> <script src="script.js"></script>Bonus: Semantic vs Non-Semantic Tags
| Semantic Tags | Non-Semantic Tags |
|---|---|
<article> |
<div> |
<section> |
<span> |
<header> |
|
<footer> |
Tip: Use semantic tags for better accessibility and SEO.
Conclusion
HTML is simple, yet incredibly powerful. This cheat sheet covers the most commonly used HTML tags and attributes to help you quickly recall and use them effectively. Whether you’re a beginner or an experienced developer, having this reference at your fingertips can boost your productivity and ensure your code is clean and semantic.
You can get the full source code on our GitHub.
That's just the basics. If you need more deep learning about HTML, CSS, JavaScript, or related, you can take the following cheap course:
- HTML & HTML5 For Beginners (A Practical Guide)
- Web - HTML
- Learn HTML, CSS, JAVASCRIPT
- JavaScript:
- Learn JavaScript Fundamentals
- Learning JavaScript Shell Scripting
Thanks!