Quick Navigation:
- Introduction
- Step 0: Setting Up Your Environment
- Step 1: The Basic Structure of An HTML File
- Step 2: Building Your First Page
- Step 3: A Practical Example
- Next Steps
Step 1: The Basic Structure of An HTML File
An HTML file is broken up into several major pieces, with some being required elements and some optional. This section will cover the basic chunks of your first web page.
Doctypes and You
There are a bunch of different doctypes out there, for both HTML and XHTML. However, for most things you will develop, you should only need one or two. For this tutorial, we will be using the XHTML Strict doctype, which looks like this:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Don’t let the name fool you — XHTML Strict is just as easy to learn, pearhaps easier, than any other variant of HTML. The reason is that it has fewer exceptions to the rules set forth that require you to keep your code clean. Such rules include things like always closing your tags (<span></span>, <br />, <p></p>, etc). Learning the rules is never the hard part of a new programming language… it’s the exceptions to those rules that throw a wrench into the works. By having fewer exceptions to the rules, XHTML Strict simplifies the learning process.
Required Elements
Any (X)HTML page needs to have a few basic elements to be considered a valid page. These include:
The Doctype definition (seen above)
The doctype definition (DTD) tells the browser which of the many flavors of HTML you have built your page in.
<html>
This is the basic wrapper for the whole file. The entire contents of your website (including all tags specified below) will be nested within this one element. In order to validate as XHTML Strict, we add two attributes to this tag: xmlns, or the xml namespace, which tells the browser to use the default set of HTML/XHTML tags; and the lang, which specifies the document’s language.
<head>
This contains the meta information about your HTML file, such as page title, page and site descriptions, keywords, and author information.
<title>
This is technically the only required element within the <head> section of the web page. This tells the browser what to display in the title bar of the window and in shortcuts.
<body>
After the <head> section of your site comes the <body>. This element is the real "meat" of your site, containing all of the content actually displayed to the user.
Recommended Elements
There are several elements that you aught to have, specifically some elements within the <head> section of your page.
<h1> Tag
Though not explicitly required for any page, the main header element tells your user — as well as any visiting search engines — what the main idea on your page is. Because of this, it is strongly recommended that you have one (and only one) <h1> element on each page. It benefits your users, and it benefits you (due to a potential increase in traffic from more accurate indexing by search engines).
<meta> Tags
These tags specify information about the HTML file itself. They can include content such as the page description, character encoding (highly useful if you use special characters), author information, and much more. While meta tags do not display any information to the user, they are very helpful to search engines, which use the information (along with the rest of your site’s content) to help describe your site in their indices. Here are a few <meta> tags I recommend including in each of your files:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
This specifies the overall character encoding for your page. UTF-8 is a good "default" encoding to use, as it covers the bulk of characters you are likely to use when developing an English language web page. If you are building your page in a different language, however, I would suggest you take a look at some of the more widely used character encodings and select the one that best fits your needs.
<meta http-equiv=”Content-Script-Type” content=”text/javascript” /> and <meta http-equiv=”Content-Style-Type” content=”text/css” />
These two meta elements are used less widely than many of their counterparts. Their purpose is to provide a fallback language for inline scripts or styles (respectively) if you fail to specify them in their own declarations. For example, if you have an inline <script></script> tag in your code, it should have a type="sometype" attribute. However, if you forget this, the browser needs to know which language is your default scripting language. Hence these tags.
<meta name=”author” content=”Your Name” /> and <meta name=”copyright” content=”Copyright declaration” />
These are (hopefully) self explanatory. Specify your name and copyright information, and while there is some debate about whether this provides a significant boost to your site, there is no reason not to include this information.
<meta name=”robots” content=”index,follow” />
The robots meta tag tells search engines what to do when they get to your site. This helps search engines index your site, potentially (if you have quality content) helping to boost your site’s appearance on search results pages.
<meta name=”description” content=”" /> and <meta name=”keywords” content=”" />
These two tags contain specific information about the page that the user is on. The description should be relatively short (2-3 sentences), and it should be different for each page on your site. Not every page has identical content, so they should not have identical descriptions, right?
The keywords tag is simply a comma-delimited list (e.g. “keyword, keyword, key phrase, etc”) of keywords that you think are relevant to this specific page. Many search engines are placing lower emphasis on the importance of this meta tag due to its abuse by spammers, but if you use it correctly in conjunction with your content, it can help improve your search rankings.
Continue on to the next page to find out how to put it all together.
No related posts.
Pages: 1 2 3 4 5 6
Good Job!
I’m going to go ahead and mention HTML5 here, also found via the w3c site, as the standard a new designer should be starting with. The switchover is coming and most of the big-boy browsers already have support. Also, the faster we can kill Flash, the happier I’ll be.
Thanks! I appreciate the feedback.
I agree with you that HTML5 is on its way, and I plan to update this tutorial to use HTML5 instead of XHTML 1.0. However, since the spec is still in draft form and support is still (relatively) spotty, my preference is to stick with XHTML.
That being said, I don’t plan to wait forever for HTML5 support and the draft. If everyone does that, nobody will ever implement it. Once the spec gets to a fairly stable state and is a bit better supported, I’ll make the switch and start recommending it myself.
What’s your reason for suggesting that images be inside paragraph tags? To me it seems like that’s a presentational choice (block level, top and bottom margin, etc…) rather than structural.
Good article though. 8^)
The main reason I am advocating that they be inside paragraph tags is that in this article I don’t get into discussing the <div> tag. Since every element must be within a block-level container, it made the most sense to recommend putting them in paragraph tags.
The next article (covering CSS, mostly) will cover more HTML, including divs.
I don’t think many people realize the number of disadvantages that go along with creating free websites. Hopefully this article will shed some light on the subject.
Don’t make the same mistake I did. After this nightmare, I vowed to never go the “free route” again. Creating your site from scratch with its own dot com name is affordable and definitely worth the small investment.
Parking your site at a free host is often like building a house on sand. It may be quick and and it may seem easy at first, but I can almost guarantee you it won’t last long.