loading...

HTML5 – HTML5 Documents: Top-Level Document Definition

In this chapter, let’s continue by taking a look at the topmost level of HTML5, the <html> tag, which defines and contains your HTML5 document, the <head> tag, which defines how it is configured, and the <body> tag, which handles the contents. These are the highest-level tags in the HTML5 markup schema. All three tags need to be in your HTML5 document, in the proper order and used for the proper purposes.

I also go over the markup (coding) format and syntax for your HTML5 document level tags, and their optional parameter. We look at how to define your document type using a <!DOCTYPE> tag, and at the different types of HTML documents. We focus on HTML5 for this reference book, as you may have noticed, from the title, but I also cover older incarnations, such as HTML4 and XHTML for context sake.

The HTML5 Document Definition Tags

This chapter explains the tags used to define your HTML document type, document root, document header, and document content. We start with the first tag, the <!DOCTYPE doctype> declaration, which defines your document type, and then we progress downward to the tags that are nested inside of the <html> tag, including the <head> and <body> tags.

The !DOCTYPE Tag

: Defines HTML Document Type

The first tag in the HTML5 document is the <!DOCTYPE html> tag, which has no closing tag because it simply defines the version of HTML5 that you are using for your HTML document. You would think that it would be <!DOCTYPE html5>, but html actually means HTML5. Don’t ask me why— I do not know.

The following HTML5 markup structure is an example of a document declaration and nested top-level tags :

<!DOCTYPE html>                
   <html>
     <head>
             <!-- HTML5 Document Header Attributes (Tags) Go In Here -->
     </head>
     <body>
             <!-- HTML5 Document Body Content (Tags) Will Go In Here -->
     </body>
   </html>

Older HTML document types, such as HTML4 or XHTML 1.1, are declared with either “strict” or “transitional” document types. HTML5 has done away with the document type differences; therefore, it is much simpler. Let’s take a quick look at XHTML and HTML4 next, in case you have to write HTML for legacy (old) systems and clients running older operating systems and browsers.

The XHTML Document Types

: XHTML 1.0

XHTML, or Extensible HTML
, is an older and stricter type of HTML document definition that is based on XML. XHTML is the XML implementation of HTML. It is stricter because tags must be opened, closed, and nested in an orderly fashion so that the parser can correctly interpret them. The XHTML document type also requires the <!DOCTYPE> tag, whereas the HTML5 document type does not, so some HTML5 documents simply start with the <html> tag instead of the <!DOCTYPE html><html> tag sequence. All of the major HTML5 browsers correctly parse XHTML document types; however, you want to use HTML5 because of the superset of features and tags that are provided in it (as I’ll outline in this book). Since XHTML is still used in a wide range of document content and applications, I’ll cover it in this section so that you know how to declare XHTML document types, if you wish.

If you are using the older XHTML

document type for some reason, you declare the document type as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN                  
               http://www.w3org/TR/xhtml1/dtd/xhtml1-transitional.dtd">   <html>
     <head>
             <!-- XHTML Document Header Attributes (Tags) Go In Here -->
     </head>
     <body>
             <!-- XHTML Document Body Content (Tags) Will Go In Here -->
     </body>
   </html>

The “strict” XHTML
document type is less flexible. You should declare this document type using the following HTML syntax and markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN                  
               "http://www.w3org/TR/xhtml1/dtd/xhtml1-strict.dtd">              
   <html>
     <head>
             <!-- XHTML Document Header Attributes (Tags) Go In Here -->
     </head>
     <body>
             <!-- XHTML Document Body Content (Tags) Will Go In Here -->
     </body>
   </html>

The “frameset” XHTML document type allows you to define your HTML documents using discrete areas called frames. You should declare an XHTML frameset document type using the following HTML syntax and markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN                  
               "http://www.w3org/TR/xhtml1/dtd/xhtml1-frameset.dtd">   <html>
     <head>
             <!-- XHTML Document                                   Header Attributes (Tags) Go In Here -->
     </head>
     <body>
             <!-- XHTML Document Body Content (Tags) Will Go In Here -->
     </body>
   </html>

Frames are no longer recommended for use in HTML5. You can now use divisions with the <div> tag. Divisions can be used much like layers in Photoshop or GIMP. They are far more flexible and can be moved (animated).

Next, let’s take a look at the HTML 4.01 document type.

The HTML4 Document Types
: HTML 4.01

HTML4 was

released on December 18, 1997. HTML 4.01 was released on April 24, 1998. There were two major versions prior to HTML4: HTML 3.2 and the original HTML 2.0 specification. HTML4 added greater multimedia support, cascading style sheets, Java scripting languages, printing capabilities, and support for disabled users. It started internationalization (language) support as well. HTML4 conforms to the ISO 8879 SGML specification. HTML4 documents use a much more complex !DOCTYPE tag implementation, using SGML’s Document Type Definition (DTD) declaration syntax along with the repository URL reference.

If you are using the older HTML4 document type for some reason, you declare the document type as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN                  
                      "http://www.w3org/TR/html4/loose.dtd" >              
   <html>
     <head>
             <!-- HTML4 Document Header Attributes (Tags) Go In Here -->
     </head>
     <body>
             <!-- HTML4 Document Body Content (Tags) Will Go In Here -->
     </body>
   </html>

Transitional HTML 4.01 is more forgiving because it supports more tags, parameters, and syntax formats; whereas strict HTML is more like

