Well, as I understand it, on a page it is not good to put more than one h1 or abuse h2, h3... The question is that they have given me a class activity to layout with grid and when I see the amount of h1 it has , I thought it was wrong and I would like to fix it, but I don't know exactly how it should look, what do you recommend?
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="utf-8" />
<title>HTML5</title>
</head>
<body>
<header>
<h1>Header</h1>
<h2>Subtitle</h2>
</header>
<div id="container">
<nav>
<h3>Nav</h3>
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
</nav>
<section>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros,
vel fringilla urna.</p>
<p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.
</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est
eros, vel fringilla urna. Pellentesque odio</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
</section>
<aside>
<h3>Aside</h3>
<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros,
vel fringilla urna. Pellentesque odio rhoncus</p>
</aside>
<footer>
<h2>Footer</h2>
</footer>
</div>
</body>
</html>
Do you see any other tag semantic modification that is not right?
The starting point is wrong and that can lead to mistakes (of organization or logic) or unnecessary headaches:
That is not true:
h1
per page, what is prohibited is having more than oneh1
per page.section
h2
,h3
, etc. Cuando creas un contenido organizado debes usar tantosh2
,h3
como elementos dependientes existan. Si por naturaleza tienes un contenido que debe llevarn
etiquetash2
, lo penoso sería recurrir a acciones truculentas para negar parte de esosh2
convirtiéndolos en otra cosa. Si el contenido debe llevarn
etiquetash2
pónselas, respeta la naturaleza de tu contenido.Las Notas de uso en el apartado Elementos Título de MDN son suficientemente aclaratorias para sustentar las dos afirmaciones anteriores (pondré algunas negritas para resaltarlo):
Si observas los ejemplos, tanto en la especificación de HTML 5, como en MDN, podrás ver que, cuando el contenido se organiza por secciones, se empieza siempre con
h1
y se sigue con los otros niveles.Otra cosa muy importante es lo dicho aquí (las negritas son mías):
Esto quiere decir que cuando defines por ejemplo
<header>
o<article>
estás en una sección implícita, por tanto, esto es totalmente válido:Conclusión
Si el contenido que muestras en la pregunta corresponde a la naturaleza jerárquica de lo que representa, no recurras a soluciones oscuras para negar ciertos encabezados creyendo que incurres en una falta que no existe realmente.
I have placed all my recommendations in the comments of the html.
The truth is that it all depends on you how much you want to design that practice, you can import new fonts as I put it in this example, you import it in your head from GoogleFonts and you can add animations to each label from animate.css .
I left you a style that you can use, it is clear that you can try it however you want... I hope it works for you.