Home » Tutorials » HTML » Head Tag

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



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Head Tag". After Hours Programming. Accessed on March 18, 2024. https://www.afterhoursprogramming.com/tutorial/html/head-tag/.

  • Stewart, Suzy. "Head Tag". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/html/head-tag/. Accessed 18 March, 2024.

  • Stewart, Suzy. Head Tag. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/html/head-tag/.



13 thoughts on “Head Tag”

  1. 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.

  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. 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"/>].

Leave a Comment

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