HOME LINKS IMAGES HTML/CSS COLORS TEXT DESTINATIONS MLT HISTORY

General Standards |  What is HTML? |  Common HTML Tags |  Special Character Codes |  What is CSS? |  CSS Font Styles

HTML/CSS
Common HTML Tags

TAG DESCRIPTION WHAT YOU SEE ON THE SCREEN CODE VIEW

<p> </p>

paragraph
Paragraph tags will create space above and below the line of text. Each paragraph needs an opening <p> and closing </p> tag.

This is a paragraph.

This is another paragraph.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<br />

break
Break tags create one line break between lines of text. A break tag does not come in pairs. Instead, the closing forward-slash is within the tag. (Note the space between the "br" and the forward-slash.)

This is a paragraph.
This is a line break.

<p>This is a paragraph.<br />
This is a line break.</p>

<p class=" "> </p>

paragraph with attribute
To add a font style, insert class="font_style" in the <p> tag

This is a bold paragraph.

<p class="font_bold">This is a bold paragraph.</p>

<span> </span>

span
To give parts of the text a style without changing the entire paragraph, use <span></span> around the specific text.

This is a bold word in a paragraph.

<p>This is a <span class="font_bold">bold word</span>
in a paragraph.</p>

<div> </div>

div
<div> is a generic tag that is used to apply a style to a particular section of HTML code.

This paragraph has a 15 pixel margin on the left.

So does this one.

<div class="margin_left_15">
<p>This paragraph has a 15 pixel margin on the left.</p>
<p>So does this one.</p>
</div>

<a href="#"> </a>

link tag
Creates the hyperlink to jump a person to a new page.

link to WorldVacations.

link to <a href="http://www.nwaworldvacations.com"> WorldVacations</a>.

<a href="#" target="_blank"> </a>

link tag to open a new window
Use when the link goes to a different site (like nwa.com)

link to nwa.com.

link to <a href="http://www.nwa.com" target="_blank">nwa.com</a>.

<ul>
<li> </li>
</ul>

unordered (bulleted) list
Use for lists.
<ul></ul>
specifies the start and end of a list of items. <li></li> contains each individual item in the list.

  • Apples
  • Oranges
  • Bananas

<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>

<!-- -->

comment tags
Comment tags are used to add comments or explanations in the code, or to hide code from being viewable in the browser. Anything within the opening <!-- and the closing --> tags will not display

 

<!--

Hide this comment from the browser

-->

<table>
<tr>
<td> </td>
</tr>
</table>

table
Table tags create grids made up of rows and columns.
Within the <table> tags, tables require table rows <tr> and table data <td> tags


row 1,
cell 1
row 1,
cell 2
row 2,
cell 1
row 2,
cell 2

<table border="1" cellpadding="2">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
</tr>
</table>

&nbsp;

non-breaking space
This isn't a tag, but a non-breaking space will insert extra space when necessary. Table cells need something to be in them, so insert a non-breaking space if you need a blank table cell.


row 1,
cell 1
 
row 2,
cell 1
row 2,
cell 2

<table border="1" cellpadding="2">
    <tr>
        <td>row 1, cell 1</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
</tr>
</table>

« Back