HTML tags Cheat Sheet

This content originally appeared on DEV Community and was authored by keshavs759

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

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)

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)

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

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

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

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)

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

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

This content originally appeared on DEV Community and was authored by keshavs759

Print Share Comment Cite Upload Translate Updates

APA

keshavs759 | Sciencx (2021-10-21T15:13:50+00:00) HTML tags Cheat Sheet. Retrieved from https://www.scien.cx/2021/10/21/html-tags-cheat-sheet/

MLA

" » HTML tags Cheat Sheet." keshavs759 | Sciencx - Thursday October 21, 2021, https://www.scien.cx/2021/10/21/html-tags-cheat-sheet/

HARVARD

keshavs759 | Sciencx Thursday October 21, 2021 » HTML tags Cheat Sheet., viewed ,<https://www.scien.cx/2021/10/21/html-tags-cheat-sheet/>

VANCOUVER

keshavs759 | Sciencx - » HTML tags Cheat Sheet. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/21/html-tags-cheat-sheet/

CHICAGO

" » HTML tags Cheat Sheet." keshavs759 | Sciencx - Accessed . https://www.scien.cx/2021/10/21/html-tags-cheat-sheet/

IEEE

" » HTML tags Cheat Sheet." keshavs759 | Sciencx [Online]. Available: https://www.scien.cx/2021/10/21/html-tags-cheat-sheet/. [Accessed: ]

rf:citation

» HTML tags Cheat Sheet | keshavs759 | Sciencx | https://www.scien.cx/2021/10/21/html-tags-cheat-sheet/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts