Win a Free Class!

Join our email list for a chance to win

Quick Guide to HTML Tags

Here’s a list of some of the most commonly used HTML tags. We intentionally kept it simple and limited to just the essential tags, rather than listing every HTML tag ever made.

IMPORTANT NOTE: 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 don’t 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"
Graphics
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
Lists
Unordered List <ul> 
   <li>This is a list item</li> 
</ul>
Put <li> around each list item
Ordered List <ol> 
   <li>This is a list item</li> 
</ol>
Numbers the list items
Definition List <dl>
   <dt>Term</dt>
   <dd>Definition</dd>
</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 HTML editors (such as Dreamweaver) or graphics editors (such as Fireworks, Photoshop, Illustrator). Here is a handy online color picker.

Text Color <body text="#333">
Link Color <body link="#333">
Visited Link <body vlink="#333">
Active Link <body alink="333">
Links
Link to another page <a href="filename.html"></a> Link to another page within a site
Link to another site <a href="http://google.com">
   Google
</a>
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
</a>
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">
</a>
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; Click here for our complete Special Characters chart.
< &lt; or &#60;
> &gt; or &#62;
& &amp; or &#38;
é &eacute; or &#233;
Tables
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

Were they as good for you as they were for us? Oh Yeah!

Other Guides:
HTML Special Characters
Typographic Rules

We Literally Wrote the Book!

Dreamweaver Workbook

To make the perfect class we had to write our own workbooks which are included with each class.

Can’t take a class? Our workbooks are the next best thing.

Buy Workbook

Want More Tips & Tricks?

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