Propuesta de selección y clasificación de etiquetas básicas para el aprendizaje inicial de HTML 5

Por Luis Alberto Montecillo Salas

Resumen

La propuesta presentada en este artículo es el resultado del proceso inicial del desarrollo del sitio Web “Guía básica HTML5”, impulsada por el reto que representa abordar el aprendizaje de HTML para quienes comienzan a adentrarse en el estudio de las tecnologías Web. Para ello, se identificó la necesidad de contar con un base de conocimiento simplificada y estructurada como referencia inicial. En este sentido, se plantea una selección de etiquetas básicas HTML clasificadas en grupos temáticos según su función y tipología, de manera que sean fácilmente identificables por personas sin conocimientos previos.

Palabras clave: HTML, básico, etiquetas, aprendizaje.

Abstract

The proposal presented in this article is the result of the initial development process of the «HTML5 Basic Guide» website, driven by the challenge of learning HTML for those who are just starting to learn about Web technologies. As an initial reference, the need for a simplified and structured knowledge base was identified. Therefore, a selection of basic HTML tags classified in thematic groups according to their function and typology is proposed, so as to be easily identifiable by people with no previous knowledge.

Keywords: HTML, basic, tags, learning.

Ra tsapu̷ ts’ike jñaa*

Ne s’e̷ngua ra nzho̷o kja ne un kja ne tsjapu̷ na joo gi kjobu k’a pju̷ru̷ gi ra tee gi k’a b’u̷b’u̷ Web “tsju̷jnu̷ tee dya ze̷zhi HTML5”, ra d’aku porka ne reto pje ndajmu chje̷bi ne k’o ra mba̱ra gi HTML mbara kjo ngeje yo mbu̷ru nda pjotu̷ kja ne jyod’u̷ ñ’iji gi yo tecnología Web. Mbara ngeze, na pa̱ra̱ ne ni jyod’u gi pezhe ko ndaja tjujnu̷ gi ndamba̷ra dyu̷nu̷ ñe ja ba kjaa jange pjot’u̷ jñaa mbu̷ru̷. Kja na pes’i pjeñe na mamu̷ ndaja juajnu̷ gi kjobu dya ze̷zhi HTML jmanda kja jmuru̷ ts’ijña po nge na kjak’u̷ tjeñe ñe b’ezo, gi a kjanu pje ngeje dya ze̷zhi pa̱ra porka ntee na ndamba̷ra ma jingua.

Jña’a na joo: HTML, dya ze̷zhi, kjobu, k’o ra mba̱ra.

*Traducción lengua mazahua, variante norte del Estado de México: María Cristina Ventura Narciso.

PDF

Introducción

La propuesta presentada en este artículo es el resultado del proceso inicial del desarrollo de la Guía básica HTML5, el cual se aborda en la tesis “Desarrollo de un material didáctico multifuncional, mediante el diseño y construcción de una Guía básica de HTML 5, en formato de sitio Web, para la enseñanza de este lenguaje.” La Guía esta está disponible en el siguiente enlace: https://guiahtml.com.

Ante el reto que representa abordar el aprendizaje del HTML, del inglés HyperText Markup Language (lenguaje de marcado de hipertexto), para quienes comienzan a adentrarse en el estudio de las tecnologías Web, se identificó la necesidad de contar con un base de conocimiento simplificada y estructurada como referencia básica. Si bien, existen diversos recursos de consulta sobre este tema, lo cuales se abordan más adelante, dichos acervos enlistan la totalidad de etiquetas del estándar, algunas clasificadas, otras no, más para consulta de personas que ya cuentan con un determinado nivel de conocimiento del lenguaje y solo requieren consultar alguna especificación en concreto. Sin embargo, para quienes no tienen ninguna noción de HTML puede ser una tarea complicada hacer uso de estos recursos.

En este sentido, el objetivo es hacer una selección de etiquetas básicas HTML, a partir del total de etiquetas que componen el estándar y, posteriormente, clasificarlas en grupos temáticos según su función y tipología, de manera que sean fácilmente identificables por personas sin conocimientos previos.

1. 1.   ¿Por qué es relevante el aprendizaje de HTML a nivel básico?

El HTML es el lenguaje de creación de Sitios Web, se emplea en la escritura de documentos de tipo HTML en los que se define la estructura y contenido de una página Web, mediante el uso de un código basado en etiquetas. (W3C 3)

El HTML, al igual que la mayoría de las tecnologías Web, está estandarizado por el World Wide Web Consortium (W3C). Al ser un estándar sobre el que se sustenta la visualización de contenidos en la Web, sin importar su naturaleza y tener el soporte total de todos los navegadores, es un lenguaje fundamental, de ahí que su enseñanza resulte un elemento fundamental y básico en los procesos de aprendizaje orientados al desarrollo de proyectos Web.

La introducción en el aprendizaje de tecnologías de desarrollo Web parte, tradicionalmente del estudio de HTML como base, en la estructuración de contenidos, complementado con las Hojas de Estilo en Cascada (CSS del inglés Cascading Style Sheets) para la asignación de estilos en diversos medios. Desde luego no son los únicos lenguajes en el universo Web, sin embargo, constituyen una base fundamental para el desarrollo de numerosas soluciones Web, desde sitios Web básicos, aplicaciones Web y móviles, hasta grandes plataformas de contenido en línea.

Por lo anterior, resulta esencial establecer mecanismos que faciliten el proceso formativo de estudiantes de estas tecnologías mediante el uso de recursos eficientes, para trabajo en el aula y extra-clase. En este contexto se pueden identificar dos grandes temas de interés: el conocimiento reflexivo y aplicado, ambas con el mismo grado de importancia. En la base teórica se encuentran las definiciones, estructura y lógica del HTML y sus etiquetas, por otro lado, la práctica se centra en la ejecución del código y la observación por parte de los estudiantes, del comportamiento de este en un navegador Web.

El presente estudio se centra en la definición de una base teórica como una estructura inicial orientada al aprendizaje básico del HTML, útil para el desarrollo de materiales didácticos o como un recurso en los procesos elementales de enseñanza del tema.

1. 2.   Revisión de referencias existentes

De manera general, al ser un tópico tan extenso y de gran impacto, existen numerosas referencias sobre el HTML, de este universo se han seleccionado dos: w3cschools.com y developer.mozilla.org. Ambos son recursos en línea con trayectoria y reconocimiento en el medio, además de constituirse como acervos de gran volumen de conocimiento relacionado con el desarrollo Web en general. A continuación, se describen brevemente sus características.

w3schools.com

Se trata de un Sitio Web de consulta con referencias sobre múltiples tecnologías Web creado por la empresa noruega Refsnes Data, se describe a sí mismo como: “El sitio Web de desarrollo más grande del mundo”. Cuenta además con tutoriales, ejemplos y ejercicios para el aprendizaje de otros lenguajes, así como para algunas bibliotecas, frameworks y complementos. (Refsnes Data)

Para efectos de este artículo, se tomará como antecedente la sección de “HTML Tag Reference”, la cual presenta un listado de etiquetas HTML con una breve descripción, al ingresar a cualquiera de ellas muestra el detalle de dicha etiqueta y sus características: ejemplo, definición y uso, soporte de navegadores, consejos y notas, diferencias entre versiones de HTML, atributos, estilos CSS por defecto y algunos ejemplos interactivos de uso. Desde ahí se ofrece un panorama completo de las etiquetas HTML, sin embargo, su extensión, estructura y cantidad de detalles avanzados pueden resultar abrumadores para quienes recién se inician en el tema. La organización alfabética de contenidos supone un criterio de orden útil para que los usuarios con cierto conocimiento logren acceder de forma ágil a alguna referencia en particular, no así para visitantes que desconocen los nombres, usos y estructuras de las etiquetas.

Figura 1. Página de etiqueta <a> en w3schools. Fuente: Sitio Web de w3schools. Fuente: https://www.w3schools.com/tags/tag_a

developer.mozilla.org

Es la documentación en línea de la corporación Mozilla (los creadores del navegador Firefox) para desarrolladores, contiene guías, tutoriales y referencias para HTML, CSS y JavaScript, además de algunos complementos y tecnologías extra. (Mozilla 2005)

La sección de interés para este estudio corresponde al “Listado de elementos HTML5”, es pertinente aclarar que no debe confundirse con el “Índice de elementos HTML” disponible en el mismo Sitio. A continuación, se describe cada uno para establecer la diferencia:

