HTML

O que faz um DOCTYPE?

DOCTYPE é uma abreviação para Document Type (Tipo de Documento). Um DOCTYPE está sempre associado a uma DTD - para Document Type Definition (Definição de Tipo de Documento).

Uma DTD define como os documentos de um determinado tipo devem ser estruturados (ou seja, um button pode conter um span mas não uma div), enquanto um DOCTYPE declara qual DTD um documento supostamente respeita (ou seja, este documento respeita a DTD HTML).

Para páginas da web, a declaração DOCTYPE é obrigatória. É usada para informar aos agentes de usuário qual versão das especificações HTML seu documento respeita. Uma vez que um agente de usuário reconheça um DOCTYPE correto, ele acionará o modo no-quirks correspondente a este DOCTYPE para ler o documento. Se um agente de usuário não reconhecer um DOCTYPE correto, ele acionará o quirks mode.

A declaração DOCTYPE para os padrões HTML5 é <!DOCTYPE html>.

Como você serve uma página com conteúdo em vários idiomas?

Assumirei que está perguntando sobre o caso mais comum, que é como servir uma página com conteúdo disponível em vários idiomas, mas o conteúdo dentro da página deve ser exibido em apenas um idioma consistente.

Quando uma requisição HTTP é feita a um servidor, o agente de usuário solicitante geralmente envia informações sobre as preferências de idioma, como no cabeçalho Accept-Language. O servidor pode então usar essas informações para retornar uma versão do documento no idioma apropriado, se tal alternativa estiver disponível. O documento HTML retornado também deve declarar o atributo lang na tag <html>, como <html lang="en">...</html>.

Claro, isso é inútil para informar a um mecanismo de busca que o mesmo conteúdo está disponível em diferentes idiomas, e então você também deve usar o atributo hreflang na <head>. Ex: <link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />

No back-end, a marcação HTML conterá espaços reservados i18n e conteúdo para o idioma específico armazenado em formatos YML ou JSON. O servidor então gera dinamicamente a página HTML com conteúdo nesse idioma específico, geralmente com a ajuda de um framework de back-end.

Que tipo de coisas você deve ter cuidado ao projetar ou desenvolver para sites multilíngues?

  • Use o atributo lang em seu HTML.
  • Direcionar os usuários para seu idioma nativo - Permita que um usuário mude seu país/idioma facilmente e sem complicações.
  • Texto em imagens baseadas em raster (ex: png, gif, jpg, etc.), não é uma abordagem escalável - Colocar texto em uma imagem ainda é uma forma popular de obter fontes bonitas e não-sistêmicas para exibir em qualquer computador. No entanto, para traduzir texto de imagem, cada cadeia de texto precisará ter uma imagem separada criada para cada idioma. Mais do que um punhado de substituições como esta pode rapidamente sair do controle.
  • Comprimento restritivo de palavras/frases - Algum conteúdo pode ser mais longo quando escrito em outro idioma. Esteja atento a problemas de layout ou estouro no design. É melhor evitar projetar onde a quantidade de texto faria ou desfareria um design. As contagens de caracteres entram em jogo com coisas como títulos, rótulos e botões. São menos um problema com texto de fluxo livre, como texto do corpo ou comentários.
  • Esteja atento a como as cores são percebidas - As cores são percebidas de forma diferente em diferentes idiomas e culturas. O design deve usar a cor apropriadamente.
  • Formatação de datas e moedas - As datas do calendário às vezes são apresentadas de diferentes maneiras. Ex: "31 de maio de 2012" nos EUA vs. "31 de maio de 2012" em partes da Europa.
  • Não concatene strings traduzidas - Não faça nada como "A data de hoje é " + date. Isso falhará em idiomas com ordem de palavras diferente. Use uma string de modelo com substituição de parâmetros para cada idioma. Por exemplo, veja as duas frases a seguir em inglês e chinês, respectivamente: I will travel on {% date %} e {% date %} 我会出发. Observe que a posição da variável é diferente devido às regras gramaticais do idioma.
  • Direção de leitura do idioma - Em inglês, lemos da esquerda para a direita, de cima para baixo; em japonês tradicional, o texto é lido de cima para baixo, da direita para a esquerda.
  • Útil - inclua a localidade no caminho (ex: en_US, zh_CN, etc).

Para que servem os atributos `data-`?

Antes que os frameworks JavaScript se tornassem populares, os desenvolvedores front-end usavam atributos data- para armazenar dados extras dentro do próprio DOM, sem outros hacks, como atributos não padronizados, propriedades extras no DOM. Ele se destina a armazenar dados personalizados privados da página ou aplicativo, para os quais não há atributos ou elementos mais apropriados.

Atualmente, o uso de atributos data- geralmente não é encorajado. Uma razão é que os usuários podem modificar o atributo de dados facilmente usando o inspetor de elementos no navegador. O modelo de dados é melhor armazenado dentro do próprio JavaScript e mantido atualizado com o DOM via vinculação de dados, possivelmente por meio de uma biblioteca ou framework.

No entanto, um uso perfeitamente válido de atributos de dados é adicionar um gancho para frameworks de teste end-to-end, como Selenium e Capybara, sem ter que criar classes ou atributos ID sem sentido. O elemento precisa de uma maneira de ser encontrado por uma especificação particular do Selenium, e algo como data-selector='the-thing' é uma maneira válida de fazer isso sem convoluir a marcação semântica de outra forma.

Considere o HTML5 como uma plataforma web aberta. Quais são os blocos de construção do HTML5?

  • Semântica - Permitindo que você descreva com mais precisão o que seu conteúdo é.
  • Conectividade - Permitindo que você se comunique com o servidor de maneiras novas e inovadoras.
  • Offline e armazenamento - Permitindo que as páginas da web armazenem dados no lado do cliente localmente e operem offline com mais eficiência.
  • Multimídia - Tornando vídeo e áudio cidadãos de primeira classe na Web Aberta.
  • Gráficos e efeitos 2D/3D - Permitindo uma gama muito mais diversificada de opções de apresentação.
  • Desempenho e integração - Fornecendo maior otimização de velocidade e melhor uso do hardware do computador.
  • Acesso a dispositivos - Permitindo o uso de vários dispositivos de entrada e saída.
  • Estilo - Permitindo que os autores escrevam temas mais sofisticados.

Descreva a diferença entre um `cookie`, `sessionStorage` e `localStorage`.

Todas as tecnologias mencionadas acima são mecanismos de armazenamento chave-valor no lado do cliente. Elas são capazes de armazenar valores apenas como strings.

| | cookie | localStorage | sessionStorage | | --- | --- | --- | --- | | Iniciador | Cliente ou servidor. O servidor pode usar o cabeçalho Set-Cookie | Cliente | Cliente | | Expiração | Definida manualmente | Para sempre | Ao fechar a aba | | Persistente entre sessões do navegador | Depende se a expiração está definida | Sim | Não | | Enviado ao servidor a cada requisição HTTP | Cookies são enviados automaticamente via cabeçalho Cookie | Não | Não | | Capacidade (por domínio) | 4kb | 5MB | 5MB | | Acessibilidade | Qualquer janela | Qualquer janela | Mesma aba |

Nota: Se o usuário decidir limpar os dados de navegação por qualquer mecanismo fornecido pelo navegador, isso limpará qualquer cookie, localStorage ou sessionStorage armazenado. É importante ter isso em mente ao projetar para persistência local, especialmente ao comparar com alternativas como armazenamento no lado do servidor em um banco de dados ou similar (que, é claro, persistirá apesar das ações do usuário).

Descreva a diferença entre `<script>`, `<script async>` e `<script defer>`.

  • <script> - A análise do HTML é bloqueada, o script é buscado e executado imediatamente, a análise do HTML é retomada após a execução do script.
  • <script async> - O script será buscado em paralelo à análise do HTML e executado assim que estiver disponível (potencialmente antes da conclusão da análise do HTML). Use async quando o script for independente de quaisquer outros scripts na página, por exemplo, análises.
  • <script defer> - O script será buscado em paralelo à análise do HTML e executado quando a página terminar de ser analisada. Se houver vários deles, cada script adiado é executado na ordem em que foram encontrados no documento. Se um script depende de um DOM totalmente analisado, o atributo defer será útil para garantir que o HTML seja totalmente analisado antes da execução. Um script adiado não deve conter document.write.

