Estructura básica de la web
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.
- <!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