XML or XHTML and has many more rules that need to be closely
followed. You declare a HTML4 document type as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN                  
                      "http://www.w3org/TR/html4/strict.dtd" >   <html>
     <head>
             <!-- HTML4 Document Header Attributes (Tags) Go In Here -->
     </head>
     <body>
             <!-- HTML4 Document Body Content (Tags) Will Go In Here -->
     </body>
   </html>

The HTML 4.01 frameset DTD or document type definition looks like the following <!DOCTYPE> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN                  
                      "http://www.w3org/TR/html4/frameset.dtd" >   <html>
     <head>
             <!-- HTML4 Document Header Attributes (Tags) Go In Here -->
     </head>
     <body>
             <!-- HTML4 Document Body Content (Tags) Will Go In Here -->
     </body>
   </html>

Again, frames is an outdated document design approach, so don’t design with it unless you absolutely have to on an HTML legacy

project. Next, let’s take a look at the <html> tag.

The HTML Tag

: Defining the Root of the Document

The <html> tag tells the browser (and now the OS) that this is an HTML document, especially in the absence of the <!DOCTYPE> tag that you frequently see in HTML5 markup. An <html> tag anchors (or roots) the document and contains all the other tags.

This is an example of the HTML tag with child tags inside it:

<html xmlns="http://www.w3.org/1999/xhtml">
       <head>
             <!-- HTML5 Document Header Attributes (Tags) Go In Here -->
       </head>
       <body>
             <!-- HTML5 Document Body Content (Tags) Will Go In Here -->
       </body>
</html>

Notice the xmlns parameter, which references the XML Naming Schema address and defaults to
www.w3.org/1999/xhtml
.

In HTML5 added a second new parameter for a manifest that allows developers to add a URL for a custom document cache location for off-line browsing. The following is an example (Replace the
www.apress.com
website with your own cache address location URL):

<html xmlns=http://www.w3.org/1999/xhtml manifest="http://www.apress.com">
       <head>
             <!-- HTML5 Document Header Attributes (Tags) Go In Here -->
       </head>
       <body>
             <!-- HTML5 Document Body Content (Tags) Will Go In Here -->
       </body>
</html>

Your default CSS3 settings for this HTML tag should look like the following CSS3 style sheet definition, used in most browser and operating system implementations:

html       { display:block; } <!-- Display content using a block format -->
html:focus { outline:none;  } <!-- Do not outline content when selected -->

Next, let’s look at

the <head> tag and learn how it allows you to set up and configure what your document can do.

The HEAD Tag: Configuring the HTML5 Document

The HTML5 <head> tag

contains over a half dozen child tags that are used to configure your HTML5 document and define what it can do and how it is found on the Internet. These child tags include the <title>, <style>, <script>, <meta>, <link>, <base>, and <noscript> tags. The <title> tag puts a name at the top of the browser, tab, and page. The <script> tag defines the JavaScript configuration. The <style> tag defines the style sheet (CSS3) configuration. The <link> tag links to external file resources. The <meta> tag allows you to add metadata. The <base> tag defines the default URL for all link targets in your HTML5 document. The <head>structure looks like this:

<html>
     <head>
           <title>
           <script>
           <style>
           <link>
           <meta>
           <base>
           <noscript>
     </head>
</html>

The <head> tag previously had a profile attribute, which specifies a URL to a document containing a set of rules for the <meta> tag content attributes. It is important to note that this particular parameter is not supported in HTML5, so I am not covering it in this book.

The <head> child tags are covered in their own chapters, so let’s look at the <body> tag next. Then we can move on

to some of the lower-level tags used in HTML5.

The BODY Tag: Containing the Document Content

The <body> tag contains most of the tags covered in this book. All six <body> tag attributes (parameters) that were supported in HTML4 and have been removed from HTML5 support, but I cover them in this section anyway,

for the sake of comprehensive coverage. An alink parameter is used with a color value to define the color of active links in the body of the document. The vlink parameter is used with a color value to define the color of visited links. Finally, the link parameter is used with a color value to define the color of links that have not been visited.

You can control background color with the bgcolor parameter. You can install a background image with the background parameter. Finally, you can specify the color for the text in an HTML4 document with a text parameter, which is used with a color value to define the color for content text in the body of your document. In HTML5, you use CSS3 to provide your body styling. We look at this a bit later on with the <style> tag and cascading style sheets.

Your default CSS3 settings for the <body> tag should look like the following CSS3 style sheet definition (in most browser and operating system implementations):

body       { display: block; margin: 8px; }
body:focus { outline:none; }

Most HTML5 documents use the basic <!DOCTYPE html> and <html>, <head>, and <body> tags without any parameters, other than class or id parameters (which are covered later on), like this basic HTML5 document with a TITLE, and P (paragraph) text installed in the <head> and <body> sections of the document:

<!DOCTYPE html>
   <html>
     <head>
             <title>Website Title Goes Here</title>
     </head>
     <body>
             <p>Website Text Paragraph Content.</p>
     </body>
   </html>

From here, we get

into some of the tags that you use to control your content and the way that your document is referenced on the Internet.

Summary

In this chapter, you learned about the top-level HTML5 document tags, including the <!DOCTYPE>, <HTML>, <HEAD>, and <BODY> tags. Notice that the tag names can be in lowercase or uppercase letters, so use whatever tag style you prefer for your markup.

In the next chapter, you start looking at the document tags inside the <HEAD> parent tag, which influences SEO, including the <title>, <meta>, and <base> tags, and learn how to use them to optimize the search engine configuration for your HTML5 document.

Comments are closed.

loading...