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.
![<< [Plantilla gratuita] >> Plantillas de códigos de programación para HTML.](https://no-cache.hubspot.com/cta/default/53/bb3e5cad-5b6c-4956-a702-59b9da03864a.png){kind=small}
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.
Qué incluye la estructura HTML?
La estructura HTML de una página web se compone de las etiquetas <html>, que indica el comienzo de la página; <head>, que contiene información más descriptiva sobre el sitio; y <body>, que conforma todos los elementos visibles de la página.
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:
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:
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.
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.
Crea tu sitio web con HubSpot
Es muy fácil lograr el diseño de tu página web con el creador gratuito de HubSpot. Simplemente sigue el proceso de creación: regístrate, elige una plantilla, personaliza tu sitio web, publícalo en línea en tu propio dominio y optimiza su rendimiento.
Por ejemplo, mediante el drag-and-drop, una herramienta intuitiva y fácil de usar que permite a las empresas crear páginas web personalizadas con solo arrastrar y soltar elementos, puedes crear páginas web estáticas y personalizar tu sitio web.
Con esta herramienta, las empresas pueden incluso crear páginas de destino para mejorar su experiencia de usuario, insertar un formulario online y aumentar las conversiones
Estos elementos son fundamentales para las empresas que quieran mejorar su presencia en línea, pues permiten a los equipos de marketing crear sitios web y formularios de forma rápida y eficiente sin la necesidad de conocimientos técnicos avanzados.
Con las plantillas y el creador web de HubSpot podrás diseñar un sitio web único, profesional y atractivo. Personaliza cualquier plantilla según tus necesidades y crea páginas web de alta calidad sin necesidad de código ni programación.
