Head Tag

The head tag in HTML is the way to tell the browser a few things before it starts rendering the page. You can put your CSS, JavaScript, Meta information, and more in this tag. Like I said earlier, the head tag will not actually display any content on the page itself. However, you can place content between the <title> </title> tags that will show content in the page tab in the browser. If you look on the tab now you can see that I have put content in the title tag.

Example
<html>
    <head>
        <title>HTML Head Tag</title>
    </head>
    <body>
    </body>
</html>

Boom! You just set a page title. Never forget to set the page title! It helps users who have multiple tabs open to understand what your tab is all about. It also is the displayed text in the search results. So, if you want people to consider clicking your link in the search results, you must have a title tag. How many links do you click on without a title tag?

Meta Tags

Aside from the title in the head tag, HTML pages have the ability to use Meta tags. While not explicit to the user, search engines crawl through these Meta tags to help display the best information possible for the user. Quite a few Meta tags exist, but only a few are commonly used:

  • <meta name=”description” content=” A description about your HTML page goes here”/>
  • <meta name=”keywords” content=” Keywords, about, your, content, goes here”/> (Notice the commas to separate keywords.)
  • <meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />

Now, I said at the top of this page that you can embed CSS and JavaScript in the head tags (not in the title tags), but we will get to those in their separate tutorial categories. Well, that pretty much concludes foundation of the head tag.

References

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Facebook
Share on StumbleUpon
StumbleUpon
Digg this
Digg
Tweet about this on Twitter
Twitter
Share on Reddit
Reddit

Leave a Comment

  1. Well, thank you very much for creating afterhoursprogramming.com. It is exactly what I was looking for… awesome! I’ve just finished the HTML tutorial and now I’m reviewing again its content. While reading, I’ve noticed some mistypings and missing text. I decided to contribute to your efforts to provide free tutorials by commenting and mentioning the mistakes, so that you can correct them. It’s the least I can do to return the favour and the whole process will earn me the "Commentator" badge ;). So… in this page: (1) [It also is the displayed in the search results.] you probably write smth like: [It also is the displayed text in the search results.] or [It is also displayed in the search results.] (2) [<meta name="description" content=" A description about your HTML page goes"/>] here you missed the word "here" 😛 at the end, thus it should be: [<meta name="description" content=" A description about your HTML page goes here"/>].

  2. I think the explanations of what is happening are FAR better than codeacademy but the Test Your Code option is nothing compared to the hands on experience codeacademy provides.

  3. didn’t really understand how the test your code works.
    It seems no matter what I write I get green "No errors!" tag and progress points.

  4. This is a good instructional course, with good explanations. But I hope there is more hands on exercises and problem solving tutorials. I am looking for something more in depth. Not just a run down. I hope this site will provide that. As I am trying to teach myself. For free that is.

  5. Meta tags helps a lot because I can write about my web pages not only once but i can give a lot of informations

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.