crear estructura html en visual studio code

Crear estructura HTML en Visual Studio Code

¡Bienvenidos a !

Tras , 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!

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:

crear estructura html en visual studio code

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 .

También puedes preguntarme en los comentarios cualquier duda que te surja. ¡Te espero en el próximo artículo!

Y si quieres aprender más sobre la temática de , te recomiendo visitar la sección dedicada a ello.

0 thoughts on “Crear estructura HTML en Visual Studio Code

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *