Metadata
Metadata is simply data about data
Metadata is data that gives information about website data.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used to specify character set, page description, keywords,
Author of the document, and viewport (the user's visible area of a web page) settings.
Metadata is used by browsers (how to display content or reload page),
search engines (keywords), and other web services.
Metadata is enclosed within the meta tag.
Meta tags always go inside the head element.
This tag is an empty element and so does not have a closing tag but it carries information within its attributes.You can include one or more meta tags in your document based on what information you want to keep in your document but in general, meta tags do not impact physical appearance of the document so from appearance point of view, it does not matter if you include them or not.
Meta tag also supports the Golbal attirbutes in HTML
Global html Attributes:The global attributes are attributes that can be used with all HTML elements.
Web designers can take control over the viewport through the meta tag.
Web developers set the viewport to make your website look good on all devices:
Lets us see most common attributes used in meta tag
Character set :(charset= "UTF-8")
The default character set in HTML5 is UTF-8
Full form of UTF :Unicode Transformation Format)
It Specifies the character encoding for the HTML document.
A character in UTF8 can be from 1 to 4 bytes long.
UTF-8 can represent any character in the Unicode standard.
UTF-8 is the preferred encoding for e-mail and web pages
The Unicode Standard covers (almost) all the characters, punctuations, and symbols in the world.
Unicode enables processing, storage, and transport of text independent of platform and language.
The Difference Between Unicode and UTF-8
Unicode is a character set. UTF-8 is encoding.
Unicode is a list of characters with unique decimal numbers (code points). A = 65, B = 66, C = 67, ....
This list of decimal numbers represent the string "hello": 104 101 108 108 111
Encoding is how these numbers are translated into binary numbers to be stored in a computer:
UTF-8 encoding will store "hello" like this (binary): 01101000 01100101 01101100 01101100 01101111.
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.
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.
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.
Document Refreshing
A <meta> tag can be used to specify a duration after which your web page will keep refreshing automatically.
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.
Setting Cookies
Cookies are data, stored in small text files on your computer and it is exchanged between web browser and web server to keep track of various information based on your web application need.
You can use <meta> tag to store cookies on client side and later this information can be used by the Web Server to track a site visitor.f you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta charset = "UTF-8" />
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "seeker" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta http-equiv = "refresh" content = "5: url=https://www.theseekers.live" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
0 Comments