The VERY Basic HTML Structure – The Head Section
February 24, 2011
Now that we’ve explored the scaffold that holds it all up, let’s look at what goes inside the Head Section of an HTML page. So far, we’ve put together the doctype and the outlines for the html, head, and body section. The next step is to add what belongs inside the head section:
The Charset
The charset (character set) lets the browser know how to read and display the characters (letters, numbers, symbols) that are used in our HTML page. There are a great variety, depending on the type of letters (think Hebrew, Russian, Japanese, for example). It’s a science all on itself, but since we want to build a website and not study "The Rise and Fall of the Document Character Set" or "How Young ISO Explores the World", using Western characters and symbols, we’re usually fine using a universal charset:
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
Note how this line begins with the word ‘meta’. Meta tags, part of the head section, will be discussed in more detail later, but since the determination of the proper charset is important to the browser, we’ll feed it this bit of info right away.
The Title Tag
This tag is very important. It’s what people see on the very top of their browser window. It can provide some relevant information about the webpage or website. It’s also very helpful for search engines. On a website, it’s good practice to give each page a different, page-relative title. For this purpose, we’ll stick with
<title>Basic HTML Structure - Head Section. How-to-Build-Websites Tutorial</title> |
Meta Tags
People viewing your website will not see if you have meta tags or what’s in them. They are important none-the-less, as they provide additional information to the browsers – and some of them can actually influence what appears on the monitor. There is a long laundry list of different meta tags available, but for the purpose of this tutorial, we’ll stick the most basic, commonly used ones.
<meta name="description" content="Give a brief description about the content of your page - this will show in search results."> <meta name="keywords" content="Provide relevant keywords to help search engines find your site."> <meta name="copyright" content="Pretty self-explanatory - here, I'd write: www.killersites.com"> <meta name="author" content=" Andrea Barnett for www.killersites / www.how-to-build-websites.com"> <meta name="ROBOTS" content="index, follow"> This tells the spiders to go ahead and index the page and follow its links. Good for search engines. If you don't want to be found, use this instead: <meta name="ROBOTS" content="noindex, nofollow"> |
Link to External Stylesheet
An external stylesheet is part of a well-designed website. Every page links to the same set of layout and style information, so formatting and any changes can be done for your entire site by changing just one document. The finer details of this, too, are a whole different lesson, but for the purpose of explaining the basic HTML document structure, just know that the link to your external stylesheet belongs inside the head section of the html document:
<link rel="stylesheet" type="text/css" href="external-stylesheet.css"> |
Putting it all together, our code now looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Basic HTML Structure - Head Section. How-to-Build-Websites Tutorial</title> <meta name="keywords" content="Provide relevant keywords to help search engines find your site."> <meta name="copyright" content="Pretty self-explanatory - here, I'd write: www.killersites.com"> <meta name="author" content=" Andrea Barnett for www.killersites | www.how-to-build-websites.com"> <meta name="ROBOTS" content="index, follow"> <link rel="stylesheet" type="text/css" href="external-stylesheet.css"> <head> </head> <body> </body> </html> |
And we still see ABSOLUTLEY NOTHING.
Just look to the top of your browser, and note the how the title tag is displayed – and compare it to our ABSOLUTELY NOTHING – PART I, where we did not have a title tag, yet.
