Como anidar etiquetas html correctamente

Como anidar etiquetas html correctamente

Print Friendly, PDF & Email
Como anidar etiquetas html correctamente
5 (100%) 1 voto

El significado de anidar es según la RAE hallarse o existir en alguien o algo.

Exactamente esto es lo que hacemos cuando escribimos html: anidar etiquetas.

Por ejemplo si vamos al caso más exagerado de todos cualquier etiqueta se encuentra dentro de <html></html>.

Pero vayamos a algo más habitual.

¿Cómo se anida exactamente una etiqueta dentro de otra?

Diferencia entre etiquetas anidadas y no anidadas.

En la imagen a continuación las etiquetas <strong> y <em> se encuentran dentro de <p>.

La etiqueta <em> se encuentra anidada dentro de <strong>.

etiquetas anidadas
La etiqueta em está anidada dentro de strong

En la imagen posterior las etiquetas <strong> y <em> se encuentran dentro de <p>.

Pero la etiqueta <strong> no se encuentra anidada dentro de <em>.

etiquetas dentro de un párrafo
La etiqueta em no está anidada dentro de strong

La norma que debemos seguir es que la última etiqueta en abrirse es la primera en cerrarse.

Errores típicos

En todas las formaciones de web, el error que se lleva el primer premio es el de anidar erróneamente una lista.

Os recomiendo leer esta entrada dónde se muestra como hacerlo.

En segundo lugar el error típico es olvidarse de cerrar etiquetas.

Otro error frecuente es directamente no respetar el orden de cierre de etiquetas.

Si tabuláis correctamente vuestro código html en el brackets, atom, sublime o editor de texto que uséis minimizaréis mucho este error.

¡Hola!

Querido lector,

En el caso de anidar etiquetas una imagen dice más que mil palabras. ¡Espero que os resulten útiles estos apuntes de clase!

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Validadores de código HTML y CSS
- 640
Incluso los programadores y diseñadores más experimentados cometen errores de sintaxis o vocabulario picando código en lenguaje html, css, javascript y cualquier otro lenguaje de programación. Nos pas...
Ejercicio html sobre códigos HTML y caracteres especiales
- 84
Ejercicio html para prácticar los nombres HTML y los códigos HTML de los caracteres más útiles de recordar. Incluye solución.
Anclas html
- 691
Anteriormente hemos visto que es un enlace y como se construye mediante una etiqueta y cuales son los atributos más importantes que lo acompañan. Hoy vamos a ver una de las utilidades más prácticas d...
¿Se pueden hacer listas númeradas negativas con HTML?
- 71
Ejemplos de listas numeradas negativas. Incluye código e imágenes del resultado final con distintas opciones.
Códigos HTML | Carácteres especiales (escapados)
- 133
¿Por qué se escapan los caracteres en html? ¿Que utilidad tiene complicarse con símbolos estraños? ¿Como los usamos? Apuntes de alumno HTML.
Ejercicio sobre creación de capas html mediante etiquetas div
- 100
Ejercicio sobre creación y estructuración de un documento web mediante capas html. Este ejercicio es preparatorio al salto a html5. Incluye solución y anotaciones de clase.
Corrige los errores que veas en la estructura web | Ejercicios html
- 99
Ejercicio html dónde se muestran errores comunes que cometemos al escribir documentos html. Incluye solución.
Ejercicio sobre listas de definiciones html
- 89
Gran excusa para repasar las listas html de definiciones y conceptos de cultura general sobre web e internet. Incluye solución.
LibrosWeb ahora es UniWebSidad
- 307
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Formatos de imagen png, gif, jpg y svg. ¿Cuándo usarlos?
- 88
¿Que formato de imagen usar? Influye la velocidad de carga, las transparencias, animaciones y la seguridad. Resumo las ideas clave.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.