HTML CheatSheet: Master the Most Commonly Used HTML Tags

Master the most commonly used HTML tags with this comprehensive cheatsheet. This comprehensive HTML cheatsheet covers the most commonly used HTML tags you need to know, from structural tags to text formatting tags to image and link tags. It's the perfect resource for web developers and beginners alike.

Whether you're just getting started with HTML or you want a quick refresher on the most important tags, this cheatsheet has everything you need.

HTML CheatSheet for Developers

Basic Tags of HTML

Tags are like keywords which defines that how web browser will format and display the content.

Command	Description
`<html>...</html>`	Tag can be thought of as a parent tag for every other tag used in the page.
`<head>...</head>`	Tag is used to specify meta data about the webpage. It includes the webpage’s name,its dependencies (JS and CSS scripts), font usage etc.
`<body>...</body>`	Container for all the contents of the webpage.
`<base/>`	Used to specify the base URL of your site,this tag makes linking to internal links on your site cleaner.
`<meta/>`	Can be useful for mentioning the page’s author,keywords, original published date etc.
`<link/>`	This is used to link to scripts external to the webpage. Typically utilized for including stylesheets.
`<style>...</style>`	The style tag can be used as an alternative to an external style sheet, or complement it.Includes the webpage’s appearance information.
`<script>...</script>`	Used to add code snippets, typically in JavaScript,to make webpage dynamic. It can also be used to just link to an external script.

Tags to Structure Document

Command	Description
`<h1..h6> … </h1..h6>`	Six different variations of writing a heading. `<h1>` Tag has the largest font size, while `<h6>` has the smallest.
`<div>...</div>`	A webpage’s content is usually divided into blocks, specified by the div tag.
`<span>...</span>`	This tag injects inline elements, like an image, icon, emoticon without ruining the formatting/styling of the page.
`<p>...</p>`	Plain text is placed inside the tag.
`<br>`	A Line Break for Webpages.It is used when wanting to write a new line.
`<hr/>`	In addition to switching to the next line, this tag also drawsa horizontal bar to indicate the end of the section.
`<strike>...</strike>`	Another old tag, this is used to draw a line atthe center of the text, so as to make it appearunimportant or no longer useful.
`<cite>...</cite>`	Tag for citing author of a quote.
`<blockquote> … </blockquote>`	Quotes often go into this tag. Is used in tandem with the `<cite>`tag.
`<q> … </q>`	Similar to the above tag, but for shorter quotes.
`<abbr> … </abbr>`	Denotes abbreviations, along with the full forms.
`<address> … </address>`	Tag for specifying author’s contact details.
`<dfn> … </dfn>`	Tag dedicated for definitions.
`<code> … </code>`	This is used to display code snippets within a paragraph.
`<bdo dir="rtl/ltr"> … </bdo>`	Overrides the current directionality of text, so that the text within is rendered in a different direction.

Semantic Elements

Semantic element clearly describes its meaning to both the browser and the developer.

Command	Description
`<article> ... </article>`	Defines independent, self-contained content
`<aside> ... </aside>`	Defines content aside from the page content
`<details> ... </details>`	Defines additional details that the user can view or hide
`<figcaption> ... </figcaption>`	Defines a caption for a `<figure>` element webpage.
`<figure> ... </figure>`	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
`<footer> ... </footer>`	Defines a footer for a document or section
`<header> ... </header>`	Specifies a header for a document or section
`<main> ... </main>`	Specifies the main content of a document
`<nav> ... </nav>`	Defines navigation links
`<section> ... </section>`	Defines a section in a document
`<summary> ... </summary>`	Defines a visible heading for a `<details>` element
`<time> ... </time>`	Defines a date/time
`<pre> ... </pre>`	Preserve both spaces and linebreaks

Formatting

Formatting elements were designed to display special types of text:

Command	Description
`<b> ... </b>`	Defines bold text
`<em> ... </em>`	Defines emphasized text
`<i> ... </i>`	Defines a part of text in an alternate voice or mood
`<small> ... </small>`	Defines smaller text
`<strong> ... </strong>`	Defines important text
`<sub> ... </sub>`	Defines subscripted text
`<sup> ... </sup>`	Defines superscripted text
`<ins> ... </ins>`	Defines inserted text
`<del> ... </del>`	Defines deleted text
`<mark> ... </mark>`	Defines marked/highlighted text

Links

Links allow users to click their way from page to page.

Command	Description
`<a href=””> … </a>`	Anchor tag. Primarily used for including hyperlinks.
`<a href=”mailto:”> … </a>`	Tag dedicated to sending emails.
`<a href=”tel:###-###”> … </a>`	Anchor tag for mentioning contact numbers. As the numbers are clickable, this can be particularly beneficial for mobile users.
`<a name=”name”> … </a>`	This tag can be used to quickly navigate to a different part of the webpage.
`<a href=”#name”> … </a>`	A variation of the above tag, this is only meant to navigate to a div section of the webpage.

Images

Images can improve the design and the appearance of a web page.

