<meta> tag
The <meta> tag defines metadata about an HTML
document.
Metadata is data (information) about data.
<meta> tags always go inside the <head> element, and
are typically used to specify character set, page
description, keywords, author of the document, and
viewport settings.
Metadata will not be displayed on the page, but is
machine parsable.
Metadata is used by browsers (how to display content
or reload page), search engines (keywords), and other
web services.
There is a method to let web designers take control
over the viewport (the user's visible area of a web
page), through the <meta> tag
Attribute Value Description
charset character_set Specifies the character encoding
for the HTML document
content text Specifies the value associated
with the http-equiv or name
attribute
http-equiv content-type Provides an HTTP header for the
default-style information/value of the content
refresh attribute
expires
name application-name Specifies a name for the
author metadata
description
generator
keywords
revised
viewport
Specifying Keywords
You can use <meta> tag to specify important keywords related to the
document and later these keywords are used by the search engines
while indexing your webpage for searching purpose.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata"
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Document Description
You can use <meta> tag to give a short description about the
document. This again can be used by various search engines while
indexing your webpage for searching purpose.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Setting Author Name
You can set an author name in a web page using meta tag. See
an example:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta ame="author" content="Mahnaz Mohtashim" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
viewport
Controls the viewport (the user's visible area of a web page).
The viewport varies with the device, and will be smaller on a
mobile phone than on a computer screen.
You should include the following <meta> viewport element in all
your web pages:
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
A <meta> viewport element gives the browser instructions on how
to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow
the screen-width of the device (which will vary depending on the
device).
The initial-scale=1.0 part sets the initial zoom level when the page
is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and
the same web page with the viewport meta tag:
Document Revision Date
You can use <meta> tag to give information about when last time
the document was updated. This information can be used by
various web browsers while refreshing your webpage.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Meta expires
deleted from the browsers cache, and must be
downloaded again.
This is useful if you want to make sure your visitors are
reading the most current version of a page.
Specify Character Set
You can use <meta> tag to specify character set used within the
webpage.
By default, Web servers and Web browsers use ISO-8859-1 (Latin1)
encoding to process Web pages. Following is an example to set UTF-8
encoding:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta ame="author" content="Mahnaz Mohtashim" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
Document Refreshing
A <meta> tag can be used to specify a duration after which your web
page will keep refreshing automatically.
If you want your page keep refreshing after every 5 seconds then use
the following syntax.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
<meta http-equiv="refresh" content="5" />
</head>
Page Redirection
You can use <meta> tag to redirect your page to any other webpage. You can
also specify a duration if you want to redirect the page after a certain number
of seconds.
Following is an example of redirecting current page to another page
after 5 seconds. If you want to redirect page immediately then do not
specify content attribute.
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
<meta http-equiv="refresh" content="5"
</head>
pragma
The meta http-equiv="pragma" is an HTML element used to
specify the caching behavior of a web page.
It allows web developers to control how the browser caches and
retrieves the page content.
By setting the meta http-equiv="pragma" attribute, developers can
influence the behavior of web browsers when caching and
refreshing the page content.
The attribute accepts various values, such as "no-cache," "cache,"
"no-store," among others, each indicating a different caching
behavior.
<meta http-equiv -chache
Robots / spiders
A search engine uses a computer program to find
and index (catalog) web pages.
It "moves" from one page to the next by following
links.
This type of computer program is called a "spider"
or a "robot".
These robots can be told what links to follow or not
follow, pages to index or not index.
The most common method (assuming you wanted
to control the robot) is to make use of the robots
meta tag in individual pages...
Example of Robots
Robots meta tag plays an important role in
on page optimization as it is the robots meta
tag that tells the search engines how to treat
the content of a page.
<meta name="robots"
content="all,none,index,noindex,follow,nofoll
ow">
a robot Meta tag consists of two attributes:
name and content. You have to specify
values for each of these attributes.
All
This is the default.
To "index" means to place in their database so it is
available for searches.
It means that the spiders (or robots) can index this page
and follow all links on this page.
If you want robots to index everything and follow
everything, then just skip the robots tag.
The robots will index and follow everything automatically.
None
instructs the browser to basically ignore the
page.
Don't index anything and don't follow any links.
HTML5 Goals
Aimed to have all of the power of native applications.
Run on any platform (Windows, Linux, iPhone, Android, etc.)
New features should be based on HTML, CSS and
JavaScript.
Reduce the need for external plugins.
Better error handling.
More markup to replace scripting.
New Tags for Page Layout
Today, if we wanted to markup a layout for a web
page, we would use a lot of <div> tags to specify the
different sections of the page.
HTML5 introduces a set of new tags specifically for
layout.
Current Layout Structure with <div> Tags