html tutorial, internet tutorials

  Lesson 3: The HTML HEAD Element  

    The TITLE Element    

The least thing you must include in the HEAD section of all your webpages in order to write valid HMTL documents is the TITLE element. The title of a webpage appears in your browser´s title bar when you view the page. The screenshot below shows you the title of this webpage:

Search engines like Google and Yahoo also use the content of the TITLE element as the title for your webpage´s search engine listing, so it´s a really important element inside the head section of a webpage. Watch the video to learn how to add a title to your first webpage and to see how it looks like in your browser.

<title> My first webpage </title>

video
Video button not working ? Click Here



    The META Element    

The META element is used for a couple of different functions inside the HEAD section. It´s the first empty element you are learning and as you already know by now, this means that the META element consists only of an opening tag.

The most important use for this element is to give the search engines some basic information about your HTML document such as the most important keywords that appear inside the document and a short description of the document´s content.

META tags use different attributes to specify the function for which each meta element is used. For example: to tell the search engines about important keywords inside your document, you would use the attribute name with the value keywords to define the function of this meta tag and also a second attribute content whose value is a list of comma-separated keywords (or keyphrases) - like this:

<meta name="keywords" content="keyword1, keyword2, ...">

For a short description about the document, you would use description as value for the name attribute and a short text for the value of the content attribute - like this:

<meta name="description" content="This webpage is about bla bla bla ...">

Here´s the raw HTML code for both meta tags again, so you can easily copy and paste it into your first webpage and then add the content you want - the video shows you how, using a practical example and also shows you where the content of these meta tags appears in the search engine listings.

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


video
Video button not working ? Click Here

You´ve probably seen it a thousand times, but now you know where they come from: titles and descriptions of webpages listed in the search engine result pages. Google for example uses the content of a webpage´s title tag as title in the search result page and many times it also uses the content of meta description tags as the description for a webpage (especially when the description contains the searched for keywords). The screenshot below - part of the search results for "online games" - illustrates this again.

  The character encoding of your webpages  

Another function of the meta element is to tell a browser which character set you are using for the given document. Although not necessarily required, it makes quite sense to include it inside the head section of all your webpages, here´s the reason why:

If you do not include this tag into the head section of your webpages, a browser would use the user´s local default character set to display the content of your webpage. This doesn´t make a difference as long as your default character set is the same as your website visitor´s local default character set.

For example: The character set ISO-8859-1 (Latin-1) contains the characters for all american and most western european languages. Hence, a webpage written in the USA would be correctly displayed in North and South America and most western european countries, but visitors from the rest of the world would see pretty much garbage, as their default local character sets are different (Greece for example has ISO-8859-7).

So if you want the content of your webpages to be displayed correctly all over the world, you should tell a browser which character set you are using. To do this, simply add the following meta tag to the head section of your webpage.

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

As said, the character set in the above meta tag applies to american and western european languages, so if your native language is different and you want to build websites in your native language, then you would replace "ISO-8859-1" with your local character set. You can find the one for your language at http://www.iana.org/assignments/character-sets


That´s all you need to know for now about the HEAD section. In the next lesson we´re going to start adding content to your first webpage. You might have already noticed that it´s going to become time consuming if you continue building webpages with a text editor. To see the changes you make to your documents you´d always have to save them first and then (re)load them in your browser.

That´s why I´ll continue this tutorial using the HTML editor 1stPage2000. Don´t worry - you´ll get used to this tool very quickly and I´ll show you the most important functions and options in the coming lessons. It´s easy and it will save you a lot of time.


previous lesson top of page next lesson


    Web Design

  • Design and market your own professional-looking website with easy-to-use tools.

  The Lessons  

Introduction
Skills & Tools
HTML Basics
The Head Section
The Body Section
Images
Anchors & Links
Lists
Tables
Font Styles
Cascading Style Sheets
Website Layout
Domainname Registration
Website Logos & Buttons
Main Webpages
Legal Documents
Web Hosting Providers
Publishing Your Website

Editing Images


Glossary

FAQ / Support

Resources


Cheap Website Hosting
DailyRazor offers a full featured hosting plan for only $ 1.66 per month. Best choice for people on a low budget for hosting one website.

Multiple Site Hosting
Some webhosts allow you to host several different websites under one hosting account. This makes your hosting costs per site very cheap. My favorite webhosts:
Bluehost
Hostgator
Lunarpages

CSS Tutorial
"Styling with CSS" is a comprehensive and easy guide to web design with CSS for beginners. Highly recommended book that should be on your shelf.
Buy it from Amazon.

Home   :::    Contact   :::    Advertise   :::    Submit Tutorials   :::    Links   :::    Sitemap
Terms of Use, Disclaimers, Privacy Policy
© 2005-2009 EASYWEBTUTORIALS.COM
Page copy protected against web site content infringement by Copyscape