Simple HTML Codes

Lists the common HTML tags and their attributes


<h?>...........</h?>                 Heading (?= 1 for largest to 6 for smallest, eg h1)  Sample
<a href="url">...</a>             Basic Link  Sample
<b>............</b>                    Bold Text  Sample
<strong>.....</strong>           Strong - Shown as Bold in most browsers  Sample
<em>.........</em>                 Shown as Italic text   Sample
<u>............</u>                    Underline Text  Sample
<center>.....</center>           Text align center  Sample
<div>..........</div>                 Division (or Section) of Page Content  Sample
<font>.........</font>               Font tag  Sample
<table>.......</table>              Define a Table  Sample
<br>                                      Line Break   Sample
<hr>                                      Basic Horizontal Line  Sample
&nbsp;                                  A space (non-breaking space)  Sample
<img src="url" alt="text">       Basic Image  Sample



HTML headings

<h1>This is heading 1</h1>  
Result :

This is heading 1

<h2>This is heading 2</h2>  
Result :

This is heading 2

<h3>This is heading 3</h3>  
Result :

This is heading 3

<h4>This is heading 4</h4>  
Result :

This is heading 4

<h5>This is heading 5</h5>  
Result :
This is heading 5
<h6>This is heading 6</h6>  
Result :
This is heading 6
Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.



HTML Links

<a href="url" target="_?">.......</a>
Target Value
_blank   Opens the linked document in a new window or tab
_self     Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top       Opens the linked document in the full body of the window

<a href="https://www.extrazone.net/" target="_blank">Visit Extrazone</a>
Result :  Visit Extrazone



Bold Text

<b>Bold Text</b>
Result :  Bold Text

<strong>Bold Text</strong>
Result :  Bold Text



Italic text

<em>Italic text</em>
Result :  Italic text



Underline Text

<u>Underline Text</u>
Result :  Underline Text



Text align center

<center>Text align center</center>
Result :
Text align center




Division (or Section) of Page Content

Attributes : align="?" :-     Value = left right center justify

<div align="right">Division (or Section) of Page Content</div>
Result :
Division (or Section) of Page Content




HTML font Tag

Attributes :
color="#??????"  :-     colorname/color codeS - pecifies the color of text
face="?" :-     font_family  - Specifies the font of text
size="?" :-     number - Specifies the size of text

<font size="2" color="green">This is sample text!</font>
Result :
This is sample text!

<font face="verdana" size="5" color="#EF324C">This is sample text!</font>
Result :
This is sample text!



HTML Line Break Tag

The <br> tag is an empty tag which means<br><br>that it has no end tag.

Result :

The
tag is an empty tag which means

that it has no end tag.



HTML Horizontal Line Tag

<hr> Tag Attributes :
size="?" :-     Line Thickness in pixels
width="?" :-     Line Width in pixels
width="??%" :-     Line Width as a percentage
color="#??????" :-     Line Colour
align="?" :-     Horizontal Alignment: left, center, right
noshade  :-     No 3D cut-out

Sample :
<hr>
Result :

Sample :
<hr size="3px" width="50%">
Result :

Sample :
<hr size="5px" width="250px" color="red" align="center">
Result :





HTML Image Tag

<img src="url" alt="text">
<img>Tag Attributes :
src="url" :-     URL or filename of image (required!)
alt="text" :-     Alternate Text
title="?" :-     Image Title
width="??" :-     Image width (in pixels or %)
height="??" :-     Image height (in pixels or %)
border="??" :-     Border thickness (in pixels)
vspace="??" :-     Space above and below image (in pixels)
hspace="??" :-     Space on either side of image (in pixels)

<img src="https://www.extrazone.net/banners/banner1.jpg" alt="Extrazone">
Result :
Extrazone

<img src="https://www.extrazone.net/banners/banner1.jpg" alt="Extrazone" width="468" height="60" border="0">
Result :
Extrazone

Image Link
<a href="https://www.extrazone.net/" target="_blank"><img src="https://www.extrazone.net/banners/banner1.jpg" title="Extrazone" width="468" height="60" border="0"></a>
Result :




A space (Non-breaking Space)

A common character entity used in HTML is the non-breaking space:&nbsp;
A non-breaking space is a space that will not break into a new line. Another common use of the non-breaking space is to prevent that browsers truncate spaces in HTML pages.

Sample :
Note&nbsp;:
Note :

A non-breaking space is a space&nbsp;&nbsp;&nbsp;&nbsp;that will not break into a new line.
Result :  A non-breaking space is a space    that will not break into a new line.



HTML Table Tag

<table> ... </table> :-     Define a Table
<table> Tag Attributes :
border="?" :-     Thickness of outside border
bordercolor="#??????" :-     Border Colour
cellspacing="?" :-     Space between cells (pixels)
cellpadding="?" :-     Space between cell wall and content
align="??" :-     Horizontal Alignment: left, center, right
bgcolor="#??????" :-     Background Colour
width="??" :-     Table Width (pixels or %)
height="??" :-     Table Height (pixels or %)
<tr> ... </tr> :-     Table Row within table
<th> ... </th> :-     Header Cell within table row
<td> ... </td> :-     Table Cell within table row <td> Tag Attributes:
colspan="?" :-     Number of columns the cell spans across (cell merge)
rowspan="?" :-     Number of row a cell spans across (cell merge)
width="??" :-     Cell Width (pixels or %)
height="??" :-     Cell Height (pixels or %)
bgcolor="#??????" :-     Background Colour
align="??" :-     Horizontal Alignment: left, center, right
valign="??" :-     Vertical Alignment: top, middle, bottom

<table width="300" border="2" bordercolor="red" bgcolor="#94ABF8">
<tr>
<td width="50%" height="35px" align="center">Sample tex 1</td>
<td width="50%" height="35px" align="center">Sample tex 2</td>
</tr>
<tr>
<td width="50%" height="30px" align="center">Sample tex 3</td>
<td width="50%" height="30px" align="center">Sample tex 4</td>
</tr></table>

Result :
Sample tex 1 Sample tex 2
Sample tex 3 Sample tex 4