Heads Up!

So far, you have established how your web page should be interpreted with the DOCTYPE version and the HTML-tag, accompanied by the language attribute. Now, let's add information about your webpage! Webpage information is placed inside the <head> tag. Acting like the brain of your document, it stores the title of your page, what your page is about, what files are associated with it, and how search engines should treat it. (We’ll explore linking files in a future lesson.)

<!DOCTYPE html>
<html lang="en-US">
    <head></head>
</html>

The most important--and required--information to include in the <head> tag is your document's title. The title is established via the <title> tag. Your page title will show up in multiple places, including browser tabs, bookmark listings, and in search results.

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Gardening and Plant Care</title>
    </head>
</html>

When it comes to people finding your website, the <meta> tag is a valuable tool. Through different attributes, it can inform people and search engines what to expect from your website.

A few of the most useful attributes and their values include:

Attribute	Purpose	Values
charset	specifies the character encoding for the HTML document	UTF-8 HTML5 specification strongly encourages developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!
name	specifies a name for the metadata	author - defines the author of a page description - defines a description of your web page keywords - defines keywords for search engines viewport - setting the viewport makes sure your website looks good on all devices that view it
content	specifies the value associated with the name attribute	text-based values

viewport gives the browser instructions on how to control the page's dimensions and scaling so that it will display nicely on any device it's viewed on.

width = device-width -- sets the width of the page to follow the screen-width of the device (which will vary depending on the device)
initial-scale = 1.0 -- sets the initial zoom level when the page is first loaded by the browser

For example, if you were creating a website about gardening, your meta-tag information might look like the following code.

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Gardening and Plant Care</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Eric Greenthumb">
        <meta name="keywords" content="plants, gardening, soil, produce">
        <meta name="description" content="Welcome to my website on gardening and plant care. 
        Learn all about what you can grow in your very own backyard!">  
    </head>
</html>

Question

Why are there so many meta-tags?

Next, we can tell the browser what our website is all about.