Introduction to HTML: Part #2: The Basic Document Structure
When I left of in the first tutorial, What Is And What You Need, you learned what HTML is exactly and its purpose in life. Now that you know the extreme basics we can begin the basics of creating HTML documents.
A few keywords to know before we begin:
Attribute: A parameter of an element in SGML-based markup languages like HTML and XML. (Source.) Attributes are basically used to modify the values of the HTML element they are used within. Elements will usually have multiple attributes.
Element: An element indicates structure in an HTML document and a way of hierarchically arranging content. More specifically, an HTML element is an SGML element that meets the requirements of one or more of the HTML Document Type Definitions (DTDs). (Source.) An element basically is a complete tag, having an opening <tag> and a closing </tag>.
Tag: Tags indicate structure in an HTML document and a way of hierarchically arranging content. More specifically, a tag is used to specify regions of HTML documents for the web browser to interpret. Tags are written like this: <tag>
All HTML documents must have a minimum of these four tags:
<html> - <head> - <title> - <body>
*It’s also a good idea to utilize the DOCTYPE declaration.
The DOCTYPE declaration tells the web browser which markup specification we’re using to “markup” the document with. In our case I’m teaching you the XHTML 1.0 Transitional and Strict document types. I’ll get back to this special tag in the near future.
The basic HTML document structure follows:
<html>
<head>
<title>This is the title of the page.</title>
</head>
<body>
This will print right on the page!
</body>
</html>
Every single HTML document which you will make will contain these basic tag groupings and must be in the same format. The structuring is very simple but does take a bit of working with to get used to. It’s just like learning a new spoken language. Practice makes perfect!
Anyways, since I’m teaching you the XHTML 1.0 Transitional and Strict document types we should modify the basic HTML document structure which I showed you earlier. To start, lets modify it to this for XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>This is the title of the page.</title>
</head>
<body>
This will print right on the page!
</body>
</html>
Also, one thing which a lot of developers do not know about are a few other tags to add into the HTML tag, as attributes. So, our final, basic document structure for XHTML 1.0 Transitional should look like:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>This is the title of the page.</title>
</head>
<body>
This will print right on the page!
</body>
</html>
You may be asking yourself, “what’s the difference between Transitional and Strict?” Well, basically the difference between them is that with Transitional you are able to structure your HTML code more loosely than you are with Strict, because with Strict the rules for structuring the document are just that, much more strict.
Some basic rules you must follow strictly:
- All tags/elements must be in lowercase. <html> is correct; <HTML> is NOT correct.
- All documents MUST begin with a DOCTYPE declaration.
- All tags must be closed, and those not ending with </tag> must be closed with a closed-ended tag. Example: <img src=”" />
- Nested tags must be enclosing other tags correctly. Example:
<b><i>Hi there.</i></b> is formatted correctly.
<b><i>Hi there.</b></i> is formatted incorrectly.
There are many more rules which you must strictly follow but for the most part these are the most important.
Lets now create the basic document structure for XHTML 1.0 Strict and we’ll also add in the XML declaration which isn’t required, but is strongly encouraged for XML/XHTML developers, shall we:
<?xml version="1.0" encoding="UTF-8"?>
<!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 page.</title>
</head>
<body>
This will print right on the page!
</body>
</html>
In the next tutorial in this series I will go over how to use and write the tags/elements in HTML/XHTML documents.
Further Reading:
- XHTML 1.0: The Extensible HyperText Markup Language (Second Edition)
- XHTML - Wikipedia, the free encyclopedia
Apr 2nd, 2008 at 1:09 am
[…] I left off on the previous article (Introduction To HTML: Part #2: The Basic Document Structure) you learned the basics of creating the basic document structure for (X)HTML documents. Now, […]