The Basics of Head Content

[ LiB ]

Head content might not be glamorous, but it's also not difficult to understand and is extremely useful. This section looks at how head content is coded in HTML and interpreted by browsers, search engines, and so on. It also covers the interface for working with head content in Dreamweaver.

How Head Content Works in the Browser

A standard HTML page contains a head tag and a body tag. The body contains all the page content that will actually display in the browser window. The head contains a variety of information that won't display (at least, not directly), although it can be accessed to determine how the page will be handled. Some head content is accessed by the browser; some is accessed by other programs, such as server software, search engines, and validation software; and some might not be accessed at all, except by humans who might view or edit the code. The W3C specifies several elements that a well- formed head section could use. Unfortunately, the browsers have not yet fully implemented them all, so you can't take full advantage of the head.

Table 7.1 lists the standard head elements, along with a brief description of each.

Table 7.1. Standard HTML < head > Elements

Tag	Purpose	Browser Support	Example(s)
title	Contains the page title, to be displayed in the browser window title bar and user bookmark menu	Yes	<title>Webley's Web Widgets</title>
link	Specifies a relationship between the current document and another document	For use only with style sheets	<link rel="stylesheet" href="widgetstyles.css" type="text/css">
base	Specifies a URL and/or target, to which all document links will be relative	Yes	<base href="http:// www.webwidgets.com/"> <base target="_top">
meta	Acts as a generic tag for adding miscellaneous information to the document (for example, keywords and character encoding)	Yes	<meta name="generator" content="Dreamweaver"> <meta http-equiv= "Content-Type" content="text/html; charset=iso-8859-1">
script	Encloses JavaScript or other script statements for the browser to execute, or links to an external script file	Yes	<script language= "JavaScript"> function helloWorld() { window.alert ("Hello, world!"); } </script>
style	Encloses CSS style sheet information to affect the display of the current document	Yes	<style type="text/css"> a { font-weight: bold; text-decoration: none } </style>

How Head Content Works in Dreamweaver

Dreamweaver provides two main interfaces for dealing with head content: the menu of Head objects in the HTML category of the Insert bar, for adding content to the head; and the Head Content view option, along with Property Inspectors for each kind of content, for examining and editing head content.

Viewing and Editing Head Content

Head content shows up in Design view as a bar across the top of the Document window, showing an icon for each element present in the document head (see Figure 7.1). Choose View Options > Head Content to toggle the head content display on and off. (The View Options menu can be accessed from the Document toolbar or from the View menu.) Note that Head Content won't show up as a view option unless you're in Design view or Code and Design view.

Figure 7.1. Displaying head content as icons in Design view.

To examine or edit a head element, click its icon in the display bar and use the Property Inspector to view and change the element's attributes.

You can also rearrange head elements by dragging their icons around in the head content bar. The order of elements in the head usually doesn't matter, though, because each element serves a different function and is called on when needed, regardless of position.

Adding Head Content

Dreamweaver inserts some head elements ( title , script , and style , for instance) automatically as you create and edit pages. Other commonly used head elements have corresponding objects in the HTML category of the Insert bar (see Figure 7.2). If you want to add an element that isn't in the Insert bar, you must enter it in Code view, either by typing it yourself or using the Tag Chooser.

Figure 7.2. Head elements in the Insert bar.

You can also increase your <head> content options by searching the Macromedia Exchange for Dreamweaver for an extension that does what you want.

You can insert head elements from either Design or Code views, but with a few important differences. If you're working in Design view, placement of the insertion point isn't crucial when working with head content. No matter what element in the <body> you might have selected when you insert, Dreamweaver knows to put head content in the head. If you have one of the icons in the head element display selected when you insert, Dreamweaver places the new element immediately after the selected element. If no head elements are selected when you insert, Dreamweaver inserts the new head element at the end of all other head content.

If you're working in Code view when you insert a Head object, the code for the object is inserted wherever the insertion point iseven if that means inserting it outside the <head> section entirely, or even inserting it within another HTML tag. (Obviously, unless you know your way around HTML tag syntax, it's safer to use Design view for adding your Head objects.)

If you like working in Code and Design view, remember that either the Design or the Code portion of the Document window must always have focus. If you insert Head objects while the Code portion has focus, your insertion point must be in a proper location within the <head> tags for the object to be correctly inserted.

[ LiB ]