Estructura de HTML: Etiquetas

Como se ha explicado en post anteriores, HTML (HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web.

HTML utiliza “marcas” para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador Web. Las marcas HTML incluyen “elementos” especiales como <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img> por mencionar solo algunos.

Un elemento HTML se distingue de otro texto en un documento mediante “etiquetas“, que consisten en el nombre del elemento rodeado por “<” y “>”.

👉 Curso gratuito: Curso profesional de HTML y CSS.

Funcionalidad de las etiquetas HTML

Si bien las etiquetas en HTML son muy diversas y cada una cumple con su funcionalidad especifica, podemos decir que su propósito principal es dar estructura a nuestro sitio web y de este modo permitir al navegador interpretar mejor nuestras páginas.

A continuación, describiremos brevemente la funcionalidad de algunas de las etiquetas más utilizadas.

<html>: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML.
<script>: incrusta un script en una web, o llama a uno mediante src=”url del script”.
<head>: define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador.
<body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes.
<article>: Representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o re-utilizable.
<h1> a <h6>: encabezados o títulos del documento con diferente relevancia.
<table>: define una tabla.
<footer>: representa el pie de un documento o sección.
<a>: hipervínculo o enlace, dentro o fuera del sitio web.
<div>: división de la página. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido.
<img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen.
<main>: división estructural de la página que engloba el contenido principal de la misma. Dentro de esta etiqueta, por ejemplo, encontramos los <article>.
<span>: Sirve para diferenciar un texto de otro.

Son demasiadas ¿Qué pasa si queremos utilizar solo una?

Es valido y el navegador podrá leerlo e interpretarlo, pero por ninguna razón es la mejor practica y el modo mas eficiente de diseñar nuestro sitio web.

Un ejemplo muy común en los programadores menos experimentados es utilizar la etiqueta <div>para manejar todo el contenido de la página. Funciona, claro, pero el navegador no lo interpretara de la manera mas eficaz y el código no será amigable para nuevos programadores que se unan al desarrollo o le den mantenimiento al sitio. Es mejor optar por etiquetas no genericas como <article> para generar un articulo, <img> para identificar que el elemento es una imagen o <nav> para especificar que el elemento será una barra de navegación.

Otro ejemplo muy común es no utilizar adecuadamente las etiquetas de texto (<strong>, <em>, <p>, <mark>, <i>, <span> etc).

Si no manejamos las diversas etiquetas de texto en nuestra información, todo el texto será manejado como texto genérico, no resaltaremos palabras clave o daremos énfasis a citas y elementos de relevancia.

Conclusión

Vale mucho la pena dar una revisada a la documentación de las etiquetas y elementos de HTML para mejorar nuestra forma de desarrollar paginas web. No es necesario, y quizás tampoco posible, memorizar todas y cada una de las etiquetas existentes, pero si es posible aprender las buenas practicas y que etiquetas son las mas utilizadas por los desarrolladores más experimentados.