¿Crees que sabes de HTML? ¿Y el estándar HTML5? Probablemente merezca la pena comprobarlo.
A menudo se discute en los foros sobre lo que un desarrollador web debe saber y ser capaz de hacer. Un profesional comparte lo que cree que cualquier persona que trabaje con HTML debería saber.
Validación del Código HTML
Echa un vistazo al código siguiente:
<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>¿Está todo bien? Si crees que no, ¿puedes explicar qué es lo que falla exactamente?
Respuesta
El marcado utiliza un elemento de imagen, una nueva adición a la especificación. 320y es un error. Si se sustituye y por w, funcionará.
Elemento main
Intenta definir el elemento main. ¿Cuál es su esencia? ¿Son las dos especificaciones (WHATWG y W3C) coherentes en su definición?
Respuesta
La definición del término elemento main depende de la especificación a la que se refiera.
La especificación del W3C implica que es el contenido principal de una página, el contenido. La especificación también establece que un documento no debe contener más de un elemento main.
La especificación del WHATWG no asigna un valor semántico al elemento main y lo define como un contenedor para el contenido principal de otro elemento. Además, el WHATWG permite utilizar el elemento main un número ilimitado de veces. Si hay varios elementos article en una página, el elemento main puede utilizarse en cada uno de ellos.
Norma WAI-ARIA
Considera 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 &copy; HTML DESDE CERO</small>
</footer>¿Puedes mejorar la accesibilidad utilizando WAI-ARIA (Web Accessibility Initiative – Accesible Rich Internet Applications) cuando sea necesario, teniendo en cuenta la compatibilidad con versiones anteriores?
Respuesta
El código puede escribirse como sigue:
<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 &copy; HTML DESDE CERO</small>
</footer>Para mejorar la accesibilidad, el sistema de navegación se ha fusionado bajo la etiqueta <nav>. Se ha mejorado la accesibilidad para los sistemas que no utilizan HTML5 añadiendo elementos de header, navigation, main, article, y contentinfo en los elementos header, nav, main, article, y footer, respectivamente.
Otros cambios están relacionados con el formulario de búsqueda. En primer lugar, el formulario se colocó en el elemento search. A continuación se añadió el elemento label para dar contexto al campo input, así como un atributo for para enlazarlo.
El Elemento small
Explica cuándo es apropiado utilizar el elemento small. Poner ejemplos.
Respuesta
Si en HTML 4.01 el texto pequeño se seleccionaba con la etiqueta <small>, el estándar HTML5 exige que esta etiqueta se utilice para seleccionar Aviso legal, descargos de responsabilidad, advertencias, restricciones legales o derechos de autor. Por cierto, no es necesario que el texto sea pequeño.
A continuación se muestra un ejemplo de cómo utilizar el elemento:
<img src="image.jpg" alt="London de noche">
<small>Los derechos de autor de esta imagen son propiedad de Alex HTML</small>Subtítulos
Los subtítulos son uno de los elementos más utilizados en cualquier sitio web. La etiqueta hgroup se introdujo hace unos años para realizar esta función, pero desde entonces se ha eliminado de las especificaciones. ¿Por qué crees que se ha eliminado hgroup y qué opciones hay actualmente para el marcado de subtítulos?
Respuesta
El elemento hgroup se introdujo para agrupar varios elementos de cabecera/encabezado, evitando la creación de subniveles en la jerarquía. El ejemplo siguiente 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>Esta es la jerarquía:
h1
|
---h2
|
pComo puedes ver, aquí el contenido del párrafo es tratado como contenido h2 en lugar de h1, aunque esta puede no haber sido la intención. Por lo tanto, si el objetivo era simplemente crear un subtítulo y vincular el texto a h1, el marcado original era erróneo.
El elemento hgroup se introdujo para resolver este problema. Pero, fue eliminado en abril de 2013 por falta de casos de uso, por lo que no es válido.
A continuación, se muestra una posible solución para crear subtítulos de manera que el párrafo esté vinculado a h1:
<article>
<h1>
Título principal
<span>Este es un subtítulo</span>
</h1>
<p>Este es el contenido de esta sección</p>
</article>Imágenes y Accesibilidad
¿Es obligatorio el atributo alt para los elementos de imagen? En caso contrario, describa las opciones en las que el valor puede dejarse en blanco. ¿Afectaría un valor vacío a la accesibilidad?
Respuesta
El atributo alt es obligatorio para las imágenes, pero su valor puede estar vacío (alt="", por ejemplo). Se permite un valor vacío cuando la imagen se utiliza sólo con fines decorativos y no es contenido. Por lo tanto, el software de representación de contenidos en pantalla ignorará dichas imágenes. Se recomienda encarecidamente el uso de alt, para su propósito, sin valores como “separador de bloques”.
Elemento time
¿Es realista representar un intervalo de fechas con un solo elemento time?
Respuesta
No, no es posible. Pero, se puede expresar utilizando dos elementos time. Por ejemplo, esta descripción es aceptable en el código de rango del 6 al 9 de noviembre de 2021:
<time datetime="2014-11-06">6</time>-
<time datetime="2014-11-09">9 November 2021</time>Elemento meter y progress
¿Cuál es la diferencia entre el elemento meter y progress?
Respuesta
El elemento meter es un valor numérico (posiblemente fraccionario) en un rango conocido. Este elemento no es adecuado para medir algo como la temperatura, ya que no tiene un rango fijo. Sin embargo, meter puede utilizarse, por ejemplo, para representar la cantidad de espacio de disco duro utilizado.
El elemento progress se utiliza para mostrar el progreso de una tarea. A diferencia del elemento meter, el progreso descrito en el elemento progress puede no ser definitivo. Por ejemplo, se puede escribir que una tarea está en curso, pero no se sabe cuándo se completará.
Atributo longdesc
¿Qué es el atributo longdesc y cuál es su finalidad?
Respuesta
El atributo longdesc del elemento img existe desde HTML 4, y también es válido en HTML5. Este atributo está destinado a proporcionar más información sobre la imagen que la que proporciona el atributo alt. Lo interesante es que, a diferencia de alt, longdesc no contiene texto, sino un enlace que contiene una descripción.
A continuación, se muestra un ejemplo de cómo utilizar longdesc:
<img src="italia.jpg"
alt="Esta imagen representa el mapa de Italia" longdesc="italia.html#descripcion">
<!-- otros contenidos aquí -->
<section id="description">
<h2>Italia</h2>
<p>El mapa de Italia que se muestra ilustra su división
en regiones...</p>
</section>El Elemento mark
¿Qué es este elemento? ¿Puedes dar un ejemplo de su aplicación?
Respuesta
El elemento mark es el texto resaltado. Suele utilizarse para resaltar las palabras clave y las buscadas por el usuario.
Conclusión
En este artículo, un desarrollador profesional ha esbozado diez preguntas con las que, casi con toda seguridad, te encontrarás durante una entrevista para un puesto estrechamente relacionado con el HTML.
Te recomendamos que estudies los enlaces que aparecen en el texto a la documentación, así como algunos otros artículos para seguir aprendiendo.
