The Head Tag

  • In the <head> section of each html page, the page title is set and meta tags are used to describe the page.
  • The title tag content is shown on the browser tab and not within output page contents.
  • Meta Tags contents are not displayed to the user, rather used as a descriptive tags by the browser and search engines.
  • Example Meta Tags include:
    • Description, which briefly describe to search engines what is the web page about.
    • Keywords, which lists the keywords that best describes the contents of that web page.
    • Some other common meta tags are shown in the below example.

 

Example:
   
<!doctype html>   
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="ABC Shop Monthly Sales Report" />
    <meta name="Keywords" content="Monthly Sales, Computer, Software, 
    Engineering School, Computer Science" />    
</head>
<body>
    <h1>Software Sales Report</h1>
    <p>50&#37;  of our computer software customers comes from the computer 
    science and Engineering school,  where, their revenue per months reaches 
    US&#36;150,000.</p>
    <p>We should give good discount for  this reason.</p>
    <p>Well this is not the perfect way  of displaying tables in HTML, we just presented this way
    in a sake of providing an example  of using entity symbols.</b>
</body>
</html> 

In the above example:

  • We assigned a the word Example to be the page title
  • We indicated that this is a text/html page with a charset utf-8 – the Unicode character representation that will let the browser understand even Non-English letters.
  • We added the viewport meta, which defines the device scaling which is usually set to 1, unless you want to get the page smaller or larger that the original.
  • We also added the description a keywords, so that we make it easy for the search engine to summarize or page.

 

The output will be like the following:

And if we right click any where in the page in the browser, and select "view Source", we will see our head tags, although they are not diplayed on the page. However we see the title which is the word Example diplayed on top of the browser tab, when the page is displayed.