Jan
5

HTML DOCTYPE, Structure & Validation

Posted in HTML Tutorials, Website Building by

0


HTML DOCTYPE, Structure & Validation

DOCTYPE (short for document type declaration) informs the Validator which version of HTML you’re using, and must appear at the very top of every Web page. DOCTYPEs are a key component of compliant Web pages: your markup won’t validate without them and not using a DOCTYPE may cause your HTML to render strangely in different browsers. The following DOCTYPE is the one you use for HTML 4.01 Strict:

Select Code
1
2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

While recent Web browsers do a reasonably good job of rendering even the worst HTML, some errors are not always caught gracefully, making it extremely difficult to make your Website look the same for everyone. Validation is one of the simplest ways to check whether a page is built in accordance with Web standards, and provides one of the most reliable guarantee that it appears as you intended. If you code your HTML correctly, then you have a much greater chance that the Mac user using Safari is going to see the same thing the PC user using Internet Explorer is.

The link below is where you will go to validate your files (files do not need to be uploaded):

http://validator.w3.org/

The <html> Element

<html> begins and ends each and every web page. The HTML lang="en" attribute should be used to declare the language of a Web page. This is meant to assist search engines and browsers. Remember to close your HTML documents with the corresponding </html> tag at the bottom of the document.

Select Code
1
2
3
4
5
6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

</html>

The <head> Element

Tags placed within the head element are not displayed by web browsers. These tags include title and meta (style and link are also placed here, but will be discussed in the CSS tutorials).

Select Code
1
2
3
4
5
6
7
8
9
10

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

</head>

</html>

The <title> Tags

Web pages usually have a title that appears in the title bar that runs across the very top of the Web page. This title is created using the <title> tags. The tag content should pertain to the content on the Web page.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<title>My First Web Page!</title>

</head>

</html>

The <meta> Tags

Directly beneath the title element are the <meta> tags. The <meta> tag is an element that does not require a closing tag. The four meta elements you will always want to include is the character encoding, description, keywords and robots.

The character encoding meta tag defines the character set used within the Web page.

The text contained in the description meta tag is used by some search engines of your Web page in their results.

The keyword meta tag contains words a visitor would use to find the Web page. It is not used by all search engines.

The robots meta tag helps the search engines to index your site. It also tells the search engines what directories/files you do not want them to index. For example, you would not want the search engines to index the directory with all your images.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>

<title>My First Web Page</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Web site description.">
<meta name="keywords" content="keywords go here">
<meta name="robots" content="index,follow">

</head>

</html>

Along with the robots meta tag you have to create a "robots.txt" file. The first line includes all search engines, the second line disallows a directory, and the third line disallows a single file. Open a new file in your text editor and copy/paste or type the sample code below and edit it to your web site. Save it as "robots.txt" and upload it to your host.

Select Code
1
2
3

User-agent: *
Disallow: /images/
Disallow: /resume.htm

The <body> Tags

The body section contains almost all of the content that will be visible in the browser and is formatted using HTML code.

Put together everything you learned so far, and you should have something like this:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<title>My First Web Page!</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Web site description.">
<meta name="keywords" content="keywords go here">
<meta name="robots" content="index,follow">

</head>

<body>

<p>All your content goes in between the body tags.</p>

</body>

</html>

Do not go crazy with the title, meta description or meta keywords. Choose text/words that are specific to your site. Usually the same words are repeated within that page. Do not use the same word more than 3 times within your metas. Recommended character count for the title tag is 65-70, the description meta should be around 160 characters and the keywords meta should be around 250 characters.


Top

Leave a Reply