Some common tags & attributes

Written by Brian Ledebur & Amanda Kern

There are technically dozens of tags available to us, and tons of attributes to go along with them. However, many tags are seldom if ever used, and still others are depreciated (they stick around for compatibility with old, proprietary code, but are not recommended). Still others are incompatible with many browsers. In reality there is a core group of tags we will commonly use to format our HTML documents. They are as follows:

Body

<body></body>

Description: The body tags contain all of our layout, content, and page elements. By default, the body of our HTML file (and therefore our content) has a margin of about 20 pixels around the edges of the browser.

Paragraphs

<p></p>

Description: These tags define a paragraph of text. Paragraphs by default are left aligned, and are followed with a full line of extra space (similar to hitting ‘enter’ twice after a paragraph).

Line Breaks

<br> (html)
<br/> (xhtml)

Description: Since paragraphs insert an extra line of space between them, sometimes we want a simple line break without a new paragraph. Note the slight variation of the line break for html and xhtml. The line break does not require a closing tag.

Bold Text

<strong></strong> or <b></b>

Description: This tag specifies a section of text we wish to appear bold. <strong> is used for accessibility, it will provide emphasis to those that might be using a screen reader or other devices.

Italicized Text

<em></em> or <i></i>

Description: This tag makes a certain portion of text italicized. <em> is used for accessibility, it will provide emphasis to those that might be using a screen reader or other devices.

Fonts

<font></font>

Description: Font tags set a portion of text to be a specified typeface, size, and color. Although they don’t do much on their own, their attributes are what make it useful. By default, fonts are black Times or Times New Roman with an HTML size of ‘3’ in most browsers.

Attributes:
face=”[a typeface name]”
color=”[a hexadecimal RGB color]”
size=”[1-6 HTML type size]”

Usage: <p><font face=”Arial” size=”2” color=”#ccbbd9”>Formatted Paragraph.</font></p>

The font tag is deprecated, meaning it is currently being phased out of html. It's important to be familiar with this tag because prior to browsers supporting CSS the <font> tag was highly used. Now that CSS is well supported by current web browsers CSS should be used instead of the <font> tag.

Headers

<h1...h6></h1...h6>

Description: Headers are used for page titles, section titles, and subtitles. By default, headers are rendered bold using one of the six HTML font sizes (<h1> is the largest, <h6> the smallest). These can be changed, however, using font tags, and later, CSS. Headers by default also have a line of space after them.

Spans

<span></span>

Description: Spans are another way to set off a special piece of text or inline element. Using HTML only, spans don’t do a whole lot for us. They’ll show their true potential when we begin using CSS.

Unordered (Bulleted) Lists

<ul></ul>

Description: This tag specifies when we wish to use a bulleted list in our content. By default, lists have a line of space before and after them, and are indented a certain amount. By themselves, <ul> tags do very little – they need individual list items inside our <ul></ul> tags to give us what we want.

Ordered (Numbered) Lists

<ol></ol>

Description: This tag specifies when we wish to use a numbered list in our content. Like unordered lists, <ol></ol> tags need individual list items in between to work properly.

List Items

<li></li>

Description: These specify individual list items, used for both ordered and unordered lists. In addition, we can nest our lists by including another ordered or unordered list inside an <li> tag.

Attributes:
type=”[circle, disc, or square for unordered lists] or [A, a, I, i or 1 for ordered lists]”
value=”[a number for ordered lists only]” – Allows us to specify a specific value of an ordered list item.

Usage:

<ol type=”a” start=”3”>
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item With Sub Items
<ul> <li>First Sub Item</li>
<li>Second Sub Item</li>
</ul>
</li>
</ol>

Definition Lists

<dl></dl>

Description: Like other lists, definition lists require tags inside them to work properly. However, instead of list items (<li></li>) definition lists require both a term <dt></dt> and a definition <dd></dd>. By default, definition lists are not bulleted or numbered, but do have an extra space above and below. In addition, the definitions are indented on the left. Although not used very often as originally defined, definition lists are often tailored by designers to meet other needs (like feature boxes) using CSS.

Usage:

<dl>
<dt>First Term</dt>
<dd>First Definition</dd>
<dt>Second Term</dt>
<dd>Second Definition</dd>
<dl>

Block Quotes

<blockquote></blockquote>

Description: Conceived as a means to set off long quotes in an indented paragraph, block quotes are commonly used as a generic means to indent text without requiring a list. Block quotes are indented on the left and right, and have a line of space above and below by default. Like lists, Block quotes can be nested.

Links

<a></a>

Description: Links provide our basic interactivity. Without links, we’d have nothing but static pages, and users would have to enter a new address in their browser every time they wanted to visit a new page. Links can be wrapped around either text or images. By default, <a></a> tags will make text blue and underlined, and will put a blue border around images.

Attributes:
href=”[a URL]” – This specifies where we want the user to go when the link is clicked.
target=”[_blank, _parent, _self, _top]” -- _blank is useful if we want to open the link in a new browser window. The others are only useful if we use something called frames, which we won’t.
name=”[any string of text]” – This attribute is useful when we want to link to a specific place on a page, or to a different spot on the same page. Links that use the name attribute but not the href attribute are called named anchors.
title="[any string of text]" - This attribute provides a title that will appear in most browsers as you hover the link.

Usage: <a href=”http://www.valenciawebstudio.com” target=”_blank”>Check out our Website!</a>

Images

<img> (html)
<img /> (xhtml)

Description: Images give us our fancy graphics. By default, images appear at their original size, and aligned to the bottom of a line of text. The <img> tag is another exception in that it does not require a closing tag.

