Rutvik Patel

Posted on Apr 13, 2023 • Updated on Apr 21, 2023 • Originally published at rutikkpatel.Medium

Comprehensive HTML Cheat Sheet for Web Development

#html #frontend #webdev #programming

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.

Cheatsheet Index :

Document Information
Comments
Page Information
Document Structure
Links
Text Markup
Lists
Forms
Tables
Image & Image map
Keyboard Attributes
window events
Form Events
Keyboard Events
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.”

DEV Community