As we covered in the Basics of XHTML, we have basic rules that we need to follow in order to correctly write XHTML and get the results we want. We know that for most elements, we need an opening tag and closing tag. There are, however, some elements that are self-closing such as the img element and br element.

<start tag>content</end tag>

<a href="">Example</a>
<img src="images/img.png" />
<br />

This tutorial will cover additional major concepts of HTML such as attributes and a basic introduction to various HTML elements.

HTML Attributes

  1. HTML elements can have attributes
  2. Attributes provide more info about the element
  3. Attributes are always defined in the start tag

The general syntax for attributes is as follows:

<start attribute="value">...</end>
<a href="">AtomicPages</a>
<img src="images/img.png" height="200" width="200" title="Image" />

As mentioned previously, attributes provide additional information about the element that is being used. For instance, consider our img element that is used above. We have three different attributes that are contributing to the information of this element.

  • height - setting the height in px
  • width - setting with width in px
  • title - setting the title of the image

Not all attributes can be used on all HTML elements. There are restrictions on which can be used and which cannot be used. To see all of the attributes, see this W3C reference.

Common Attributes

Here is a list of some very common attributes that we will encounter very often in the future.

<start class="[class name]">...</end tag>
<start style="[inline css]">...</end tag>
<start id="[id name]">...</end tag>

<p class="start">...</p>
<span style="font-size:15px;">...</span>
<div id="header">...</div>

These three attributes are perhaps the most common attributes aside from "href" and "src". These attributes aid in styling web pages usingCSS which we cover in a separate tutorial series. They are, however, still very important to be aware of and how the function as attributes.

HTML Formatting

We can think of an HTML document as one without any formatting whatsoever. HTML does not have a mind of its own and will not automatically format itself like a term paper would in Microsoft Word or any other word-editing program. All of the formatting is organic and has to be done manually by us. Though this may seem tedious, we eventually grow fond of it because we can see our work come to life.

The most common formatting tags will produce various results. We can create bold text, italic text, big text, an underlined text all without any additional assistance from anything other than pure HTML. We don't even need anything other than pure HTML so create a web site!

Text Formatting

Tags Description
<b> Bold Text
<strong> Strong Text
<i> Italic Text
<em> Emphasized Text 
<u> Underlined Text depreciated use inline css instead
<s> Deprecated, strikethrough text. Use <del>.
<strike> Deprecated, strikethrough text. Use <del>.
<del> Deleted Text
<ins> Inserted Text
<sub> Subscript Text
<sup> Superscript Text
<big> Big Text
<small> Small Text

So what do all of these insane tags do? Well, let's start form the top!

  1. Bold and Strong.
  2. Italic and Emphasized. <i> is deprecated.
  3. Underlined Text without the use of styles. <u> is deprecated.
  4. Strike and Strikethough do the same thing but are depreciated1
  5. Deleted Text is the preferred way of creating strike though text.
  6. Inserted Text is an alternative way of creating underlined text.
  7. Subscript is subscript text.
  8. Superscript is superscript text.
  9. Big is a way of creating big text.
  10. Small is a way of creating small text.

Computer Text

Tags Description
<code> Computer Code Text
<pre> Preformatted Text
<samp> Sample Computer Code
<tt> Teletype Text
<kbd> Keyboard Text
<var> Defines a Variable
  1. Code, Pre, Teletype, Sample Computer Text, and Keyboard Text do essentially the same, which is formatting text in a way that it appears to be computer code. There are differences between them, however, but we need not be worried about this yet.
  2. Variables is slightly different for instead of making the text monospace it actually italicizes the text.

Quotes, Citations, etc

Tags Description
<blockquote> Long Quotations
<q> Short Quotations
<cite> Cites something
<address> Address Element
<abbr> Abbreviation Element
<dfn> Definition Term
<bdo> Text Direction
  1. Generally you'll see blockquote on forums or blogs somewhere, you'll click "quote" and then a new window will pop up and you'll see blockquote in HTML of BB Code form (usually). As you can see, using this blockquote element, our text is the same, however, the background is different to signify this long quote.

  2. The "q" element is a short quote. Notice how the "q" element is simply surrounded by double quotes to signify it's existence as a short quote.
  3. Cited text it different to let users know that whatever you are referring to is a cited source. You may want to utilize the "sub" and/or "sup" elements when using the "cite" element so you can create footnotes at the bottom of the web page.
  4. The address element if for placing an address in

    . The text is intentionally different for the specific use of an address.

  5. A definition term is more like a type of list. We will be covering this later on.
  6. This "bdo" element should not be be used unless you want wish to have the direction of text reversed.This text will read from left to right. This text well read from right to left.(This text will read from right to left - it's backwards!)

1. Depreciated — These are outdated HTML elements that have been replaced by more conventional, functional, and flexible alternatives. Though some browsers may support these elements, their continued support cannot be assumed; eventually these tags will become obsolete and browsers will not support their functionality.

A List of Depreciated Elements and their Alternatives

Tags Description Replacement
<applet> Inserts Applet <object>
<basefont /> Sets defaul font color and size font style sheets
<center> Centered Text text-align:center;
<dir> Directory List <ul>
<font> Font, color, and size of text font style sheets
<isindex> Adds search field <form>
<menu> Menu List <ul>
<s> Strike through text <del> or style sheets
<strike> Strike through text <del> or style sheets
<u> Underlined text text-decoration:unerline;
<xmp> Preformatted Text <pre>

Be Sociable, Share!