Bom Pessoal, voltando depois de um tempo sem postar, hoje trago para vocês e principalmente para a minha mentorada um registro da última sessão de dúvidas que tivemos, assim consigo manter um registro para futuras consultas e uma referência para alguma pessoa que possa ter as mesmas dúvidas a respeito.

Para quem não sabe eu faço parte agora do projeto de Mentoria do CT, é um projeto bem bacana que ajuda pessoas que querem estudar a se conectar com pessoas dispostas a mentorar e guiar. Estou mentorando na parte de Front End e no momento tenho uma mentorada. (Escreverei mais sobre o assunto em breve).

Bom, sem mais delongas, vamos as perguntas.

1 - Sobre as tags main/article qual a diferença entre elas? Já vi códigos usando main outros article logo abaixo do body para indicar o conteúdo da página e me confundi.

O uso da tag main serve para podermos declarar que um pedaço de código é o principal no assunto tratado naquela página. Já o article é uma tag para definir um artigo, como um artigo ciêntifico, pois nele tem header, footer entre outras tags, inclusive pode ter um main dentro.

2 - Tags nav e menu, quando usar uma e quando usar a outra. Ambas servem para fazer links de menu? A tag menu ainda não é suportada em browsers, né? Ou uso a tag menu para fazer o menu e a nav para os links?

As tags de menu e nav servem para poder se referir ao menu, seja do site ou de uma aplicação web, a principio menu seria para aplicações web e nav seria para sites, porém hoje o mais correto é adotar a utilização do nav uma vez que tem um suporte mais amplo pelos navegadores.

3 - Seria a mesma coisa da dúvida acima porém com o datalist e um select, ambos, fazem uma dropdown.Qual e quando devo usar uma ou outra?

A diferença do datalist para o select, é que o datalist é um input como um input text porém ele aparece sugestões para ser clicado, já o select é apenas um select com opções pre definidas.

Fiz um exemplo no codepen caso tenham interesse em ver mais.

4 - Folha de estilo alternativa. Declaro com link rel=”alternative stylesheet”. Beleza, mas como funciona isso? O usuário tem que escolher esse “tema” via browser? Pode ter mais de 1 folha alternativa?

Pode se ter mais de uma folha de estilos alternativos sim. E o problema nessa implementação é justamente o fato dessa dependência do browser para poder trocar a mesma, hoje em dia temos técnicas mais avançadas para poder fazer isso através de css e javascript.

5 - Não entendi o funcionamento da tag base.

Essa é a metatag utilizada no head para podermos dizer ao browser ou servidor qual o caminho de base que ele deve utilizar para buscar os links relativos da aplicação, ou seja, num elemento a ao invés de eu por href=”https://meusite.com/teste.html" eu posso simplesmente colocar href=”teste.html” e na tag base definir “https://meusite.com/" que com isso o browser vai entender que quero chamar a página “https://meusite.com/teste.html".

6 - Para que serve o http-equiv = “Content-type”? Tenho que declarar sempre?

O content type utilizamos para poder alterar o comportamento do servidor ou do navegador, normalmente utilizamos o básico que já vem nos editores de códigos, mas não é obrigatório de ser usado. Um caso de uso é utilizar ele para fazer refresh automatico na página.

7 - Para a tag link temos o rel=”prefetch” que serve como um pré-carregamento de arquivos grandes. Acho que deve-se usar com cautela porém, por exemplo, tenho uma página chamada video que contém várias imagens e videos. Irei declarar essa página no menu como prefetch para o rel? Seria assim seu funcionamento?

Isso era algo utilizado antigamente quando a internet ainda não era tão rápida e se fazia necessário ter um pré carregamento de algumas coisas, hoje em dia temos tecnologia melhor para solucionar esse tipo de problema como veremos em breve. Mas sim era uma boa, um problema é que temos que garantir o caminho do usuario da página com prefetch para a página desejada, pois caso ele não acesse a página que iria utilizar o prefetch, meio que fizemos isso a toa. E não é uma boa ideia utilizar isso em todas as páginas.

8 - Quando usamos links hierárquicos e sequenciais como rel=”next” seria mais semantico do que prático já que o que vai faze-lo direcionar para outra página seria o href, certo?

Isso hoje em dia também é muito pouco usado, funcionava mais quando as páginas la nos primórdios eram mais utilizadas para representar artigos cientificos e não tinha toda essa interatividade de hoje em dia.

9 - De acordo com o livro podemos usar o iframe para inserirmos miniaturas de imagens permitindo o usuário clicar e ver a imagem em tamanho maior. Pensando sobre isso, teria outras formas de fazer a mesma coisa sem o uso do iframe. Acho que poderíamos utilizar outas formas ou o iframe é mais indicado?

Hoje em dia temos tecnicas melhores para se usar que um iframe, como fancybox com jquey ou javascript mesmo, é até algumas tecnicas com puro css que podemos utilizar algumas propriedades novas do CSS3 como grid para poder criar bibliotecas maravilhosas. Vai muito da depênencia do projeto, mas os iframe cada dia é menos utilizado.

PS: Livro utilizado para as referências aqui das perguntas e de estudos é o Smashing Magazine HTML5.