An example of a faviconEach of the tags and terms presented in this tutorial are all either placed within the <head> tags or they are used as the very first statement on Web page.

DOCTYPE

The DOCTYPEDOCTYPE

Document Type Declaration - specifies which rules for browsers to use to render the page content correctly. DOCTYPE is capitalized; this is a rare exception, because DOCTYPE is not a tag. The current HTML standard calls for tags to be in lower case. declaration should be the very first statement of an HTML page, even before the <html> tag. DOCTYPE refers to a Document Type Definition (DTD). The DTD identifies the particular version of HTML being used. It contains all the HTML elements and attributes and specifies the rules for the markup language so that browsers can render the page content correctly. This is important because HTML has undergone several major revisions, older tags have been deprecatedDEPRECATED

The term deprecated refers to older HTML tags and attributes that have been superseded by newer and often more flexible alternatives. New strict DOCTYPES will not recognize deprecated tags like <font> or <center>., and newer tags and features and rules have been introduced. However, the DOCTYPE declaration is not an HTML tag; it is merely an instruction to the web browser indicating what version of HTML the Web page is written in. If you do not declare your DOCTYPE there is a good chance your page will display inconsistently in different browsers.

There are a number of different DOCTYPES that can be used to declare the specific version of HTML or XHTML (Extensible HyperText Markup Language) used on a Web page. Below is the DOCTYPE and character set declaration used for this Web page. It uses the newer and much shorter HTML5 DOCTYPE declaration. It also sets the page for the utf-8 encoding scheme that can represent every character in the Unicode character set. Unicode provides a unique number for every character, in every language so that the page can consistently and accurately display English, or Greek, or Arabic or Chinese... on the same page. (See below for more on Unicode.)

You can simply copy the skeleton file below to start a newer HTML5 Web page.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 DOCTYPE</title>
</head>

<body>Content Goes Here
</body>
</html>

XHTMLXHTML

XHTML refers to eXtensible HyperText Markup Language. Extensible basically means extended. Among other things, it allows HTML to be extended to represent custom data structures, for instance:
<?xml version="1.0" encoding="utf-8" ?>
<employee>
   <lastname>Winters</lastname>
   <firstname>Floyd</firstname>
</employee>
  documents had to be "Well-Formed" to conform to stricter standards such as:

Below is the DOCTYPE and character set declaration used for an XHTML 1.0 Transitional page, which conforms to the well-formed XHTML rules shown above, but still allows some HTML presentational attributes in the page itself. XHTML is being replaced by HTML5.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHTML 1.0 Transitional</title>
</head>

<body>Content Goes Here
</body>
</html>

Below is the DOCTYPE and character set declaration for HTML 4.01 Strict which does not permit older deprecated tags or target="_blank".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML 4.01 Strict</title>
</head>

<body>Content Goes Here
</body>
</html>

Some other DOCTYPEs are HTML 4.01 Transitional (includes deprecated tags like <font> and <center>, XHTML 1.0 Strict, XHTML 1.1, XHTML Mobile 1.0, and HTML 5.

For more detail and a wonderful summary on DOCTYE see the following w3Schools link:
http://www.w3schools.com/tags/tag_doctype.asp

Character Set Declaration and Unicode

Also included with most DOCTYPE declarations is a character set declarationCHARACTER SETS

The character set declaration tells the browser how to display the alpha-numeric characters on the screen, and which characters it can display. Every letter and special symbol on the keyboard has a unique numeric value associated with it. The International Standards Organization (ISO) Character Sets define the standard character-sets for international alphabets. , indicating whether to use an older character set format, the standard Unicode, or another format. The most commonly used encodings are UTF-8UTF-8

UTF-8 (8-bit Unicode Transformation Format) The first 128 characters of the Unicode character set correspond directly to the conventional ASCII (American Standard Code for Information Interchange) encoding used on PCs to represent every key on the PC keyboard. and UTF-16UTF-16

UTF-16 (16-bit Unicode Transformation Format) is capable of encoding over a million characters so that it can accommodate all the written languages of the world, so that even every character of the Chinese alphabet can be displayed on a Web page. (Unicode Transformation Format). Unicode associates a unique number for every alpha-numeric character, which is basically all computers really understand – numbers. Every letter and special symbol on the keyboard has a unique numeric value associated with it. For instance an A is a 41 in hex (base 16) and a 65 in decimal, a B is a 42 in hex and a 66 in decimal… If you were to type &#65; into the code section of the body of a Web page it would display the letter A. Typing &#169; will display the copyright symbol ©.

HTML uses the following short line of code just after the opening <head> tag to declare a page's character set encoding scheme:
<meta charset="utf-8">

Meta tags

MetadataMetadata

As a side comment, the metadata or background information that the National Security Agency collects can contain phone numbers, the time and length of calls, the caller location, the recipient, what type of phone was being used and even which cellular towers were used to handle the call.

In addition to other background information, web page metadata typically contains file names and their relationship to other files. is a term for the descriptive information embedded inside a file or folder or an image. Today it is very common to have metadata properties saved with each digital photo or mp3 audio file indicating such things as the file creation date, an image's file size in pixels, or a audio file length in minutes and seconds, the author... When you create a Web site in Dreamweaver or Expression Web, metadata is also stored in hidden files which keep track of all the site's file names and all the hyperlinks within each file. This can be very helpful if you change an image name or a file name, or if you move the file to another folder. When such a change is made, both Dreamweaver and Expression Web will alert you that the filename has been changed and ask you if you want the program to update all the references and links to that file in the entire site. This use of change-tracking metadata is very convenient. Metadata is typically stored in small files located in hidden folders with such names as _vti_cnf and _vti_pvt.

MetaMETA

The term META meta comes from Greek and basically means beyond or about. Meta data is background or concealed data about something, above and beyond what appears on the surface. tags contain descriptive information embedded inside a Web page that can identify the author, provide a written descriptive summary of the page, and contain keywords found on the page. Meta tags are placed within the <head> tags. Although the meta tag content does not display to the screen, the meta name="description" is used by many search engines to display a short page summary when search results are presented. It is wise to keep your meta description to less than 150 characters, so that it is not cut off in the search results. Keywords are used by some search engines to find and rank pages, but they are not as important as they used to be.
For instance, the meta tags for this page are:
<meta name="author" content="Floyd Jay Winters">
<meta name="description" content="Meta tags, Doc types and favicons by Professor Floyd Winters">
<meta name="keywords" content="Meta tags, Doc types, favicon, Intro to Notepad, HTML, Notepad HTML tutorial">

Practice adding Meta Keywords and a Meta Description to a practice Web page. Preview your page and notice that the meta tag information does not display to the screen.

Review Assignment Learning Project: 10 Practice Review Steps

Return to Menu   Top   Valid XHTML 1.0 Transitional