DEV Community

Cover image for HTML tags Cheat Sheet
keshavs759
keshavs759

Posted on • Originally published at vidyasheela.com

HTML tags Cheat Sheet

Download Link

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

Enter fullscreen mode Exit fullscreen mode

Body attributes

<body bgcolor=?>: Sets background color, using 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 color of visited links, using name or hex value

<body alink=?>: Sets color of active links (while mouse-clicking)
Enter fullscreen mode Exit fullscreen mode

Text Tags

<pre> </pre>: Createspreformattedtext

<h1> </h1> --> <h6> </h6>: Creates headlines -- H1=largest, H6=smallest

<b> </b>: Createsboldtext(shoulduse<strong>instead)

<i> </i>: Creates italicized text (should use <em> 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>: Setssizeoffont-1 to7(shoulduseCSSinstead)

<font color=?> </font>: Setsfontcolor(shoulduseCSSinstead)

<font face=?> </font>: Defines the font used (should use CSS instead)
Enter fullscreen mode Exit fullscreen mode

Links

<a href="URL">clickable </a>: Creates a hyperlink to a Uniform Resource Locator

<a href="mailto:EMAIL_ADDRESS">clickable </a> Creates a hyperlink to an email address      

<a name="NAME">: Creates a target location within a document  

<a href="#NAME">clickable </a>: Creates a link to that target location
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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 eachdefintion term  

<dd>: Precedes each defintion
Enter fullscreen mode Exit fullscreen mode

Graphical elements

<hr>: Insertsahorizontalrule

<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=?>: Setsheightofimage,inpixels

<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)
Enter fullscreen mode Exit fullscreen mode

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> : Setsoffeachmenuitem

<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=?>: Createsaradiobutton.

<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

<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
Enter fullscreen mode Exit fullscreen mode

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 border=?>: Sets the width of the border around table cells 

<table cellspacing=?>: Sets amount of space between table cells  

<table cellpadding=?>: Sets amount of space between a cell's border and its contents     

<table width=?>: Sets 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 number of columns a cell should span

<td nowrap>: Prevents lines within a cell from being broken to fit
Enter fullscreen mode Exit fullscreen mode

Discussion (1)

Collapse
lukeshiru profile image
LUKESHIRU

Some of the things here are pretty outdated, or don't even work in modern browsers:

Old/deprecated HTML CSS property CSS selector
<body bgcolor=?> background-color body
<body text=?> color body
<body link=?> color a
<body vlink=?> color a:visited
<body alink=?> color a:active
<font size=?> font-size font
<font color=?> color font
<font face=?> font-family font
<hr size=?> height hr
<hr width=?> width hr
<hr noshade> border hr
<img src="URL" align=?> vertical-align or float img
<img src="URL" border=?> border img
<table border=?> border table
<table cellspacing=?> border-spacing table
<table cellpadding=?> padding td
<table width=?> width table
<table align=?> text-align td
<tr align=?> text-align tr
<td align=?> text-align td
<tr valign=?> vertical-align tr
<td valign=?> vertical-align td
<td nowrap> white-space td

Cheers!