The meta tag contains metadata about the HTML document. It may include information such as the author’s name, document title, keywords, and character set.
Meta attributes:
charset – Specifies the document encoding.
content – Sets the value of the attribute specified by name or http-equiv.
http-equiv – Designed to convert meta tag to title HTTP.
name – The name of the meta tag also indirectly establishes its purpose.
<head> <meta charset="UTF-8"> <meta name="description" content="This is the description of the web page"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="Ivan Ivanov"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My test page</title> </head>
<meta name="twitter:title" content="MDN Web Docs" />
One of the results of adding this metadata is that when you add an MDN Web Docs link to facebook, it will appear with an image and description, improving the user experience _(User eXperience, UX)_:
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.png" /> <meta property="og:description" content="Web documentation on MDN provides provides information about open web technologies, including HTML, CSS and various website APIs and progressive web applications. The site also contains materials for developers about such Mozilla products like Developer Tools Firefox." /> <meta property="og:title" content="MDN Web Docs" />
You can specify different icons for different devices. For example, on the main page MDN:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <!-- For iPad 3 with High Definition Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png" /> <!-- For iPhone with High Definition Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png" /> <!-- For iPad first and second generation: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png" /> <!-- For iPhone, iPod Touch without Retina and devices with Android 2.1+: --> <link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png" /> <!-- For other cases - normal favicon --> <link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png" />
Connection CSS and JavaScript
<link rel="stylesheet" href="my-css-file.css" /> <script src="my-js-file.js"></script>
Built-in CSS and JavaScript
<script> .............. </script> <style> ................. </style>
Primary language of HTML page
<html lang="ru"> <html lang="en-US">
