Understanding the Head Tag: A Beginner’s Guide to HTML

The head tag is one of the most underutilized and misunderstood elements in HTML. Many beginners struggle to grasp its purpose or find ways to use it effectively. To understand the head tag, you first need to understand what a tag is, and how it relates to the document object model (DOM) and document structure. Tags are containers used to group content in an HTML document — they have no meaning beyond that. They are not visible on the final website, but they help the browser read, understand and process the content more efficiently. There are six main types of tags: head> , title> , meta> , link> , script> and style> . Each has a specific role. Understanding them will help you use them more effectively in your projects going forward. Let’s take a look at each individually…Keep reading to learn more! END

The Head Tag

The head tag is essentially the parent container for all of the other elements. Its main function is to tell the browser what other resources (like CSS, JavaScript and more) are needed to render the page correctly. It is also used to specify the page title, and to add information about the page author. The order in which you add content to the head tag is important, as it helps the browser to render your page more quickly. You should add your CSS at the top, followed by your JavaScript. If you’re using a CDN to host your images and/or fonts, you should include them before your other resources (using the async attribute to prioritize them even further).

Understanding the HTML Document Object Model (DOM)

The Document Object Model (DOM) is a hierarchical representation of all the elements in a web document. It is often visualized as a tree diagram, with nodes (or leaves) representing the different elements, and branches linking these together. Each element in an HTML document has an identifier (or “selector”), which is used to select it for styling or scripting purposes. The DOM allows you to access these elements and their properties directly, which is useful for manipulating the document’s contents programmatically.

The head> is Where You Add Your CSS and Scripts

The head> tag is where you should include your stylesheets and scripts, and it should come before the body> tag. The head> tag contains other elements that are used to describe the document; including the title, meta, link, and script tags. The head> tag is often used incorrectly, and many beginners do not understand why it is important to use it correctly. The head> and body> tags are the only two tags that can have multiple elements within them. All other tags in the body> section should be used only once. Using multiple elements in the head> section can help to improve the speed of your website. This is because it allows the browser to start downloading and parsing the CSS and JavaScript earlier.

The title> Tag

The title> tag is used to specify the page title, which is used as the text that appears as a clickable “snippet” in search engine results pages (SERPs). The title> tag should appear once, and only once, in the head> section. It should be concise and descriptive, using no more than 70 characters (although it is recommended you keep it under 50 characters). Since the title> tag is visible to both humans and search engines, it is important to use it effectively. If you change the page title, you should also change the title> tag to reflect this change.

The meta> Tag

The meta> tag is used to specify metadata about the page. It is often used to specify the page’s description (used by Google as a short summary of the page), language, author, and any related links. The meta> tag can be used as many times as you like, but most people only use it once. It can be used to specify any number of things, but the most common use is to specify the page description. This is what shows up in the SERPs as a short summary of the page.

The link> Tag

The link> tag is used to specify the URL of any linked resources; such as CSS and JavaScript files, images, and more. If you are linking to another website, you should use the link rel=”canonical”> tag to indicate which version of the URL you prefer to be linked. This can help to prevent Google from penalizing you for duplicate content.

The script> Tag

The script> tag is used to specify any scripts that need to be loaded either before or after the rest of the page content. There are two main types of scripts that you would include in the head> section: Initialization scripts (e.g., jQuery) are loaded before the page content. They are used to set up any variables or functions that will be used in other elements (e.g., body>). Loading scripts at the end of the page is a best practice for performance reasons. Doing so allows the browser to render the page as quickly as possible, and then load the scripts afterwards.

Bottom line

The head> tag is often the most overlooked element in website design. Many designers and developers are not aware of how important it is to use the head> section correctly, or of the potential issues that arise when they don’t. Having a good understanding of the head> section will help you to design websites that are both visually appealing and perform well. You can achieve this by using the correct elements in the correct order, and by grouping all of the resources that your page needs together.

References:

1-WISDOM: Web intrapage informative structure mining based on document object model

DOI: 10.1109/TKDE.2005.84