Tag:
<strong> ...</strong> (bolding)
<em> ...</em> (italicizing)
<span style="text-decoration: underline;"> ...</span> (special case for underlining)

Description: The strong tag is used to bold text. The em tag (which stands for emphasis) is used to italicize text. The u tag was previously used to underline text. However, this feature is being removed from HTML. See below accessibility note.

Accessibility Note: Many times people underline for emphasis of text; however, when users see underlined text, they think it is a link and are confused when they realize it is not. If you must underline something, we use the special case shown above.

Example Code:	Result:
<strong>This text is bolded.</strong>	This text is bolded.
<em>This text is italicized.</em>	This text is italicized.
<span style="text-decoration: underline;">This text is underlined.</span>	This text is underlined.

Tag: <!-- ... -->

Description: The comment tag is code that the end user does not see. It is used just for the programmer to make comments or notes about the code.

Example Code:	Result:
<!-- This is a special comment for the programmer. -->	(user sees nothing)

Back to Common Tag Listing

Tag: <div> ...</div>

Description: The div tag defines the start of a division/section in a document. It is used to structure your HTML.

Accessibility Note: Because this element can section or block your text, some people use the div tag for paragraph use. However, if your content is a paragraph, then the paragraph tag should be used.

Common Attributes:

• align="left" ("center" or "right")
• class="indent" (style defined to indent content)

Example Code:	Result:
<div>This text has been sectioned off from other text.</div>	This text has been sectioned off from other text.
<div align="center"><img src="images/soccer_ball.gif" height="48" width="49" alt="Image of a soccer ball" /></div>

Back to Common Tag Listing

Tag:
<h1> ...</h1>
<h2> ...</h2>
<h3> ...</h3>
<h4> ...</h4>
<h5> ...</h5>
<h6> ...</h6>

Description: There are six levels of heading tags. The first and largest heading tag is <h1>. This tag will provide the largest text and is usually the first heading used. As the numbers get smaller, the size of the font gets smaller.

Accessibility Note: Blind users will be audibly notified of a page header. This is important because they can get an idea of what the page is about just by listening to the page's headings.

Also, note that an h1 tag has the highest priority status. The next highest is the h2 tag and so on. This is important for tools such as search engines. For example, text that is put between an h1 tag is considered a more important heading than, say, an h2 tag.

Common Attributes:

• class="priHeader" ("subHeader" or "subsubHeader" for graphics approved style headings)
• align="left" ("center" or "right")

Example Code:	Result:
<h1>This is Heading 1</h1>	This is Heading 1
<h2>This is Heading 2</h2>	This is Heading 2
<h3>This is Heading 3</h3>	This is Heading 3
<h4>This is Heading 4</h4>	This is Heading 4
<h5>This is Heading 5</h5>	This is Heading 5
<h6>This is Heading 6</h6>	This is Heading 6
<h1 class="subHeader" align="center">Centered heading with added style</h1>	Centered heading with added style

Back to Common Tag Listing

Tag: <img /> (no closing tag)

Description: The img tag allows you to add images to your Web page.

Accessibility Note: It is important to always include the alt attribute in your image tag. "Alt" stands for alternative text description. Try hovering your mouse cursor over the soccer ball shown below. You should see a pop-up box that says "Image of a soccer ball." This is a result of adding the alt tag. This seems to be the number one problem for accessibility and yet it is so easy to fix. If you do not use an alt attribute, your pages will not validate. Failing to use the alt attribute also means that a blind person will not "see" the image.

Because a blind user will use a talking browser to hear this alternative text description, it is important to put some thought into your description. Imagine you were blind and the contents of a page were being read to you and out of nowhere you heard "ball." Wouldn't it make more sense to you if the alt read "Picture of a soccer ball."

Common Attributes:

• src="enter path to where your image is"
• alt="Image of ______"
• width="#"
• height="#"
• class="pictureBorder" (puts a border around the picture)

