Tras crear un documento HTML en Visual Studio Code, el siguiente paso es hacer una estructura antes de insertar contenido a nuestro documento. Crear esta estructura antes de comenzar a redactar nuestro documento HTML nos permitirá ordenar desde el comienzo todos los conceptos. ¿Quieres saber cómo hacerlo en menos de 10 segundos?
¡Despegamos!
Índice de Contenidos
Estructura HTML
Una estructura HTML se divide en dos partes:
- <head>: Espacio donde se identifica el documento y se insertan los metadatos.
- <body>: ‘Cuerpo’ del documento, donde insertamos todo el contenido.
Toda esta estructura HTML debe comenzar y cerrarse, precisamente, especificando que se trata de un documento HTML. Para ello deberemos utilizar las siguientes etiquetas al comienzo del documento:
- <!DOCTYPE html>.
- <html lang=»es»>.
Con esta segunda etiqueta, especificaremos, además, el idioma del documento. Así, una estructura básica de HTML, con algunos metadatos, quedaría de la siguiente manera:
<!DOCTYPE html>
<html lang="es">
<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="HTML Masters">
<title>Documento de ejemplo</title>
</head>
<body>
</body>
</html>
Todas estas partes de la estructura las puedes hacer a mano o copiando el texto HTML que acabo de insertar. Sin embargo, el modo más óptimo para hacerlo es a través de un atajo de la aplicación.
Atajo para crear la estructura HTML en Visual Studio Code
La manera más rápida de hacerlo es con un atajo de Visual Studio Code. Por si no los conoces, los atajos de teclado de Visual Studio Code hacen que escribas código con más rapidez y eficiencia. Atajos que sirven tanto para HTML como para otro tipo de lenguajes.
Uno de los más útiles, es el que te permite crear la estructura básica de un archivo HTML. Para ello, debemos escribir en el editor vacío ‘html:5′. Posteriormente, pulsa ‘Enter’ y… voilà! El resultado es el siguiente:
Una vez lo crees, puedes cambiar el idioma y señalar que será un documento en español en la etiqueta HTML, cambiando «en» por «es». También debes cambiar el título del documento, es decir, el texto que está dentro de la etiqueta <title>.
Como ves, crear la estructura HTML de un archivo en Visual Studio Code no te llevará más de 10 segundos con este atajo. Sin duda, una gran manera de comenzar a escribir el código sin prácticamente esfuerzo.
Nombres de metadatos
Además, podrás añadir todas estas variables a través del atributo <meta name=»»>. De esta manera, podrás añadir más información sobre el documento que quieres crear.
- Application-name: nombre de la aplicación que se ejecuta en la página web
- Author: define el autor del documento.
- Description: describe el objetivo del documento.
- Generator: identificador del software que generó la página.
- Keywords: define las palabras clave del documento.
Espero que el artículo te haya ayudado a crear estructuras de manera más óptima. Si todavía tienes dudas sobre cómo crear una estructura HTML en Visual Studio Code, o quieres aprender más sobre los metadatos, te recomiendo su documentación oficial.
También puedes preguntarme en los comentarios cualquier duda que te surja. ¡Te espero en el próximo artículo!
Pablo says:
Quiero aprender más de la estructura html
htmlmaster says:
Muy buenas Pablo, ¡muchas gracias por la lectura!
¿Alguna sugerencia para que creemos nuevos artículos sobre la temática?
Te leemos, un saludo 🙂
miguelvaldez says:
Muy buen , artículo me sirvió la lectura .
Me gustaría poder ver un artículo dónde en la estructura HTML en Visual Studio Code, dónde se pueda reproducir audio , video, imágen , para ejecutarlo sería un gusto gracias