Jerarquía de texto en HTML con H1 a H6
Contenido del curso
Jerarquía de texto en HTML con H1 a H6
Contenido del curso
Raúl Adolfo Sánchez Rodríguez
Randy Clemente
Raúl Adolfo Sánchez Rodríguez
Ismael Fierro
Kenneth Angulo L
Jose Antonio
Dario Mendoza
Carlos Enrique Guzmán Bernabé
Brian Ortiz
Matias Ezequiel Rivero
emanuel alejandro cabrera manzaneda
Frank Alarcon Candiotte
Daniel Alexander Rentería Pino
Mario Alejandro Crespo Reyes
Raúl Adolfo Sánchez Rodríguez
Jorge Galicia Ruiz
Erwin Adonias Jiménez y Jiménez
Jose Luis Perales
Gilmar M Moreno G
Kenneth Angulo L
Carlos Rubén Díaz Gutiérrez
Seba Cardoso
Fernando Sánchez Mejía
Fernando Sánchez Mejía
Fernando Sánchez Mejía
Angel de Jesus Quintero Pereira
Gabriel Rojas
johhnier alberto farfan muguerza
Nailimer Molina Wasveiler
jorge a viveros m
🚀Diferencias entre las etiquetas <u>blockquote</u> y <u>q</u>
donde ves eso mi estimado?
Hola Randy, si te refieres a lo de la segunda imagen, en el inspector del navegador.
Hola! Este recurso de manz.dev es bastante interactivo en esto de las etiquetas.
Gracias por el aporte.
Esta buenisima la represantacion grafica, hay muchas etiqeutas que no conocia.
muchas gracias
En HTML, las etiquetas de texto y su jerarquía son fundamentales para estructurar contenido. Las etiquetas de encabezado (<h1> a <h6>) definen la importancia del texto, siendo <h1> el más importante, y solo debe usarse una vez por página. Las etiquetas <p> se utilizan para párrafos, mientras que etiquetas como <strong> y <blockquote> permiten dar énfasis o citar texto. Conocer y aplicar correctamente esta jerarquía mejora la accesibilidad y el SEO de tu página web.
Por si no encuentran el link en los recursos aqui les dejo el link para que puedan aprender mas Me acabo de dar cuenta que ahora si se puede encontrar este link en los recursos ya que el link no existía pero si es que algún día no esta el link en los recursos pueden ir a este comentario para poder aprender
Tip del profe:
Es una buena práctica tener solo una etiqueta <h1> por documento html. Esto para que el navegador entienda mejor las jerarquías del contenido.
<h1> Título principal
<h2> Subtítulos
<h3> Sub-secciones dentro de <h2>
La etiqueta <strong> en HTML se usa para dar gran importancia semántica a un texto, lo que lo hace más relevante para motores de búsqueda y lectores de pantalla, además de que los navegadores por defecto lo muestran en negrita. Es el equivalente a una advertencia o un punto clave del contenido, y debe usarse para texto que es verdaderamente importante para la comprensión del contenido.
la clase 3 a alguien mas no le funciona.... 404? ;(
sí, me paso en mi imac(SO sierra), buscador google, safari, inspeccione y salto varios errores en la consola, me cambie a windows y pude ver las clases
Reglas de las etiquetas de texto y jerarquia en HTML
Usa solo un <h1> por archivo para el título principal. Sigue con <h2> para temas secundarios y <h3> para subsecciones. Para texto común usa <p>, <strong> para resaltar y <blockquote> para citas. ¡Buen aprendizaje, Daniel Alexander!
Esto que comentas sobre la jerarquia del h1 no es completamente cierto porque resulta que tu puedes tener varios elementos de tipo seccion <section> y dentro de estas secciones, necesitas un titulo principal para cada seccion.
En este caso cada seccion podra llevar su propia h1 porque mas que solo se pueda o deba usar una unica etiqueta h1 por cada archivo de HTML, yo diria que depende mucho de nuestro contenido y de que es mas por contextos o grupo de datos o informacion.
Saludos !
🚀🚀¿Por qué utilizar solo un <h1></h1> ?
Para mantener una jerarquía clara y facilitar la comprensión del contenido. El h1 representa el título principal y único del documento, indicando al navegador y a los motores de búsqueda cuál es el tema central. Tener múltiples h1 puede confundir la estructura del contenido y afectar negativamente el SEO y la accesibilidad. 🤓☝🏼
¿Cuál es la función de la etiqueta <blockquote></blockquote>?
La etiqueta <blockquote> en HTML se utiliza para indicar que un bloque de texto es una cita extensa proveniente de otra fuente.
Mala práctica en desarrollo: Tener más de un H1, los demás H pueden estar repetidos de acuerdo a estrategía y finalidad.
Ejemplo:
Hice un gráfico en Gemini para representar la jerarquía de las etiquetas h1 a h6.
Gracias
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Los siete hábitos de la gente altamente efectiva</title> </head> <body> <h1>Los siete hábitos de la gente altamente efectiva de Stephen Covey</h1> <h2>Los hábitos correctos son el secreto de éxito en la vida</h2> <p>Los humanos necesitamos hábitos. Nuestras rutinas definen nuestro carácter y ejercen una fuerza invisible sobre nuestro comportamiento.</p> <h2>Céntrate en área especificas de tu vida y modifica tus paradigmas para iniciar un cambio duradero</h2> <h2>Debemos desarrollar nuestra capacidad proactiva en vez de reactiva</h2> <h2>Aprende a crear imágenes mentales concretas y mensajes claros sobre tu objetivo</h2> <h2>Establece tus prioridades y busca resultados que sean beneficiosos para todos</h2> <h2>Establece buenas realacionas con los demás realizando depósitos en sus cuentas bancarias emocionales</h2> <h2>Ser respetuoso y abierto son los requisitos escenciales para conseguir sinergia</h2> <h2>Dedica tiempo para mejorar tu vida física, espiritual, mental y social para seguir siendo muy efectivo</h2> <h2>Conclusión</h2> </body> </html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Los siete hábitos de la gente altamente efectiva</title>
</head>
<body>
<h1>Los siete hábitos de la gente altamente efectiva de Stephen Covey</h1>
<h2>Los hábitos correctos son el secreto de éxito en la vida</h2>
<p>Los humanos necesitamos hábitos. Nuestras rutinas definen nuestro carácter y ejercen una fuerza
invisible sobre nuestro comportamiento.</p>
<h2>Céntrate en área especificas de tu vida y modifica tus paradigmas para iniciar un cambio duradero</h2>
<h2>Debemos desarrollar nuestra capacidad proactiva en vez de reactiva</h2>
<h2>Aprende a crear imágenes mentales concretas y mensajes claros sobre tu objetivo</h2>
<h2>Establece tus prioridades y busca resultados que sean beneficiosos para todos</h2>
<h2>Establece buenas realacionas con los demás realizando depósitos en sus cuentas bancarias emocionales</h2>
<h2>Ser respetuoso y abierto son los requisitos escenciales para conseguir sinergia</h2>
<h2>Dedica tiempo para mejorar tu vida física, espiritual, mental y social para seguir siendo muy efectivo</h2>
<h2>Conclusión</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Los siete hábitos de la gente altamente efectiva</title>
</head>
<body>
<h1>Los siete hábitos de la gente altamente efectiva de Stephen Covey</h1>
<h2>Los hábitos correctos son el secreto de éxito en la vida</h2>
<p>Los humanos necesitamos hábitos. Nuestras rutinas definen nuestro carácter y ejercen una fuerza
invisible sobre nuestro comportamiento.</p>
<h2>Céntrate en área especificas de tu vida y modifica tus paradigmas para iniciar un cambio duradero</h2>
<h2>Debemos desarrollar nuestra capacidad proactiva en vez de reactiva</h2>
<h2>Aprende a crear imágenes mentales concretas y mensajes claros sobre tu objetivo</h2>
<h2>Establece tus prioridades y busca resultados que sean beneficiosos para todos</h2>
<h2>Establece buenas realacionas con los demás realizando depósitos en sus cuentas bancarias emocionales</h2>
<h2>Ser respetuoso y abierto son los requisitos escenciales para conseguir sinergia</h2>
<h2>Dedica tiempo para mejorar tu vida física, espiritual, mental y social para seguir siendo muy efectivo</h2>
<h2>Conclusión</h2>
</body>
</html>
Aunque solo pueda exisiter un h1 pueden haber varios h2 y h3 sucesuvamente
Exacto, Fernando. Tienes total libertad para usar múltiples h2, h3 y niveles inferiores, siempre que respeten el orden lógico de tu estructura.
Piensa en ellos como los capítulos y subcapítulos de un libro: el h1 es el título de la obra, mientras que los demás organizan el contenido. ¿Qué criterio usarías para decidir si un texto debe ser un h3 en lugar de un h2?
Cual era la forma de colocar texto random para <p><p/>
lorem + tabulador
¿Cuál es la mejor forma de resaltar palabras?
La forma ideal de darle énfasis a una palabra o frase dentro de un párrafo es utilizando la etiqueta <strong>.
A diferencia de simplemente cambiar el texto a negrita con estilos visuales, <strong> le añade un peso semántico real al contenido. Es como cuando estás hablando y levantas un poco la voz para asegurar que la otra persona preste atención a una palabra clave. Los navegadores renderizan esto visualmente en negrita por defecto, pero lo más importante es que los sistemas de asistencia tecnológica (como los lectores de pantalla) cambiarán su entonación al leer esa parte, comunicando la urgencia o importancia al usuario. Úsala para advertencias, conceptos clave o conclusiones vitales dentro de tus etiquetas <p>.
Gracias como quito los subtítulos del servicio de traductor de la página..
