fbpx

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.

Artículos relacionados

Respuestas

Conoce nuestras rutas de aprendizaje.

Especialízate en las áreas de tu interés. Aprende desde cero con nuestras rutas de aprendizaje. Este año 2023 tendremos muchos cursos nuevos en Azul School, así que estas rutas se irán actualizando e irán surgiendo nuevas.