HTML Cheat Sheet

HTML Cheat Sheet is a summary of HTML tutorial. Each time, we might not be able to revise each topic individually or search for any specific content. So, we bring the HTML Cheat Sheet. In this sheet, we are covering everything from basic structure to advanced elements. Enhance your web development skills today.

Graphical Elements
Forms
Tables
Table Attributes
HTML5 input tag Attributes

Basic Tags

HTML tags are the fundamental elements of HTML, used for defining the structure of the document. These are letters or words enclosed by angle brackets (< and >). Each tag has a different meaning and the browser reads the tags and displays the contents enclosed by it accordingly. Here you will get all the basic tag list to create an HTML document.

Tags	Description	Examples
<html>..</html>	This tag serves as the root element of an HTML document, encapsulating all other elements within it.	Try It
<head>..</head>	The 'head' tag include meta-information about the document that isn't directly displayed on the page.	Try It
<body>..</body>	Sets off the visible portion of the document.	Try It
<title>..</title>	Puts the name of the document in the title bar, when bookmarking pages, this is what is bookmarked and render on the browser's tab.	Try It

Body Attributes

The body section is the main part of any website, as we all know. There are a few attributes that can be applied to the <body> tag. It is highly recommended that these attributes not be used to develop an actual website but only be used in email newsletters.

Attributes	Description	Examples
<body bgcolor="">	HTML bgcolor set background color of the document, using color name or hex value.	Try It
<body text="">	HTML text attribute is used to define color of text inside the body, default value is black.	Try It
<body link="">	Used to set color of hyperlinks inside body, using color name or hex value.	Try It
<body vlink="">	Used to specify color of visited hyperlinks, using color name or hex value.	Try It
<body alink="">	Define color of active links (while mouse-clicking).	Try It

Text Tags

Text is an important part of a website. Without proper textual content a website will be confusing. Just imagine a site where there are only images or graphics with no text. This might not serve the purpose entirely. We have different text tags to make the text look beautiful and readable.

Tags & Attributes	Description	Examples
<pre>..</pre>	HTML pre tag used to create preformatted text.	Try It
<h1>..</h1> to <h6>..</h6>	Creates headlines of variable size -- H1=largest, H6=smallest	Try It
<b>..</b>	The b tag is used create bold text (should use <strong> instead).	Try It
<i>..</i>	Creates italic text (should use <em> instead).	Try It
<tt>..</tt>	Used to create typewriter-style text.	Try It
<code>..</code>	Used to define source code, usually monospace.	Try It
<cite>..</cite>	Creates a citation, usually processed in italics.	Try It
<address>..</address>	Creates address section, usually processed in italics.	Try It
<em>..</em>	Emphasizes a word (usually processed in italics).	Try It
<strong>..</strong>	Emphasizes a word (usually processed in bold)	Try It
<font size="">..</font>	Sets size of font - 1 to 7 (Recommended to use CSS instead).	Try It
<font color="">..</font>	Used to define color of font (should use CSS instead).	Try It
<font face="">..</font>	Defines the font used (should use CSS instead).	Try It

Links

HTML links, also known as hyperlinks, are a fundamental feature of the World Wide Web. They allow users to navigate between different web pages, websites, or different sections of the same document.

Attributes	Description	Examples
<a href="URL">clickable text</a>	Creates a hyperlink to a Uniform Resource Locator.	Try It
<a href="mailto:email_address">clickable text</a>	Creates a hyperlink to a specified email address.	Try It
<a name="NAME">	Creates a target location within a document	Try It
<a href="#NAME">clickable text</a>	Creates a link to that target location.	Try It

Formatting

Formatting text in HTML involves using a variety of tags to define the structure, appearance, and semantic meaning of the text. Here are some of the most commonly used HTML tags for text formatting.

Tags	Description	Examples
<p>..</p>	The P tag is used to define a new paragraph in a document	Try It
<br>	The br tag is used to insert a line break (carriage return) between two lines.	Try It
<blockquote>..</blockquote>	Puts content in a quote - indents text from both sides.	Try It
<div>..</div>	The div tag is used to format block content with CSS.	Try It
<span>..</span>	The span tag is used to format inline content and block content with CSS.	Try It

Lists

In HTML, lists are used to group a set of related items. There are three main types of lists ordered lists, unordered lists, and description lists. Each serves a different purpose and is marked up with specific HTML tags.

Tags	Description	Examples
<ul>..</ul>	The ul tag in HTML is used for creating an unordered list, i.e, list without numbering.	Try It
<ol start="">..</ol>	The ol tag is used to create an ordered list (start=xx, where xx is a counting number).	Try It
<li>..</li>	The li tag defines each item in the list for both unordered list and ordered list.	Try It
<dl>..</dl>	The dl tag is used to create a definition list, a heading with its definition.	Try It
<dt>	The dt tag defines heading element of the definition list.	Try It
<dd>	The dd tag defines definition element of the definition list.	Try It

Graphical Elements

HTML provides several elements to embed graphical content, such as images, videos, and other multimedia.

