XHTML 5 Reference

go to previous section go to next section


The HTML 5 Head Block

Here we look at the tags you are likely to find inside of the <head> </head> container in the web page.

The TITLE tag

The document title is contained between the following two tags: <title> </title>. This title does not actually appear on your document but is displayed by the browser in the title bar of your window and is also used by search engines to identify the page.

There is no reason for including any attributes on the title tag.

META Commands

These commands provide more information about your document which is used by some search engines. The information (eg. copyright notice) may also be useful if people browse the source code of your document. The following are some of the meta commands that you might use:

<meta name="description" content=" "/>

A short description of your site that will be displayed by search engines that are not intelligent enough to build a description themselves from the page content.

<meta name="keywords" content=" "/>

A list of keywords that will be ignored unless you build your own site search processing to use it.

<meta name="copyright" content=" "/>

A copyright notice.

Other named meta tags can be included for special purposes but unless your site makes use of them itself they will not serve any useful purpose. Meta tags using http-equiv instead of name simply duplicate functionality better handled on the server.

Note that leaving a space before the / in self closing tags was only needed in Netscape 4 and earlier to be able to treat the page as HTML. XHTML does not need a space there.

Scripts

Scripts placed in the head section of your document will load before your page is displayed. Any scripts that need the page to load first (almost all of them) should be placed at the bottom of the body instead.

The format for the script command is:

<script type="application/javascript" src=" ">
</script>

The 'type' identifies the language that the script is written in (in this example JavaScript) and the 'src' identifies the file that contains your script source. Note that the long deprecated 'text/javascript' was only required by IE8 and earlier that do not support XHTML and so there is no reason for using it with XHTML. The type can be omitted if the default types for scripts is set to 'application/javascript' on the server.

In practice the only script that should go in the head is one that updates the html tag to indicate what JavaScript is supported so that the CSS can style the page differently based on that support. All other scripts should go immediately before the </body> tag.

The simplest version of this script would be:

document.getElementsByTagName('html')[0].class += ' js';

Modernizr is a more advanced alternative that adds lots of classes to the html tag depending on what JavaScript the browser supports.

Should it be necessary to include the JavaScript within the XHTML itself (not ideal) then the JavaScript needs to be wrapped inside of a CDATA tag.

<script type="application/javascript">
<![CDATA[
document.getElementsByTagName('html')[0].class += ' js';
]]>
</script>

Note that the CDATA tag must not be commented out in XHTML.

Style sheets

You can link to an external style sheet with the following:

<link rel="stylesheet" href="http://www.yoursite/style.css" type="text/css"/>

The rel attribute identifies that the file this link refers to is a stylesheet. The href attribute identifies the file containing the styles, the type identifies that the content of the file is a stylesheet (this can be omitted if the server is set to treat .css files as stylesheets).

An optional media attribute can define when the styles are to apply (although this is more flexibly applied inside the stylesheet itself).

Should it be necessary to include the CSS within the XHTML itself (not ideal) then the CSS needs to be wrapped inside of a CDATA tag (the same as JavaScript and any non-HTML needs to be wrapped in order that it not be parsed as XHTML and style tags need to be used instead of a link tag.

<style type="text/css">
<![CDATA[
footer {backgroundColor : #009;}
]]>
</style>

go to previous section go to next section

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate