HTML and CSS Reference
The <meta> element is used to define metadata such as a description about the page, keywords, or the page's au-
thor. Here's an example:
<meta name="description" content="This is a description about
To define this information, you use the two attributes shown in the example above: the name attribute and the con-
tent attribute. The content attribute is used to provide some information about the page (for example, a short
description). You then use the name attribute to tell computer programs the purpose of this information. If the con-
tent is a description of the page, for example, you would set the value of the name attribute to description .
The <meta> element is an example of a void element and therefore has no end tag.
In this code exercise, you add metadata to the <head> in your page templates that will provide computer programs
with a description of the page, related keywords, and the name of the author.
The code for this exercise can be found in folder 10.
1. Open the index.html file in your text editor.
2. Add the following <meta> elements to the <head> . They should be placed below the <title> element.
content="Joe's Pizza is the home of the best pizzas in
all of New York City.">
content="pizzas,joes pizza,garlic bread,pepperoni">
<meta name="author" content="YOUR NAME">
3. Save the index.html file.
4. Open the index.html file in your web browser.
5. Use the developer tools to inspect these new <meta> elements and make sure that they all show up prop-
erly. You may need to expand the <head> element (by clicking the small triangle next to the start tag) to
see the elements within it.
6. Now add these same three <meta> elements to your about.html file. Be sure to update the value of the
content attributes to reflect the content of the page.
7. Save the about.html file.
Note that when the page is now viewed in a browser, you do not see any change from the previous version. Again,
metadata is not displayed as content, but is simply information to be used by computer programs.