Command	Description
`<img />`	A tag to display images in the webpage.
`src=”url”`	The URL or path where the image is located on your drive or on the web.
`alt=”text”`	The text written here is displayed when user hovers mouse over the image. Can be used to give additional details of the image.
`height=””`	Specifies image height in pixels or percentages.
`width=””`	Specifies image width in pixels or percentages.
`align=””`	The relative alignment of the image. Can change with changes to other elements in the webpage.
`border=””`	Specifies border thickness of the image. If not mentioned, defaults to 0.
`<map> … </map>`	Denotes an interactive (clickable) image.
`<map name=””> … </map>`	Name of the map associated between the image and the map.
`<area />`	Specifies image map area.
`shape=””`	Shape of the area.
`coords=””`	The coords attribute specifies the coordinates of an area in an image map.

Lists

Lists allow web developers to group a set of related items in lists.

Command	Description
`<ol> … </ol>`	Tag for ordered or numbered list of items.
`<ul> … </ul>`	Contrary to the above tag, used for unorderedlist of items.
`<li> … </li>`	Individual item as part of a list.
`<dl> … </dl>`	Tag for list of items with definitions.
`<dt> … </dt>`	The definition of a single term inline with body content.
`<dd> … </dd>`	The description for the defined term.

Forms

Form is used to collect user input. The user input is most often sent to a server for processing.

Command	Description
`<form> … </form>`	The parent tag for an HTML form.
`action=”url”`	The URL listed here is where the form data will be submitted once user fills it.
`method=”POST”`	It specifies which HTTP method (POST or GET) would be used to submit the form.
`accept-charset`	It specifies the character encodings used for form submission.
`autocomplete`	It specifies whether a form should have autocomplete on or off.
`enctype`	It specifies how the form-data should be encoded when submitting it to the server (only for method="post")
`name`	It specifies the name of the form.
`novalidate`	It specifies that the form should not be validated when submitted
`target`	It specifies where to display the response that is received after submitting the form

Form Elements	Description
`<input>`	Used to take input from user, can be shown in different ways depending upon 'type' attribute.
`<label>`	It defines a label for several form elements.
`<select>`	It element defines a drop-down list
`<textarea>`	It element defines a multi-line input field (a text area)
`<button>`	It element defines a clickable button

Example:

<form method="POST" action="/page">
  <label for="name">Page Name</label>
  <input id="name" type="text" name="page_name" />
  <input type="submit" value="Create" />
</form>

Input Types

Field Type	HTML Code Notes
plain text	`<input type="text">`
password field	`<input type="password">`
text area	`<textarea></textarea>`
checkbox	`<input type="checkbox">`
radio button	`<input type="radio">` can be grouped with other inputs
drop-down lists	`<select><option>`
file picker	`<input type="file">`
hidden field	`<input type="hidden">`
submit button	`<input type="submit">`

Important Attributes

Input Tags Attributes:

keyword	description
`type`	the type of data that is being input (affects the "widget" that is used to display this element by the browser).
`name`	the key used to describe this data in the HTTP request.
`id`	the unique identifier that other HTML elements, JavaScript and CSS use to access this element in the browser.
`value`	the default data that is assigned to the element.
`placeholder`	not a default value, but a useful HTML5 addition of a data "prompt" for an input.
`disabled`	a Boolean attribute indicating that the "widget" is not available for interaction.

Radio Buttons or Checkboxes Attributes:

keyword	description
`checked`	a Boolean that indicates whether the control is selected by default (is false unless).
`name`	the group to which this element is connected. For radio buttons, only one element per group (or name) can be checked.
`value`	the data or value that is returned for a specific group (a multi-element control), if this element is checked.

Inputs

Command	Description
`<input type="email" name=" ">`	Sets a single-line textbox for email addresses.
`<input type="url" name=" ">`	Sets a single-line textbox for URLs.
`<input type="number" name=" ">`	Sets a single-line textbox for a number.
`<input type="range" name=" ">`	Sets a single-line text box for a range numbers.
`<input type="date" name=" ">`	Sets a single-line text box with a calendar showing the date .
`<input type="month" name=" ">`	Sets a single-line text box with a calendar showing the month .
`<input type="time" name=" ">`	Sets a single-line text box with a calendar showing the time .
`<input type="search" name=" ">`	Sets a single-line text box for searching .
`<input type="color" name=" ">`	Sets a single-line text box for picking a color.

Tables

Tables allow web developers to arrange data into rows and columns.

Command	Description
`<table> … </table>`	Marks a table in a webpage.
`<caption> … </caption>`	Description of the table is placed inside this tag.
`<thead> … </thead>`	Specifies information pertaining to specific columns of the table.
`<tbody> … </tbody>`	The body of a table, where the data is held.
`<tfoot> … </tfoot>`	Determines the footer of the table.
`<tr> … </tr>`	Denotes a single row in a table.
`<th> … </th>`	The value of a heading of a table’s column.
`<td> … </td>`	A single cell of a table. Contains the actual value/data.
`<colgroup> … </colgroup>`	Used for grouping columns together.
`<col>`	Denotes a column inside a table.

Graphics

Command	Description
`<canvas> … </canvas>`	Used to draw graphics on a web page using javascript.
`<svg> … </svg>`	Used to defines vector-based graphics in XML format.

Media

Command	Description
`<video> … </video>`	Used to show a video on a web page.
`<audio> … </audio>`	Used to play an audio file on a web page.
`<object>`	It defines an embedded object within an HTML document.
`<iframe>`	It helps to play video directly from youtube.

#html