0

Soy nuevo en esta plataforma al igual que en diseño web. Estoy haciendo un encabezado para mi página web la cual pretendo sea responsiva. Mi duda: ¿Es mala práctica tener dos encabezados en un HTML? Lo que busco con esto es dar estilos diferentes a cada header como muestro a continueación.

Al final lo que hago es "activar" y "desactivar" los header dependiendo la resolución de la pantalla, esto con JS.

<header class="header container-header">

    <nav class="navigation-bar">

        <ul class="navigation-bar__ul">
    
            <li class="navigation-bar__li"><a href="index.php">Inicio</a></li>
            <li class="navigation-bar__li"><a href="#">Comienzo</a></li>
            <li class="navigation-bar__li"><a href="#">Tutoriales</a></li>
            <li class="navigation-bar__li"><a href="#">Recursos</a></li>
            <li class="navigation-bar__li"><a href="#">Nosotros</a></li>
    
        </ul>
    
    </nav>
    
</header>

<header class="header-flex container-header">
            
    <div class="bar-main">
    
        <div id="button-logo" class="container-button-bar">
    
            <a href="index.php"><img src="img/Logotipo.png" alt="Logotipo" class="container-button-bar__img"></a>
                
    
        </div>
            
        <div id="button-menu" class="container-button-bar">
                
            <img src="img/menu.svg" alt="Botón del menú" class="container-button-bar__img">
    
        </div>
    
    </div>
    
    <nav class="navigation-bar-flex">

        <ul class="navigation-bar-flex__ul">
    
            <li class="navigation-bar-flex__li"><a href="index.php">Inicio</a></li>
            <li class="navigation-bar-flex__li"><a href="#">Comienzo</a></li>
            <li class="navigation-bar-flex__li"><a href="#">Tutoriales</a></li>
            <li class="navigation-bar-flex__li"><a href="#">Recursos</a></li>
            <li class="navigation-bar-flex__li"><a href="#">Nosotros</a></li>   
    
        </ul>
    
    </nav>

</header>
Christian
  • 9,428
  • 6
  • 13
  • 34
Jony PH
  • 1
  • 2
  • 2
    ¿Y por que no simplemente con media queries dependiendo de la resolución ajustas los estilos?, por que ahi claramente se ve que estás haciendo mas de lo que deberías – BetaM Mar 28 '21 at 18:58
  • La verdad es que soy autodidacta y en un tutorial hacían algo parecido. Sólo que de alguna forma sentí que no es correcto por eso vine a preguntar aquí. Aún así gracias por responder. – Jony PH Mar 28 '21 at 19:01
  • La pregunta en si luce basada en opiniones ya que como te digo salvo alguna especificación que solo se resuelva como lo planteas creo que lo mas simple es solo un menú y modificar este mediante media queries en función de la resolución – BetaM Mar 28 '21 at 19:03
  • 2
    Para páginas responsivas el estándar que se usa hoy por hoy son los [media queries](https://es.stackoverflow.com/q/50786/29967), los cuales te permiten ajustar los elementos según el dispositivo/tamaño de pantalla/resolución sin necesidad de duplicar contenido. Ten en cuenta que los tamaños cambian incluso entre familias de dispositivos, de ahí la gran ventaja de usar media queries. Otro aspecto importante es la rapidez con que evolucionan los dispositivos móviles. El año que viene sin duda habrá nuevas resoluciones y reflejarás eso añadiendo la media query adecuada en tu CSS y listo... – A. Cedano Mar 28 '21 at 20:38

1 Answers1

3

Hola Jony PH no es mala practica pero depende de a que te refieras con el encabezado de html si es para el cuerpo de la pagina osea me refiero al encabezado que esta dentro del cuerpo no es mala practica

por ejemplo:

Suponiendo que tienes una estructura similar a esta una basica la etiqueta header uno y la etiqueta header dos ambas son encabezados dentro del cuerpo de la pagina entonces no es mala practica ya que html es como la estructura de tu pagina es decir solo es la base de tu pagina nada mas la cual le dice al navegador llamese firefox chrome etc.. que tiene que estructurar esa pagina conforme al codigo html que tu le hayas intruducido a dicha pagina

<html>
<body>
<header>
  Encabezado 1
</header>
<header>
 Encabezado 2
</header>
</body>
</html>

pero si es para el encabezado principal osea el que esta fuera del cuerpo de la pagina entonces si tenemos problemas amigo

<html>
<head>
Encabezado fuera del cuerpo 1
</head>
<head>
Encabezado fuera del cuerpo 2
</head

<body>
<header>
  Encabezado 1
</header>
<header>
 Encabezado 2
</header>
</body>
</html>

Aca si hay problemas ya que no es imposible pero es mala practica tener dos encabezados head fuera del cuerpo porque puedes tener problemas al momento de que el navegador entienda que encabezado va a ocupar como te digo todo se basa en estructurar la pagina que tu este contruyendo

aldair martinez
  • 105
  • 6