Example Code:	Result:
<img src="images/soccer_ball.gif" height="48" width="49" alt="Image of a soccer ball" />

Back to Common Tag Listing

Tag: <a href="...">...</a>

Description: The a tag defines an anchor element. An anchor can be used in two ways:

• To create a link to another document by using the href attribute
• To create a bookmark inside a document, by using the name or id attribute

Accessibility Note: Blind users will often browse a Web page by only listening to the links on the page. This is because they only need to navigate to find something. Therefore, link names should be meaningful out of context of the page. For example read more news is a better link than just click here.

Common Attributes:

• href="address of link here"
• id="..."
• name="..."

Example Code:	Result:
<a href="index.html">Go Back to Web Development Homepage</a>	Go Back to Web Development Homepage
<a href="#tables">Anchor link that goes to the tables section of this page</a>	Anchor link that goes to the tables section of this page

Back to Common Tag Listing

Tag:
Unordered list:

<ul>
  <li>First item</li>
  <li>Next item</li>
</ul>

Ordered list:

<ol>
  <li>First item</li>
  <li>Next item</li>
</ol>

Description: The ol tag defines the beginning of an ordered list, which will appear numbered. The ul tag defines the beginning of an unordered list, which appears bulleted. Inside of each list, there are li tags used to define each individual list item.

Common Attributes:

For ol:

• type="1" ("A", "a", "I", "i")

For ul:

• type="disc" ("square" or "circle")

Example Code:	Result:
<ol>   <li>First item</li>   <li>Next item</li> </ol>	First Item Next Item
<ul>   <li>First item</li>   <li>Next item</li> </ul>	First Item Next Item
<ul type="square">   <li>First item</li>   <li>Next item</li> </ul>	First Item Next Item

Back to Common Tag Listing

Tag: <p>...</p>

Description: The paragraph tag is used to place paragraphs in your pages.

Common Attributes:

• align="left" ("center" or "right")

Example Code:	Result:
<p>This is a sample paragraph.</p>	This is a sample paragraph.
<p align="right">This is a right aligned sample paragraph.</p>	This is a right aligned sample paragraph.

Back to Common Tag Listing

Tag:
<table>
 <tr>
  <th>...</th>
  <td>...</td>
 </tr>
</table>

Description: The HTML table model allows authors to arrange data such as text, preformatted text, images, links, forms, form fields, etc. into rows and columns of cells. The table tag surrounds the complete structure of the table. The tr (table row) tag defines where each row begins. Within each table row, there will be an number of either th tags (table headers) or td (table data).

Accessibility Note: Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media such as talking browsers. (Example: Do not use tables with border set to 0 just to layout content whenever possible.)

Additionally, make sure to use the scope attribute as shown in the example below. This attribute will specify the group of cells to which the object's information applies for talking browsers. Blind users have the option of hearing the table heading before each piece of data.

Example of how tables would be read without the scope attribute:

"Name, Age, Kelly, 24, Jeremy, 26"

Example of how tables would be read with the scope attribute:

"Name: Kelly, Age: 24, Name: Jeremy, Age: 26"

You can imagine how reading the table heading before the data would help with very large tables with a lot of numerical information.

Common Attributes:

For table:

• width="% or #" (defines the width of the table)
• border="#" (defines width of table border)
• class="spreadsheet" ("solidBorders" or "indent5px" - styles defined by CWU)
• summary="Summary description of table here..."

For td or th:

• align="center" ("right" or "left")
• scope="col" ("row" - to be placed in either th or td tags)

