Here’s a list of commonly used HTML tags. We intentionally kept it simple and limited to just the essential tags, rather than listing every HTML tag ever made. We created this guide for students in our web development certificates and classes, but wanted everyone to benefit, so we hope you find it useful!

Important: While this guide includes HTML attributes that can be used for formatting, you should typically use CSS instead! In modern sites, HTML is used for meaningful markup of content (headings, paragraphs, etc) and CSS formats the look of that content. We’ve kept the older HTML formatting attributes here for reference, just in case they might work better in HTML email (some email clients may not properly render some CSS).

Required Tags
Document Type <!DOCTYPE HTML> First tag in a file. It tells the web browser what version of HTML a page is written in.
HTML Tag <html></html> Wraps all the code in the file, except for the doctype.
Head Section <head></head> At the top of the file, after html tag
Title <title></title> Goes inside the head tag
Body Section <body></body> Goes after the head tag and wraps the page’s content.
Headings, Paragraphs & Text Formatting
Heading <h1></h1> Wraps each heading.
H1 thru H6
H1 is the main topic.
H2 is a subtopic, and so on.
Paragraph <p></p> Wraps each paragraph
Line Break <br> New line or carriage return
Block Quote <blockquote></blockquote> Indents a block of text
Subscript <sub></sub> H2O
Superscript <sup></sup> E=mc2
Bold <strong></strong> or <b></b> This is bold
Italic <em></em> or <i></i> This is italic
Font Size <font size="5"></font> 1 to 7 (smallest to largest)
Align Left align="left" Alignment works with text, graphics, headings, tables, paragraphs.
Align Center align="center"
Align Right align="right"
Display graphic <img src="img/filename.png"> Image formats: Use .gif .jpg or .png
Dimensions <img src="img/filename.png" width="250" height="100"> Scale graphic (in pixels)
Border <img src="img/filename.png" border="1"> Make border 0 if linked and you still wish no border
Horizontal Rules
Horizontal Rule <hr> Shaded rule across page
HR Thickness <hr size="2"> Thickness of rule in pixels
HR Width <hr width="600"> Width of rule in pixels
HR Width Percent <hr width="50%"> Percentage of page width
Solid Line <hr noshade> Eliminates shading
Unordered List <ul> 
   <li>This is a list item</li> 
Put <li> around each list item
Ordered List <ol> 
   <li>This is a list item</li> 
Numbers the list items
Definition List <dl>
DT=Data Term, DD=Data Definition
Bullet List <ul type="disc"> Bullet in front of each entry in list
Circle Bullets <ul type="circle"> Circle in front of each entry in list
Square Bullets <ul type="square"> Square in front of each entry in list
Backgrounds & Color
Tiled Background <body background="file.png"> Image formats: Use .gif .jpg or .png
Background Color <body bgcolor="#333">

Color value can be a 3 or 6 digit hexadecimal value.

You can find the hexadecimal code for a color in many design apps or code editors.

Text Color <body text="#333">
Link Color <body link="#333">
Visited Link <body vlink="#333">
Active Link <body alink="333">
Link to another page <a href="filename.html"></a> Link to another page within a site
Link to another site <a href="">
Requires the full http:// address
Link to target in page <a href="#name"></a> Links to specific location in current page
Link to target in other page <a href="filename.html#name">
   Click Me
Links to specific location in another page
Define target in a page <a name="name"></a> To be able to link to a specific part of a page, add this tag to the place you want a link to end up at.
Use graphic as link <a href="filename.html">
   <img src="name.png">
Wrap a link around an image tag (or anything for that matter) to make it linkable.
Alternate text <img src="img/filename.png" alt="Image Description Here"> Choose text that would be useful if read aloud to someone that can't see the image
Special Characters
Non-Breaking Space &nbsp; or &#160; View our complete list of Special Characters.
< &lt; or &#60;
> &gt; or &#62;
& &amp; or &#38;
é &eacute; or &#233;
Create a Table <table></table> Wraps a table
Table Caption <caption></caption> Insert after table tag. One per table.
Table Header <th></th> Contains header content/information
Table Row <tr></tr> New Table Row
Table Cell <td></td> Contains the content or data (table data)
Columns to Span <td colspan="3"> For data to stretch across columns
Rows to Span <td rowspan="2"> For data to go deeper than one column
Width as Pixels <table width="600"> In pixels
Width as Percent <table width="50%"> Percentage
Table Border <table border="10"> In pixels
Cell Padding <table cellpadding="20"> In pixels
Cell Spacing <table cellspacing="5"> In pixels
Cell Width <td width="200"> In pixels
Row Horiz. Alignment <tr align="center"> Can use: left, center or right
Row Vert. Alignment <tr valign="top"> Can use: top, middle or bottom
Cell Horiz. Alignment <td align="center"> Can use: left, center or right
Cell Vert. Alignment <td valign="top"> Can use: top, middle or bottom

Other Guides

HTML Special Characters
Typographic Rules

Get Tips, Tricks, & News

Sign up for our Newsletter and get good stuff in your inbox!