Índice de elementos HTML: contiene todas las etiquetas HTML que han existido sin considerar su validez, estandarización o vigencia y constituye un mero repositorio o base de conocimiento histórica.

Listado de elementos HTML 5: está compuesto únicamente por las etiquetas válidas, estándar, vigentes y actualizadas del lenguaje.

A diferencia de w3schools.com, la organización de los elementos es con base en su función, lo que facilita su consulta para usuarios no experimentados, la estructura de los grupos por funcionalidad es la siguiente:

• • • • · Elemento raíz
      • · Metadatos del documento
      • · Scripting
      • · Secciones
      • · Agrupación de Contenido
      • · Semántica a nivel de Texto
      • · Ediciones
      • · Contenido incrustado
      • · Datos tabulares
      • · Formularios
      • · Elementos interactivos

La clasificación de los contenidos por función es de mejor lectura que la alfabética; no obstante, al estar orientada a la consulta para desarrolladores, es decir, usuarios con cierto grado de conocimiento sobre el tema, no resulta del todo apta para usuarios de nivel básico.

Figura 2. Página de elemento <a> en Sitio de Mozilla. Fuente: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/a

Al ingresar al detalle de una etiqueta es posible consultar su definición, atributos y ejemplos de uso entre otros detalles de información, sin embargo, este contenido no es estándar en todas las fichas descriptivas de cada etiqueta. Por ejemplo, algunas incluyen soporte, compatibilidad con navegadores, interfaz DOM, interacción con CSS o vistas del elemento, pero no todos estos apartados están presentes en todas las etiquetas, ni siquiera en las que corresponden al mismo grupo.

Es así, que ante la dificultad que supone para quienes están iniciando su proceso de aprendizaje, consultar las referencias antes mencionadas o similares, se identifica la necesidad de consolidar un extracto de ese gran bloque de conocimiento para facilitar la curva de aprendizaje en sus inicios.

3.   Selección y clasificación de etiquetas básicas

El HTML se encuentra presente desde los albores de la WWW tal como la conocemos ahora y es un elemento fundamental para el desarrollo Web hasta el día de hoy. Desde luego no ha permanecido inmutable desde su nacimiento, ha evolucionado de la mano de diversos factores tecnológicos y sociales como las tecnologías de desarrollo Web, la creación de nuevos dispositivos y programas para navegar, y consultar información en línea, los avances en materia de telecomunicaciones y los hábitos de consumo de los usuarios que ahora ya no se limitan al círculo científico.

Esta evolución se hace patente no sólo en el versionamiento del lenguaje, actualmente en su versión 5, también en la constante revisión del estándar, sus componentes, buenas prácticas, la interacción con otras tecnologías y lenguajes Web, el desempeño en nuevos dispositivos y en los navegadores Web. El fuerte vínculo e interrelación de HTML con estos factores en innovación continua, hace imposible que este se mantenga inmutable.

En este proceso se observa que algunas etiquetas y atributos se modifican para adaptarse a los cambios, por otro lado, algunos elementos presentes a lo largo de la historia del lenguaje, que responden a criterios específicos del contexto tecnológico del momento, se vuelven obsoletos a causa el desarrollo y evolución de dicho contexto. De la misma forma, esta dinámica implica el surgimiento de nuevas características que dan lugar a la propuesta e incorporación de nuevas etiquetas, y atributos al estándar.

4.   Selección de etiquetas básicas

En la siguiente referencia se presentan todas las etiquetas válidas y estándar de HTML5 listadas en la documentación de desarrollo de la corporación Mozilla. (Mozilla 2005) Listado de etiquetas estándar HTML5

La finalidad de tomar como base este listado es delimitar las etiquetas elegibles para la clasificación únicamente a elementos válidos dentro del estándar, de ese modo, se evita revisar innecesariamente etiquetas obsoletas.

Con base en el listado anteriormente citado, se propone una selección de etiquetas básicas de HTML considerando los siguientes criterios:

• • • · Obligatoriedad: etiquetas necesarias para el desempeño y despliegue correcto de un documento Web.
    • · Uso común: etiquetas de elementos comúnmente presentes en páginas y sitios Web, como texto con formatos básicos, imágenes, videos, etc.
    • · Interacción básica: etiquetas necesarias para navegación y creación de componentes de interacción básica con el usuario, como enlaces y formularios simples.
    • · Buenas prácticas de maquetación: etiquetas que favorezcan la construcción semántica de páginas Web sustentada en buenas prácticas.

En resumen, se seleccionaron las etiquetas requeridas para construir un sitio Web que se despliegue correctamente en navegadores, contenga elementos comúnmente utilizados para la presentación de contenidos y que sea totalmente navegable y estructurado, con base en buenas prácticas.

5.   Clasificación de las etiquetas seleccionadas

Una vez que se han seleccionado las etiquetas básicas, se propone una clasificación, con la finalidad de agrupar tipológica y funcionalmente los elementos HTML en conjuntos o categorías que faciliten su aprendizaje, al establecer un criterio de orden progresivo que conduzca la dinámica didáctica estructuradamente. Las categorías propuestas son las siguientes:

• • • · Esenciales
    • · Diseño de página
    • · Texto
    • · Datos
    • · Formulario
    • · Multimedia

A continuación, se describen las categorías y las etiquetas pertenecientes a cada una de ellas, cabe destacar que algunas etiquetas reciben un tratamiento de etiquetas secundarias, no por que sean de menor importancia, sino porque su uso está supeditado a otras etiquetas. Por ejemplo, una etiqueta <td> carece de sentido si no se coloca dentro de <table>, puesto que una celda no puede presentarse de forma aislada fuera de una tabla. En este orden de ideas, los listados de etiquetas pertenecientes a cada sección estarán señalados de la siguiente forma:

• • • ·Etiqueta básica
      • • Etiqueta básica secundaria

Esenciales

Son etiquetas indispensables para el despliegue correcto de una página HTML en un navegador Web, en esta categoría se encuentran las etiquetas que conforman la estructura básica de un documento HTML.

• • • ·<!doctype html>
    • ·<html>
    • ·<body>
    • ·<head>
      • ·<title>
      • ·<link>
      • ·<meta>

Diseño de página

Establecen la estructura básica de la página, definen los apartados de información y la organización de los contenidos. A excepción de <div> y <span> se trata de etiquetas semánticas introducidas a partir de HTML5. Se les denomina de esa forma ya que dan sentido o significado a elementos en el código HTML a diferencia del uso de etiquetas genéricas. Si bien, su implementación no se percibe de forma directa en el navegador, mejora la experiencia de desarrollo y favorece el renderizado e indexación de las páginas Web.

• ·<main>
• ·<section>
• ·<nav>
• ·<article>
• ·<header>
• ·<footer>
• ·<div>
• ·<span>

Texto

Se utilizan para dar formato y presentar información textual, ofrecer alternativas de accesibilidad de lectura y proveer esquemas de navegación para los contenidos del sitio o página Web.

• • • ·<h1>,<h#>…
    • ·<p>
    • ·<a>
    • ·<em>
    • ·<strong>
    • ·<br>

Datos

Sirven para organizar datos e información y presentarla de formas que faciliten su lectura, ya sea a través de listados de datos o información tabular estructurada.

• • • ·<ol>
    • ·<ul>
    • ·<li>
    • ·<table>
      • ·<tr>
      • ·<td>
      • ·<th>

Formulario

Sirven para definir el espacio semántico que deberá ocupar un formulario, asignarle un nombre y definir elementos de interacción para la captura de datos e información específica proporcionada por los usuarios.

• • • ·<form>
    • ·<fieldset>
    • ·<legend>
    • ·<label>
    • ·<input>
    • ·<select>
      • ·<option>
    • ·<textarea>

Multimedia

Estas etiquetas permiten enlazar elementos multimedia dentro de la página, para proporcionar contenidos más atractivos y enriquecidos a los usuarios.

• • • ·<img>
    • ·<iframe>
    • ·<video>
    • ·<audio>

La clasificación de etiquetas básicas provee una estructura orientada a facilitar los procesos didácticos en la enseñanza del lenguaje HTML, al organizar las etiquetas según su tipo y funcionalidad. Asimismo, establece bloques de conocimiento progresivo desde los fundamentos del lenguaje hasta la presentación de elementos de valor agregado.

