Layout HEAD Section

There are several items you will need to include in the HEAD section of your HTML page in order for the page to run correctly. You can edit your finished design template at the end to add the dynamic content found below.

1) Start with the Appropriate Document Type

All HTML pages will start with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

XHTML pages will start with:

<!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" xml:lang="en">
<head>

2) Include Dynamic Meta Tags

This include will include standard metatags on the page. Keywords, description, and reply-to are dynamic.

<cfinclude template="#include#/metaTags.cfm">

Sample Output:

3) Include Dynamic Title Tag

The following snippet of code will set your web page title dynamically to match category, page, product or feature name/title. Proper web page titles are VERY important for search engine placement and ranking! It will also include other code required by the site.

<cfinclude template="#include#/titleTag.cfm">

Output Sample:

<title>Web Page Title</title>

4) Add Links to Javascript, Stylesheet, RSS and Favicon

Add links to the stylesheets used in your site. You'll probably have at least 2 stylesheets but may have more. Your site design may also requre JavaScript which should be linked in this area as well. Favicons and RSS links should also go here.

<script src="javascript/filename.js" type="text/javascript"></script>

You may need to link to system style sheets or theme style sheets. You'll need to enclose any links to theme style sheets with cfoutput tags:

<cfoutput>
    <link rel="stylesheet" type="text/css" href="css/screen_html.css" media="screen,projection" />
    <link rel="stylesheet" type="text/css" href="css/screen_cms.css" media="screen,projection" />
    <link rel="stylesheet" type="text/css" href="#theme#/css/screen_layout.css" media="screen,projection" />
    <link rel="stylesheet" type="text/css" href=#theme#/css/screen_navigation.css" media="screen,projection" />
    <link rel="stylesheet" type="text/css" href="#theme#/css/screen_skin.css" media="screen,projection" />
    <link rel="stylesheet" href="" media="print" type="text/css" />
    </cfoutput>

<link rel="alternate" href="" title="RSS Feed" type="application/rss+xml" />

<link rel="shortcut icon" href="" />

</head>