El 94 % de las primeras impresiones están relacionadas con el diseño de tu sitio web y el 75 % de su credibilidad proviene precisamente de este elemento. Por ello es sumamente importante invertir en su optimización para diferenciarte de tus competidores. Una forma de personalizar tu sitio es a través de la estructura HTML para garantizar que tu contenido se muestre de forma estratégica.

Sin embargo, a pesar de ser un lenguaje de marcado que existe desde la década de 1990, aún quedan muchas dudas sobre su implementación. Y, seamos sinceros, no es un tema que pueda dominarse de la noche a la mañana. No obstante, si conoces la estructura HTML básica es posible formar tu sitio de inicio a fin. Y sí, vale totalmente la pena saber cómo hacerlo. 

<< Guía básica sobre HTML y CSS para marketers [Descargar gratis] >> 

¿Para qué sirve conocer la estructura HTML? 

La estructura HTML hace uso de etiquetas y atributos predefinidos para indicarle al navegador cómo mostrar su contenido; es decir, en qué formato, estilo, tamaño de fuente, imágenes o videos se debe configurar. Básicamente, su función es describir la estructura general de una página y organizar la forma en que los usuarios podrán visualizarla. 

Es importante recalcar que el lenguaje HTML no es un lenguaje de programación, sino de marcado. Esto significa que solo sirve para crear páginas web estáticas. Sin embargo, sí es posible combinar este lenguaje con otros para desarrollar sitios mucho más dinámicos y atractivos. 

Una vez que conoces las definiciones más relevantes sobre el lenguaje y la estructura HTML, te diremos cómo se integran y te damos un ejemplo para que comprendas mejor su contenido. 

Como puedes notar, todas las etiquetas están constituidas al inicio y al final por los signos < y >, que representan precisamente la apertura y el cierre de cada elemento para que el lenguaje HTML pueda funcionar. En este sentido, existen dos tipos de etiquetas HTML: 

  • Etiquetas emparejadas. Vienen en pares y tienen una apertura y cierre. Tal como las que conoces: < >. 
  • Etiquetas vacías. Se refiere a las etiquetas que no requieren cierre. 

En la siguiente imagen te mostramos un ejemplo de cómo se ve una etiqueta básica de HTML con su apertura y cierre: 

Estructura HTML: ejemplo de etiqueta

Los atributos se refieren a toda la propiedad adicional de las etiquetas HTML. Esto significa que definen cualquier elemento de la página web; por ejemplo, ancho, entrada, texto. Estos también ayudan a almacenar información en metaetiquetas con la atribución de nombre, contenido y tipo.

Ejemplo de una estructura HTML básica

Ya que conoces qué incluye la estructura HTML básica, te mostramos de forma más desglosada un ejemplo que te servirá para visualizar mejor los elementos previamente mencionados. 

En la imagen siguiente puedes ver cómo se visualiza la estructura básica en lenguaje HTML para formar una página web:

Estructura HTML: estructura básica para una página web

Cualquier página web debe contener al menos este código para desarrollarse correctamente. Te explicamos al detalle el significado y contenido de cada etiqueta a continuación. 

  • <!DOCTYPE html>: se utiliza para indicar la versión HTML 5.0 (la usada actualmente). 
  • <html> </html>: es el elemento raíz y es el más importante dentro de la estructura HTML, pues es el que contendrá el resto de las etiquetas de atributos de la página web. 
  • <head> </head>: es la etiqueta principal que incluye metadatos; son atributos que no se muestran al usuario, solo describen referencias de la página, por ejemplo, título o página CSS. 
  • <body> </body>: es la etiqueta para desarrollar todo el cuerpo de la página web y engloba datos desde textos hasta enlaces.

Dentro de la etiqueta <body> se desglosan más etiquetas y elementos como: 

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: que representan las etiquetas de títulos. 
  • <p>: sirve para indicar la apertura y cierre de un párrafo.
  • <div>: significa «división» y funciona para crear secciones o agrupar contenidos. 
  • <span>: su traducción es «abarcar» y sirve para aplicar estilo al texto o agrupar elementos en línea.
  • <b>, <i>, <u>: para agregar un texto en negritas, cursiva y subrayado, correspondientemente. 
  • <a>: permite agregar un vínculo o enlace. 
  • <img>, <audio>, <video>, <iframe>: dentro de la estructura HTML estas etiquetas sirven para insertar una imagen, audio, video o incrustar un documento HTML. 
  • <form>: funciona para insertar un formulario. 
  • <label>: representa la etiqueta para un elemento en una interfaz de usuario. 
  • <input>: crea controles interactivos para formularios, con el fin de recibir datos del usuario. 

Cada etiqueta, debe tener una apertura y un cierre; de lo contrario, el código marcará error y los cambios no se visualizarán correctamente en la página web. 

En la siguiente imagen te compartimos un ejemplo más elaborado de cómo se vería la estructura HTML ya conformada con mayor contenido. Recuerda que esta solo representa elementos muy básicos. 

Estructura HTML: atributos y etiquetas

De esta manera puedes estructurar tu página web con tantos elementos y etiquetas que consideres necesarios. Si has cometido algún error en la apertura o cierre de alguna etiqueta podrás darte cuenta al visualizar una página de error, que el navegador se quede en blanco o simplemente al no ver configurado ningún cambio. 

Para hacer una estructura HTML es necesario crear un documento HTML con la extensión .html. Hacerlo es más simple de lo que crees, pues solo debes abrir algún desarrollador de texto, como lo puede ser el bloc de notas de tu sistema y comenzar a escribir el texto y las etiquetas necesarias para desarrollar tu página web. También puedes hacer uso de otras herramientas en línea como Tryit Editor de W3Schools. 

La estructura HTML puede ser tan extensa como lo necesites. Sin embargo, con los elementos básicos que te compartimos en esta publicación puedes comenzar a explorar y crear algunos aspectos de diseño de tu página web. Si bien, el lenguaje HTML puede ser un poco complejo, con un algo de práctica puedes llegar a dominarlo hasta construir un sitio completo con los atributos y cualidades que deseas.

Cómo usar HTML y CCS para mi página web

 HTML CSS

Publicado originalmente el Jun 6, 2022 7:00:00 AM, actualizado el 07 de junio de 2022

Topics:

HTML