Nota: Os atributos async e defer são ignorados para scripts que não possuem atributo src.

Por que geralmente é uma boa ideia posicionar os `<link>`s CSS entre `<head></head>` e os `<script>`s JS logo antes de `</body>`? Você conhece alguma exceção?

Posicionando <link>s no <head>

Colocar <link>s no <head> faz parte da especificação adequada na construção de um site otimizado. Quando uma página é carregada pela primeira vez, HTML e CSS são analisados simultaneamente; HTML cria o DOM (Document Object Model) e CSS cria o CSSOM (CSS Object Model). Ambos são necessários para criar os visuais em um site, permitindo um rápido tempo de "primeira pintura significativa". Essa renderização progressiva é uma categoria de otimização em que os sites são medidos em suas pontuações de desempenho. Colocar as folhas de estilo perto da parte inferior do documento é o que proíbe a renderização progressiva em muitos navegadores. Alguns navegadores bloqueiam a renderização para evitar ter que repintar elementos da página se seus estilos mudarem. O usuário fica então preso a uma página em branco. Outras vezes, pode haver flashes de conteúdo sem estilo (FOUC), que mostram uma página sem estilo aplicado.

Posicionando <script>s logo antes de </body>

As tags <script> bloqueiam a análise de HTML enquanto estão sendo baixadas e executadas, o que pode atrasar sua página. Colocar os scripts na parte inferior permitirá que o HTML seja analisado e exibido para o usuário primeiro.

Uma exceção para o posicionamento de <script>s na parte inferior é quando seu script contém document.write(), mas atualmente não é uma boa prática usar document.write(). Além disso, colocar <script>s na parte inferior significa que o navegador não pode começar a baixar os scripts até que todo o documento seja analisado. Isso garante que seu código que precisa manipular elementos do DOM não lançará um erro e interromperá todo o script. Se você precisar colocar <script>s no <head>, use o atributo defer, que alcançará o mesmo efeito de executar o script somente depois que o HTML for analisado, mas o navegador poderá baixar o script antes.

Tenha em mente que colocar scripts logo antes da tag </body> de fechamento criará a ilusão de que a página carrega mais rápido em um cache vazio (já que os scripts não bloquearão o download do restante do documento). No entanto, se você tiver algum código que deseja executar durante o carregamento da página, ele só começará a ser executado depois que a página inteira for carregada. Se você colocar esses scripts na tag <head>, eles começarão a ser executados antes - então, em um cache preparado, a página realmente pareceria carregar mais rápido.

As tags <head> e <body> agora são opcionais

De acordo com a especificação HTML5, certas tags HTML como <head> e <body> são opcionais. O guia de estilo do Google até recomenda removê-las para economizar bytes. No entanto, essa prática ainda não é amplamente adotada e o ganho de desempenho provavelmente será mínimo e, para a maioria dos sites, provavelmente não fará diferença.

O que é renderização progressiva?

Renderização progressiva é o nome dado às técnicas usadas para melhorar o desempenho de uma página da web (em particular, melhorar o tempo de carregamento percebido) para renderizar o conteúdo para exibição o mais rápido possível.

Antigamente era muito mais prevalente nos dias antes da internet banda larga, mas ainda é usada no desenvolvimento moderno, já que as conexões de dados móveis estão se tornando cada vez mais populares (e não confiáveis)!

Exemplos de tais técnicas:

  • Carregamento lento de imagens (Lazy loading of images) - As imagens na página não são carregadas de uma só vez. O JavaScript será usado para carregar uma imagem quando o usuário rolar para a parte da página que exibe a imagem.
  • Priorizar o conteúdo visível (ou renderização acima da dobra) - Incluir apenas o mínimo de CSS/conteúdo/scripts necessário para a quantidade de página que seria renderizada no navegador do usuário primeiro para exibir o mais rápido possível, você pode então usar scripts diferidos ou ouvir o evento DOMContentLoaded/load para carregar outros recursos e conteúdo.
  • Fragmentos HTML assíncronos - Descarregar partes do HTML para o navegador à medida que a página é construída no back-end. Mais detalhes sobre a técnica podem ser encontrados.

