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 design certificate program 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" | |
| 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 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"> | |
| 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"> </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 | or   | View our complete list of Special Characters. |
| < | < or < | |
| > | > or > | |
| & | & or & | |
| é | é or é | |
| 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 |