Introduction to HTML and XHTML

What is HTML? HTML, short for Hypertext Markup Language, is the programming language used to create documents on the world wide web.

HTML defines the content (structure and layout) of a web document with the use of markup tags and attributes. An HTML document must have an .html or .htm extension.

What is CSS? CSS, short for cascading style sheets, is used to describe the presentation of a document written in HTML, XHTML and XML.

For the purpose of doing things right the first time, the examples in this HTML tutorial will be XHTML and XML compliant. You can learn about XHTML and XML once you learn about HTML. That way you do not have to go back and re-learn or redo any work you may have done.

Basic structure of an HTML document

The following example is an example of a basic HTML document. Remember that the examples provided are XHTML and XML compliant.

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>
</head>
<body>
<p>
this is a paragraph
</p>
</body>
</html>

The first line indicates the document is XHTML 1.1 compliant:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

For the moment, just remember that you need to put these two lines first in your HTML documents.

You should also notice that the <html> tag has some extra code in it:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

The extra tags and attributes in the <html> tag are standard requirements of all XHTML web pages.

All HTML tags must be closed

Every HTML tag must have a corresponding closing tag, or must be self-enclosed.

For example, an openning <p> tag must have a corresponding closing </p> tag. Also, every self-enclosing tag such as a line-break tag (<br>) must be self-enclosed like such <br />. Notice the forward slash (/) right before the end of the tag.

If HTML tags are not properly closed, the web page may or may not display how you want it to, depending on the web browser. More importantaly, the HTML document will not be XHTML compliant.

The important thing to remember is that all HTML tags have to be closed. HTML tags with content in between them have to have an openning and a closing tag and HTML tags with no content in between them are self-enclosing.

HTML elements

Elements are the content within a web page, for example, text within a paragraph or heading and images.

HTML attributes

Attributes are code that defines additional parameters and characterisitcs for the HTML elemement. For example, HTML is used to create an element such as a parapragh of text and the attribute will tell the web browser how to display the text, such as whether to align the text to the left or to the right.

note: always quote attribute values. It does not matter whether the quotes are single or double quotes.

If the attribute value itself contains quotes, use single quotes. For example:
name='Jerry "The GOAT" Rice'

Using lowercase letters

HTML tags are not case sensitive: <p> is the same as <P>. However, the World Wide Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation and also XHTML tags have to be in lowercase in order to be XHTML compliant.