06 Nov Errores html frecuentes que me encuentro en clase. ¡Corrígelos!
Publicado a las 20:47h en Tutorial HTML gratuito. Aprende a estructurar tus páginas web., Ejercicios HTML 0 Comentarios
En esta publicación me he esforzado por recopilar muchos de los errores que algunos de mis alumnos hacen cuando enseño html.
Los conceptos base que deberías tener antes de hacer este ejercicio son:
- Concepto de etiqueta html.
- Concepto de encapsulamiento web.
- Estructura básica de un documento html.
- Etiquetas básicas html y encabezados.
- Caracteres escapados. (códigos html)
- Listas html y listas html anidadas.
- Anclas html
Pasemos al ejercicio.
Enunciado
El siguiente documento html está plagado de errores.
¿Puedes encontrarlos todos?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Corrige los errores</title>
</head>
<body>
<h1><strong>Corrige los errores</strong></h1>
<h2>Índice de contenidos</h2>
<ul>
<li><a href="ancla">Enlace 1</a></li>
<ul>
<li><a href="#">Enlace 2</a></li>
<li><a href="">Enlace 3</a></li>
</ul>
<li><a href=""></a>Enlace 4</li>
</ul>
<h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem at nostrum iure vitae veritatis officiis officia nam aperiam consequatur, dolor in unde beatae labore quibusdam, nihil assumenda eligendi sint!<br><br>
Maiores.</p></h2>
<p id="#ancla">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex mollitia quia, corporis dicta, eaque itaque.</p>
</body>
</html>Solución del ejercicio
Junto con el código verás en comentarios las correcciones oportunas.
Una consideración importante es que hay errores que son sintácticamente correcto pero funcionalmente erróneos. Estos errores el validador de código los pasaría por alto pero nuestro deber es entender el motivo por el que son innecesarios en base al contexto del documento web.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--Se escribe utf-8 y no utf8-->
<title>Corrige los errores</title>
</head>
<body>
<h1>Corrige los errores</h1> <!-- h1 es suficiente relevante como para llevar un strong anidado. No es necesario -->
<h2>Índice de contenidos</h2>
<ul>
<li><a href="#ancla">Enlace 1</a></li> <!--El ancla es erronea. Falta el #-->
<li><!--la lista estaba mal anidada-->
<ul>
<li><a href="#">Enlace 2</a></li><!--Es correcto. Una ancla sin identificador nos envía a la cabecera del documento.-->
<li><a href="">Enlace 3</a></li><!--No es erróneo pero se podría mejorar indicando "#". El navegador lo rellenará así por defecto cuando interprete el documento html.-->
</ul>
</li>
<li><a href="">Enlace 4</a></li><!--Un error común es poner el texto que queremos poner en el enlace fuera de él.-->
</ul>
<!-- Que haya aquí un espacio en blanco en el editor de código no es un problema. No se visualizará por pantalla cuando se interprete el documento web.-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem at nostrum iure vitae veritatis officiis officia nam aperiam consequatur, dolor in unde beatae labore quibusdam, nihil assumenda eligendi sint!</p><!--No debemos usar un párrafo dentro de un título. Del mismo modo, no deberíamos usar etiquetas de encabezado con fines méramente estéticos -->
<p>Maiores.</p><!--Maiores lo he puesto en un párrafo separado. Usar 2 <br> consecutivos con fines estéticos no es una buena praxis. Era sintácticamente correcto pero funcionalmente mejorable.-->
<p id="ancla"><!--Es un error frecuente confundirse y poner el # en el id. No debemos ponerlo o si lo ponemos entonces en el enlace deberemos escribir ##ancla-->Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex mollitia quia, corporis dicta, eaque itaque.</p>
</body>
</html>¡Hola!
Querido lector,
¿Has sido capaz de encontrar todos los errores sin ayuda o sin trampas?
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Examen html del curso de confección y publicación de páginas web
Cansado de encontrar recursos online que no satisfacían mis necesidades he decidido compartir uno de mis examenes html. ¿Te animas a hacerlo?
Cansado de encontrar recursos online que no satisfacían mis necesidades he decidido compartir uno de mis examenes html. ¿Te animas a hacerlo?
Factores que afectan al tiempo de carga de una página web
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Como y cuando usar las etiquetas blockquote, q y cite
Las etiquetas q, cite y blockquote tienen significado semántico. Además de que pueden ser muy útiles en cuanto al SEO. ¿Sabes cómo y cuándo debes usarlas?
Las etiquetas q, cite y blockquote tienen significado semántico. Además de que pueden ser muy útiles en cuanto al SEO. ¿Sabes cómo y cuándo debes usarlas?
Resumen de atributos html para ayudarnos a memorizar
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
Libro digital navegable
Ejercicio html en el que se practican los conceptos de listas anidadas ul, ol , li , anclas, enlaces, link y url relativas. Incluye solución. ¡Tu primer libro digital con html!
Ejercicio html en el que se practican los conceptos de listas anidadas ul, ol , li , anclas, enlaces, link y url relativas. Incluye solución. ¡Tu primer libro digital con html!
Ejercicio fácil de creación de tablas html. Incluye solución
Ejercicio básico para practicar como hacer una tabla en html. Etiquetas thead, tboyd, table, tr, th y td. Incluye solución.
Ejercicio básico para practicar como hacer una tabla en html. Etiquetas thead, tboyd, table, tr, th y td. Incluye solución.
No hay comentarios