If you want to become a web developer then you have to start with HTML. HTML stands for Hyper Text Markup Language. Here we have shared HTML cheat sheet that will help you learn the HTML easily.
Structure of HTML Document
This is the basic template or barebone structure of HTML.
Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- Body -->
</body>
</html>Basic Tags
<html> </html> Tag : Create an HTML Document
<html> </html><head> </head> Tag: Sets off the title and other info that is not displayed
<head> </head><body> </body> Tag: Sets off the visible portion of the document
<body> </body><title> </title> Tag: Puts name of the document in the title bar; when bookmarking pages, this is what is bookmarked.
<title> This is the Title of Your Webpage</title>Text Tags
<pre> </pre> Tag: Creates preformatted text
<pre> write preformatted text here</pre><h1> </h1> ……. <h6> </h6> Tags: Creates Headlines; H1= Largest and H6=smallest
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6><b> </b> Tag: Creates BOLD TEXT (should use <strong> </strong> Instead)
<b> BOLD TEXT </b><i> </i> Tag: Creates italicized text ( should use <em> </em> instead)
<i> Italic Text</i><tt> </tt> Tag: Creates typewriter – style text
<tt> Typewriter Style Text</tt><code> </code> Tag: Used to define source code, usually monospace
<code> Your Source Code </code><cite> </cite> Tag: Creates a citation, usually processed in italics
<cite> Write Citation Here </cite><address> </address> Tag: Creates address section, usually processed in italics
<address> Write Address here</address><em> </em> Tag: Emphasizes a word ( Usually processed in italics)
<em> Emphasizes Text in Italics </em><strong> </strong> Tag: Emphasizes a word (Usually processed in bold)
<strong> Emphasizes Text in Bold </strong>Lists Tags
<ul> </ul> Tag: Creates an unordered list
<ul> Unordered List</ul><ol> </ol> Tag: Creates an ordered list
<ol> Ordered List </ol><li> </li> Tag: Encompasses each list item
<li> List Item 1 </li>
<li> List Item 2 </li><dl> </dl> Tag: Creates a definition list
<dl> Definition List </dl>Formatting Tags
<p> </p> Tag: Creates a new paragraph
<p> paragraph text </p><br> Tag: Insert a line break (carriage return)
<blockquote> </blockquote> Tag: Puts content in a quote – indents text from both sides
<blockquotes> Quote Text here</blockquotes><div> </div> Tag: Used to format block content with CSS
<div> Content </div><span> </span> Tag: Used to format inline content with CSS
<span> Content </span>Links
Creates a hyperlink to a Uniform Resource Locator
<a href="URL">clickable text</a>Creates a hyperlink to an email address
<a href="mailto:EMAIL_ADDRESS">clickable text</a>Creates a target location within a document
<a name="NAME">Creates a link to that target location
<a href="#NAME">clickable text</a>Graphical Elements
Inserts a horizontal rule
<hr>Sets size (height) of horizontal rule
<hr size=?>Sets width of rule (as a % or absolute pixel length)
<hr width=?>Creates a horizontal rule without a shadow
<hr noshade>Adds image; it is a separate file located at the URL
<img src="URL" />Aligns image left/right/center/bottom/top/middle (use CSS)
<img src="URL" align=?>Forms
Defines a form
<form> </form>Creates a scrolling menu. Size sets the number of menu items visible before user needs to scroll.
<select multiple name=? size=?> </select>Creates a pulldown menu
<select name=?> </select>Sets off each menu item
<option>Creates a text box area. Columns set the rows set the height.
<textarea name=? cols="x" row="y"> </textarea>Creates a checkbox.
<input type="checkbox" name=? value=?>Creates a checkbox which is pre-checked.
<input type="checkbox" name=? value=? checked>Creates a radio button.
<input type="radio" name=? value=?>Creates a radio button which is pre-checked.
<input type="radio" name=? value=? checked>Creates a one-line text area. Size sets length, in characters.
<input type="text" name=? size=?>Creates a submit button. Value sets the text in the submit button.
<input type="submit" value=?>Creates a submit button using an image.
<input type="image" name=? src=? border=? alt=?>Creates a reset button
<input type="reset">HTML5 input tag attributes
(not all browsers support;)
Sets a single-line textbox for email addresses
<input type="mail" name=?>Sets a single-line textbox for URLS
<input type="url" name=?>Sets a single-line textbox for a number
<input type="number" name=?>Sets a single-line text box for a range of numbers
<input type="range" name=?>Sets a single-line text box with a calendar showing the date/month/week/time
<input type="date/month/week/time" name=?>Sets a single-line text box for searching
<input type="search" name=?>Sets a single-line text box for picking a color
<input type="color" name=?>Tables
(use only for data layout- use CSS for page layout)
Creates a table
<table> </table>Sets off each row in a table
<tr> </tr>Sets off each cell in a row
<td> </td>Sets off the table header (a normal cell with bold, centered text)
<th> </th>Table Attributes
(only use for email newsletters)
Sets the width of the border around table cells
<table border=?> Sets amount of space between table cells
<table cellspacing=?>Sets amount of space between a cell’s border and its contents
<table cellpadding=?>Sets width of the table in pixels or as a percentage
<table width=?>Sets alignment for cells within the row (left/center/right)
<tr align=?>Sets alignment for cells (left/center/right)
<td align=?>Sets vertical alignment for cells within the row (top/middle/bottom)
<tr valign=?>Sets vertical alignment for cell (top/middle/bottom)
<td valign=?>Sets number of rows a cell should span (default-1)
<td rowspan=?>Sets number of columns a cell should span
<td colspan=?> Prevents lines within a cell from being broken to fit
<td nowrap>Also Read: