HTML and XHTML Quick Reference Sheet

Common Elements

Element Value Examples
float: <position> float is used to float an element on the left or right margin.<position> could be none, left or right. <img src=”sample.jpg” style=”float: right” />
clear: <position> clear is used to display an element in the first available space where the specified margin is clear of floating elements.
<position> could be left, right, all or none.
<hr style=”clear: right” />
margin-top: <length>
margin-right: <length>
margin-bottom: <length>
margin-left: <length>
These elements are used to set the size of margins around an element.
<length> can be unit of length, a percentage of the width of the containing element, or the keyword “auto” (the default) which enables the browser to set the margin size.
<table style=”margin-top: 15px”>
<body style=”margin-left: 20px”>
margin: <top> <right> <bottom> <left> margin element combine all margin styles in a single style. <top>, <right>, <bottom> and <left> are the margins of the top, right, bottom and left edges. If you include only three values, the margins are applied to the top, right and bottom. If only two values are specified, the first value is applied to top and bottom edges whereas second value is applied to right and left edges. If you apply only one value, it is applied to all four edges. <img src=”sample.jpg” style=”margin: 0 0 5 15″>
<body style=”margin: 10″>
background-image: url(<url>) background-image attribute is used to set the background image for any element. <url> is the name and location of the image file to set as background. <body style=”background-image: url(sample.jpg)”>
background-repeat: <type> This attribute is used used in combination with background-image attribute. It controls how browser tile an image across and element’s background. The <type> can be one of keywords out of repeat (the default), repeat-x, repeat-y, or no-repeat. <body style=”background-image: url(sample.jpg); background-repeat: repeat-x”>
background-position: <horizontal> <vertical> This attribute is used to place the background image in a specific position behind the element. <horizontal> is the horizontal position of the image, and <vertical> is the vertical position. You can specify a position as the distance from the top-left corner of the element, a percentage of the element’s width and height, or by using a keyword. Keyword options are top, center, or bottom for vertical position, and left, center, or right for horizontal placement. <body style=”background-image: url(sample.jpg); background-position: 10% 20%”>
<body style=”background-image: url(sample.jpg); background-position: right bottom”>

Working with Colors

Element Value Examples
color: <color> where <color> could be color name, RGB value for color or the hexadecimal value of the color. <body style=”color: red”>
<body style=”color: #808080″>
<body style=”color: rgb(255,102,105)”>
background-color: <color> where <color> could be color name, RGB value for color or the hexadecimal value of the color. <body style=”background-color: red”>
<body style=”background-color: #808080″>
<body style=”background-color: rgb(255,102,105)”>

Working with Text

Element Value Examples
font-family: <fonts> where <fonts> is a comma separated list of fonts.

<p style=”font-family: Arial, Helvetica, sans-serif”>

font-size: <length> where <length> is a length measurement which can be specified in following ways:

  • with a unit of measurement which includes absolute units such as mm (millimeters), cm (centimeters), in (inches), pt (points) and pc (picas) or relative units such as em and ex.
  • with a keyword description such as xx-small, x-small, small, medium, large, x-large or xx-large.
  • as a percentage of the size of the containing element
  • with a keyword expressing the size relative to the size of the containing element
<p style=”font size: 36pt”>
<p style=”font size: 0.5in”>
<p style=”font size: 2em”>
<p style=”font size: 125%”>
<p style=”font size: 20px”>
<p style=”font size: x-small”>
letter-spacing <value>
where <value> is the size of space between individual letters. You can have both positive or negative values to control the spacing.
<h1 style=”letter-spacing: 6″>
word-spacing <value>
where <value> is the size of space between individual words. You can have both positive or negative values to control the spacing.
<h1 style=”word-spacing: 30px”>
line-height <value>
where <value> is the space between lines of text
<p style=”line-height:25px”>
text-indent <value>
where <value> is either expressed in absolute or relative units or a percentage of the width of the text block.
<p style=”text-indent: 5%”>
<h1 style=”text-indent: 2em”>
font-style <type>
where <type> is either normal, italic or oblique
<h1 style=”font-style: Italic”>
font-weight <value>
where <value> is either a value from 100 to 900 in increments of 100, or the keyword normal or bold. You can also use bolder or lighter keywords to adjut font relative to its containing element.
<p style=”font-weight: bold”>d
text-decoration <type>
where <type> equals underline, overline, line-through, blink or none
<h2 style=”text-decoration: underline”>
text-transform <type>
where <type> equals capitalize, lowercase, uppercase or none
<h2 style=”text-transform: capitalize”>
font-variant <type>
where <type> equals none or small-caps
<h2 style=”font-variant: small-caps”>
vertical-align <type>
where <type> is one of the keywords as listed below
baseline, bottom, middle, sub, super, text-bottom, text-top, top
or you can specify a length or percentage for the element to be aligned relative to the surrounding content.
<p style=”vertical-align:sub;”>
<p style=”vertical-align: -100%”>
font This element combines all font properties in a single declaration and the format is as listed below:
font: font-style font-variant font-weight font-size/line-height font-family
where front-style is the style, font-variant is the variant, font-weight is the weight, font-size is size, line-height is the height of the line and font-family is the font face. You may omit any of the properties except for font-size and font-family but they must be entered in this order.
<p style=”font: normal 8pt Arial, Helvetica, sans-serif”>
<p style=”font: italic small-caps bold 16pt/24pt Arial, sans-serif”>
<span> <span> is an inline element and must be placed within a block-level element such as paragraph or a heading. The syntax is as follow:
<span>content</span>
<span style=”font-size: 2em”>This is example</span>
<pre> <pre> element is used to create pre-formatted text, which retains any white space in the HTML file. The syntax is as follow:
<pre>content</pre>
<pre>This is example
text </pre>

