Worksheet 2 - HTML Elements

Headings

HTML has heading tags numbered from 1 through 6 (ex: <h1>) where 1 is the largest size text and 6 is the smallest size text. These heading sizes are relative text sizes and do not actually refer to specific font size. This was designed so that pages would appear roughly the same regardless of what web browser or operating system a person uses on their computer.

Heading Examples

Heading 1 <h1>

Heading 2 <h2>

Heading 3 <h3>

Heading 4 <h4>

Heading 5 <h5>
Heading 6 <h6>

Displaying Text

Text should not be entered directly into the body of a HTML page. It should instead be contained in what is known as a "block element" such as a heading or paragraph tag <p></p> as well as others. One interesting example is the <pre> tag which displays text in a monospaced font and displays spacing and line breaks exactly as they are entered in the code (as seen in the example below).

Text Examples

We can use a standard <p> tag to display this text as its own paragraph.

			This text is displayed within a <pre> tag.  This should appear in a monospaced font
			and should display line breaks and indentations where I've entered them in the code and
			not at the right end of the browser.
		

Phrase Elements

Phrase elements are used in HTML as a method of describing and modifying text. It is important to understand that the tags in this section are intended not just to modify the appearance of text but more importantly to give meaning to the text. This will become more important when we start discussing formatting using style sheets. These tags can be used to denote itemes as quotations, code elements, citations and more. The meaning these tags give to the text is important especially when a HTML page is viewed by someone with a visual impairment using a screen reader to read the contents of the page to them.

Phrase Element Examples

The <abbr> tag is used to give the abbreviated form a long word (ex: USA). It is cousin to the <acronym> tag which is used to denote an acronym (ex: NATO). If you place your mouse pointer over-top of one of these terms you will see a "tooltip" with the full title that is listed in the tag. As mentioned above, these are especially useful for screen readers so that they can read what the entire word(s) are instead of an abbreviation or acronym that may not make sense when read aloud.

The <cite> tag is used for citing the titles of magazines, newspapers, movies, etc... if you wanted to cite an article from the Washington Post for example. The <cite> tag not only changes the appearance of the text but it also gives meaning to what the type of information the text contains.

These are only three of a number of such tags. We will discuss these more later on.

Anchors (aka Links)

The feature that makes hTML "Hypertext" is the ability to link directly to other pages. This is accomplished using the anchor tag (<a>). This tag requires at minimum 1 attribute to be assigned for it to do anything useful. To link to another page you would use the hypertext reference (href) which tells the web browser which other page this link is "anchored" to.

External Link Examples

Google (this links to another website, in this example: Google)

Worksheet 1 - The First Web Page (this links to our first worksheet)

In addition to linking to other pages, we can use two anchors to link to a different location in the same page. We do this by first creating a named anchor point on a page using the "name" attribute. We will use this named anchor point as a means to identify where our link should move the browser to within the page. We link to this point the same way we would our Worksheet 1 link above but with an addition to the end of the filename as illustrated in the example below. (The anchor point we link to is at the end of this documnets.)

Internal Link Example

Page Bottom (this links to the end of this page)

Lists (Unordered & Ordered)

Lists come in two varieties; unordered and ordered. The difference between the two is that items in an unordered lists are preceded by a bullet and items on an ordered list are preceded by an alphanumeric character providing a hierarchical order in which the items are listed. Lists can be singular entities or can also be nested within other lists.

Unordered List Example

Ordered List Example

  1. Ordered List Item
    1. Nested Ordered List Item
    2. Nested Ordered List Item
  2. Ordered List Item
  3. Ordered List Item

Page Bottom

This is the "Page Bottom" that was linked to from the intenal link example.