The <meta> element describes metadata about an HTML page. This metadata is not displayed to users, but used by browsers and search engines. This may describe what character encoding the document contains, the published date, author information, descriptions for search engines, keywords, etc.
The <meta> element is an “empty element”. As such, no closing tag is necessary.
NOTE: <meta> elements are always placed inside the <head> element.
Also, as with form elements metadata is always passed as a name:value pair. Typically via the name="" and content="" attributes.
You can assign any value you want to the name attribute of the meta element. This can be used for other developers, web browser parsers you design, or to store information you deem necessary.
As one example, Twitter instructs developers to use specific, unique to twitter, name values in the meta element when building Twitter applications. You can check that out on the Twitter developer pages.
There are however, some specific name values that you need to be aware of and use in your pages. These standard meta types are parsed and read by browsers and search engines.
The description name type provides a short description to search engines crawlers about the contents of your site.
<meta name="description" content="An introductory course to web development and design at the University of Montana.">
The keywords name type allows developers to provide a list of keywords describing the contents of the website. Separated each keyword with a comma (,).
<meta name="keywords" content="MOOC, Web Development, Web Design, HTML, CSS, Montana">
The author name type allows the developer and content creators to specify the “authors” of the page.
<meta name="author" content="Michael Musick">
The robots name type tells browsers whether they may spider or crawl the published webpage.
This name type takes one of four acceptable content values. The noindex value prevents a page from being indexed, and nofollow prevents links from being crawled. The noarchive value instructs a search engine not to store an archived copy of the page, and nosnippet asks that the search engine not include a snippet from the page along with the page’s listing in search results.
<meta name="robots" content="nofollow">
The viewports name type tells a browser how to display the page with respect to size, pixel density, and zoom-capabilities. This meta type is critical for websites are mobile device friendly. (Read: You should start setting the viewports meta type in your documents.)
The following is the setting you should use for most sites.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tells the browser that the width of the page is initentially equal to the width of the device. (i.e. there will be no horizontal scrolling, which users are not accustomed to.) It also tells the browser to initially display the page with a scale factor of 1, or no zooming.
One metadata use that you should be familiar with is the charset declaration. This informs the browser of the character set encoding of the document (i.e. the character set that matches the binary data).
You should always include the metadata charset line in your head element of your html documents.
<meta charset="utf-8">
Watch the following for how Google’s search engine uses meta tags:
<meta> element.