Sarah Showalter's XHTML Paper

HTML and XHTML

HTML or Hyper Text Markup Language is the programming language used to create documents to be viewed on the internet. XHTML (Extensible Hyper Text Markup Language) is considered the next generation of HTML and is a kind of hybrid between HTML and XML (Extensible Markup Language). XHTML is similar to HTML 4.01. XHTML is much stricter than HTML and it can be viewed in most current browsers. XHTML documents also need to be valid XML documents. XHTML was designed to address some of the limitations posed by traditional HTML. Newer technologies such as mobile phones and other small wireless devices are not as forgiving of HTML documents that are not written to specific standards. XHTML describes how to write HTML so that it conforms to XML standards.

Attribute	HTML	XHTML
Closing Tags	Some tags do not require a closing tag and the closing tag will be assumed once a new tag is opened. Such as <p>	All tags must be closed in XHTML. Even self-closing tags such as <br> should be written as <br />
Nested Tags	Tags do not have to be closed in any particular order. Both <p> Here is my <b>sentence.</b></p> and <p> Here is my <b>sentence.</p></b> are acceptable.	In XHTML all nested tags must be closed in proper order. For example: <p> Here is my <b>sentence.</b></p> Since the <b> tag appears between the <p> tags it must be closed before you close the <p> tag.
Case Sensitive Coding	In HTML code is not case sensitive and tags can be written in upper or lowercase letters.	XHTML requires that all tags be in lowercase letters because XML is case sensitive. In XHTML, <HTML> is incorrect, <html> is correct.
Case Sensitive Attribute Names and Values	Attribute names such as <td WIDTH="784"> may either be upper or lowercase. Values such as the hexadecimal number in <td bgcolor=#d9ecf4 > do not need to appear in quotes.	In XHTML attribute names within tags must also be lowercase as in <td width="784">. In addition to this, the attribute values need to be in quotes such as in <td bgcolor="#d9ecf4" > the hexadecimal color value is in quotes.
DOCTYPE and Titles	No DOCTYPE need be specified in an HTML document. The document need not be titled.	All XHTML documents need to have a DOCTYPE declaration at the beginning of the html file. Html, head and body must all be present in the html file and a title must be present in the head tag.
Cascading Style Sheets	All fonts, colors, borders and other page elements are controlled by attributes that appear within the tags no external style sheet is needed.	All font changes, colors borders and other page elements are controlled with external Cascading Style Sheets (CSS).

DOCTYPE

The purpose of the DOCTYPE is to tell validators and browsers which specification your page is written to. The DOCTYPE defines the XHTML 1.0 version to which your page conforms and the document type definition (DTD) that defines the specification. <!DOCTYPE> is the only tag in XHTM l.0 that is to appear in uppercase. There are three XHTML document types: transitional, frameset and strict.

XHTML 1.0 Transitional

XHTML 1.0 Transitional is used when one does not wish to use Cascading Style Sheets (CSS) because it still makes use of some HTML 4.0 tags such as <font> and attributes such as bgcolor. This is the best standard to write to if maximum compatibility with older browsers and systems is a concern because CSS is still an option in addition to the use of the older tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

XHTML 1.0 Frameset is used when one wishes to write an HTML page that uses frames for layout purposes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Strict

XHTML 1.0 Strict is used for a page that makes no use of deprecated tags. All tags are strictly used for page structure and all formatting is controlled with CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Meta Tags

The meta tags are mainly used to provide a description and to provide keywords for a web page. This data may then be used by search engines to generate and display a list of search results matching a given keyword search. Meta tags can be used on every html page that is created for any given website. The more meta tags the more chances that a search engine will pick up your page in their results list.

The meta description tag may look like this:

<meta name="description" content="A website dedicated to photos of elementary school student art work.">

Depending on the search engine, this will be displayed along with the title of your page in an index. The "content" attribute can be a word, sentence or even paragraph to describe the contents of the page. The description should be as short as possible and it should get to the point of the page.

The meta keywords tag may look like this:

Any appropriate keywords will appear in this tag. All keywords included in the meta tag should be separated by commas. Synonyms should also be included as well as singular and plural nouns.

Meta tags were more heavily used in the mid to late 1990s when search engines were reliant on meta tag data to classify web pages. However, people soon learned how to abuse meta tags and often would include whatever information was necessary to get the most hits and the highest ranking in the search results pages, whether their content was relevant or not. Not all search engines make use of this tag and many major search engines such as Google have small programs called “spiders” that automatically crawl the web and add pages to their index.

Block-Level and Inline Elements in HTML

Block level elements sometimes contain inline elements and other block-level elements. However, most inline elements may contain only data and other inline elements therefore, block-elements are considered higher in the hierarchy than the inline elements. Block-level elements are formatted differently than inline elements. Most browsers display block-level elements on new lines, creating a space between them. Inline elements do not start a new line. So the simplest test to figure out which elements are block-level and which are inline is to ask your self whether or not the element creates a new line. If it does it is probably a block-level element.

Some block-level elements or tags that will create a new line:

<h1> to <h6>
<p>
<ul>
<ol>
<li>
<table>
<tr>
<td>
<th>
<blockquote>

Some inline elements or tags that will not create a new line:

<i>
<b>
<a href>
<a name>
<em>
<strong>
<q>
<img>

Sources used for this paper:

http://www.w3schools.com/xhtml/xhtml_html.asp
http://en.wikipedia.org/wiki/Meta_tag
http://www.w3.org/TR/html401/struct/global.html#h-7.5.3
http://www.ahuka.com/htmllevel1/blocklevel.html
Lemay, Laura. SAMS Teach Yourself Web Publishing With HTML and XHTML in 21 Days. Indianapolis, Indiana: Sams Publishing, 2003.

Questions? Please e-mail Sarah Showalter at: sesfh3@mizzou.edu

Page updated on June 20th, 2006