¿Crees que dominas HTML? ¿Y qué tal el estándar HTML5? ¡Es hora de poner tus conocimientos a prueba!
En los foros online, siempre se habla de lo que debería saber un desarrollador web. Este artículo expone 10 preguntas cruciales que todo experto en HTML debería saber responder.
1. Validación del código HTML
Mira el código a continuación:
<figure>
<picture>
<source media="(min-width: 40em)"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320y">
<img src="medium.jpg" alt="Londres de noche">
</picture>
<figcaption>Un paisaje de Londres de noche</figcaption>
</figure>¿Crees que todo está correcto? Si no, ¿puedes explicar qué falla?
Respuesta:
El código utiliza el elemento <picture>, una adición a la especificación. La “y” en 320y es un error. Si cambias la “y” por una “w”, todo funcionará correctamente.
Aprende más sobre validación.
2. El elemento main
Define el elemento main. ¿Cuál es su propósito? ¿Están de acuerdo las dos especificaciones (WHATWG y W3C) en su definición?
Respuesta:
La definición del elemento main depende de la especificación a la que te refieras.
La especificación W3C define main como el contenido principal de la página. También indica que el documento no debe tener más de un elemento main.
La especificación WHATWG no le da un significado semántico a main y lo define como un contenedor para el contenido principal de otro elemento. Además, según WHATWG, puedes usar main un número ilimitado de veces. Si tu página tiene varios elementos <article>, puedes utilizar main dentro de cada uno de ellos.
3. El estándar WAI-ARIA
Analiza el siguiente fragmento de código:
<header>
<h1>Título principal</h1>
<form action="/" method="get">
<input type="search">
<input type="submit">
</form>
</header>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/products">Productos</a></li>
<li><a href="/about">Acerca de</a></li>
</ul>
<main>
<article>
<h1>Título principal</h1>
<p>Este es el contenido de esta sección</p>
</article>
</main>
<footer>
<small>Copyright © HTMLDESDECERO.es 2024</small>
</footer>
¿Puedes mejorar la accesibilidad utilizando WAI-ARIA donde sea necesario, teniendo en cuenta la compatibilidad con versiones anteriores?
Respuesta:
El código puede reescribirse de la siguiente manera:
<header role="header">
<h1>Título principal</h1>
<form action="/" method="get" role="search">
<label for="search">Buscar:</label>
<input id="search" type="search">
<input type="submit">
</form>
</header>
<nav role="navigation">
<ul>
<li><a href="/"> Inicio </a></li>
<li><a href="/products"> Productos </a></li>
<li><a href="/about">Acerca de</a></li>
</ul>
</nav>
<main role="main">
<article role="article">
<h1>Título principal</h1>
<p>Este es el contenido de esta sección</p>
</article>
</main>
<footer role="contentinfo">
<small>Copyright © HTMLDESDECERO.es 2024</small>
</footer>Para mejorar la accesibilidad, se ha agrupado el sistema de navegación bajo la etiqueta <nav>. Se ha mejorado la accesibilidad para sistemas que no admiten HTML5 al incluir los elementos header, navigation, main, article, y contentinfo dentro de las etiquetas header, nav, main, article y footer respectivamente.
Otros cambios se relacionan con el formulario de búsqueda. Primero, el formulario se ha colocado dentro del elemento search. Después, se ha añadido una etiqueta label para dar contexto al campo input, así como un atributo for para vincularlo.
4. El elemento small
Explica cuándo es adecuado usar el elemento small. Da ejemplos.
Respuesta:
En HTML 4.01, la etiqueta <small> se utilizaba para destacar texto con un tamaño de fuente más pequeño. Sin embargo, según el estándar HTML5, esta etiqueta debe utilizarse para destacar avisos, renuncias de responsabilidad y demás información similar. Cabe destacar que el texto no tiene que ser necesariamente pequeño.
Aquí tienes un ejemplo de cómo usar small:
<img src="image.jpg" alt="Londres de noche">
<small>Los derechos de autor de esta imagen pertenecen a Htmldesdecero.es</small>5. Subtítulos
Los subtítulos son uno de los elementos más utilizados en cualquier sitio web. Hace unos años se introdujo la etiqueta hgroup para esta función, pero desde entonces se ha eliminado de las especificaciones. ¿Por qué crees que se eliminó hgroup y qué opciones de marcado hay disponibles hoy en día para los subtítulos?
Respuesta:
La etiqueta hgroup se introdujo para agrupar varios elementos de encabezado, evitando crear subniveles en la jerarquía. El siguiente ejemplo explica por qué se introdujo:
<article>
<h1>Título principal</h1>
<h2>Este es un subtítulo</h2>
<p>Este es el contenido de esta sección</p>
</article>Esto crea la siguiente jerarquía:
h1
|
---h2
|
pComo puedes ver, el contenido del párrafo se considera parte de h2 en lugar de h1, aunque esa no haya sido la intención. Por lo tanto, si el objetivo era simplemente crear un subtítulo y asociar el texto a h1, el marcado original era incorrecto.
La etiqueta hgroup se introdujo para resolver este problema. Sin embargo, en abril de 2013, se eliminó debido a la falta de casos de uso, por lo que ya no es válida.
Una posible solución para crear subtítulos y asociar el párrafo a h1 se muestra a continuación:
<article>
<h1>
Título principal
<span>Este es un subtítulo</span>
</h1>
<p>Este es el contenido de esta sección</p>
</article>
6. Imágenes y accesibilidad
¿Es obligatorio el atributo alt para los elementos de imagen? Si no, describe las situaciones en las que puedes dejarlo vacío. ¿Un valor vacío puede afectar a la accesibilidad?
Respuesta:
El atributo alt es obligatorio para las imágenes, pero su valor puede estar vacío (por ejemplo, alt=""). Un valor vacío es válido cuando la imagen se utiliza únicamente con fines decorativos y no forma parte del contenido. De esta forma, los programas de lectura de pantalla omitirán estas imágenes. Se recomienda encarecidamente utilizar alt según su propósito, sin valores como “separador de bloques”.
7. El elemento time
¿Es posible representar un rango de fechas usando un solo elemento time?
Respuesta:
No, esto no es posible. Sin embargo, sí se puede expresar un rango de fechas usando dos elementos time. Por ejemplo, es válido describir un rango del 6 al 9 de noviembre de 2024 de la siguiente manera:
<time datetime="2024-11-06">6</time>-
<time datetime="2024-11-09">9 Agosto 2024</time>8. Los elementos meter y progress
¿Cuál es la diferencia entre los elementos meter y progress?
Respuesta:
El elemento meter representa un valor numérico (posiblemente fraccionario) dentro de un rango conocido. Este elemento no es adecuado para medir algo como la temperatura, ya que no tiene un rango fijo. Sin embargo, meter se puede utilizar, por ejemplo, para reflejar el espacio ocupado en un disco duro.
El elemento progress se utiliza para mostrar el progreso de una tarea. A diferencia de meter, el progreso descrito en progress puede no ser definitivo. Por ejemplo, puedes indicar que una tarea se está ejecutando, pero no saber cuándo terminará.
9. El atributo longdesc
¿Qué es el atributo longdesc y cuál es su propósito?
Respuesta:
El atributo longdesc del elemento <img> existe desde HTML 4 y también es válido en HTML5. Este atributo está diseñado para proporcionar más información sobre la imagen, en comparación con la información que ofrece el atributo alt. Lo curioso es que, a diferencia de alt, longdesc no contiene texto, sino una URL que contiene la descripción.
Un ejemplo de uso de longdesc se muestra a continuación:
<img src="italy.jpg"
alt="Esta imagen representa el mapa de Italia"
longdesc="italy.html#description">
<!-- otro contenido aquí -->
<section id="description">
<h2>Italia</h2>
<p>El mapa de Italia que se muestra ilustra su división
en regiones...</p>
</section>10. El elemento mark
¿Qué es el elemento mark? ¿Puedes dar un ejemplo de su uso?
Respuesta:
El elemento mark representa texto destacado. Normalmente se utiliza para destacar palabras clave y las que el usuario ha buscado.
<p>
Esta es una frase de ejemplo. El <mark>elemento</mark>
"mark" se usa para destacar palabras.
</p>Conclusión
En este artículo, un desarrollador profesional ha analizado diez preguntas que probablemente te encontrarás en una entrevista para un puesto relacionado con HTML.
Te recomendamos que revises los enlaces al material de referencia que se han incluido en el texto, así como otros artículos para seguir desarrollando tus habilidades.
