Cuando uno se inicia en el mundo del diseño web y la maquetación, es común encontrarse con términos que suenan similares, pero que tienen significado distinto dentro del lenguaje HTML. Como autor y docente en esta área, me he dado cuenta de que comprender claramente estas diferencias desde el principio evita confusiones y facilita mucho el aprendizaje. Por eso, en este tutorial vamos a aclarar, de forma sencilla y paso a paso, para que usamos etiquetas y atributos en HTML.
Empecemos con lo básico: ¿qué es HTML?
HTML (HyperText Markup Language) es el lenguaje que utilizamos para estructurar el contenido de una página web. No es un lenguaje de programación como tal, sino un lenguaje de marcado, lo que significa que usamos para organizar y estructurar la información de cada página.
Dentro de HTML usamos elementos que se representan con etiquetas para estructurar el contenido. A continuación explicaré de que se trata todo esto y veremos ejemplo sobre como usar etiquetas y atributos en HTML.
¿Qué es una etiqueta?
La etiqueta es la “pieza visible” del código HTML. Es lo que uno escribe entre los símbolos de menor que < y mayor que > para marcar el inicio o el final de una estructura. Existen etiquetas de apertura y etiquetas de cierre.
Por ejemplo:
<p>Hola Mundo</p>
Aquí tenemos las etiquetas de apertura (<p>) y cierre de un párrafo (</p>).
Estas etiquetas indican que el texto “Hola, mundo” debe mostrarse como un párrafo en el navegador.
Guía de referencia de las etiquetas HTML en la documentación de MDN: https://developer.mozilla.org/es/docs/Web/HTML/Element.
¿Qué es un elemento?
En HTML existen diversos componentes a los que llamamos elementos. Si seguimos el ejemplo anterior, podemos decir que el elemento p, se representa con la etiqueta <p>, tiene una apertura y un cierre. Puede envolver contenidos y soporta atributos (como por ejemplo id o class).
Además, los elementos tienen un significado. En el caso que venimos estudiando, el elemento p es un párrafo y debe utilizarse para estructurar este tipo de contenidos en nuestros documentos HTML. ¿Qué significa esto? Pensemos el siguiente ejemplo, con estilos podríamos hacer que un párrafo se «parezca» a un título. Visualmente podría quedar idéntico a un título principal (<h1>), y el usuario no lo notaría a simple vista. Sin embargo, su uso semántico sería inadecuado a la hora de plantear la estructura del documento.
Es importante destacar que si bien hay características generales en los elemento, también existen particularidades. Por ejemplo, podemos encontrar elementos vacíos, que no tienen contenido ni requieren etiqueta de cierre, como el caso de <br>.
En este caso, <br> es un elemento de salto de línea, y se considera completo por sí solo. Si bien podría usarse como </br> o <br></br>, lo usual es encontrarlo como <br>, si no se require sintaxis estricta.
¿Qué es un atributo?
Un atributo es una propiedad adicional que se añade dentro de la etiqueta de apertura de un elemento. Los atributos modifican el comportamiento o la apariencia del elemento, o bien proporcionan información adicional.
Veamos un ejemplo:
<a href="https://www.damiandeluca.com.ar">Ingresar al sitio web de Damián De Luca</a>
Aquí, el atributo es: href="https://www.damiandeluca.com.ar". Este atributo le dice al navegador a qué dirección debe llevar ese enlace.
Cada atributo tiene dos partes:
- Un nombre de atributo (en este caso
href) - Un valor (en este caso
"https://www.damiandeluca.com.ar"), que siempre es recomendable incluirlo entre comillas.
Existen muchos atributos comunes como class, id, src, alt, style, entre otros, cada uno con un propósito diferente. Si estás comenzando, lo importante es saber que los atributos están ahí para agregar información extra a los elementos o establecer características de apariencia y/o funcionalidad.
Vale señalar que href es un atributo obligatorio para que un enlace <a> tenga su funcionalidad. De manera similar podemos pensar en src que es el atributo que permite indicar que imagen se mostrará cuando se usa una etiqueta <img>. Esto quiere decir que algunos elementos tiene atributos obligatorios para funcionar o representar un contenido.
Guía de referencia de atributos HTML en la documentación que ofrece MDN: https://developer.mozilla.org/es/docs/Web/HTML/Attributes.
Una guía visual
Para comprender lo explicado, veamos un ejemplo visual con las características que recorrimos en este artículo:
Etiquetas y atributos en HTML: consejo final
Al comenzar el camino del aprendizaje de un lenguaje o tecnología es muy importante consolidar los conceptos de base. A esto, quiero sumar la gran relevancia que tiene practicar y observar cómo se escriben y comportan los distintos fragmentos de código, en este caso HTML.
Siempre recomiendo en mis capacitaciones escribir pequeños documentos en un editor, como Visual Studio Code, guardar con extensión .html, y probarlos en tu navegador. Ver el resultado de tus etiquetas y atributos en HTML ayuda a interiorizar estos conceptos rápidamente.
Para complementar lo explicado en este artículo te recomiendo leer lo que explico en Anatomía de una página web. En ese contenido, detallo la estructura de una página e incluyo también la parte de CSS.
Si te interesa saber más sobre HTML y CSS te leo en comentarios.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta