Etiquetas que no debes olvidar en tus docs HTML

Cristian Fernando - Mar 8 '22 - - Dev Community

Esta tarde me percate de algo curioso que pasa en VSCode.
Cuando trabajamos con HTML podemos usar el atajo HTML:5 para que el editor cree por nosotros una estructura básica y empezar a trabajar.
Dicha estructura es la siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

No esta nada mal, pero dentro del head podemos agregar algunas etiquetas meta y link para complementar un poco más el documento y que se vea más profesional.

La etiqueta <meta>

Contienen metadatos que no se ven en la web final pero que le sirven al documento para que se indexe mejor.
Por ejemplo:

<meta name="author" content="Cristian Fernando">
Enter fullscreen mode Exit fullscreen mode

Podriamos poner el autor de la página.

Y también una breve descripción de lo que la página contiene:

<meta name="description" content="pagina web de prueba">
Enter fullscreen mode Exit fullscreen mode

La etiqueta <link>

Útil para enlazar css:

<link rel="stylesheet" href="" type="text/css">
Enter fullscreen mode Exit fullscreen mode

Importante poner type="text/css" ya que VSCode no lo hace por defecto.

Y también para poder establer un icon:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Enter fullscreen mode Exit fullscreen mode

La estructura mejorada se veria así:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Cristian Fernando">
    <meta name="description" content="pagina web de prueba">
    <link rel="stylesheet" href="" type="text/css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>Document</title>
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Quiza hay alguna manera que VSCode cree por defecto una página similar a esta, podriamos crear nuestro propios shortcuts también. Ya que da criterio de uno.

Referencias

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .