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.
Respuestas