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 |
For more information about the element, please see the specs: W3C ⁄ WHATWG