La metaetiqueta contiene metadatos sobre el documento HTML. Puede incluir información como el nombre del autor, título del documento, palabras clave y juego de caracteres.
Atributos meta:
charset – Especifica la codificación del documento.
content – Establece el valor de un atributo especificado con name o http-equiv.
http-equiv – Diseñado para convertir metaetiquetas en títulos HTTP.
name – El nombre de la metaetiqueta también establece indirectamente su finalidad.
<head> <meta charset="UTF-8"> <meta name="description" content="Esta es la descripción de la página web"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="Iván Ivanov"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi pagina de prueba</title> </head>
<meta name="twitter:title" content="MDN Web Docs" />
Uno de los resultados de agregar estos metadatos es que cuando agregas un enlace MDN Web Docs en facebook, Se mostrará con una imagen y descripción, mejorando la experiencia del usuario _(User eXperience, UX)_:
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.png" /> <meta property="og:description" content="La documentación web sobre MDN proporciona proporciona información sobre tecnologías web abiertas, incluidas HTML, CSS y varias API de sitios web y aplicaciones web progresivas. El sitio también contiene materiales para desarrolladores sobre tales Productos de Mozilla como herramientas para desarrolladores Firefox." /> <meta property="og:title" content="MDN Web Docs" />
Puede especificar diferentes iconos para diferentes dispositivos. Por ejemplo, en la página principal MDN:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <!-- Para iPad 3 con pantalla Retina de alta definición: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png" /> <!-- Para iPhone con pantalla Retina de alta definición: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png" /> <!-- Para iPad primera y segunda generación: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png" /> <!-- Para iPhone, iPod Touch sin Retina y dispositivos con Android 2.1+: --> <link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png" /> <!-- Para otros casos - normal favicon --> <link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png" />
Conexión CSS y JavaScript
<link rel="stylesheet" href="my-css-file.css" /> <script src="my-js-file.js"></script>
Incorporado CSS y JavaScript
<script> .............. </script> <style> ................. </style>
Idioma principal de la página HTML
<html lang="ru"> <html lang="en-US">
