HTML Document Pattern

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

HTML Document Design Pattern

HTML design pattern for a web document

The information in an HTML Document consists of text and Hypertext Markup Language tags. A collection of web pages and other related resources such as images for a web site can be stored in files on a server and delivered over a local network or the Internet. Dynamic HTML content can be created on demand by programs or scripts, using data from back end databases in some cases. Languages that can be used to generate HTML documents include:

Even when program is being used to generate a document, the output of the program should be valid HTML document. Here are some good HTML references:

HTML Document Design Pattern Code

HTML Code for a Web Document

<?xml version="1.0" encoding="UTF-8"?>
... see Web Site Template Design Pattern ...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title><#Your Title#></title>
   </head>
   <body>
      ... see other HTML Design Patterns ...
   </body>
</html>

When creating HTML code, it should be kept in mind that the document may be processed in any one of three different ways depending on the type of browser or parser reading the code:

as legacy HTML;
as xHTML, the XML serialization of HTML that is compatible with the 2000-2010 Recommendations from the W3C HTML Working Group and is used by most modern browsers such as Firefox, Opera, Chrome and Safari; or
as pure XML (for example, by a search engine looking for a Breadcrumb Trail).

The <?xml> declaration is used by xHTML and pure XML parsers to determine what encoding it to be used to read the document. The <!DOCTYPE html> declaration indicates that the document is using HTML 5 or later HTML code. All HTML elements must be allocated in the http://www.w3.org/1999/xhtml namespace is assigned to all HTML elements, which is done automatically in legacy HTML parsers but for all other types of parsers the xmlns attribute on the <html> tag is explicitly required.

The starting <head> tag and ending </head> tag define the head section of the HTML document. The <title> tag is a required element in the head section.

The starting <body> tag and ending </body> tag define the body section of the HTML document. The HTML code for the visible content of the document goes inside that.

HTML Document Examples

Examples of web documents in HTML

HTML document without a web site template

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Example Only</title>
   </head>
   <body>
      <p>Hello World!</p>
   </body>
</html>

The <html> tag should always include an xmlns attribute, which explicitly specifies the namespace of the HTML elements in the document. See the HTML Namespaces for more information.

Since there is no navigation or other hypertext links in this example, it would essentially be just a single-page web site.

HTML document with a web site template

In this example, navigation links could be included in the site template, so it could be the beginning of a full-fledged web site. The only change to the code from the example above is the addition of the <?xml-stylesheet?> instruction between the <?xml> declaration and the <!DOCTYPE html> declaration.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/site-template.xsl"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Example Only</title>
   </head>
   <body>
      <p>Hello World!</p>
   </body>
</html>

The style sheet with the site template is in a separate file, located in the document root directory (/) of the server and named site-template.xsl in this case. See the Web Site Template Design Pattern for details on how to create the template.

Valid HTML 5