Working with Images

Element Value Examples
width=”value”
height=”value”
width and height attributes are used to set the size of an inline image and “value” is the height and width of the image in pixels. <img src=”sample.jpg” width=”150″ height=”75″ />

Working with Tables

Element Value Examples
<table>
….
</table>
<table> tag is use to mark the table. The syntax is as follow:
<table>content</table>
where content includes the table’s rows, headings, and cells.
<table><tr><td>
This is table examples.
</td></tr></table>
<tr>
….
</tr>
<tr> tag is used to create the table row. The syntax is as follow:
<tr>content</tr>
where content includes the table’s cells and headings.
<table><tr><td>
This is table examples.
</td></tr></table>
<th>
….
</th>
<th> tag is used to create a table cell that contains a row or column heading. The syntax is as follow:
<th>content</th>
where content is content of the heading.
<table><tr><th>
This is table examples.
</th></tr></table>
<td>
….
</td>
<td> tag is used to create a table cell that contains table data. The syntax is as follow:
<td>content</td>
where content is the cell content.
<table><tr><td>
This is table examples.
</td></tr></table>
<thead>
….
</thead>
<thead> tag is used to group the table row as table header. The syntax is as follow:
<thead>content</thead>
where content is the row with header contents of table. There can be only one <thead> in a table.
<thead><tr>
<td>Customer Name</td>
<td>Address</td>
</tr></thead>
<tbody>
….
</tbody>
<tbody> tag is used to group the table rows as body of the able. The syntax is as follow:
<tbody>content</tbody>
where content is the rows with contents of table. There can be multiple <tbody> tags in a table.
<tbody><tr>
<td>John Doe</td>
<td>111 Lost Street.</td>
</tr></tbody>
<tfoot>
….
</tfoot>
<tfoot> tag is used to group the table row as table footer. The syntax is as follow:
<tfoot>content</tfoot>
where content is the row with footer contents of table. There can be only one <tfoot> in a table.
<caption>
….
</caption>
<caption> tag is used to create table caption and should be placed right after the opening <table> tag. The syntax is as follow:
<caption>content</caption>
where <caption> is the content of the caption. You can use the style attribute to apply format and aligning the caption.
<caption>Customer List<caption>
frame frame attribute is used to change the frame style of a table border and is used along with opening <table> tag. The syntax is as follow:
frame=”type
where type is box (the default, above, border, below, hsides, vsides, lhs, rhs or void.
<table frame=”void”>
rules rules attribute is used to change the rules style of the internal gridlines of a table. The syntax is as follow:
rules=”type
where type is all (default), cols, groups, or none.
<table rules=”groups”>
width This attribute will the size of the table and the syntax is as follow:
width=”value
where value is the size either in pixels or as a percentage of the containing element. The width attribute can be applied to <table>, <td> or <th> tags.
<table width=”90%”>
cellspacing This attribute will set the cell spacing and its syntax is as follow:
cellspacing=”value
where value is the gap between adjacent cells in pixels.
<table cellspacing=”5″>
cellpadding This attribute will set teh cell padding and its syntax is as follow:
cellpadding=”value
where value is the size of the gap between the cell content and the cell border.
<table cellpadding=”3″>
nowrap This attribute will ensure that the contents of certain cell do not wrap and its syntax is as follow:
nowrap=”nowrap”
This attribute can be applied to <td> and <th> tags.
<td nowrap=”nowrap”>John Doe</td>
colspan This attribute let you create a cell which spans columns and the syntax is as follow:
colspan=”value
where value is the number of columns to be spanned.
<td colspan=”3″>
rowspan This attribute lets you create a cell which spans multiple rows. The syntax is as follow:
rowspan=”value
where value is the number of rows to be spanned.
<td rowspan=”2″>
align This attribute can work with <td> or <th> element and will align the contents of a cell horizontally. The syntax is as follow:
align=”position
where position is one of the keywords our of left (default for <td>), center (default for <th>), right or char.
<td align=”center”>This text should be centered</td>
valign This attribute will align the contents vertically and can be used with <td> or <th> element. The syntax is as follow:
valign=”position
where position is top, middle (the default), bottom or baseline.
<td valign=”bottom”>This text should be aligned to cell bottom</td>

Leave a Reply

Your email address will not be published. Required fields are marked *


*