HTML META

The <meta> element typically provide metadata such as a document’s keywordsdescription, 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.

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>

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">
    <meta name="description" content="Tutorial"> 
    <title>DEFINING KEYWORDS AND DESCRIPTION</title>        
</head>
<body>
    <p>HELLO WORLD!</p>
</body>
</html>

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>