HTML Codes / Tags
HTML codes are used to create web pages. Each tag has a specific purpose, such as formatting text, adding music, videos or creating links, tables and forms.
The HTML codes chart below provides you with a variety of HTML tags and tips to assist you. You simply locate the coding you’d like and copy and paste it into the HTML portion of your web page.
How to Copy and Paste Codes
To copy and paste the HTML codes from the HTML chart below into the HTML of your web page, place your mouse pointer over the beginning of the HTML code you would like to copy. Next, click and hold your left mouse button and drag your mouse over all the HTML code you would like to copy (This text is highlighted). Your HTML code should now be highlighted. Go to “Edit” – “Copy” on your web browser’s toolbar and then place your cursor within your HTML code where you would like to place the code. Right click on your mouse and go to “Paste.” Your HTML code should now be displaying within your HTML document.
For additional information about coding in HTML, see the ‘How to Code in HTML‘ section.
Text Codes
» HTML Bold Code
» HTML Strong Code
» HTML Italic Code
» HTML Emphasis Code
» HTML Underline Code
» HTML Teletype
» HTML Small (Text) Code
» HTML Big (Text) Code
» HTML Font Codes
» HTML Paragraph Code
» HTML Line Break Code
» HTML Heading Codes
» HTML Deleted Text Code
» HTML Center Code
» HTML Horizontal Rule Codes
Link Codes
» HTML Link Code
» HTML Anchor Code
» HTML Email Link Code
Image Codes
Table Codes
» HTML Table Codes
» HTML Table Header Code
» HTML Table Row Code
» HTML Table Data Code
List Codes
» HTML List Item Codes
» HTML Ordered List Code
» HTML Unordered List Code
» HTML Definition List Code
» HTML Definition Term Code
» HTML Definition Description Code
» HTML Menu Code
Form Codes
» HTML Form Codes
» HTML Input Field Codes
» HTML Input Field Password
» HTML Listbox Option Codes
» HTML Input Background Color Codes
» HTML Input Image Submit Button Codes
» HTML Input Comment Box Code
» HTML Input Radio Button Code
» HTML Input Checkbox Code
Music / Video Codes
Marquee Codes
Web Page Codes
» HTML Hypertext Markup Language Codes
» HTML Body Code
» HTML Head Code
» HTML Meta Codes
» HTML Title Code
» HTML Comment Code
Name | HTML Tag | HTML Code Example | Browser View |
HTML Anchor | <a> | <a href="http://www.domain.com/">Visit Our Site</a> | Visit Our Site |
HTML Bold | <b> | <b>Example</b> | Example |
HTML Big Text | <big> | <big>Example</big> | Example |
HTML Body | <body> | <body>The content of your HTML page</body> | Contents of your web page |
HTML Center | <center> | <center>This will center your contents</center> |
This will center your contents |
HTML Comment | <!– | <!–This can be viewed in the HTML part of a document–> | Nothing will show |
HTML Definition Description | <dd> | <dl> <dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> |
|
HTML Definition List | <dl> | <dl> <dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> |
|
HTML Definition Term | <dt> | <dl> <dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> |
|
HTML Deleted Text | <strike> | <strike>Example</strike> | Example |
HTML Document Heading | <head> | <head>Contains elements describing the document</head> | Nothing will show |
HTML Document Title | <title> | <title>Title of your HTML page</title> | Title of your web page will be viewable in the title bar. |
HTML Embed Object | <embed> | <embed height="50" width="100" src="yourfile.mp3"> | |
HTML Embed Object | <embed> | <embed src="yourfile.mid" autostart="true" hidden="false" loop="false"><noembed><bgsound src="yourfile.mid" loop="1"></noembed> | Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music. |
HTML Emphasis | <em> | This is an <em> Example</em> of using the emphasis tag | This is an Example of using the emphasis tag |
HTML Font | <font> | <font face="Times New Roman">Example</font> | Example |
HTML Font | <font> | <font face="Times New Roman" size="4">Example</font> | Example |
HTML Font | <font> | <font face="Times New Roman" size="+3" color="#ff0000">Example</font> | Example |
HTML Form | <form> | <form action="mailto:you@yourdomain.com"> Name: <input name="Name" value=""><br /> Email: <input name="Email" value=""><br /> <input type="submit"> </form> |
Name | HTML Tag | HTML Code Example | Browser View |
HTML Heading 1 HTML Heading 2 HTML Heading 3 HTML Heading 4 HTML Heading 5 HTML Heading 6 |
<h1> <h2> <h3> <h4> <h5> <h6> |
<h1>Heading 1 Example</h1> <h2>Heading 2 Example</h2> <h3>Heading 3 Example</h3> <h4>Heading 4 Example</h4> <h5>Heading 5 Example</h5> <h6>Heading 6 Example</h6> |
|
HTML Horizontal Rule | <hr> | <hr /> | Contents of your web page
Contents of your web page |
HTML Horizontal Rule | <hr> | <hr width="50%" size="3" /> | Contents of your web page
Contents of your web page |
HTML Horizontal Rule | <hr> | <hr width="50%" size="3" noshade /> | Contents of your web page |
HTML Horizontal Rule | <hr> (Internet Explorer) |
<hr width="75%" color="#ff0000" size="4" /> | Contents of your web page
Contents of your web page |
HTML Horizontal Rule | <hr> (Internet Explorer) |
<hr width="25%" color="#6699ff" size="6" /> | Contents of your web page
Contents of your web page |
HTML Hypertext Markup Language | <html> | <html> <head> <meta> <title>Title of your web page</title> </head> <body>HTML web page contents </body> </html> |
Contents of your web page |
HTML Image | <img> | <img src="globe.gif" width="41" height="41" border="0" alt="text describing the image" /> | |
HTML Input Field | <input> | <form method=post action="/cgi-bin/example.cgi"><input type="text"> <input type="Submit" value="Submit"> </form> |
|
HTML Input Password | <input> | <form method=post action="/cgi-bin/example.cgi"> <input type="password"> <input type="Submit" value="Submit"> </form> |
|
HTML Input Background Color | <input>(Internet Explorer) | <form method=post action="/cgi-bin/example.cgi"> <input type="text" style="color: #ffffff; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;" maxlength="30"> <input type="Submit" value="Submit"> </form> |
|
HTML Input Image Submit | <input> | <form method=post action="/cgi-bin/example.cgi"><table border="0" cellspacing="0" cellpadding="2"> <tr> <td bgcolor="#8463ff"> <input type="text" size="10" maxlength="30"> </td> <td bgcolor="#8463ff" valign="Middle"> <input type="image" name="submit" src="yourimage.gif"> </td> </tr> </table> </form> |
|
HTML Input | <input> | <form method=post action="/cgi-bin/example.cgi">Enter Your Comments:<br /> <textarea wrap="virtual" name="Comments"></textarea><br /> <input type="Submit" value="Submit"> </form> |
|
HTML Input Radio | <input> | <form method=post action="/cgi-bin/example.cgi"> Select an option:<br /> <input type="radio" name="option"> Option 1 <input type="radio" name="option" checked> Option 2 <input type="radio" name="option"> Option 3 <input type="Submit" value="Submit"> </form> |
|
HTML Input Checkbox | <input> | <form method=post action="/cgi-bin/example.cgi">Select an option:<br /> <input type="checkbox" name="selection"> Selection 1 <input type="checkbox" name="selection" checked> Selection 2 <input type="checkbox" name="selection"> Selection 3 <input type="Submit" value="Submit"> </form> |
|
HTML Italic | <i> | <i>Example</i> | Example |
HTML Line Break | <br /> | The contents of your page<br />The contents of your page | The contents of your page The contents of your page |
HTML Link | <link> | <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> |
|
HTML List Item | <li> | Example 1:
<menu> Example 2: <ol type="i"> |
Example 1:
Example 2: |
HTML Menu | <menu> | <menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </menu> |
|
HTML Meta | <meta> | <meta name="Description" content="Description of your site"> <meta name="keywords" content="keywords describing your site"> |
Nothing will show |
HTML Meta | <meta> | <meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> | Nothing will show |
HTML Meta | <meta> | <meta http-equiv="Pragma" content="no-cache"> | Nothing will show |
HTML Meta | <meta> | <meta name="rating" content="General"> | Nothing will show |
HTML Meta | <meta> | <meta name="robots" content="all"> | Nothing will show |
HTML Meta | <meta> | <meta name="robots" content="noindex,follow"> | Nothing will show |
Name | HTML Tag | HTML Code Example | Browser View |
HTML Ordered List | <ol> | Numbered
<ol> <ol start="5"> Lowercase Letters <ol type="a"> Capital Letters <ol type="A"> Capital Letters Special Start <ol type="A" start="3"> Lowercase Roman Numerals <ol type="i"> Capital Roman Numerals <ol type="I"> Capital Roman Numerals Special Start <ol type="I" start="7"> |
Numbered
Numbered Special Start
Lowercase Letters
Capital Letters
Capital Letters Special Start
Lowercase Roman Numerals
Capital Roman Numerals
Capital Roman Numerals Special Start
|
HTML Listbox Option | <option> | <form method=post action="/cgi-bin/example.cgi"> Select an option:<select> <option>option 1</option> <option selected>option 2</option> <option>option 3</option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select> </form> |
|
HTML Mailto Email Link | <a> | <a href="mailto:you@domain.com">Email Link</a> | Email Link |
HTML Paragraph | <p> | This is an example displaying the use of the paragraph tag. <p> This will create a line break and a space between lines.
Attributes: <p align="left">Example 1:<br /><br /> <p align="right">Example 2:<br /><br /> <p align="center">Example 3:<br /><br /> |
This is an example displaying the use of the HTML paragraph tag. This will create a line break and a space between lines. Attributes: Example 1: This is an example Example 2: This is an example Example 3: This is an example |
HTML Scrolling Text | <marquee>(Internet Explorer) | <marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">Example Marquee</marquee> | |
HTML Small Text | <small> | <small>Example</small> | Example |
HTML Strong | <strong> | <strong>Example</strong> | Example |
HTML Table | <table> | Example 1:
<table border="4" cellpadding="2" cellspacing="2" Example 2: (Internet Explorer) <table border="2" Example 3: <table cellpadding="2" cellspacing="2" width="100%"> |
|
HTML Table Data | <td> | <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> |
|
HTML Table Header | <th> | <table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> </tr> <tr> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> </tr> <tr> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> </tr> </table> |
|
HTML Table Row | <tr> | <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> |
|
HTML Teletype | <tt> | <tt>Example</tt> | Example |
HTML Underline | <u> | <u>Example</u> | Example |
HTML Unordered List | <ul> | Example 1:<br /><ul> <li>List item 1</li> <li>List item 2</li> </ul>Example 2:<br /><ul type="disc"> <li>List item 1</li> <li>List item 2</li> <ul type="circle"> <li>List item 3</li> <li>List item 4</li> </ul> </ul> |