Attributes:
src=”[any URL to an image file]” – This tells the browser what image file to grab and stick on the page.
width=”[any pixel number]”, height=”(any pixel number)” – These specify the pixel dimensions of the image. Since we already know not to resize images in our HTML code, widths and heights are not required. They are useful for holding an image’s place before it’s downloaded, preventing the page contents from jumping around. Their use is up to you.
align=”[top, bottom, middle, left, right]” -- There are others, but these are the more common ones. Alignment is useful for images that appear within a line or paragraph of text. We can use the left and right alignment settings to make the text wrap around the image. The others specify where we want the image to appear vertically in relation to the line of text’s baseline.
hspace=”[a number in pixels]” vspace=”[a number in pixels]” – The previous two attributes allow us to specify a top and bottom and/or right and left margin around the image.
border=”[a number in pixels]” – We can specify a border to appear around the image. Borders are black, except when they are inside a link tag, in which they are blue. We can also set this to 0 to override HTML’s temptation to surround all linked images with a blue border.
alt=”[a string of text]” – This attribute comes in handy for accessibility. If a user cannot view images, or has images turned off, the text inside the <alt> attribute will appear in the browser instead. Search engines also use them. If the link to your image happens to become broken your alt attribute will display in the place of the image. It is good practice to always include alt tags with images.

Usage: <img src=”images/myImage.gif” alt=”My Image” align=”right” hspace=”4”>

Many image attributes such as alignment, border, and hspace/vspace are best applied with CSS.

Div Tags

<div></div>

Description: Div tags are the cousin to the span tag, basically they specify a division or a section of a web page. Used alone, they don’t do a whole lot (except force anything that comes before or after it to a new line.) Divs are useful, however for aligning large chunks of elements a certain way (or even your entire page). Divs show their true power when we use tableless CSS layouts.

Tables

<table></table>

Like Lists, the <table></table> tags on their own don’t do a whole lot. What we need are more tags inside them to define rows, and individual cells to make up these rows. We first define our rows by placing <tr></tr> tags inside the table tags. Then we use <td></td> tags inside our rows to specify individual cells. All cells inside a particular <tr></tr> will appear adjacent to each other. Be careful that you have the same amount of cells in each row. Although browsers will let you get away with this, you may get unpredictable results.

Table Attributes:
align=”[left, center, or right]” – Specifies how the table itself (not it’s contents) is aligned with respect to its containing element (or the page, if none).
background=”[a URL to an image file]” – Specifies a background image to use behind the table.
bgcolor=”[a hexadecimal color]” – Specifies a background color to use behind the table. border=”[a width in pixels]” – Specifies a border width to appear around the table.
bordercolor=”[a hexadecimal color]” – Specifies a color for our border.
cellpadding=”[a width in pixels]” – Specifies a padding for content inside our table cells. Note using HTML only, we cannot specify a different padding amount for individual cells inside a table, nor can we specify different values for the top, left, bottom, and right padding.
cellspacing=”[a width in pixels]” – Unlike cell padding, which specifies a spacing inside of table cells, cell spacing specifies a spacing between table cells. Like cellpadding, however, this value applies to all cells in a table, and must be the same for the top, left, bottom, and right.
height=”[a height in pixels]” – Specifies the height of the table
width=”[a width in pixels, or a percent]” – Specifies a width. We can also use a percent value, which is useful for making our tables (and therefore our layout) stretch in relation to the browser window.

Attributes for the <tr> tag:
Any attribute inside the <tr> tag will render unreliably (if at all) and should be avoided.

Attributes for the <td> tag:
align=”[left, center, or right]” – Specifies horizontal alignment of content within the cell.
valign=”[top, middle, bottom]” – Specifies vertical alignment of content within the cell.
background=”[a URL to an image file]” – Specifies a background image to use behind the cell.
bgcolor=”[a hexadecimal color]” – Specifies a background color to use behind the cell.
width=”[a pixel width]” – Specifies how wide to make the individual cell.
height=”[a pixel height]” – Specifies how tall to make the individual cell.

Spanning Tables

This deserves a special section. We can actually make our individual cells take up, or “span” two or more columns or rows. We do this using the colspan=”” and rowspan=”” attributes inside our table cell tags. The numbers inside these attributes indicate how many rows or columns we wish our cells to span. In the following example, we have a table with 2 rows and 3 columns, but the first cell is spanned across all 3 columns:

<table>
<tr>
<td colspan=”3”>This is a spanned Column</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>

Remember to keep in mind how many rows and columns we have total in our table, and make sure the numbers add up in the end.Also, using row spans can sometimes create problems with our layout, as it tends to confuse browsers into ignoring or incorrectly rendering heights. Use row spans sparingly, and only in certain situations.

How Tables Behave

Tables have specific behaviors and rules they follow. We either need to live with these behaviors, or override them using the attributes we have available to us. Some of these rules to consider are as follows.

Tables...

  1. Always: Are as wide and tall as their contents.
    Unless: They are given a width in pixels or a percent.
  2. Always: Have a cell spacing and cell padding of ‘1’ in many browsers, and have a border in some browsers.
    Unless: We override this using attributes.

Table Rows...

  1. Always: Redistribute their cell’s widths depending on how wide their contents are.
    Unless: We specify cell widths, or force breaks in long lines of text.

Table Cells...

  1. Always: Stretch horizontally to fit their contents.
    Unless: We specify widths, or the table becomes as wide as its container.
  2. Always: Have their contents vertically aligned in the center.
    Unless: We specify a different value using the valign=”” attribute.
  3. Always: Stretch vertically to fit their contents, or will stretch horizontally to and vertically to fit an image.
    Unless: (none)