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

Fiz diferente, semanticamente também está correto?

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Desafios finais e atividade Desenvolvendo a página de portfolio

por Renata Igarashi
| 25.7k xp | 1 posts

Fiz o exercício desafio de outra maneira, gostaria de saber se semanticamente também está correto? Se não tiver, qual o problema com a forma que eu fiz?

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="img/favicon.png">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/site.css">
        <link rel="stylesheet" href="css/portfolio.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    </head>
    <body>
        <main>
            <h1 class="titulo-principal">Portfolio</h1>

            <div class="container">
            <p>Veja abaixo a lista dos meus projetos mais relevantes</p>
                <div class="caixa-projeto">
                    <img src="img/bmw.png" alt="Projeto BMW" class="foto-projeto">
                    <p><a href="#">BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</a></p>
                </div>    
                <div class="caixa-projeto">
                    <img src="img/uol.png" alt="Projeto UOL" class="foto-projeto">
                    <p><a href="#">UOL.com: reformulação de design e implementação de HTML, CSS e JavaScript</a></p>
                </div>
                <div class="caixa-projeto">
                    <img src="img/ibm.png" alt="Projeto IBM" class="foto-projeto">
                    <p><a href="#">IBM.com: aplicação de progressive enhamcement em conjunto com aplicação back-end</a></p>
                </div>
                <div class="caixa-projeto">
                    <img src="img/g1.png" alt="Projeto G1" class="foto-projeto">
                    <p><a href="#">G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</a></p>
                </div>
            </div>
        </main>
        <img src="img/eu.jpg" alt="Foto de João da Silva" class="minha-foto">
        <aside class="navegacao-site">
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</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 class="icones-redes-sociais">
                <li>
                    <a class="github" href="https://github.com/joaodasilva">
                        Github
                    </a>
                </li>
                <li>
                    <a class="twitter" href="https://twitter.com/joaodasilva">
                        Twitter
                    </a>
                </li>
                <li>
                    <a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                        LinkedIn
                    </a>
                </li>
            </ul>
        </aside>
        <footer class="rodape-pagina">
            &copy; João da Silva 2014
        </footer>
    </body>
</html>
.foto-projeto{
    position: relative;
    width: 100%;
}

.caixa-projeto {
    float:left;
    box-sizing: border-box;
    border: 8px solid black;
    padding: 16px;
    width: 45%;
    margin:16px;

}
4 respostas
por Ramon Pacheco
| 490.5k xp | 249 posts
Moderador

Olá Renata, na minha opinião não há erro semântico.

Aguarde por mais respostas.

Att,

por Daniel Isola
| 167.9k xp | 29 posts

Olá Renata! Muito legal seu projeto, vou apenas dar umas dicas do ponto de vista semântico, como você pediu! Podemos fazer algumas mudanças no seu código, por exemplo:

  • Você usou a tag <h1>mais de uma vez em diversos elementos, considere usar os outros h`s (h2, h3, h4...):

    <h1 class="titulo-principal">Portfolio</h1>

    e

    <h1>João da Silva</h1>

  • E apenas um detalhe que pode ajudar os buscadores a entenderem melhor sua pagina, considere utilizar a propriedade lang="pt" no seu HTML para dizer que o seu conteúdo está em português!

Novamente, parabéns pelo projeto bem realizado! Espero ter ajudado, e bons estudos!

por Talita Azevedo
| 221.8k xp | 182 posts
Moderador

Olá Renata! Não localizei nenhum erro semântico no código, parabéns !!! =)

solução!
por Pedro Ávila
| 330.4k xp | 175 posts

Renata, acredito que não ficou como é proposto pelo exercício.

O próprio exercício sugere que você utilize as tags <figure> e <figcaption> para as imagens, além disso o fato do autor na correção agrupar essas imagens dentro de uma lista ul é uma forma de dizer para o mecanismo de busca que essas imagens estão relacionadas entre si. E a utilização do <figcaption> é importante para dizer que aquela descrição é uma legenda daquela figura.

Bem, pelo que entendi, essas técnicas para agrupar em <ul> e adicionar as imagens em <figure> agregam uma boa carga semântica.

Já em relação ao CSS, não há necessidade de configurar o atributo position como relative para as imagens. Além disso você teve muito trabalho para escrever em cada <img> que ela pertencia à classe .foto-projeto. Você poderia simplesmente fazer assim:

.caixa-projeto {
    // Seus códigos permanecem
}

.caixa-projeto img {
    /* dessa maneira todas as imagens dentro da div 
.caixa-projeto receberão as propriedades abaixo */

    width: 100%;
}