Get full access

HTML Interview Questions

20+ HTML interview questions and answers in quiz-style format, answered by ex-FAANG interviewers
Solved by ex-interviewers
Covers critical topics

HTML interview questions are designed to assess your understanding of web development fundamentals and best practices. Interviewers typically focus on key topics such as:

  • Accessibility: Ensuring websites are accessible to users with disabilities using semantic HTML and ARIA roles.
  • Semantics: Recognizing the importance of semantic HTML tags for SEO, accessibility, and code clarity.
  • Forms: Building forms with proper input validation, accessibility features, and efficient handling of form submissions.
  • Multimedia: Embedding and managing images, audio, and video in HTML while optimizing for performance and accessibility.
  • Best Practices: Structuring HTML for readability, maintainability, and performance, including the proper use of meta tags, link attributes, and media queries.
  • SEO Optimization: Using semantic HTML elements and metadata to boost search engine ranking and improve web performance.

Below, you’ll find 20+ carefully curated HTML interview questions covering everything from core concepts to best practices and optimization strategies.

Each question includes:

  • Quick Answers (TL;DR): Concise, clear responses to help you answer confidently.
  • Detailed Explanations: In-depth insights to ensure you not only know the answers but understand the reasoning behind them.

Unlike most lists, our questions are carefully curated by real senior and staff engineers from top tech companies like Amazon, Meta, and more—not anonymous contributors or AI-generated content. Start practicing below and get ready to ace your HTML interview!

If you're looking for HTML coding questions -We've got you covered as well, with:
Javascript coding
  • 70+ HTML coding interview questions
  • An in-browser coding workspace that mimics real interview conditions
  • Reference solutions from ex-interviewers at Big Tech companies
  • One-click automated, transparent test cases
  • Instant UI preview for UI-related questions
Get Started
Join 50,000+ engineers

What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?

Topics
Web APIsHTMLJavaScript
Edit on GitHub

TL;DR

The main difference lies in the bubbling behavior of mouseenter and mouseover events. mouseenter does not bubble while mouseover bubbles.

mouseenter events do not bubble. The mouseenter event is triggered only when the mouse pointer enters the element itself, not its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the mouseenter event will not be triggered on the parent element again, it's only triggered once upon entry of parent element without regard for its contents. If both parent and child have mouseenter listeners attached and the mouse pointer moves from the parent element to the child element, mouseenter will only fire for the child.

mouseover events bubble up the DOM tree. The mouseover event is triggered when the mouse pointer enters the element or one of its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the mouseover event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, mouseover will fire for both the parent and the child.

Propertymouseentermouseover
BubblingNoYes
TriggerOnly when entering itselfWhen entering itself and when entering descendants

mouseenter event:

  • Does not bubble: The mouseenter event does not bubble. It is only triggered when the mouse pointer enters the element to which the event listener is attached, not when it enters any child elements.
  • Triggered once: The mouseenter event is triggered only once when the mouse pointer enters the element, making it more predictable and easier to manage in certain scenarios.

A use case for mouseenter is when you want to detect the mouse entering an element without worrying about child elements triggering the event multiple times.

mouseover Event:

  • Bubbles up the DOM: The mouseover event bubbles up through the DOM. This means that if you have an event listener on a parent element, it will also trigger when the mouse pointer moves over any child elements.
  • Triggered multiple times: The mouseover event is triggered every time the mouse pointer moves over an element or any of its child elements. This can lead to multiple triggers if you have nested elements.

A use case for mouseover is when you want to detect when the mouse enters an element or any of its children and are okay with the events triggering multiple times.

Example

