HTML Meta
The meta elements used to provide structured metadata about a web page.
HTML Meta Element
The <meta> element typically provide metadata such as a document’s keywords, description, and author last modified, and other metadata. Any number of META elements can be placed in the head section of an HTML or XHTML document.
META’s name attribute provides a property name while the content attribute gives the corresponding value. The content attribute value may contain text and entities, but it may not contain HTML tags. There is no standard list of meta properties, so you may define whatever metadata they like. Here’s is an example:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”author” content=”John Carter”>
<title>Defining Document’s Author</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
The <meta> tag in the example above simply defines the author of the document.
Note:Metadata will not be displayed on the page, but will be machine parsable, and can be used by browsers, search engines or other web services.
Define Character Encoding in HTML
Meta tag typically used to declare character encoding inside HTML document.
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Declaring Character Encoding</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
However, to set character encoding inside CSS document, the @charset at-rule is used.
Note:UTF-8 is a very versatile and recommended character encoding to choose. However, if this is not specified, then the default encoding of the platform is used.
Keywords and Description for Search Engines
Some search engines use metadata, especially keywords and descriptions to index web pages; however this may not necessarily be true. Keywords giving extra weight to a document’s keywords and description provide a short synopsis of the page. The meta tags in the following example define the keywords and description of a page.
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”keywords” content=”HTML, CSS, References”>
<meta name=”description” content=”Tutorials on HTML and CSS”>
<title>Defining Keywords and Description</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Tip:Search engines will often use the meta description of a page to create short synopsis for the page when it appear in search results. Learn more.
Enable Zooming on Mobile Devices
You can use the meta viewport tag to enable zooming of your websites on mobile devices.
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Enable Zooming in Mobile Devices</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Tip:Always use the <meta> viewport tag in your web pages. It will make your website more accessible on mobile devices like cell phones and tablets.