DEV Community

Rutvik Patel
Rutvik Patel

Posted on • Updated on • Originally published at rutikkpatel.Medium

Comprehensive HTML Cheat Sheet for Web Development

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/) )

 

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


 

1. Document Information

<DOCTYPE> → Version of HTML

<html> → HTML Document

<head> → Page Information

<body> → Main Content

 

2. Comments

<! -- Comment Goes Here -->

 

3. Page Information

<base> → Base URL

<meta> → Meta Data

<title> → Title

<link> → Link Resources

<style/> → Adding Style

<script/> → Adding Script

 

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

 

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

 

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

 

7. Lists

<ol> → Ordered List

<ul> → Unordered List

<li> → List Item

<dl> → Definition List

<dt> → Definition Term

<dd> → Term Description

 

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

 

9. Tables

<table> → Table

<caption> → Caption

<thead> → Table Header

<tbody> → Table Body

<colgroup> → Column Group

<col> → Column

<tr> → Row

<th> → Header Cell

<td> → Cell

 

10. Image & Image map

<img> → Image

<map> → Image Map

<area> → Area of Map

 

11. Keyboard Attributes

accesskey

tabindex

 

12. window events

onload

onunload

 

13. Form Events

onblur

onreset

onchange

onfocus

onselect

onsubmit

 

14. Keyboard Events

onkeydown

onkeyup

onkeypress

 

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.

 
“Stay tuned for our upcoming CSS cheat sheet and JavaScript cheat sheet.

Top comments (0)