A manera de ejemplo de uso, se muestra la estructura HTML de la página de Inicio de la Guía básica HTML 5, desarrollada a partir de los elementos descritos en este artículo.

Figura 3. Vista de fragmento de estructura HTML y del diseño final de la página de Inicio de la Guía básica HTML 5. Fuente: https://guiahtml.com

La vista completa del código se puede consultar en el siguiente enlace: view-source:https://guiahtml.com/index_demo.html y la vista del diseño final en: https://guiahtml.com.

Conclusión

El conocimiento del HTML es un pilar fundamental en el aprendizaje orientado al desarrollo Web, puesto que en él están sustentados un alto porcentaje de aplicaciones, proyectos y productos del Internet en la actualidad. Es importante recalcar que el lenguaje HTML puede resultar abrumador en su aprendizaje y enseñanza debido a la gran cantidad de etiquetas existentes. En este sentido, definir estrategias que faciliten la adquisición de habilidades básicas para estudiantes que se inician en el universo del desarrollo Web resulta valioso.

Luego de la revisión de referentes, se encontraron acervos de consulta que incluían la totalidad de etiquetas del estándar, si bien, esto no es inadecuado, tampoco responde a la necesidad de una documentación de consulta simplificada y orientada a estudiantes que inician su aprendizaje. La revisión y selección de etiquetas básicas de HTML ayuda a concretar un compendio de elementos para establecer un marco de trabajo optimizado para las labores didácticas de iniciación en el aprendizaje del lenguaje HTML.

La clasificación del extracto de etiquetas básicas dio pie, en primer lugar, a la esquematización de la información en bloques de contenido que, en segundo lugar, dan origen a una ruta de aprendizaje que parte desde los fundamentos del lenguaje y avanza en cada bloque hacia etiquetas, y conceptos gradualmente más complejos. Esta ruta ayuda a guiar los procesos didácticos tanto para el docente como para los estudiantes.

Sin duda, este es un primer paso a partir del cual se abren nuevas posibilidades, un ejemplo de la aplicación de este estudio es la Guía básica de HTML5, desarrollada a partir de este proceso de selección y clasificación. La Guía esta está disponible en el siguiente enlace:

https://guiahtml.com

Por lo anterior, seleccionar y clasificar las etiquetas básicas como paso inicial en la definición de estrategias de enseñanza básica, provee la estructura base para orientar el aprendizaje progresivo desde los aspectos fundamentales hasta el desarrollo de un sitio Web funcional, navegable y apegado a buenas prácticas.

Fuentes de consulta

• • Mozilla. Lista De Elementos HTML5. 2005. Mozilla. Marzo de 2020. Web. <developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos>.

• • Muñoz, Pablo Alberto Morales. Elaboración de material didáctico. México: Red Tercer Milenio, 2012. Impreso.

• • Refsnes Data. HTML Element Reference. Refsnes Data. Marzo de 2020. Web. <https://www.w3schools.com/tags/>.

• • W3C. HTML & CSS. 2016. 10 de marzo de 2020. Web. <https://www.w3.org/standards/webdesign/htmlcss>.

• —. Sir Timothy Berners-Lee OM, KBE, FRS, FREng, FRSA – Longer Biography . s.f. Marzo de 2020. Web. <https://www.w3.org/People/Berners-Lee/Longer.html>.

Semblanza

Luis Alberto Montecillo Salas

Formación académica: es diseñador de la comunicación gráfica por la Universidad Autónoma Metropolitana (UAM) y maestro en Comunicación con Medios Virtuales con mención honorífica por ICONOS, Instituto de Investigación en Comunicación y Cultura.

Actividad profesional: es especialista en tecnologías front-end para desarrollo Web, arquitectura de información, diseño de interfaz y experiencia de usuario. Adicionalmente, se desempeña en otras áreas del diseño como identidad gráfica y diseño editorial. Cuenta con 15 años de experiencia en diversas actividades de diseño y múltiples proyectos a nivel nacional e internacional en el sector público y privado. Paralelamente, es docente de Fundamentos de Sitios Web a nivel licenciatura y maestría.

 Correo: l.alberto.montecillo@gmail.com