Tutorial
How To Add an HTML <head> Element To Your Webpage
This tutorial will walk you through the steps of adding a <head> element to your webpage, which creates a section for us to include machine-readable information about our web document. This information is primarily used by browsers and search engines to interpret the content of the page. Content placed inside the <head> element will not be visible on the web page.
Note:The HTML <head> element is a semantic element in that it tells the browser and the developer the meaning or purpose of its content. Semantic elements are used to aid human readability of an HTML document, provide the browser further information for interpreting the content, improve site accessibility (screen readers use semantic tags), and can assist with SEO positioning.
Add the opening and closing <head> tags inside of the <html> tags. Next, add two additional lines of HTML code inside the <head> tags like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sammy’s First Website</title>
</head>
</html>
Note that you have nested a variety of HTML elements inside one another. The <title> and <meta> elements are nested inside the <head> element, and the <head> element is nested inside the <html> element. We will nest elements frequently as the tutorial proceeds.
Let’s now pause briefly to understand the purpose of the code we’ve just added. The line of code after the opening <head> tag—<meta charset="utf-8">—specifies the document’s character set to UTF-8, a unicode format that supports a majority of characters from a wide variety of written languages.
The next line of code sets the HTML document’s title using the <title> element. The content you insert into this element will be displayed on the browser tab and as the website’s title in search results, but it will not show up on the web page itself. Make sure to replace “Sammy’s First Website” with your name or the name of the website you’re building.
Though developers often add additional information in the <head> section, we now have sufficient information for creating a basic HTML webpage. Save your file before moving onto the next section. If you try loading the file in your browser, you should receive a blank page.
You should now know the purpose of HTML <head> elements and how to add one to an HTML file.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Tutorial Series: How To Build a Website with HTML
This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.
At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.
author
Senior Manager, DevEd
Open source advocate and lover of education, culture, and community.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get our biweekly newsletter
Sign up for Infrastructure as a Newsletter.
Hollie's Hub for Good
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Become a contributor
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