Example Code:	Result:
<table summary="This table is used for sample data." border="1" class="spreadsheet">  <tr>   <th scope="col">Name</th>   <th scope="col">Age</th>  </tr>  <tr>   <td scope="row">Kelly</td>   <td scope="row">24</td>  </tr>  <tr>   <td scope="row">Jeremy</td>   <td scope="row">26</td>  </tr> </table>	Name Age Kelly 24 Jeremy 26
<table summary="This table is used for sample data." border="5" class="solidBorders">  <tr>   <th scope="col">Name</th>   <th scope="col">Age</th>  </tr>  <tr>   <td scope="row">Kelly</td>   <td scope="row">24</td>  </tr>  <tr>   <td scope="row">Jeremy</td>   <td scope="row">26</td>  </tr> </table>	Name Age Kelly 24 Jeremy 26

Back to Common Tag Listing

Tag:
<form method="GET or POST" action="/cgi-bin/FormMail.cgi">
<input type="hidden" name="recipient" value="nobody@cwu.edu" />
</form>

Description: A form is a way for authors to get feedback from visitors on a webpage. When a visitor fills out the form, the form gets processed and sent to a specified email address.

ACTION is where information is going to be sent. This is where the specified CGI link or your e-mail information goes. Direct to e-mail usually results in a VERY long line of information instead of a compiled set of answers. Mailto tends to be an unstable working value. The CGI option is very recommended.

CGI (Common Gateway Interface) program. This is a separate program that lives on a server. It takes the visitor's FORM input, processes it, and sends it to a specified email. Without a CGI, the outcome may be a very long line of continuous text.

If you use the action="/cgi-bin/FormMail.cgi." the forms input is processesed and sent to a specified email.

METHOD is how the Form information is going to be sent. The two options for this property are GET or POST. Post is the most commonly used and sends the information as text.

Accesibilty Note: It is usually easiest if you put a table within the form to recieve a clean and easy accessible way of laying out the form. Note that anything placed within the form tags will be considered as part of the form and that all HTML tags are usable in the form. When you put in an attribute such as Textarea into the form you have to fill out the textarea name so that when the form is submitted to the email address the name of the attribute will show up. This allows the reciever of the submitted form to be able to view what the question and answer is.

Common Attributes:

• Textarea: These are larger versions of the Text Field. They give more room for visitors input. Textareas are generally used to gather feedback or comments. Anything that would take more than just one simple line answer.
• Button: These are used for submitting or resetting the forms.
• Checkbox: Checkboxes are small square options. All options the visitor checks will remain checked unless they click on it again to uncheck it. Unlike the Radio buttons, more than one Checkbox can be active at a time.
• List/Menu: Lists are similar to a text box. It shows a declared number of text rows and gives the visitor a list of choices. Similar to the menu list, the list box length is determined by the length of the longest option. Menu's are the smallest way to display a list. The width of a drop list is determined by the width of the longest OPTION in the list provided. (It hates to waste space). Only one list item will be shown in view since a drop list is only one line high.
• Radio Button: Radio buttons are the small circles option. You can list out as many items as you like with Radio buttons, but only one answer per grouping can be activated at a time. If a new one is selected, the last one becomes unselected.
• Text Field: These boxes are most common in FORMs. They are generally used for collecting information such as names, email addresses, URLs, etc.. Text options allow the visitor to actually enter text for answers.

Example Code:	Result:
<textarea name="This is the text area" cols="10" rows="1"></textarea>
<input name="this is the submit button" type="submit" />
<input name="This is a reset buton" type="reset" />
<input name="this is the checkbox" type="checkbox" value="" />
<select name="this is the list" size="3"> <option value="list">This is a list</option> <option value="list">This is a list</option> <option value="list">This is a list</option> <option value="list">This is a list</option> </select>	This is a list This is a list This is a list This is a list
<select name="This is the menu option"> <option value="this is the menu">this is the menu</option> <option value="this is the menu">this is the menu</option> <option value="this is the menu">this is the menu</option> <option value="this is the menu">this is the menu</option> </select>	this is the menu this is the menu this is the menu this is the menu
<input name="this is the radio button" type="radio" value="" />
<input name="this is the text field" type="text" size="10" maxlength="255" />

Back to Common Tag Listing