Introduction to HTML (XHTML)

Before anything, almost everything online (if not everything) are files organized into directories.

HTML (XHTML) files are simple text files that can be created and edited with text editors.

What is HTML (XHTML)?

HTML is the structure of content within a web page and XHTML is HTML that conforms to the XML standard.

What is CSS?

CSS controls how the content within web pages is visually displayed.

Create A Web Page

Type or copy and paste the code below into your text editor and save the file with an ".html" extension.

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

Open a web browser such as FireFox or Internet Explorer and type in the location of the file that you just saved (for example, "file:///C:/Documents/learncssandxhtml/myfirstwebpage.html") into the address bar and hit "Enter" or simply browse your directory for the file.

This will open the web page that you just created that should look similar to the one below.

Hello World!

An XHTML document consists of three main parts:

  • <!document type declaration>
  • <head>
  • <body>

(X)HTML Tags

(X)HTML tags enclose content within a web page and define the content within the tags.

Document Type Declaration

The first line of code in the XHTML file above, "<!DOCTYPE ...>, is a document type declaration, which is basically an XHTML tag that precisely tells the web browser the allowed syntax of XHTML. XHTML web pages need to include a document type declaration in the first line of the file for it to be XHTML compliant.

Some of the most common and recommended document type declarations are below.

XHTML 1.0 Strict

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

This document type declaration should be used together with CSS.

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 1.0 Transitional

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

The transitional document type declaration should be used when you want to use some of HTML's presentational features.

XHTML 1.0 Frameset

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

Use the frameset document type declaration when you want to use HTML frames.

Language Declarations

There are 4 places where a language declaration can be declared for in an (X)HTML document. A language declaraion is not necessary to create an XHTML compliant document, it is an accessibility consideration. This website will only show you how to declare the language type in the html tag and in a meta element.

  • In the HTTP Content-Language header
  • In a language attribute on the html tag
  • In a meta element in the document head with the content attribute set to Content-Language
  • In a language attribute on an element within the document

The examples below show you how to declare the language type in the html tag and in an meta element.

<html lang="en">

<meta http-equiv="Content-Language" content="en,fr,sp" />

Content Types

The media type and character set of an HTML element is set with an HTTP header

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

The MIME type of the file (text/html), tells the web browser what a media type a file is. All files have a MIME type, for example, the MIME type for a CSS file is "text/css".

The character set (charset=utf-8) is also set in the HTTP header. I recommend that you use UTF-8 wherever possible.

Closing Tags

Unlike HTML, XHTML requires all tags to have a closing tag (example: <html> </html>) or to be self-enclosed, (example: <img src="image.jpg" alt="some text" /> ) with the only exception being the document type declaration tag.

Also, all tag names in XHTML must be in lowercase.

Attributes

Tags can have attributes that define additional parameters and characteristics for the (X)HTML element to which it is applied. Attributes are always specified in the start tag and come in name/value pairs as such: tag="value".

An example of an (X)HTML tag with an attribute is an (X)HTML link.

<a href="http://learncssandxhtml.com/">text link</a>

The attribute is "href" and the value is "http://learncssandxhtml.com/".

Elements

  • Tags mark the beginning and the end of an element
  • Some (X)HTML elements do not contain any content
  • Empty elements are closed in the start tag
  • Most (X)HTML elements can have attributes
  • Most (X)HTML elements can be nested
  • (X)HTML documents consist of nested (X)HTML elements.

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

The <p> element in the code above defines a paragraph in the (X)HTML document. The element has a start tag <p> and an end tag </p>. The element content within the <p> tag is: This is my first paragraph.".

The <body> element defines the body of the (X)HTML document. The element has a start tag (<body>) and an end tag (</body>). The element content is another (X)HTML element (the paragraph).

The <html> element defines the (X)HTML document. The element has a start tag (<html>) and an end tag (</html>). The element content is another HTML element (the body).

Web Hosting Resources

Free Website Templates