Your Ultimate Guide On HTML Tags 🔥

Hey Devs, This is the most complete and well-structured HTML cheatsheet you can find online!!

So let's start.

Basic Tags

<html> </html>

- Creates an HTML document

<head> </head>

- Sets off the title & other info that isn't displayed

<body> </body>

- Sets off the visible portion of the document

<title> </title>

- Puts name of the document in the title bar; when
bookmarking pages, this is what is bookmarked

Formatting

<p> </p>

- Creates a new paragraph

<br>

- Inserts a line break (carriage return)

<blockquote> </blockquote>

- Puts content in a quote - indents text from both sides

<div> </div>

- Used to format block content with CSS

<span> </span>

- Used to format inline content with CSS

Body attributes

<body bgcolor="?">

- Sets background color, using a name or hex value

<body text="?">

- Sets text color, using name or hex value

<body link="?">

- Sets color of links, using name or hex value

<body vlink="?">

- Sets the color of visited links, using a name or hex value

<body alink="?">

- Sets the color of active links (while mouse-clicking)

Lists

<ul> </ul>

- Creates an unordered list

<ol start=?> </ol>

- Creates an ordered list (start=xx, where xx is a counting number)

<li> </li>

- Encompasses each list item

<dl> </dl>

- Creates a definition list

<dt>

- Precedes each definition term

<dd>

- Precedes each definition

Text Tags

<pre> </pre>

- Creates preformatted text

<h1> </h1>

-->

<h6> </h6>

- Creates headlines -- H1=largest, H6=smallest

<b> </b>

- Creates bold text (should use instead)

<i> </i>

- Creates italicized text (should use instead)

<tt> </tt>

- Creates typewriter-style text

<code> </code>

- Used to define source code, usually monospace

<cite> </cite>

- Creates a citation, usually processed in italics

<address> </address>

- Creates address section, usually processed in italics

<em> </em>

- Emphasizes a word (usually processed in italics)

<strong> </strong>

- Emphasizes a word (usually processed in bold)

<font size=?> </font>

- Sets size of font - 1 to 7 (should use CSS instead)

<font color=?> </font>

- Sets font color (should use CSS instead)

<font face=?> </font>

- Defines the font used (should use CSS instead)

Graphical elements

<hr>

- Inserts a horizontal rule

<hr size=?>

- Sets size (height) of horizontal rule

<hr width=?>

- Sets width of rule (as a % or absolute pixel length)

<hr noshade>

- Creates a horizontal rule without a shadow

<img src="URL" />

- Adds image; it is a separate file located at the URL

<img src="URL" align=?>

- Aligns image left/right/center/bottom/top/middle (use CSS)

<img src="URL" border=?>

- Sets size of border surrounding image (use CSS)

<img src="URL" height=?>

- Sets height of image, in pixels

<img src="URL" width=?>

- Sets width of image, in pixels

<img src="URL" alt=?>

- Sets the alternate text for browsers that can't process images (required by the ADA)

Links

<a href="URL">clickable text</a>

- Creates a hyperlink to a Uniform Resource Locator

<a href="mailto:EMAIL_ADDRESS">clickable text</a>

- Creates a hyperlink to an email address

<a name="NAME">

- Creates a target location within a document

<a href="#NAME">clickable text</a>

- Creates a link to that target location

Forms

<form> </form>

- Defines a form

<select multiple name=? size=?> </select>

- Creates a scrolling menu. Size sets the number of menu items visible before user needs to scroll.

<select name=?> </select>

- Creates a pulldown menu

<option>

- Sets off each menu item

<textarea name=? cols="x" rows="y"></textarea>

- Creates a text box area. Columns set the width; rows set the height.

<input type="checkbox" name=? value=?>

- Creates a checkbox.

<input type="checkbox" name=? value=? checked>

- Creates a checkbox which is pre-checked.`

<input type="radio" name=? value=?>

- Creates a radio button.

<input type="radio" name=? value=? checked>

- Creates a radio button which is pre-checked.

<input type="text" name=? size=?>

- Creates a one-line text area. Size sets length, in characters.

<input type="submit" value=?>

- Creates a submit button. Value sets the text in the submit button.

<input type="image" name=? src=? border=? alt=?>

- Creates a submit button using an image.

<input type="reset">

- Creates a reset button

HTML5 input tag attributes

<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 of numbers

<input type="date/month/week/time" name=?>

- Sets a single-line text box with a calendar showing the date/month/week/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

<table> </table>

- Creates a table

<tr> </tr>

- Sets off each row in a table

<td> </td>

- Sets off each cell in a row

<th> </th>

- Sets off the table header (a normal cell with bold, centered text)

Table attributes

<table border=?>

- Sets the width of the border around table cells

<table cellspacing=?>

- Sets the amount of space between table cells

<table cellpadding=?>

- Sets the amount of space between a cell's border and its contents

<table width=?>

- Sets the width of the table in pixels or as a percentage

<tr align=?>

- Sets alignment for cells within the row (left/center/right)

<td align=?>

- Sets alignment for cells (left/center/right)

<tr valign=?>

- Sets vertical alignment for cells within the row (top/middle/bottom)

<td valign=?>

- Sets vertical alignment for cell (top/middle/bottom)

<td rowspan=?>

- Sets number of rows a cell should span (default=1)

<td colspan=?>

- Sets the number of columns a cell should span

<td nowrap>

- Prevents lines within a cell from being broken to fit

Hope this helped and thanks for reading!

Please smash that like button and share this article with others :)

Don't Forget To Follow Me On Twitter and @garvitmotwani

Also published at https://dev.to/garvitmotwani/html-cheat-sheet-the-most-useful-html-commands-3ha5