HTML and CSS Reference
In-Depth Information
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
the page">
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.
<head>
<title>...</title>
<meta name="description"
content="Joe's Pizza is the home of the best pizzas in
all of New York City.">
<meta name="keywords"
content="pizzas,joes pizza,garlic bread,pepperoni">
<meta name="author" content="YOUR NAME">
</head>
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.
