Start From The Top
HTML is the markup language that is behind every element you see on the web. HTML itself is even technically an element (seen as <html> within the less-than and greater-than signs). In order for markup language to make sense conceptually, picture it like a family tree, but with the stark difference that "parent" elements are always solo.
The main <html> element has two children elements: <head> and <body>.
I'm sure at this point you can tell that the rest of this reading will go into greater detail about the head element, but that's not to discount its sibling. The body element contains all of the components of a website that you see and interact with; elements like text, links, buttons, forms, and so many more. You can visit Mozilla's website for a list of all current (and deprecated) elements.
The head tends to hold more intrinsic and connective information for a website.
What the Head can Hold
This next handful of sections will detail some of the common children elements that a head will typically have, a general description of their purpose, and perhaps a code snippet of what they look like.
Titles
A "title" is pretty self explanatory, but as far as where it actually appears in your website is a bit misleading. It doesn't actually appear on your site — it's the line of text that shows in your browser's tab. The markup for this page's title looks like this:
<title>It's All In Your <head> | Steve's Tech Blog</title>
Quick note about this markup — you'll notice that there are ampersands and an 'lt;' or 'gt;' on either side of the word "head". This is because using the actual symbol would cause HTML to think that I'm using them to make another element. Using the '<' indicates to the markup language that I actually just want to type that less-than symbol — not use it to create an element. This is called "escaping" the characters.
This title text also appears for your page on the Search Engine Results Page (SERP) when users are searching for your site, making it incredibly significant for SEO. This is where you'll want to include a keyword that your page is intending to rank for!
I've read discussions online regarding the optimal length for a title to display properly on the SERP while conveying a meaningful headline but it turns out that there is no magic number. The actual metric isn't a number of characters, but rather a pixel length, since the goal is not to let the title get cut off for being too long. I try to keep my titles in the 50-60 character range to keep it safe, but I don't lose sleep if it goes a little over.
Google will actually come up with a title for you if you opt to exclude your own, but I'm under the impression that whatever is auto-generated will be subpar.
Meta Descriptions
Meta descriptions actually have a few key points in common with titles: they're important for SEO, they appear on the SERP, and their length should be carefully considered as not to get cut off (though they have a more generous limit than that of a title). These appear just below the blue title link in a website's search result. They typically aim to give you just enough information about the search result to get you to click on it.
These are broad descriptions of the webpage that they're placed on and should include a couple of keywords relevant to your targeting strategy. For example, the meta description for this page is marked up as follows:
<meta name="description" content="An article providing some context on the purpose of a website's head tag as well as some of the more common elements that are placed within it.">
A quick note for this one too! In HTML, elements can have "attributes", which is what you're seeing here where it says 'name' and 'content'. They're used to assign properties, behaviors, or data to that element. This meta element has its 'name' attribute set to 'description'.
I don't have some aggressive SEO strategy designed to pull in record-breaking amounts of leads so I'm certain this can be written better, but I've intentionally included mention of this being an 'article' that talks about 'head tags' since that's what this page is about.
Scripts
This is a big one.
I'm including this section on scripts because, while it's not the only way to link them into a webpage, they're often connected in the head.
In the main triad of web development, we have HTML (for the elements), CSS (for the styling and display of said elements), and JavaScript (for the behaviors and functionality of the page).
On any given day, you'd be hard pressed to find a website that doesn't have any JavaScript connected to it. It can be created by any average Joe, but some libraries of scripts have proven so universally useful that they are linked to very often. Things like jQuery, for example.
JavaScript is becoming increasingly popular due to its flexibility in usage for web applications. Many SaaS companies are able to deliver their products as cloud-based web applications, which avoids the need for downloading software or distributing in more complicated ways.
There is tons of minutiae regarding all things scripts — where to place them in your HTML to ensure optimal load time and intended sequencing, the different frameworks for application and backend development, JavaScript on a server through Node.js. These topics are well beyond the scope of this article.
Suffice it to say that scripts can be used to create very fancy behaviors, complicated calculations, and dynamic web pages.
Style Sheets
These are comparable to scripts in a few ways: style sheets handle a page's CSS — one of the big three of web development — and they can be connected in the head (amongst several other ways).
These also can be developed by just about anyone with a keyboard. CSS is a very easy language to understand at a base level just by reading it. There's a very simple set of notations and rules to follow, so the skill ceiling isn't terribly high.
I typically use a mix of Bootstrap styles along with my own modifiers to give elements a more personal feel while saving time writing style boilerplate, both linked in each page's head.
The sequence in which style sheets are referenced is important for different reasons. There's an important principle here regarding the cascading of styles (hence 'Cascading Style Sheets'), since this will determine how and when styles are applied to specified elements. This article isn't about the details surrounding cascading styles, but if you want an understanding of CSS as a whole, cascading is one of the most important concepts to be familiar with.
Favicons
Favicons are the small, personalized icons that appear in the tab for a webpage. It also appears next to the website's name when saved as a bookmark to your browser. It's marked up as a link element, with the "rel" attribute set to "icon":
<link rel="icon" type="image/png" href="./images/favicon/favicon-96x96.png" sizes="96x96" />
Here's a scaled-up view of my webpage's favicon to give you a better look:
Nothing too fancy, since they are usually displayed quite small, but they're important to include since they appear on the SERP along with your title and meta description.
Defining Viewports
If you already read my article on screen sizes and responsive design, this next section may sound somewhat familiar.
The viewport refers to the area of a webpage that a user can currently see, which as you might imagine, is different depending on their device. Here's a look at the meta element responsible for defining the viewport, as it appears on this page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This time, the name attribute is set to viewport, which tells the page that this meta element is responsible for governing the viewport definition.
For more information on the details of this meta element, MDN has a great resource for the different values that can be placed into the content attribute.
Structured Data Schema
Structured data is found here as a special type of <script> element. Although, you can actually represent structured data through other formats like RDFa or Microdata, the more popular JSON-LD format is placed in the head (and it's the only format I've personally used when creating schema).
I have an article that better explains the basics of structured data schema but all you need to know for now is the high-level info.
The JSON-LD format is written in JavaScript Object Notation (JSON), which is another very easy-to-read notation. Simply put, it's more or less just a list of objects and the values associated with them.
This is another important piece to include for SEO's sake for two major reasons: rich results eligibility, and better search engine/AI visibility.
Rich results are something you see when your search intent is very clear to your search engine. For example, if I search for "jansport backpacks", there will be several product links at the top of the SERP that have an image preview, a price, a rating, etc. These are rich results, and you only have a chance at getting them for your webpage if you include structured data schema.
Third-Party Inclusions
Like I started to explain earlier, developers will often want to include a function, feature, or style that's been done by someone else before. The teams behind resources like Bootstrap or jQuery will allow these developers to link to their libraries of CSS and JavaScript for quick access as a third-party inclusion.
A good example is the Meta Pixel, which is a script for a page's head that provides visitor traffic analytics for said page via their own console.
There are countless others, big and small, for tons of different purposes. A bit of research on Reddit or GitHub goes a long way when deciding on whether you need to include a third-party library — no need to reinvent the wheel.
Conclusion
A lot goes on in the <head> element (I barely scratched the surface), and so much of it is behind the scenes.
It's responsible for so much polish, extended functionality, and SEO support.
I can't stress enough how important it is to get these elements right, especially in the context of JavaScript for webapps.
For More Information
There's no shortage of material out their to continue learning about this, and if you're interested, I'd implore you to use some of these resources as a starting point:
W3 Schools — The Head ElementMDN – The Document Metadata (Header) element
January 20th, 2026