Here's an example demonstrating the difference between mouseover and mouseenter events:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mouse Events Example</title>
    <style>
      .parent {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        padding: 20px;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: lightcoral;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      Parent Element
      <div class="child">Child Element</div>
    </div>


    <script>
      const parent = document.querySelector('.parent');
      const child = document.querySelector('.child');


      // Mouseover event on parent.
      parent.addEventListener('mouseover', () => {
        console.log('Mouseover on parent');
      });


      // Mouseenter event on parent.
      parent.addEventListener('mouseenter', () => {
        console.log('Mouseenter on parent');
      });


      // Mouseover event on child.
      child.addEventListener('mouseover', () => {
        console.log('Mouseover on child');
      });


      // Mouseenter event on child.
      child.addEventListener('mouseenter', () => {
        console.log('Mouseenter on child');
      });
    </script>
  </body>
</html>

Expected behavior

  • When the mouse enters the parent element:
    • The mouseover event on the parent will trigger.
    • The mouseenter event on the parent will trigger.
  • When the mouse enters the child element:
    • The mouseover event on the parent will trigger again because mouseover bubbles up from the child.
    • The mouseover event on the child will trigger.
    • The mouseenter event on the child will trigger.
    • The mouseenter event on the parent will not trigger again because mouseenter does not bubble.

Further reading

Explain the difference between `document.querySelector()` and `document.getElementById()`

Topics
Web APIsJavaScriptHTML
Edit on GitHub

TL;DR

document.querySelector() and document.getElementById() are both methods used to select elements from the DOM, but they have key differences. document.querySelector() can select any element using a CSS selector and returns the first match, while document.getElementById() selects an element by its ID and returns the element with that specific ID.

// Using document.querySelector()
const element = document.querySelector('.my-class');


// Using document.getElementById()
const elementById = document.getElementById('my-id');

Difference between document.querySelector() and document.getElementById()

document.querySelector()

  • Can select elements using any valid CSS selector, including class, ID, tag, attribute, and pseudo-classes
  • Returns the first element that matches the specified selector
  • More versatile but slightly slower due to the flexibility of CSS selectors
// Select the first element with the class 'my-class'
const element = document.querySelector('.my-class');


// Select the first <div> element
const divElement = document.querySelector('div');


// Select the first element with the attribute data-role='button'
const buttonElement = document.querySelector('[data-role="button"]');

document.getElementById()

  • Selects an element by its ID attribute
  • Returns the element with the specified ID
  • Faster and more efficient for selecting elements by ID, but less versatile
// Select the element with the ID 'my-id'
const elementById = document.getElementById('my-id');

Key differences

  • Selector type: document.querySelector() uses CSS selectors, while document.getElementById() uses only the ID attribute.
  • Return value: document.querySelector() returns the first matching element, whereas document.getElementById() returns the element with the specified ID.
  • Performance: document.getElementById() is generally faster because it directly accesses the element by ID, while document.querySelector() has to parse the CSS selector.

Further reading

How do `<iframe>` on a page communicate?

Topics
Web APIsJavaScriptHTML
Edit on GitHub

TL;DR

<iframe> elements on a page can communicate using the postMessage API. This allows for secure cross-origin communication between the parent page and the iframe. The postMessage method sends a message, and the message event listener receives it. Here's a simple example:

// In the parent page
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello from parent', '*');


// In the iframe
window.addEventListener('message', (event) => {
  console.log(event.data); // 'Hello from parent'
});

How do <iframe> on a page communicate?

Using the postMessage API

The postMessage API is the most common and secure way for iframes to communicate with each other or with their parent page. This method allows for cross-origin communication, which is essential for modern web applications.

Sending a message

To send a message from the parent page to the iframe, you can use the postMessage method. Here’s an example:

// In the parent page
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello from parent', '*');

In this example, the parent page selects the iframe and sends a message to it. The second parameter, '*', is the target origin. It specifies the origin of the target window. Using '*' means the message can be received by any origin, but for security reasons, it's better to specify the exact origin.

Receiving a message

To receive a message in the iframe, you need to add an event listener for the message event:

// In the iframe
window.addEventListener('message', (event) => {
  console.log(event.data); // 'Hello from parent'
});

The event object contains the data property, which holds the message sent by the parent page.

Security considerations

When using postMessage, it's crucial to consider security:

  • Specify the target origin: Instead of using '*', specify the exact origin to ensure that only messages from trusted sources are received.
  • Validate the message: Always validate the message content to prevent malicious data from being processed.

Example with target origin

Here’s an example with a specified target origin:

// In the parent page
const iframe = document.querySelector('iframe');
const targetOrigin = 'https://example.com';
iframe.contentWindow.postMessage('Hello from parent', targetOrigin);


// In the iframe
window.addEventListener('message', (event) => {
  if (event.origin === 'https://parent.com') {
    console.log(event.data); // 'Hello from parent'
  }
});

In this example, the parent page sends a message only to https://example.com, and the iframe processes the message only if it comes from https://parent.com.

Further reading

How do you add, remove, and modify HTML elements using JavaScript?

Topics
Web APIsJavaScriptHTML
Edit on GitHub

TL;DR

To add, remove, and modify HTML elements using JavaScript, you can use methods like createElement, appendChild, removeChild, and properties like innerHTML and textContent. For example, to add an element, you can create it using document.createElement and then append it to a parent element using appendChild. To remove an element, you can use removeChild on its parent. To modify an element, you can change its innerHTML or textContent.

// Adding an element
const newElement = document.createElement('div');
newElement.textContent = 'Hello, World!';
document.body.appendChild(newElement);


// Removing an element
const elementToRemove = document.getElementById('elementId');
elementToRemove.parentNode.removeChild(elementToRemove);


// Modifying an element
const elementToModify = document.getElementById('elementId');
elementToModify.innerHTML = 'New Content';

Adding, removing, and modifying HTML elements using JavaScript

Adding elements

To add an HTML element, you can use the document.createElement method to create a new element and then append it to a parent element using appendChild.

// Create a new div element
const newDiv = document.createElement('div');


// Set its content
newDiv.textContent = 'Hello, World!';


// Append the new element to the body
document.body.appendChild(newDiv);


// See the changed document by running the code
console.log(document.body);

You can also use insertBefore to insert the new element before an existing child element.

const parentElement = document.getElementById('parent');
const newElement = document.createElement('p');
newElement.textContent = 'Inserted Paragraph';
const referenceElement = document.getElementById('reference');
parentElement.insertBefore(newElement, referenceElement);

Removing elements

To remove an HTML element, you can use the removeChild method on its parent element.

// Select the element to be removed
const elementToRemove = document.getElementById('elementId');


// Remove the element
elementToRemove.parentNode.removeChild(elementToRemove);

Alternatively, you can use the remove method directly on the element.

const elementToRemove = document.getElementById('elementId');
elementToRemove.remove();

Modifying elements

To modify an HTML element, you can change its properties such as innerHTML, textContent, or attributes.

const elementToModify = document.createElement('div');


// Change its inner HTML
elementToModify.innerHTML = 'New Content';


// Change its text content
elementToModify.textContent = 'New Text Content';


// Change an attribute
elementToModify.setAttribute('class', 'new-class');


console.log(elementToModify);

You can also use methods like classList.add, classList.remove, and classList.toggle to modify the element's classes.

const element = document.getElementById('elementId');


// Add a class
element.classList.add('new-class');


// Remove a class
element.classList.remove('old-class');


// Toggle a class
element.classList.toggle('active');

Further reading

What is the difference between `event.preventDefault()` and `event.stopPropagation()`?

Topics
Web APIsHTMLJavaScript
Edit on GitHub

TL;DR

event.preventDefault() is used to prevent the default action that belongs to the event, such as preventing a form from submitting. event.stopPropagation() is used to stop the event from bubbling up to parent elements, preventing any parent event handlers from being executed.

What is the difference between event.preventDefault() and event.stopPropagation()?

event.preventDefault()

event.preventDefault() is a method that cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For example, this can be used to prevent a form from being submitted:

document.querySelector('form').addEventListener('submit', function (event) {
  event.preventDefault();
  // Form submission is prevented
});

event.stopPropagation()

event.stopPropagation() is a method that prevents the event from bubbling up the DOM tree, stopping any parent handlers from being notified of the event. This is useful when you want to handle an event at a specific level and do not want it to trigger handlers on parent elements:

document.querySelector('.child').addEventListener('click', function (event) {
  event.stopPropagation();
  // Click event will not propagate to parent elements
});

Key differences

  • event.preventDefault() stops the default action associated with the event.
  • event.stopPropagation() stops the event from propagating (bubbling) up to parent elements.

Use cases

  • Use event.preventDefault() when you want to prevent the default behavior of an element, such as preventing a link from navigating or a form from submitting.
  • Use event.stopPropagation() when you want to prevent an event from reaching parent elements, which can be useful in complex UIs where multiple elements have event listeners.

Further reading

What is the difference between `innerHTML` and `textContent`?

Topics
Web APIsHTMLJavaScript
Edit on GitHub

TL;DR

innerHTML and textContent are both properties used to get or set the content of an HTML element, but they serve different purposes. innerHTML returns or sets the HTML markup contained within the element, which means it can parse and render HTML tags. On the other hand, textContent returns or sets the text content of the element, ignoring any HTML tags and rendering them as plain text.

// Example of innerHTML
element.innerHTML = '<strong>Bold Text</strong>'; // Renders as bold text


// Example of textContent
element.textContent = '<strong>Bold Text</strong>'; // Renders as plain text: <strong>Bold Text</strong>

Difference between innerHTML and textContent

innerHTML

innerHTML is a property that allows you to get or set the HTML markup contained within an element. It can parse and render HTML tags, making it useful for dynamically updating the structure of a webpage.

Example
const element = document.getElementById('example');
element.innerHTML = '<strong>Bold Text</strong>'; // This will render as bold text
Use cases
  • Dynamically adding or updating HTML content
  • Rendering HTML tags and elements
Security considerations

Using innerHTML can expose your application to Cross-Site Scripting (XSS) attacks if you insert untrusted content. Always sanitize any user input before setting it as innerHTML.

textContent

textContent is a property that allows you to get or set the text content of an element. It ignores any HTML tags and renders them as plain text, making it safer for inserting user-generated content.

Example
const element = document.getElementById('example');
element.textContent = '<strong>Bold Text</strong>'; // This will render as plain text: <strong>Bold Text</strong>
Use cases
  • Safely inserting user-generated content
  • Stripping HTML tags from a string
Performance considerations

textContent is generally faster than innerHTML because it does not parse and render HTML tags. It simply updates the text content of the element.

Further reading

What is the DOM and how is it structured?

Topics
JavaScriptHTML
Edit on GitHub

TL;DR

The DOM, or Document Object Model, is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM is structured as a tree of objects, where each node represents part of the document, such as elements, attributes, and text.

What is the DOM and how is it structured?

Definition

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML, XHTML, or XML document as a tree structure. Each node in this tree represents a part of the document.

Structure

The DOM is structured as a hierarchical tree of nodes. Here are the main types of nodes:

  1. Document node: The root of the document tree. It represents the entire document.
  2. Element nodes: These represent HTML elements and form the bulk of the document tree.
  3. Attribute nodes: These are associated with element nodes and represent the attributes of those elements.
  4. Text nodes: These represent the text content within elements.
  5. Comment nodes: These represent comments in the HTML.

Example

Consider the following HTML:

<!doctype html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

The DOM tree for this document would look like this:

Document
  └── html
      ├── head
      │   └── title
      │       └── "Document"
      └── body
          ├── h1
          │   └── "Hello, World!"
          └── p
              └── "This is a paragraph."

Accessing and manipulating the DOM

JavaScript can be used to access and manipulate the DOM. Here are some common methods:

  • document.getElementById(id): Selects an element by its ID.
  • document.querySelector(selector): Selects the first element that matches a CSS selector.
  • element.appendChild(node): Adds a new child node to an element.
  • element.removeChild(node): Removes a child node from an element.

Example:

// Create an <h1> element and add it to the DOM
const newElement = document.createElement('h1');
document.body.appendChild(newElement);


// Get the h1 element using querySelector
const heading = document.querySelector('h1');
heading.textContent = 'Hello, DOM!';
console.log(heading); // <h1>Hello, DOM!</h1>

Further reading

Qual é a diferença entre um "atributo" e uma "propriedade"?

Topics
Web APIsJavaScriptHTML
Edit on GitHub

Atributos são definidos na marcação HTML, mas as propriedades são definidas no DOM. Para ilustrar a diferença, imagine que temos esse campo de texto em nosso HTML: <input type="text" value="Hello">.

const input = document.querySelector('input');
console.log(input.getAttribute('value')); // Olá
console.log(input.value); // Olá

Mas depois de alterar o valor do campo de texto adicionando "Mundo!" a ele, isso se torna:

console.log(input.getAttribute('value')); // Olá
console.log(input.value); // Olá Mundo!

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

Topics
HTMLJavaScript
Edit on GitHub

tags <script> são usadas para incluir JavaScript em uma página da web. Os atributos async e defer são usados para mudar como/quando o carregamento e a execução do script acontecem.

Simples <script>

Para tags normais <script> sem qualquer async ou defer, quando forem encontrados, 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>

No <script async>, o script será buscado em paralelo à análise do HTML e será executado assim que estiver disponível (potencialmente antes da conclusão da análise do HTML) e não será necessariamente executado na ordem em que aparece no documento HTML. Use async quando o script é independente de quaisquer outros scripts na página, por exemplo, analytics.

<script defer>

No <script defer>, o script será buscado em paralelo à análise HTML e executado quando o documento tiver sido totalmente analisado, mas antes de disparar DOMContentLoaded. Se houver múltiplos, cada script adiado é executado na ordem em que eles apareceram no documento HTML.

Se um script depende de um DOM totalmente analisado, o atributo defer será útil para garantir que o HTML seja totalmente analisado antes de ser executado.

Notas

  • Geralmente, o atributo async deve ser usado para scripts que não são críticos para a renderização inicial da página e não dependem um do outro. enquanto o atributo defer deve ser usado para scripts que dependem de / é dependente de outro script.
  • Os atributos async e defer são ignorados para scripts que não têm o atributo src.
  • <script>s com defer ou async que contêm document.write() serão ignorados com uma mensagem como "Uma chamada para o documento.write() de um script externo carregado de forma assíncrona foi ignorada".

Referências

Por que geralmente é uma boa ideia posicionar os CSS `<link>` entre `<head></head>` e os JS `<script>` logo antes de `</body>`?

Você conhece alguma exceção?
Topics
HTMLPerformance
Edit on GitHub

Em poucas palavras, posicionamento CSS <link>s and JavaScript <script>s permite uma renderização mais rápida da página e um melhor desempenho geral.

Colocando <link>s em <head>

Colocar <link>s em <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; O HTML cria o DOM (modelo de objeto do documento) e o CSS cria o modelo de objeto CSSOM (CSS Object Model). Ambos são necessários para criar os elementos visuais de um site, permitindo um tempo rápido para o "primeiro desenho significativo" (first meaningful paint). Colocar o CSS<link>s no <head> garante que os estilos são carregados e prontos para uso quando o navegador começar a renderizar a página.

Esta renderização progressiva é uma métrica em que os sites são medidos na sua pontuação de desempenho. Colocar folhas de estilo perto do final do documento é o que impede 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 visualizando uma página em branco. Outras vezes, podem ocorrer flashes de conteúdo não estilizado (FOUC), que mostram uma página da web sem a aplicação de estilos.

Colocando <script>s logo antes </body>

<script> bloqueia a análise HTML enquanto eles estão sendo baixados e executados, o que pode diminuir a velocidade da sua página. Colocar o <script>s na parte inferior permitirá que o HTML seja analisado e exibido ao usuário primeiro.

Uma exceção para posicionamento de <script>s na parte inferior é quando o script contém documento.write(), mas hoje em dia não é uma boa prática usar document.write(). Também, colocar <script>s na parte inferior significa que o navegador não pode iniciar o download dos scripts até que o documento inteiro seja analisado. Isso garante que seu código que precisa manipular elementos DOM não irá lançar um erro e parar 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 pode expulsar a solicitação de rede antes de baixar o script.

Tenha em mente que colocar scripts antes da tag de fechamento </body> irá criar a ilusão de que a página carrega mais rápido em um cache vazio (já que os scripts não vão bloquear o download do resto 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 após o carregamento completo da página. Se você colocar esses scripts na tag <head>, eles começariam a ser executados antes, então em um cache carregado a página parece carregar mais rápido.

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

Como na especificação HTML5, certas tags HTML como <head> e<body> são opcionais. O guia de estilo do Google recomenda até a sua remoção para economizar bytes. No entanto esta prática ainda não é amplamente adotada e o ganho de desempenho é provavelmente mínimo e para a maioria dos sites isso não vai importar.

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

Topics
BrowserHTML
Edit on GitHub
  • Semantics: As tags HTML descrevem o conteúdo.
  • Estilização: Personalizando a aparência das tags HTML
  • Conectividade: Comunique-se com o servidor de maneiras novas e inovadoras.
  • Offline e armazenamento: Permite que as páginas da web armazenem dados localmente no lado do cliente e funcionem offline de maneira mais eficiente.
  • Multimídia: Torna o vídeo e o áudio cidadãos de primeira classe na Web Aberta.
  • Gráficos e efeitos 2D/3D: Permite uma gama muito mais diversa de opções de apresentação.
  • Desempenho e integração: Fornece uma otimização de velocidade maior e melhor uso do hardware do computador.
  • Acesso a dispositivos: Permite o uso de vários dispositivos de entrada e saída.

Para que servem os atributos `data-`?

Topics
Web APIsHTMLTesting
Edit on GitHub

Antes de os frameworks JavaScript se tornarem populares, os desenvolvedores usavam atributos data- para armazenar dados extras dentro do próprio DOM, sem outros hacks, como atributos não padrão e propriedades extras no DOM. São destinados a armazenar dados personalizados privados para a página ou aplicação, quando não há mais atributos ou elementos apropriados para isso.

Outro caso comum de uso dos atributos data- é armazenar informações usadas por bibliotecas ou frameworks de terceiros. Por exemplo, a biblioteca Bootstrap usa atributos de dados para causar <button>s executar ações em um modal em outro lugar na página (example).

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">
  Iniciar modal
</button>
...
<div class="modal fade" id="myModal">Conteúdo Modal</div>

Hoje em dia, usar atributos data- geralmente não é recomendado. Uma razão é que os usuários podem modificar o atributo dos dados facilmente usando "inspecionar elemento" no navegador. O modelo de dados é melhor armazenado dentro do ambiente JavaScript e mantido em sincronia com o DOM por meio de reconciliação virtual do DOM ou binding de dados bidirecional, possivelmente por meio de uma biblioteca ou framework.

No entanto, um uso perfeitamente válido de atributos de dados é adicionar um identificador para frameworks de teste end-to-end (por exemplo, Playwright, Puppeteer, Selenium), sem adicionar classes ou atributos ID apenas para testes que são principalmente para outros fins. O elemento precisa de uma maneira de ser selecionado e algo como data-test-id="meu-element" é uma maneira válida de fazê-lo sem convoluir a marcação semântica.

O que é a renderização progressiva?

Topics
HTML
Edit on GitHub

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

Essa prática costumava ser muito mais comum nos dias anteriores à internet banda larga, mas ainda é utilizada no desenvolvimento moderno, pois as conexões de dados móveis estão se tornando cada vez mais populares (e inconstantes)!

Carregamento preguiçoso (lazy loading) de imagens

As imagens na página não são carregadas todas de uma vez. A imagem só é carregada quando o usuário rola para perto/na parte da página que exibe a imagem.

  • <img loading="lazy"> é uma maneira moderna de ensinar o navegador a adiar o carregamento de imagens que estão fora da tela até que o usuário rola perto delas.
  • Use JavaScript para ver a posição da rolagem e carregar a imagem quando a imagem estiver prestes a vir na tela (comparando as coordenadas da imagem com a posição da rolagem).

Priorizar conteúdo visível (ou renderização acima)

Inclua apenas o mínimo de CSS/conteúdo/scripts necessário para a quantidade de páginas que seriam renderizadas no navegador do usuário primeiro para exibir o mais rápido possível, você pode então usar scripts adiados ou ouvir o evento DOMContentLoaded/load para carregar em outros recursos e conteúdo.

Fragmentos HTML assíncronos

Liberando 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 here.

Outras técnicas modernas

Por que você usaria um atributo 'srcset' em uma tag de imagem?

Explique o processo que o navegador usa ao avaliar o conteúdo deste atributo.
Topics
HTML
Edit on GitHub

Você usaria o atributo srcset quando desejar fornecer imagens diferentes aos usuários, dependendo da largura da tela de seus dispositivos - fornecer imagens de alta qualidade para dispositivos com tela Retina melhora a experiência do usuário, enquanto fornecer imagens de resolução mais baixa para dispositivos de baixo desempenho aumenta o desempenho e diminui o desperdício de dados (pois fornecer 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 pequeno, médio ou grande .jpg 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, são feitos os seguintes cálculos:

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

Se a resolução do cliente for 1x, a 1.5625 é a mais próxima e a opção 500w correspondente a small.jpg será selecionada 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á o 500w (1.5625) porque é maior que 1 e a imagem pode ficar ruim. O navegador escolheria a imagem com uma taxa resultante mais próxima de 2, que é 1000w (3.125).

srcsets resolvem o problema de você querer fornecer arquivos de imagem menores para dispositivos de tela estreita, já que eles não precisam de imagens grandes como as telas de desktop - e também opcionalmente que você deseja fornecer imagens de resolução diferente para telas de alta densidade/baixa densidade.

Qual a diferença entre o evento `load` do documento e o evento `DOMContentLoaded` do documento?

Topics
HTMLJavaScript
Edit on GitHub

O evento DOMContentLoaded é disparado quando o documento HTML inicial foi completamente carregado e analisado, sem esperar que folhas de estilo, imagens e subframes terminem de carregar.

O evento load do window só é disparado após o DOM e todos os recursos e ativos dependentes terem sido carregados.

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

Topics
HTMLInternationalization
Edit on GitHub

Projetar e desenvolver para sites multilíngues faz parte da internacionalização (i18n).

Otimização de Busca (Seo)

  • Use o atributo lang na tag <html>.
  • Incluir a localidade na URL (por exemplo, en_US, zh_CN, etc).
  • Páginas web devem usar <link rel="alternate" hreflang="other_locale" href="url_for_other_locale"> para dizer aos motores de pesquisa que há outra página no href especificado com o mesmo conteúdo, mas para outro idioma/locale.

Entendendo a diferença entre localidade e idioma

As configurações regionais controlam como números, datas e horários são exibidos para sua região: que pode ser um país, ou uma porção de país, ou talvez nem mesmo respeite as fronteiras do país.

O idioma pode diferir entre países

Certos idiomas, especialmente os mais falados, têm diferentes "sabores" em diferentes países (regras de gramática, ortografia, caracteres). É importante diferenciar idiomas para o país de destino e não assumir/forçar a versão de um país de um idioma para todos os países que falam o idioma. Exemplos:

  • en: en-US (Inglês Americano), en-GB (Inglês Britânico)
  • zh: zh-CN (Chinês (Simplificado)), zh-TW (Chinês (Tradicional))

Prever localidade, mas sem restrições

Os servidores podem determinar a localidade/idioma dos visitantes por meio de uma combinação de cabeçalhos HTTP Accept-Language e endereços IP. Com esses, os visitantes podem selecionar automaticamente a melhor configuração regional para o visitante. No entanto, as previsões não são infalíveis (especialmente se os visitantes estiverem usando VPNs) e os visitantes ainda devem ser capazes de mudar seu país/idioma facilmente, sem complicações.

Considere as diferenças no comprimento do texto em diferentes idiomas

Algum conteúdo pode ser mais longo quando escrito em outro idioma. Esteja atento a problemas de layout ou de overflow no design. É melhor evitar projetar onde a quantidade de texto pode fazer ou quebrar um design. A contagem de caracteres entra em jogo com coisas como manchetes, rótulos e botões. Eles são menos importantes com texto livre, como texto do corpo ou comentários. Por exemplo, alguns idiomas, como alemão e francês, tendem a usar palavras e frases mais longas do que o inglês, o que pode causar problemas de layout se você não levar isso em conta.

Direção de leitura do idioma

Idiomas como inglês e francês são escritos da esquerda para a direita, de cima para baixo. No entanto, alguns idiomas, como hebraico e árabe, são escritos da direita para a esquerda. Isso pode afetar o layout do seu site e a colocação de elementos na página, então você deve ter cuidado ao projetar seu site de uma maneira que acomode diferentes direções de texto.

Não concatene strings traduzidas

Não faça nada como "A data de hoje é " + data. Isso pode causar problemas em idiomas com ordens de palavras diferentes. Use uma string de modelo com substituição de parâmetros para cada idioma em vez disso. Por exemplo, observe 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.

Formatação de datas e moedas

As datas do calendário são apresentadas de formas diferentes às vezes. Ex. "May 31, 2012" nos EUA. vs. "31 May 2012" em partes da Europa.

Não coloque texto em imagens

Colocar texto em imagens baseadas em raster (por exemplo, png, gif, jpg, etc.) não é uma abordagem escalável. Colocar texto em uma imagem ainda é uma maneira popular de exibir fontes não padronizadas com boa aparência em qualquer computador. No entanto, para dar suporte à tradução de texto de imagem em outros idiomas, é necessário criar uma imagem separada para cada idioma, o que não é um fluxo de trabalho escalonável para os designers.

Esteja ciente de como as cores são percebidas

As cores são percebidas de maneira diferente em diferentes idiomas e culturas. O design deve usar as cores de forma apropriada.

Referências

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

Topics
HTMLInternationalization
Edit on GitHub

Suposição: A pergunta é sobre como servir uma página com conteúdo disponível em vários idiomas e o conteúdo dentro da página deve ser exibido apenas em um idioma consistente.

Servir uma página em diferentes idiomas é um dos aspectos da internacionalização (i18n).

Quando uma solicitação HTTP é feita para um servidor, o agente de usuário que faz a solicitação geralmente envia informações sobre as preferências de idioma, como no cabeçalho Accept-Language. O servidor pode então usar essa informação 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 por exemplo <html lang="en">...</html>.

Para permitir que um mecanismo de busca saiba que o mesmo conteúdo está disponível em diferentes idiomas, as tags <link> com os atributos rel="alternate" e hreflang="..." devem ser usadas. Ex. <link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />.

Renderização

  • Renderização no servidor: O HTML conterá espaços reservados para strings e o conteúdo para o idioma específico será obtido a partir de configurações no código ou de um serviço de tradução. O servidor então gera dinamicamente a página HTML com o conteúdo nesse idioma específico.
  • Renderização do lado cliente: As strings de localização apropriadas serão obtidas e combinadas com as visualizações baseadas em JavaScript.

O que um `DOCTYPE` faz?

Topics
HTML
Edit on GitHub

DOCTYPE é uma abreviação para Tipo de Documento. Um DOCTYPE sempre está associado a um DTD - para Definição de Tipo de Documento.

Um DTD define como documentos de um determinado tipo devem ser estruturados (por exemplo, um button pode conter um span mas não uma div), ao passo que um DOCTYPE declara o que DTD um documento supostamente respeita (ex.: este documento respeita o HTML DTD).

Para páginas web, a declaração DOCTYPE é necessária. É usado para dizer aos agentes do usuário qual versão das especificações HTML o seu documento respeita. Uma vez que um agente de usuário tenha reconhecido um DOCTYPE correto, ele acionará o modo no-quirk correspondente a este DOCTYPE para ler o documento. Se um agente de usuário não reconhecer um DOCTYPE correto, ele ativará o quirks mode (modo de peculiaridade).

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

Explique o que é um aplicativo de página única e como torná-lo amigável para SEO

Topics
JavaScriptHTML
Edit on GitHub

Os desenvolvedores web atualmente se referem aos produtos que constroem como aplicativos web, em vez de sites. Embora não haja uma diferença estrita entre os dois termos, os aplicativos web tendem a ser altamente interativos e dinâmicos, permitindo que o usuário execute ações e receba uma resposta para sua ação. Tradicionalmente, o navegador recebe o HTML do servidor e o renderiza. Quando o usuário navegar para outra URL, é necessária uma atualização de página inteira e o servidor envia novo HTML para a nova página. Isso é chamado de renderização no lado do servidor.

No entanto, em SPAs modernas, é usado o rendering no lado do cliente (client-side rendering) em vez disso. O navegador carrega a página inicial do servidor, juntamente com os scripts (frameworks, bibliotecas, código do aplicativo) e folhas de estilo necessárias para todo o aplicativo. Quando o usuário navega para outras páginas, uma atualização de página não é acionada. A URL da página é atualizada através da API Histórico HTML5. Novos dados necessários para a nova página, geralmente no formato JSON, são recuperados pelo navegador via AJAX pedidos ao servidor. O SPA, em seguida, atualiza dinamicamente a página com dados via JavaScript, que já foi baixado na carga inicial da página. Esse modelo é semelhante a como os aplicativos nativos dos dispositivos móveis funcionam.

Prós

  • O aplicativo parece mais responsivo e os usuários não veem o flash entre as navegações de página devido às atualizações completas da página.
  • São feitas menos solicitações HTTP ao servidor, pois os mesmos recursos não precisam ser baixados novamente a cada carga de página.
  • Há uma clara separação das responsabilidades entre o cliente e o servidor, permitindo a fácil construção de novos clientes para diferentes plataformas (por exemplo, dispositivos móveis, chatbots, relógios inteligentes) sem precisar modificar o código do servidor. Você também pode modificar a pilha de tecnologia no cliente e no servidor independentemente, desde que o contrato da API não seja quebrado.

Contras

  • Há uma carga inicial de página mais pesada devido ao carregamento do framework, código do aplicativo e recursos necessários para várias páginas.
  • Há uma etapa adicional a ser feita no seu servidor, que é configurá-lo para rotear todas as solicitações para um único ponto de entrada e permitir que o roteamento do lado do cliente assuma a partir daí.
  • As SPAs dependem do JavaScript para renderizar conteúdo, mas nem todos os mecanismos de pesquisa executam JavaScript durante a rastreamento e podem ver conteúdo vazio em sua página. Isso prejudica inadvertidamente a otimização de mecanismos de pesquisa (SEO) do seu aplicativo. No entanto, na maioria das vezes, ao construir aplicativos, o SEO não é o fator mais importante, pois nem todo o conteúdo precisa ser indexável pelos mecanismos de pesquisa. Para contornar esse problema, você pode renderizar seu aplicativo no servidor ou usar serviços como Prerender para "renderizar seu JavaScript em um navegador, salvar o HTML estático e retorná-lo aos crawlers".

Quando você usaria `document.write()`?

Topics
Web APIsJavaScriptHTML
Edit on GitHub

document.write() escreve uma string de texto em um fluxo de documento aberto por document.open(). Quando o document.write() é executado após o carregamento da página, ele chamará o document.open, o que limpará todo o documento (<head> e <body> removidos!) e substitui o conteúdo pelo valor do parâmetro dado. Portanto, geralmente é considerado perigoso e propenso a uso indevido.

Existem algumas respostas online que explicam documento.write() está sendo usado no código analítico ou quando deseja incluir estilos que só devem funcionar se o JavaScript estiver ativado. Ele está até sendo usado em boilerplate HTML5 para carregar scripts em paralelo e preservar a ordem de execução! No entanto, esses motivos podem estar desatualizados e, atualmente, podem ser alcançados sem o uso do document.write().

What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?