Basics of XHTML – Part #2

As we covered in the Basics of XHTML, we have basics rules that we need to follow in order to correctly write XHTML and get the results we want.

<start tag>content</end tag>

We already learned some very basics XHTML elements that are very useful such as adding images and links to web pages.

<img src="image.gif" width=125" height="125" alt="image" />
<a href="index.html">Home</a>

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 these attributes is as follows:

<start tag attribute="value">content</ending tag>
<a href="http://www.atomicpages.net">AtomicPages</a>

Given our basics syntax rules for attributes, we can see that the actual attribute is not inside double quotes but is within the starting tag. The value, however, is inside of double quotes. Please see Using Good Practices when Writing XHTML for additional details and tips for writing proper XHTML.

Common Attributes

Here is a list of some very common attributes.

<start tag class="class_name">content</end tag>
<start tag style="inline css">content</end tag>
<start tag id="id_name">content</end tag>

You can refer to ID v. Class and Basics for CSS for more details.

HTML Formatting

Whether we’re aware of it or not, there are ways to use HTML elements instead of using inline, ID, or class attributes of CSS. Basically, for simple formatting purposes, strong, emphasized , underlined, Big, etc.. There are ways to achieve these results without using Style Sheets. You can actually do some pretty crazy things with some seemingly arbitrary HTML elements.

Text Formatting

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

1. Bold and Strong are basically the same thing.
2. Italic and Emphasized basically do the same thing.
3. Underlines Text without the use of styles.
4. Strike and Strikethough do the same thing but are depreciated¹
5. Deleted Text is the preferred way of creating “strikethough” text.
6. Inserted Text is an alternative way of creating underlined text.
7. _Subscript is subscript text probably used for mathematical notations.
8. ^Superscript is superscript text probably used for mathematical notations.
9. Big is a way of creating big text without styles.
10. Small is a way of creating small text without styles.

Computer Text

1. Basically, Code, Pre, Teletype, Sample Computer Text, and Keyboard Text all do the same exact thing: turn text monotype. The only difference these different elements would make is if you want to apply individual styles to them and use them in different ways.
2. Variables is the only fancy element that does not make the text monotype but actually emphasized. This too can be made into almost anything we’d want via styles.

Quotes, Citations, etc

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. You can alter the styles of this element via CSS as usual.

5. A definition term is more like a type of list. We will be covering this later on.
6. This “bdo” element is basically useless unless you want to confuse your visitors.. 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