Por que você usaria um atributo `srcset` em uma tag de imagem? Explique o processo que o navegador usa ao avaliar o conteúdo desse atributo.

Você usaria o atributo srcset quando quisesse servir imagens diferentes para usuários, dependendo da largura da tela de seus dispositivos - servir imagens de maior qualidade para dispositivos com tela retina melhora a experiência do usuário, enquanto servir imagens de resolução mais baixa para dispositivos de baixo custo aumenta o desempenho e diminui o desperdício de dados (porque servir uma imagem maior não terá nenhuma diferença visível). Por exemplo: <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> diz ao navegador para exibir o gráfico .jpg pequeno, médio ou grande, dependendo da resolução do cliente. O primeiro valor é o nome da imagem e o segundo é a largura da imagem em pixels. Para uma largura de dispositivo de 320px, os seguintes cálculos são feitos:

  • 500 / 320 = 1.5625
  • 1000 / 320 = 3.125
  • 2000 / 320 = 6.25

Se a resolução do cliente for 1x, 1.5625 é o mais próximo, e 500w correspondendo a small.jpg será selecionado pelo navegador.

Se a resolução for retina (2x), o navegador usará a resolução mais próxima acima do mínimo. Isso significa que ele não escolherá 500w (1.5625) porque é maior que 1 e a imagem pode parecer ruim. O navegador escolheria então a imagem com uma razão resultante mais próxima de 2, que é 1000w (3.125).

srcset resolve o problema de que você deseja servir arquivos de imagem menores para dispositivos de tela estreita, pois eles não precisam de imagens enormes como as telas de desktop - e também, opcionalmente, que você deseja servir imagens de diferentes resoluções para telas de alta densidade/baixa densidade.

Você já usou diferentes linguagens de template HTML antes?

Sim, Pug (antigo Jade), ERB, Slim, Handlebars, Jinja, Liquid e EJS, só para citar alguns. Na minha opinião, eles são mais ou menos iguais e fornecem funcionalidade semelhante de escape de conteúdo e filtros úteis para manipular os dados a serem exibidos. A maioria dos motores de template também permitirá que você injete seus próprios filtros, caso precise de processamento personalizado antes da exibição.

Qual a diferença entre canvas e SVG?

Canvas é baseado em raster, trabalhando com pixels, enquanto SVG é baseado em vetor, empregando descrições matemáticas de formas. Canvas emprega desenho imperativo, onde cada etapa é especificada com JavaScript, ideal para gráficos dinâmicos e interativos como animações e jogos.

Por outro lado, SVG usa desenho declarativo, com formas e caminhos definidos diretamente em HTML, tornando-o mais acessível e amigável ao SEO. Canvas é ideal para cenas complexas devido ao seu menor overhead, mas o dimensionamento pode levar à perda de qualidade da imagem. SVG, sendo independente de resolução, adapta-se a vários tamanhos de tela sem sacrificar a qualidade.

Em última análise, canvas é adequado para gráficos dinâmicos e intensivos em desempenho, enquanto SVG se destaca em gráficos escaláveis e independentes de resolução, com vantagens inerentes de acessibilidade e SEO.

O que são elementos vazios em HTML?

Elementos vazios em HTML são elementos que não contêm nenhum conteúdo entre suas tags de abertura e fechamento. Em vez disso, são tags de auto-fechamento, o que significa que têm uma barra (/) antes do colchete angular de fechamento (>). Alguns exemplos comuns de elementos vazios incluem:

  • <img>: Usado para incorporar imagens no documento.
  • <input>: Usado para aceitar entrada do usuário.
  • <br>: Usado para inserir quebras de linha ou quebras de linha forçadas.
  • <hr>: Usado para criar regras horizontais ou separadores.