The (X)HTML Document

LearningNerd.com

Background photo by Gualtiero

This is part of a series of (X)HTML and CSS tutorials which can all be found at LearningNerd.com/series/xhtml-css

The (X)HTML document contains two main sections: the head and the body.

This slideshow will cover what you need to know to turn your blank HTML file into a web page.

First, the head: this section is an invisible element containing info about the web page.

Background photo by Trent Strohm

The elements in the head aren't visible on the web page itself, but they're just as important.

Inside the head, you need to specify the title of your web page with this tag:

It should be descriptive, fairly short, and understandable in any context.

The title appears at the top of the web browser, in search results, and more.

Background photo by Gonzalo Barrera Sez

Next, the body. It contains everything you see on the web page.

Most of this series will focus on the content of the body element.

Title Here

Content Here

The head and body are wrapped inside html tags to mark the start and end of the (X)HTML document.

Photo by Craig Munro

But there's one more thing that appears even before the opening html tag: the document type declaration.

Also called a DOCTYPE, it tells the web browser what version and what type of (X)HTML you're using.

Transitional

Only use this for older websites that are still in the process of being updated to the new version of (X)HTML.

Strict

This is the one you should use. Documents with strict (X)HTML are not allowed to use outdated tags.

Both HTML and XHTML have these two main types:

For example, here's the HTML Strict document type declaration (DOCTYPE):

As mentioned in the intro for this series, you should stick with HTML for now, so use this DOCTYPE.

See LearningNerd.com/xhtml-doc for a basic HTML template that you can copy and paste into your own file.

There are some other important tags for specifying information about your web page, but more on those later.

The next part of this series will cover some essential tags for adding text to your new (X)HTML document.

If you have any questions, feel free to contact me through LearningNerd.com.

Click to edit the title text format

Click to edit the outline text format

Second Outline Level

Third Outline Level

Fourth Outline Level

Fifth Outline Level

Sixth Outline Level

Seventh Outline Level

Eighth Outline Level

Ninth Outline Level

Click to edit the title text format

Click to edit the outline text format

Second Outline Level

Third Outline Level

Fourth Outline Level

Fifth Outline Level

Sixth Outline Level

Seventh Outline Level

Eighth Outline Level

Ninth Outline Level