Etiquetas de HTML

A la hora de programar requerimos de las "etiquetas" pequeñas palabras entre signos de mayor y menor que, los cuales le indican a la computadora que debe hacer con lo que se coloque entre ellas. En HTML, que es el lenguaje de código que estare utilizando para esta entrada, tenemos multiples tipos de etiquetas, que sin ellas, nuestra PC no sería capaz de entender lo que le estamos pidiendo.

Por ejemplo, el título de tu página web es "Manualidades", pero sin la etiqueta correcta para ello, ¿cómo esperas que la PC entienda donde debe colocar este texto? Con eso en mente procedere a explicar algunas de las etiquetas más utilizadas a la hora de programar con este lenguaje.

• Etiquetas de Estructura: Estas etiquetas son las que organizan la apariencia de la web, indicandole a la computadora donde colocar títulos, texto, encabezado, cuerpo, imagenes, etc.

• Etiquetas de Enbezado: Los encabezados contienen todas las etiquetas de título, tanto el de la página web como los que se utilicen dentro del texto. Algunos ejemplos son <title> y su cierre </title> y todas las etiquetas desde <h1> hasta <h6> con sus respectivos cierres </h1> y </h6>.

• Etiquetas de Texto: Como su nombre indica, estas etiquetas están diseñadas para arreglar el texto dentro del código y organizarlo correctamente, permitiendo agregar parrafos de texto con <p> o marcas la importancia de ciertas partes con <em>. Dentro de este tipo de etiquetas también se ven los títulos, por lo que <h1> a <h6> también son incluidos en esta categoría.

• Etiquetas de enlaces: Este tipo de etiqueta se reduce a una sola, <a href=> en la cual se puede introducir un link funcional a otra página web dentro de nuestra propia página.

• Etiquetas Multimedia: En esta categoría se encuentran todas las etiquetas para agregar elementos multimedia a la página web, permitiendo colocar videos, audios e imagenes dentro de la página web. Aquí entran las siguientes etiquetas: <audio> <video> <img> <source> <track>.

• Etiquetas de Listas: Esta categoría sirve para organizar el texto en forma de listado, tal como el nombre indica. Para esta tenemos varias etiquetas que nos ofreceran diferentes tipos de lista, como por ejemplo: <ul> para viñetas, <ol> para numeracion y <li> para definir cada cosa dentro del listado. A parte de estas también se pueden encontrar otros como <dl> <dt> y <dd>.

• Etiquetas de Contenedor: En esta categoría se utiliza <div> con el que se pueden delimitar ciertas áreas dentro del código, de esta forma facilitando el proceso a la hora de diseñar el aspecto de la página web, también permitiendo modificarla desde JavaScript.

• Etiquetas de Formulario: Estas son utilizadas para la captura de datos del usuario dentro de la web, contando con multiples etiquetas diferentes, como: <form> <label> <input> <textarea> y <button>.

• Etiquetas Semánticas: Las etiquetas semánticas nacieron como una forma de facilitar la programación dentro de HTML5, agregando nuevas etiquetas que dejan más claro que es lo que están haciendo, permitiendo organizar aún mejor la web sin necesidad de romperse la cabeza. Dentro de esta categoría están las etiquetas: <header>,<article>,<nav><section> y <footer>.

• Etiquetas de Tablas: Como su nombre indica, todas las etiquetas de esta categoría están pensadas para realizar una tabla dentro de la web, estas etiquetas son: <table> para hacer la tabla, <tr> para añadir columnas, <th> para añadir celdas de encabezado, <td> para las celdas del contenido, <thead> <tbody> <tfoot> que son utilizadas para estructurar la tabla y <caption> que se usa de forma opcional para darle un título a la misma.

• Etiquetas de Estilo: Estas etiquetas ayudan a brindarle una buena apariencia a nuestra página web, cambiando la fuente de las letras, el color del fondo, entre algunas otras funciones relacionadas al aspecto y (vaya la redundancia) el estilo. Para esto utilizamos: <style>

• Etiquetas de Moderador: A diferencia de lo que podría creerse por su nombre, las etiquetas de moderación no están hechas para los moderadores de la página web, en realidad lo que hacen estás etiquetas es permitirle al usuario interactuar con la página, por ejemplo: Hacer un botón clickeable. Dentro de esta categoría encontramos la etiqueta <dialog> que aunque util, depende bastante de JavaScript.

• Etiquetas Script: Esta categoría, como ya puede intuirse por el nombre, esta completamente diseñada para ser manejada por medio de JavaScript, permitiendo agregar partes de código ejecutable a nuestra página. Para esto solo utilizaremos la etiqueta <script>.