meta
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:
- specify the name of the author of your HTML5 document: e.g. John Smith
- specify the name of the Web application that the page represents: e.g. JIRA
- specify a relevant/accurate description of your page and the web engines (e.g. Google) might display it in search results snippets: e.g. W3-Video is a Free Online Video Web Tutorials Website....
- specify the name of the software used to generate the document: e.g. WordPress 3.1
- specify the keywords of your page: e.g. HTML5, XAMPP, Notepad, Firefox
- specify the default-style of your document: e.g. Lighter
- specify the character encoding used by your document (2 ways of doing that): e.g. UTF-8
- specify the number of seconds after a page is reloaded or a new page is loaded in place: e.g. 10; load-new-page-after10seconds.html"
- specify metadata related to other aspects: you can register a metadata name or choose from the pre-existing list
About meta
- is an optional element
- multiple meta elements allowed per HTML5 document
Display & support meta
- display in browser »video
- display type: na





Parents meta
- meta nested within elements »meta parents
»examples
»video
Attributes meta
- required: at your choice, 1 out of the next 3: name, http-equiv, charset
- optional: content if name and http-equiv attributes are absent, global attributes
observation: if name or http-equiv attributes are present on meta element, then content attribute is required
Encoding HTML5 documents
Warning
Only one meta element with a charset attribute (e.g. < charset="UTF-8">) is allowed per HTML5 document.
Syntax meta
1 | <> »video |
Attributes and Values meta (comma separated)
< | attribute | = | "attribute_value(s)" | > | Video | Examples |
---|---|---|---|---|---|---|
1. specific attributes | ||||||
1. | name | = | application-name, author, description, generator, keywords OR register a metadata name or choose from the preexisting list | »video | <name="author" content="John Smith"> | |
2. | http-equiv | = | content-type, default-style, refresh OR register a pragma extension or choose from the preexisting list | »video | <http-equiv="refresh" content="20"> | |
3. | charset | = | character encoding name | »video | <charset="UTF-8"> | |
4. | content | = | property_value | »details | <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 |