Head vs. Header --- A critical difference for modifying WordPress themes

(Reading time: 4 – 7 minutes)

Creating effective websites requires understanding a little bit about what goes on “under the hood.” For example, if you want to do the entirely reasonable modifications of adding a favicon, or changing the banner image for your website, you will need to know the correct incantations for making this webpage magic work.

It’s not difficult, but it can be confusing at times.

Consider the difference between the <head> element of the web page, and a “header” element of the web page design. These are two different things. The <head> element is part of every web page, and contains meta-information that isn’t displayed in the browser. Your readers never see this, but your browser and search engines do see it.

A “header” is a graphical element that’s part of the readable web page and is specified by the design of the web page. It’s displayed by the browser, and usually consists of information such as text and graphics that are common across your entire web site. Really understanding these concepts requires understanding just a little bit of HTML, and I’m going to draw a picture of what’s going on to make it easier for both of us.

<html> element (whole web page)

<head> element (not displayed)

<body> element (displayed)

displayed header content

displayed main content

displayed footer content

Graphical HTML elements

Take a look at the layout to the right.

The outer pink-colored box represents the entire web page, everything that is delivered from the web server and represented by the <html> element.

Contained with the <html> element are the <head> and <body> elements. These are “child” elements of <html>. Nothing in the <head> element is displayed directly within the web page, although the various subelements within the head element control favicon display, CSS and Javascript behavior. In a sense, the <head> element can be thought of as the place where the “document controls” live.

The <body> element contains one or more child elements that contain text and images. These child elements are commonly arranged as header content, main content and footer content. The header and footer content typically remains the same for all web pages on the website. For example, the banner above appears no matter which webpage is being viewed on Website In A Weekend, and the footer always contains the copyright and links to associated pages such as Privacy Policy, Terms and Conditions, etc.

What goes where?

The diagram now makes figuring out where to put things much easier.

favicons go into the <head> (light blue) element, using the code shown in the article “Adding favicon.ico to WordPress For Professional Appearance.”

Header images are added to the HTML code that controls the dispayed header content (light tan color). In WordPress, this HTML code is controlled by it’s CSS class which is named (surprise!) “header.” We’ll cover adding a header image to your WordPress blog in a future article, which requires modifying your CSS file. In the meantime, take some time to study this article, and compare the diagram above with the source code for this page. You can examine the source code using the keyboard shortcut “ctrl-u” in the Firefox, Safari and Chrome web browsers.

Simplied HTML code

Now all that was pretty straightforward… but there’s more…

…WordPress puts head and and header into file: header.php.

Here’s what header.php looks like in the theme installed on Katherine Kendall Salon & Spa:

<!-- Start of the "head" element, nothing in 
       here is displayed directly on the page. -->
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
	<style type="text/css" media="screen">
		@import url( <?php bloginfo('stylesheet_url'); ?> );
	</style>
 
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />
 
        <link rel="shortcut icon" href="/favicon1.bmp" type="image/x-icon" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>
 
<body>
<!-- Here's where the top of the web page is 
built by WordPress.  You can find explanations 
of functions like "bloginfo" on
http://codex.wordpress.org/ -->
<div id="header">
	<div class="img1"><div class="img2">
		<h1><a href="<?php bloginfo('url'); ?>/" target="_self"><?php bloginfo('name'); ?></a></h1>
		<h4><?php bloginfo('description'); ?></h4>
		<div class="search">
			<?php include (TEMPLATEPATH . '/searchform.php'); ?>
		</div>
		<div class="clear"></div>
	</div></div>
</div>
<!-- end display header, posts and pages follow -->

Website In A Weekend runs the Thesis theme, which has it’s own “hooks.” In Thesis, the architecture of header.php is the same, but the coding is more difficult to understand without understanding how Thesis does it’s magic.

[Update 12/24/2009: Here's an excellent article on the head element from Sirius Graphix: "html: keep a good head on your shoulders."]

[Update 12/31/2009: Another superb article from Sirius Graphix: html: getting inside your head.

Any questions? Drop Dr WordPress an email!

Comments

Geng Gao says:

February 4, 2010 at 7:52 pm

I believe there is a <header> element in HTML5.
.-= Geng Gao´s last blog ..Photoshop HDR Photography Tutorial =-.

- Dave Doolin says:
  
  August 16, 2010 at 2:24 pm
  
  I believe you’re right. There’s a few other elements worth discussing, all in good time.
  Dave Doolin´s last post ..Blog Post Engineering 072 ready to roll
  
Ralph says:

August 16, 2010 at 1:39 pm

Dave,
You have these outrageous (I am really into outrageous these days – I got it from Mars) chunks of information scattered around. I really appreciate rubbing my nose in them because 1. It would never occur to me to look for them and 2. I tend to fire first and fix later. I am on the verge of setting up a business site perhaps starting with the new WP theme and seeing what I can do with it. I know I need to know a bit more about the code. Maybe I can handle the bitesized morsels.
Ralph´s last post ..Outrageous retirement wishes- Where do you want to live

- Dave Doolin says:
  
  August 16, 2010 at 2:26 pm
  
  Ralph, once you get the nag of it, it’s mostly common sense. But it can take a while to get the hang of it.
  
  I always recommend someone build a simple website from scratch, just so they understand a little about what’s going on.
  Dave Doolin´s last post ..How to be a six-brained blogger