W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++


Share it

meta intro meta browser display meta parents Encoding declaration state syntax meta HTML5 documents: encoded - declared - decoded Browsers Encoding precedence Authors should use UTF-8 meta name attribute meta http-equiv attribute meta charset attribute meta content attribute

HTML5 meta element

The meta element allows you to add metadata ⁄pragma directives ⁄character encoding to your HTML5 document »video

Using meta element, you can:

About meta

Display & support meta

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents meta

Attributes meta

observation: if name or http-equiv attributes are present on meta element, then content attribute is required

Encoding HTML5 documents

  1. HTML5 documents: encoded - declared - decoded »video
  2. Browsers Encoding precedence »video
  3. Authors should use UTF-8 »video


Only one meta element with a charset attribute (e.g. <meta charset="UTF-8">) is allowed per HTML5 document.

Syntax meta

1<meta> »video

Attributes and Values meta (comma separated)

<metaattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.name=application-name, author,
description, generator, keywords
register a metadata name or
choose from the preexisting list
»video<meta name="author" content="John Smith">
2.http-equiv=content-type, default-style, refresh
register a pragma extension or
choose from the preexisting list
»video<meta http-equiv="refresh" content="20">
3.charset=character encoding name»video<meta charset="UTF-8">
4.content=property_value»details<meta name="author" content="John Smith">
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img
2.class=class name»html »img
3.contenteditable="",  , true, false »html
4.contextmenu=menu id value»html
5.data-*= value -
6.dir=ltr, rtl, auto»html
7.draggable= true,  , false»img
8.dropzone= copy, move, link, string:, file: -
9.hidden= "",  , hidden»html »img
10.id=id name»html »img
11.itemid= URL -
12.itemprop= string »link »a
13.itemref= string -
14.itemscope= "",  , itemscope-
15.itemtype= absolute URL -
16.lang=language code »html »head»title »img
17.spellcheck="",  , true, false»html
18.style=CSS property:value»html »img
19.tabindex= integer »img
20.title=text»html »link»style »abbr»dfn
»img »meter
21.translate="", yes, no»html »img
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration meta element

HTML5 meta element Tutorial

min video details
00:05 the meta element allows us to add metadata ⁄pragma-directives/ ⁄character encoding to our page
00:13 let's say that the author of this page is John Doe
00:15 we know it, but the machines (web search engines,..) don't, so let's tell them that!
00:19 meta element allows us to do that by adding a metadata
00:26 metadata = data about data and can be specified through name/value pairs
00:33 this metadata tells the web machines that the name of the author of this page is John Doe
00:35 example of metadata (data about data):
[john doe(=data)] represents the name of the [author(=data)]
00:41 if http-equiv attribute is present on meta element, then the meta element represents a pragma directive
00:46 this pragma directive will refresh the current page after 2 seconds, loading index2.html instead
00:56 we have added the same pragma directive on index2.html to load back the index.html file after 2 seconds
01:04 let's watch this
01:21 meta element also allows us to specify the character encoding set used by the document through charset attribute
01:28 specifying the charset right above the title element because the charset (UTF-8 in our case) applies to the title also → metaa tag placed above title

For more information about the meta element, please see the specs: W3CWHATWG