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?
The meta-tag can contain one type of attribute at a time. (The name and content attributes work together, so they can co-exist in one meta-tag.) The number of meta-tags you use is up to you, but remember that the more information you provide to search engines, the more your site's accessibility increases!