Intro to HTML: Description Meta Tag

The description meta tag provides a short description of the page's content. This is usually the short blurb a search engine user sees on the search page.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.
Quick Copy Boxes

The page description is very important because that is the information the searcher uses to decided if he wants to click on your page. The description should be less than 160 characters. It is written to attract your page's target audience. The description should be accurate. An acurate and well written description will attract the right people to your page.


Syntax



<meta name='description' content='short page summary' > 
            

<meta starts meta tag
name='description' this is a description meta tag
content='short page summary' 'content' is set equal to a short summary of the page's content
> ends tag


Example Head with Meta Tags


<head>
 <meta name='keywords' content='mars, space travel, nasa, spacex, space exploration'>
 <meta name='description' content='In the next six years people may land on Mars. Find out what Mars might be like.'>
 <title>Journey to Mars</title>
</head>

<head> Head element starts
 <meta name='keywords' content='mars, space travel, nasa, spacex, space exploration'> The keywords of this page are defined
 <meta name='description' content='In the next six years people may land on Mars. Find out what Mars might be like.'>
✶ name: This is a description meta tag
✶ content: Here you can read what the page is about.
 <title>Journey to Mars</title> The title of the page is 'Journey to Mars'
</head> Head element ends

Applied Assignment


Background: You have been hired by a children's education company to build a website that teaches children science. You work with Ronaldo who is a SME (subject mater expert) and content writer. You have to provide Ronaldo with the title, keywords and description for each lesson page. Once Ronaldo recieves this information, he is able to write the content for the page.
Assignment: For each page Topic, create an HTML head element. Inside the head element you must include page title, keywords and description.
Example Topic: Explaining the differnt states of matter.

Example Code:


<head>
  <!-- Meta tags-->
  <meta name = 'keywords' content = 'states of matter, solid, liquid, gas, intro to chemistry'>
  <meta name = 'description' content='This free science lesson is about atoms and the stages of matter-- solid, liquid, gas'>
  <!-- Title-->
  <title> Chemistry's Stages of Matter </title>
</head>

Topics:
1) Explaining Valcanos
2) Explaining Global Warming
3) Explaining the Four Seasons

Next, choose one topic from the applied assignment above. Rewrite the code in the code editior box below to match the topic you choose.