5
respostas

Diferença no código e mesmo resultado

Na aula 7 do HTML5 e CSS3 o instrutor sugere o seguinte código:

<aside>
        <nav>
            <ul>    
                <h1> JOÃO DA SILVA </h1>            
                    <li><a href= index.html> Home </a></li>
                    <li><a href= portfolio.html> Portfólio </a></li>
                    <li><a href= bio.html> Sobre mim </a></li>
                    <li><a href= blog.html> Blog </a></li>
                    <li><a href= contato.html> Contato </a></li>
             </ul>
    </nav>
<ul>
    <li>
        <a href="https://github.com/joaodasilva">
            <img src="github.png" alt="Github">
        </a>
    </li>
    <li>
        <a href="https://twitter.com/joaodasilva">
            <img src="twitter.png" alt="Twitter">
        </a>
    </li>
    <li>
        <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
            <img src="linkedin.png" alt="LinkedIn">
        </a>
    </li>
</ul>

Porém há uma forma que me troxe o mesmo resultado mas muito mais simples a escrita:

<aside>
        <nav>
            <ul>    
                <h1> JOÃO DA SILVA </h1>            
                    <li><a href= index.html> Home </a></li>
                    <li><a href= portfolio.html> Portfólio </a></li>
                    <li><a href= bio.html> Sobre mim </a></li>
                    <li><a href= blog.html> Blog </a></li>
                    <li><a href= contato.html> Contato </a></li>
                    <a href="http://github.com/joaodasilva"><img src="github.png" alt="github"></a></li>
                    <a href="http://twitter.com/joaodasilva"><img src="twitter.png" alt="twitter"></a></li>
                    <a href="http://linkedin.com/joaodasilva"><img src="linkedin.png" alt="linkedin"></a></li>
                </ul>
            </nav>
        </aside>

Há algum problema nesse código?

5 respostas

Aliás, o resultado que apresentei é diferente, mas é o resultado desejado na proposta para a página do site exemplo.

Marco, boa tarde!

Como você pode perceber não houve uma diferença visual no resultado, acredito que isso se trata apenas de uma preferência sua de como o código fica mais legível.

Imagine, se daqui alguns anos você fosse revisar esse código, ele estaria claro para você? É importante que ele fique o mais claro possível tanto para você quanto para outros desenvolvedores.

Respondendo sua pergunta, não tem problema o modo que está, é apenas como você se senti mais confortável para entender o código

Fala Marco, tudo bom?

Complementando meu amigo Felipe...

A atualização do HTML na versão 5 foi puramente semântica, nos dando tags de contexto mais específico e fazendo com que web developers se preocupem com a semântica de seu código, já que isso é um fato determinando para indexação de crawlers (google, yahoo, etc) e para tornar nosso site acessível (deficiente visuais e afins).

Dito isso, devemos entender que a separação dessas duas uls se dá devido ao fato delas terem um contexto/significado diferente! Como vemos, a primeira lista está contida em uma tag semântica <nav> e na própria definição de uso dessa tag vemos:

O Elemento HTML de Navegação (<nav>) representa uma seção de uma página que aponta para outras páginas ou para outras áreas da página, ou seja, uma seção com links de navegação.

Ou seja, faz realmente sentido que tenhamos essa lista dentro de uma tag nav já que é de fácil percepção que na verdade, isso se comportará como um menu de navegação

Show! Vamos continuar...

Nossa segunda lista, podemos ver que ela armazena seus contatos, formas de se comunicar com você, saber de seus códigos no github e etc...

Agora pensa comigo, essas duas listas tem o mesmo sentido/significado/contexto? Não!

Esse é o motivo delas terem sido separadas em duas uls diferentes! São contextos diferentes!

Mais para frente pode ser que faça sentido que algum link dessa primeira UL te encaminhe para a segunda UL, talvez o Contato? Talvez essa UL possa vir se tornar um rodapé para seu site? No curso, isso será definido, mas na vida real você deve estar atento a esses detalhes.

Lembre-se, o caminho mais curto nem sempre é o caminho correto! Vamos rumo a web semântica!

Abraços Amigos!

Bons estudos!

Oi Marco apenas complementando, uma grande preocupação dos alunos que estão começando a programar nas linguagens de programação é a questão de escrever código "limpo e enxuto" diariamente surgem muitas dúvidas de alunos aqui no fórum que se questionam se os seus códigos estão corretos por estarem com linhas a mais, ou que possam ser simplificados, se tem a percepção na cabeça de alguns alunos que quanto mais simplificado o código, menos linhas, menos comentários, blocos todos encaixados na mesma linha, melhor o código, que faz exatamente o que outro código faz porém mais comentado, coeso e inteligível, e sempre respondo que via de regra não programamos para nós mesmos e sim pra uma equipe, para clientes, para usuários.

Apesar de haver algumas diferenças o mesmo se aplica nas linguagem de marcação HTML, aqui mais ainda, deve haver uma preocupação não com simplificação e sim com semântica, esse código HTML deve ser bem estruturado, semânticamente auto-explicativo para que tanto a manutenção dele como a evolução sejam permitidas de maneira simples.

Espero ter ajudado e bons estudos.

Obrigado pelas colocações.