Comprehensive HTML Cheat Sheet for Web Development
Tags: html, frontend, webdev, programming
Published: 2023-04-13 06:42:00


## HTML Cheat sheet

HTML is the foundation of websites. To build effective and attractive websites, it’s important to understand their basic structure and syntax.

With this in mind, I’ve created a comprehensive **HTML cheat sheet** that covers all the essential HTML elements, attributes, and events that you need to know to get started with web development.


![Created By : [Rutik Patel](https://rutikkpatel.medium.com/) ( [Author](https://rutikkpatel.medium.com/) )](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br94s9wv852zik59g9tp.png)


&nbsp;
## Cheatsheet Index :

 1. Document Information

 2. Comments

 3. Page Information

 4. Document Structure

 5. Links

 6. Text Markup

 7. Lists

 8. Forms

 9. Tables

 10. Image & Image map

 11. Keyboard Attributes

 12. window events

 13. Form Events

 14. Keyboard Events

 15. Mouse Events

---


&nbsp;

### 1. Document Information

**`<DOCTYPE>`** → Version of HTML

**`<html>`** → HTML Document

**`<head>`** → Page Information

**`<body>`** → Main Content


&nbsp;
### 2. Comments

<! -- Comment Goes Here  -->


&nbsp;
### 3. Page Information

**`<base>`** → Base URL

**`<meta>`** → Meta Data

**`<title>`** → Title

**`<link>`** → Link Resources

**`<style/>`** → Adding Style

**`<script/>`** → Adding Script


&nbsp;
### **4. Document Structure**

**`<h1>,<h2>,<h3>,<h4>,<h5>,<h6>`** → Heading

**`<div>`** → Page Section

**`<span>`** → Inline Section

**`<p>`** → Paragraph

**`<section>`** → Section

**`<br>`** → Line Break

**`<hr>`** → Horizontal Rulebar


&nbsp;
### 5. Links

**`<a href=””>`** → Blank Link

**`<a href=”http://”>`**  → Page Link

**`<a href=”mailto:”>`** → Email Link

**`<a href=”tel:+”>`** → Contact Link

**`<a href=”#menu”>`** → Link to some id


&nbsp;
### 6. Text Markup

**`<strong>`** → Strong Emphasis

**`<abbr>`** → Abbreviation

**`<acronym>`** → Acronym

**`<em>`** → Emphasis

**`<blockquote>`** → Long Quotation

**`<q>`** → Short Quotation

**`<pre>`** → Preformatted Text

**`<cite>`** → Citation

**`<sub>`** → Subscript

**`<sup>`** → Superscript

**`<bdo dir=””>`** → Text Direction

**`<address>`** → Address


&nbsp;
### 7. Lists

**`<ol>`** → Ordered List

**`<ul>`** → Unordered List

**`<li>`** → List Item

**`<dl>`** → Definition List

**`<dt>`** → Definition Term

**`<dd>`** → Term Description


&nbsp;
### 8. Forms

**`<form>`** → Form

**`<fieldset>`** → Collection of Field

**`<legend>`** → Form Legend

**`<label>`** → Input Field Label

**`<input>`** → Input Field

**`<select>`** → Dropdown Selection Box

**`<optgroup>`** → Group of options

**`<option>`** → Dropdown Option

**`<textarea>`** → Large Text Input 

**`<button>`** → Button


&nbsp;
### 9. Tables

**`<table>`** → Table

**`<caption>`** → Caption 

**`<thead>`** → Table Header

**`<tbody>`** → Table Body

**`<colgroup>`** → Column Group

**`<col>`** → Column

**`<tr>`** → Row

**`<th>`** → Header Cell

**`<td>`** → Cell


&nbsp;
### 10. Image & Image map

**`<img>`** → Image

**`<map>`** → Image Map

**`<area>`** → Area of Map


&nbsp;
### 11. Keyboard Attributes

**accesskey**

**tabindex**


&nbsp;
### 12. window events

**onload**

**onunload**


&nbsp;
### 13. Form Events

**onblur**

**onreset**

**onchange**

**onfocus**

**onselect**

**onsubmit**


&nbsp;
### 14. Keyboard Events

**onkeydown**

**onkeyup**

**onkeypress**


&nbsp;
### 15. Mouse Events

**onclick**

**onmouseout**

**onmouseover**

**onmousedown**

**onmouseup**

**onmousemove**

---


### Conclusion :

We hope this **HTML cheat sheet** serves as a helpful reference tool as you learn and develop your HTML skills. With the knowledge gained from this cheat sheet, you’ll be well on your way to creating dynamic and engaging web pages. Remember, **practice makes perfect**, so keep coding and experimenting with HTML to take your web development skills to the next level.


&nbsp;
“Stay tuned for our upcoming **CSS cheat sheet** and **JavaScript cheat sheet.**”