Tutorials
Learn web design and programming with our free video and text tutorials.
Web Designer? Design and market your own professional website with easy-to-use tools.
Introduction to HTML and XHTML
What is HTML?
HTML, or HyperText Markup Language, is the language that is most widely used to create web pages. It provides a way to structure documents (also known as computer files) by giving specific indications what text are headings, paragraphs, lists, etc. are as well as giving specific indications for links and other items. It allows images and other objects to be embedded and allows you to add forms. It can include or can load scripts in languages such as Javascript and PHP which can make web pages interactive and dynamic and also CSS (Cascading Style Sheets) which is used to define the appearance and layout of text and other HTML elements and objects.
The W3C (World Wide Consortium) maintains both the HTML and CSS standards and encourages the use of CSS to add styles and layouts to HTML elements.
HTML 3.2, HTML 4.0 and HTML 5.0 Specifications
There are currently 3 HTML standards: HTML 3.2, HTML 4.0 and HTML 5.0. These tutorials will cover the HTML 4.0 specifications because HTML 3.2 was never meant to contain tags to be able to add styles to the content of web pages also because not all web browsers support (or fully support) HTML 5.0 specifications. HTML 4.0 allows the use of style sheets so that you can define the appearance and layout of text and other HTML elements and objects.
What is XHTML and XML?
XHTML (Extensible Hypertext Markup Language) is the same in most instances and almost identical to HTML 4.0 in all others and conforms to XML standards.
XML (Extensible Markup Language) is a set of rules for encoding documents electronically and is also maintained by the W3C. XML is meant to be used to create a standard way exchange data between applications.
What do I recommend for those like you that want to learn web design and web development? It recommend that you should write valid HTML 4.01 and make it conform to XHTML standards for the content of your web pages and to use CSS to style your web pages.
Validating Your HTML (XHTML) Files?
You can use W3C's markup validating service at validator.w3.org to validate that your HTML files and also your XHTML files against a Document Type Declaration (DTD). Before an HTML file or an XHTML file can be validated, a correct DTD must be added as the first line of the file. Be sure that no space(s) is included before the first line that is to be included.
The 2 most common DTDs for HTML files are shown below.
The HTML 4.01 Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Below are the 2 most common DTDs for XHTML files.
The Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets. This is the DTD that is most recommended since it conforms to strict XHTML standards.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Note: When your create web pages using HTML (XHTML) and style them with CSS there should no problem when validating your files. If you begin to use other programming languages within your documents you may find that some of your documents do not validate. Although I recommend that you write web pages that validate, it may not always be neccessary for your web pages to validate in order for you web pages to work as you would like.
What You Need to Learn HTML (XHTML) and Create Web Pages
Most likely you already have everything that you need to learn HTML and to create web pages. You will need a web browser and a text editor.
The first thing that you need is a web browser to view your web pages. All web browsers are available for free. You are looking at this web page in a web browser. You should also download other popular web browsers so that you see how the web pages that you create are displayed in different web browsers.
You will need a text editor to create and edit your documents. Most computers come with a text editor already included. There are also many HTML editors that are free available for download.
If you are using Windows you already have Notepad available on your computer. Typically Notepad on computers with Windows is located in the Start menu under Programs in Accessories. If you have a computer running Linux, you should have the text editor Pico available. If you have a Mac, you should have the text editor TextEdit available.
Create Your First Web Page
To create your first web page, start a text editor and open a blank document. To teach you to create web pages, we will first show you the basic structure of an HTML document below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
</body>
<html>
The first thing that should be in the document is the DTD of that document. Copy and paste the DTD shown below into your document.
NOTE: Because these HTML tutorials are meant to teach to HTML that conforms to W3C XHTML 1.0, the DTD for that specification will be used.
HTML Elements and Tags
HTML elements are the content items such as text and images that make up a web page. Text, images, lists, tables, and forms are examples of HTML elements. HTML elements can contain other elements, for example a table can contain text and images.
HTML tags mark up the beginning and the end of HTML elements. For example, <html> tags denote the beginning of an HTML document and <body> tags denotes the content area of an HTML document. All HTML tags begin with a less than symbol (<) and end with a greater than symbol (>). All HTML tags must be closed. Most tags consist of a starting tag and an ending tag, with the ending tag having a forward slach (/) immediately following the less than bracket (<) of the ending tag. For example, <body> is the starting and </body> is the ending tag. Some tags, for example the image tag (<img />), do not have a closing tag and must be self enclosed. This is done by including a blank space, followed by a forward slash and then the greater than symbol to end the tag.
Now save the document with an .html or .htm extension. You can give the document whatever name that you want.
NOTE: If you are using Notepad to create your web page, Notepad by default will try to save the document with a .txt extension.
Now view the HTML document that you just created and notice that the web page is completely empty. That is because there has not been any content added to the HTML document yet.
Now we will include a paragraph (<p>, </p>) element with some text in the HTML document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<p>
Hello World!
</p>
</body>
<html>
If you view your web page now, the web page should display the text "Hello World!" in the web browser as shown below. If you will need to either refresh the web page or load the web page again to view the changes to the web page.
Hello World!
Next we will include another element in the document so the you can view the results.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<h1>
My First Web Page!
</h1>
<p>
Hello World!
</p>
</body>
<html>
The HTML code above should display the text below similar to how it displayed below.
My First Web Page!
Hello World!
This tutorial was last updated: 11-25-09