Attributes	Description	Examples
<hr>	Hr tag is used to insert a horizontal rule in document.	Try It
<hr size="">	Sets size (height) of a horizontal rule.	Try It
<hr width="">	Defines width of rule (as a % or absolute pixel length).	Try It
<hr noshade>	Creates a horizontal rule without a shadow (This attribute is deprecated in HTML5).	Try It
<img src="URL" />	Adds image, it is a separate file located at the URL.	Try It
<img src="URL" align="">	Aligns image left/right/center/bottom/top/middle (use CSS).	Try It
<img src="URL" border="">	Sets the size of the border surrounding the image (use CSS).	Try It
<img src="URL" height="">	Sets the height of the image, in pixels or percentage of screen width.	Try It
<img src="URL" width="">	Defines width of image, in pixels or percentage of screen width.	Try It
<img src="URL" alt="">	Sets the alternate text for browsers that can't process images (required by the ADA).	Try It

Forms

This is one of the most important components of web development. You may not find a website where this component is not used. To know all about forms, you have to know the tags and attributes of forms. In interviews, questions are primarily based on forms to check your HTML knowledge.

Tags & Attributes	Description	Examples
<form>..</form>	The form tag in HTML is used to define user submittable application form.	Try It
<select multiple name="" size=""> </select>	Creates a scrollable selection menu. The Size sets the number of menu items visible before user needs to scroll.	Try It
<select name=""> </select>	Creates a dropdown menu with default size as 0.	Try It
<option>	Option tag is used to define each item in dropdown list.	Try It
<textarea name="" cols="x" rows="y"></textarea>	Creates a text box area. Columns set the width, rows set the height.	Try It
<input type="checkbox" name="" value="">	The input type with checkbox is used to create a checkbox, which allows users to select one or more options from a set.	Try It
<input type="checkbox" name="" value="" checked>	Creates a checkbox which is pre-checked for certain values.	Try It
<input type="radio" name="" value="">	The input type with radio attribute is used to create radio buttons in HTML.	Try It
<input type="radio" name="" value="" checked>	Creates a radio button which is pre-checked.	Try It
<input type="text" name="" size="">	Defines a one-line text area. Size sets length, in characters.	Try It
<input type="submit" value="">	Used to add a submit button at the end of form. Value sets the text in the submit button.	Try It
<input type="image" name="" src="" border="" alt="">	Creates a submit button using an image. It helps to hide a button in an image.	Try It
<input type="reset">	A reset button is used within a form to clear all user inputs and reset the form fields to their default values.	Try It

Tables

Tables are used to render the data in a structured form. Use tables for data layout and CSS for page layout.

Tags	Description	Examples
<table>..</table>	Tables in HTML are used to organize and display data in a tabular format, consisting of rows and columns.	Try It
<tr>..</tr>	The tr tag inside table tag is used to define each row in a table.	Try It
<td>..</td>	The td tag inside tr tag is used to define each cell in a row.	Try It
<th>..</th>	Sets off the table header (a normal cell with bold, centered text).	Try It

Table Attributes

As we know the importance of table, sometimes a nomal table is not enough to represent the data we want to render. So, some attributes are required to use on table elements so that the table looks good. Use these attributes for email newsletters and to decorate a table use CSS for better results.

Attributes	Description	Examples
<table border="">	Sets the width of the border around table cells.	Try It
<table cellspacing="">	Defines amount of space between table cells.	Try It
<table cellpadding="">	Sets amount of space between a cell's border and its contents.	Try It
<table width="">	Specify width of the table in pixels or as a percentage.	Try It
<tr align="">	Sets alignment for cells within the row (left/center/right).	Try It
<td align="">	Sets alignment for cells (left/center/right).	Try It
<tr valign="">	Defines vertical alignment for cells within the row (top/middle/bottom).	Try It
<td valign="">	Sets vertical alignment for cell (top/middle/bottom).	Try It
<td rowspan="">	Defines number of rows a cell should span (default=1).	Try It
<td colspan="">	Sets number of columns a cell should span.	Try It
<td nowrap>	Prevents lines within a cell from being broken to fit.	Try It

HTML5 input tag Attributes

These attributes are newly included after the release of HTML5, the input tag plays an important role. Not all browsers support these attributes. So, it is better to verify before using.

Attributes	Description	Examples
<input type="email" name="">	The input type email is used to accept text which are in the format of email address.	Try It
<input type="url" name="">	The input type with value url is used to specifically accept URLs.	Try It
<input type="number" name="">	The input type number is used to accept single-line number.	Try It
<input type="range" name="">	Defines single-line text box for a range of numbers.	Try It
<input type="date/month/week/time" name="">	Generates single-line text box with a calendar showing the date/month/week/time.	Try It
<input type="search" name="">	Sets a single-line text box for searching.	Try It
<input type="color" name="">	Defines single-line text box for choosing a color.	Try It

HTML Editor and Formatter

Coding on any random editor may result in unformatted HTML code. To format your HTML code, you can use our HTML Editor. HTML formatter will make your code easy to read and maintainable. Also, try Io use comments inside your HTML code so that the other editors know which part of your code is rendering what in your website.

Conclusion

By following this HTML Cheat Sheet, you can revise yourself for an interview or you can keep this cheat sheet bookmarked so that whenever you need something that you can not recall, this will help you.

Print Page