Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

HTML5 e uso de listas para menus.

Existem algumas tags que não são semânticas. Um exemplo que conheço bem é a tag div (mas vejo ela em todos os sites, acredito que para ajudar no estilo lá no css). Abaixo o código que implementei para a criar a estrutura de menus do site. Bom, a minha questão é: a tag div é absolutamente desnecessária ou pode vir a ser útil na parte de estilização ? (a tag header parece eliminar a necessidade da div, e de fato não foi usada pelo instrutor no curso)

<!DOCTYPE html>
<html>
<head>
    <title>Alura Conf</title>
</head>
<body>
    <div>
        <header>
            <nav>
                <ul>
                    <li><a href="#">Sobre</a></li>
                    <li><a href="#">Palestrantes</a></li>
                </ul>
            </nav>            
        </header>
    </div>
</body>
</html>

A outra questão é: por que ainda se usa listas para criar menus? O código abaixo não é adequado? Existe uma alternativa melhor no HTML5 para criar menus?


<!DOCTYPE html>
<html>
<head>
    <title>Alura Conf</title>
</head>
<body>
    <div>
        <header>
            <nav>
                <a href="#">Sobre</a>
                <a href="#">Palestrantes</a>
            </nav>            
        </header>
    </div>
</body>
</html>
2 respostas

Concordo, acho o uso de header e nav neste caso mais semântico.

solução!

Oi gente,

TL;DR: melhor usar a <div> do que usar HTML5 só por usar & use a estrutura tradicional de NAV>UL>LI>A.


Tanto a <div> quanto o <span> são elementos genéricos sim, que atualmente deveríamos usar apenas se não há outro elemento mais semântico para resolver a questão. O <header> mata uma <div class="cabecalho">, mas como marcar uma <div> que tem função mais para ser o pai direto de um elemento com position: absolute, por exemplo?

Plus, melhor marcar com <div> do que tentar usar o HTML5 e acabar marcando de forma errada. Tudo isso vale para o <span> também claro, mas aí vai da necessidade de um elemento de bloco ou inline.

Com relacao a sua segunda pergunta sobre <nav>, sinto sua dor. Com o HTML5 faz mais sentido pra mim deixar a estrutura assim: NAV > A.

Fui pesquisar aqui e acabei caindo numa thread interessante sobre o assunto.

Um dos motivos para ainda ser aconselhável usar o modo tradicional de NAV>UL>Li>A é por conta de submenus, como representaríamos que vários sub-itens fazem parte de um item de menu sem ser com o elemento que foi feito para isso (<li>)?

Um ponto que eu já tinha ouvido falar também é que muitos leitores de tela possuem atalhos para facilitar a navegação quando um menu é uma lista.

Espero ter ajudado e bons estudos!

Abcs!