HTML Cheatsheet

Here you can find the resources you need to help yourself working with HTML. This cheatsheet is made to save you time and increase your productivity as a developer. No matter whether you are an absolute beginner or an experienced front-end developer, you'll always need this collection of information at your fingertips.

HTML Elements Reference

HTML Elements

The following tags define the structure of a basic HTML document.

Tag	Name	Description
<html>	HTML	Acts as a container for every other element in the document except the <!DOCTYPE html> tag.
<head>	Head	Includes all the document's metadata.
<title>	Title	Defines the title of the document displayed in the browser's title bar.
<body>	Body	Acts as a container for the document's content that gets displayed on the browser.

The following tags give additional information to the HTML document.

Tag	Name	Description
<meta>	Meta	Used to define additional information about the webpage.
<link>	Link	Used to link the document to an external resource.
<style>	Style	Used for defining styles for the document.
<script>	Script	Used to write code snippets (usually JS) or to link the document to an external script.

HTML Document Structure

We'll use certain tags to create the structure in our HTML document

Tag	Name	Description
<h1> to <h6>	Heading	The <h1> to <h6> tags show different levels of headings in a document, with <h1> being the largest and <h6> being the smallest.
<p>	Paragraph	We use the <p> tag to create a paragraph.
<div>	Div	Used to divide and style separate sections of the document. It also acts as a parent container for other elements.
<span>	Span	Its similar to <div> but you use it as an inline container.
<br/>	Line-break	Used for creating line breaks. This has no closing tag.
<hr/>	Horizontal	Used to create a horizontal line. It also has no closing tag.
<img>	Image	Used to display images.

HTML Text Formatting

We can format text in HTML in many ways.

Tag	Name	Description
<i>	Italics	Displays text in italics.
<b>	Bold	Displays text in bold.
<strong>	Strong	Displays text in bold. Used to make important emphasis.
<em>	Emphasis	Another emphasis tag that displays text in italics.
<sub>	Subscript	Defines subscript text.
<sup>	Superscript	Defines a superscript like the power of a number
<small>	Small	Reduces the size of text.
<del>	Deleted	Defines deleted text by striking a line through the text.
<ins>	inserted	Defines inserted text which is usually underlined.
<blockquote>	Blockquote	Used to enclose a section of text quoted from another source.
<q>	Quotes	Used for shorter inline quotes.
<cite>	Citing	Used for citing the author of a quote.
<address>	Address	Used for showing the author's contact information.
<abbr>	Abbreviation	Denotes an abbreviation.
<code>	Code	Displays code snippets.
<mark>	Mark	Highlights text.

HTML Table Reference

Table Tags

The following tags are used while creating tables in HTML.

Tag	Name	Description
<table>	Table	The wrapper element for all HTML tables.
<thead>	Table Head	The set of rows defining the column headers in a table.
<tbody>	Table Body	The set of rows containing actual table data.
<tr>	Table Row	The table row container.
<td>	Table Data	The table row container.
<tfoot>	Table Foot	The set of rows defining the footer in a table.

Table Attributes

The following attributes are used along with table tags while creating tables in HTML.

Attribute	Name	Description
colspan	Column Span	Defines how many columns a td element should span.
rowspan	Row Span	Defines how many rows a td element should span.

Links and Anchor Tag Attributes

The <a> tag, also known as the anchor tag, is used to define hyperlinks that link to other pages (external web pages included) or to a section of the same page. Here are some attributes of the <a> tag:

Attribute	Name	Description
href	Hypertext Reference	Specifies the URL the link takes the user to when clicked.
download	Download	Specifies that the target or resource clicked is downloadable.
target	Target	Specifies where the link is to be opened. This could be in the same or separate window.

Lists

The <ol> tag defines an ordered list while the <ul> tag defines an unordered list.The <li> tag is used to create items in the list.

Forms

The <form> tag is used to create a form in HTML. Forms are used to get user inputs. Here are some attributes associated with the <form> element:

Attribute	Name	Description
action	Action	Specifies where the form information goes when submitted.
target	Target	Specifies where to display the form's response.
autocomplete	Autocomplete	Can have a value of on or off.
nonvalidate	Nonvalidate	Specifies that the form should not be validated.
method	Method	Specifies the HTTP method used when sending form data.
name	Name	Specifies the name of the form.
required	Required	Specifies that an input element cannot be left empty.
autofocus	Autofocus	Gives focus to the input elements when the page loads.
disabled	Disabled	Disables an input element so the user can longer interact with it.
placeholder	Placeholder	Is used to give users a hint on what information is required for an input element.

Here are other input elements associated with forms:

Elements	Name	Description
<textarea>	Text-area	For getting user text input with multiple lines
<select>	Select	Specifies a list of options the user can choose from.
<option>	Option	Creates an option under the select element.
<input>	Input	Specifies an input field where the user can enter data. This has a type attribute that specifies what type of data the user can input.
<button>	Button	Creates a button.

HTML5 Tags

Find below some tags introduced in HTML5:

Tag	Name	Description
<header>	Header	Specifies the webpage header.
<footer>	Footer	Specifies the webpage footer.
<main>	Main	Specifies a main content section.
<article>	Article	Specifies an article's section, usually for content that can stand alone on the webpage.
<section>	Section	Is used to create separate sections.
<aside>	Aside	Is usually used to when placing items in a sidebar.
<time>	Time	Is used for formatting date and time.
<figure>	Figure	Is used for figures like charts.
<figcaption>	Figcaption	Denotes a description of a figure.
<nav>	Navigation	Is used to nest navigation links.
<meter>	Meter	Is used to measure data within a range.
<progress>	Progress	Is used as a progress bar.
<dialouge>	Dialouge	Is used to create a dialog box.
<audio>	Audio	Is used to embed an audio file in the web page.
<video>	Video	Is used to embed video.

Conclusion:

I've tried my best to cover most of the commonly used elements, tags and attributes that are used by developers, so this should serve as a good reference resource. I'll eventually add more cheatsheets for css, javaScript and Python too. But for now, this is it! Hope you have found this resource helpful!