Title and Meta elements

Title Element

The title element is used for specifying the web page’s title. This title is shown in the browser’s top bar and is also found in other locations. If we don’t specify the title of the web page using the title element, then most browsers use the file name as the web page’s title.

The primary purpose of the title element is to describe the web page’s title. Most of the browsers do show the title at the top of the window or tab.
Some browsers have bookmarking features. In these browsers when saving the web page as a bookmark, the browsers use the title element as the default bookmark title.
Search engines like Google show the title element in their search results. Users of these search engine decide if they will visit the web page by judging the page title.

Hence the title element should be carefully constructed for each web page in order to attract more viewers in the search engine results.

Meta Element

The meta element is an empty element used for providing metadata for the web page. Metadata means data about data. Hence the meta element provides additional data about the web page that is not shown along with the page. Since meta is an empty element, the metadata is provided through various attributes.

The most common meta element is for specifying the web page encoding. It uses the charset for providing the encoding used in the web page.
Another common format of meta elements is the combination of name and content attributes. These types of meta elements are used for providing metadata like author name, description and keywords.
One specific meta element that has an effect on the way web pages are displayed on mobile devices is the viewport meta element. Without this element mobile browsers will usually display pages with the width of a typical desktop browser. In order to avoid this situation we set the viewport as equal to the device width. Also the browser may display the web page as zoomed out. We can counter this by setting the initial scale as 1.0.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width:device-width, initial scale=1.0">
<meta name="author" content="Ethan Hunt">
<meta name="description" content="This description is shown in search engines below the title">
<title>Web page's title</title>
</head>
<body>
This lesson is about the title and meta elements.
</body>
</html>

The description meta element is shown in search engine results. So it is important to write a relevant description for the web page for both ranking better in search engines and also for giving potential visitors an idea about the web page.

In the early days of search engines, the meta element was abused by spammers. The keyword meta element provides a list of keywords related to the web page. Many people wanted their web pages to rank higher on search engines. So, they filled the keyword meta element with unnecessary and unrelated keywords. This practice skewed the search results. Hence search engines like Google were forced to remove keywords as factors in their ranking formulae.