review-html
Voltar à Trilha

Revisão de HTML

Revise os conceitos abaixo para se preparar para o próximo exame preparatório.

Noções básicas de HTML

  • Papel do HTML: HTML (Hypertext Markup Language) é a base da estrutura web, definindo os elementos de uma página.
  • Elementos HTML: Usados para representar conteúdo na página. A maioria deles é composta por uma tag de abertura e uma de fechamento (por exemplo, <h1></h1>, <p></p>).
  • Estrutura HTML: HTML consiste em um head e body, onde metadados, estilos e conteúdo são estruturados.
  • Elementos HTML Comuns: Títulos (<h1> - <h6>), parágrafos (<p>) e contêineres div (<div>).
  • Elementos div: O elemento div é um elemento HTML genérico que não possui nenhum significado semântico. Ele é usado como um contêiner genérico para conter outros elementos HTML.
  • Elementos Void: Não possuem uma tag de fechamento (por exemplo, <img>).
  • Atributos: Adicionando metadados e comportamento aos elementos.

Identificadores e Agrupamento

  • IDs: identificadores únicos de elementos.
  • Classes: Agrupando elementos para estilização e comportamento.

Caracteres Especiais e Vinculação

  • Entidades HTML: Usando caracteres especiais como &amp; e &lt;.
  • Elemento link: Vinculando a folhas de estilo externas.
  • Elemento script: Incorporando arquivos JavaScript externos.

Boilerplate e Codificação

  • HTML boilerplate: Estrutura básica de uma página web, que inclui os elementos DOCTYPE, html, head e body. Deve ser usado como ponto de partida para um documento HTML.
  • Codificação de caracteres UTF-8: Garantindo a exibição universal de caracteres.

SEO e Compartilhamento Social

  • Meta tags (description): Fornecendo uma descrição curta para a página web e impactando o SEO.
  • Tags Open Graph: Melhorando o compartilhamento em redes sociais.

Elementos de Mídia e Otimização

  • Elementos substituídos: Conteúdo incorporado (por exemplo, imagens e iframes).
  • Otimização de mídia: Técnicas para melhorar o desempenho da mídia.
  • Formatos de imagem e licenças: Entendendo os direitos de uso e os tipos.
  • SVGs: gráficos vetoriais escaláveis para visuais nítidos.

Integração Multimídia

  • Elementos de áudio e vídeo HTML: Incorporando multimídia.
  • Incorporação com <iframe>: Integrando conteúdo de vídeo externo.

Caminhos e Comportamento de Links

  • Tipos de atributo Target: Controlando o comportamento do link.
  • Caminhos absolutos vs. relativos: Navegando por diretórios.
  • Sintaxe de caminho: Entendendo /, ./ e ../ para navegação de arquivos.
  • Estados de link: Gerenciando diferentes interações de link (hover, active).
  • Links internos: Vinculando para outra seção da página usando href="#id" em um elemento a e dando ao elemento de destino o mesmo id.

Importância do HTML Semântico

  • Hierarquia estrutural para elementos de título: É importante usar o elemento de título correto para manter a hierarquia estrutural do conteúdo. O elemento h1 é o nível mais alto de título e o elemento h6 é o nível mais baixo de título.
  • Elementos HTML de apresentação: Elementos que definem a aparência do conteúdo, por exemplo, os elementos obsoletos center, big e font.
  • Elementos HTML semânticos: Esses elementos fornecem significado à estrutura do conteúdo. Exemplos incluem:
  • <header>`: Representa conteúdo introdutório.
  • <nav>: Contém links de navegação.
  • <article>: Representa conteúdo autocontido.
  • <aside>: Usado para barras laterais ou conteúdo relacionado.
  • <section>: Agrupa conteúdo relacionado dentro de um documento.
  • <footer>: Define o rodapé para uma seção ou documento.

Elementos HTML Semânticos

  • Elemento de ênfase (em): Marca texto que tem ênfase de estresse.
  • Elemento de texto idiomático (i): Usado para destacar voz ou modo alternativo, termos idiomáticos de outra língua, termos técnicos e pensamentos.
  • Elemento de Importância Forte (strong): Marca texto que tem forte importância.
  • Chamar a atenção para o elemento (b): Usado para chamar a atenção para um texto que não é importante para o significado do conteúdo.
  • Elemento de Lista de Descrição (dl): Usado para representar uma lista de agrupamentos termo-descrição.
  • Elemento Description Term (dt): Usado para representar o termo que está sendo definido.
  • Elemento Description Details (dd): Usado para representar a descrição do termo.
  • Elemento de Citação em Bloco (blockquote): Usado para representar uma seção que é citada de outra fonte.
  • Elemento de Citação Inline (q): Usado para representar uma citação curta inline.
  • Elemento de abreviação (abbr): Usado para representar uma abreviação ou acrônimo.
  • Elemento Contact Address (address): Usado para representar as informações de contato.
  • Elemento (Date) Time (time): Usado para representar uma data e/ou hora.
  • Elemento sobrescrito (sup): Usado para representar texto sobrescrito.
  • Elemento de subscrito (sub): Usado para representar texto em subscrito.
  • Elemento de Código Inline (code): Usado para representar um fragmento de código de computador.
  • Elemento de Anotação Não Articulada (u): Usado para representar um trecho de texto inline que deve ser exibido de uma forma que indique que possui uma anotação não textual.
  • Elemento Ruby Annotation (ruby): Usado para representar o texto de uma anotação ruby.
  • Elemento de tachado (s): Usado para representar conteúdo que não é mais preciso ou relevante.

Elementos e Atributos de Formulário HTML

Formulários

  • Elemento form: Usado para criar um formulário HTML para entrada do usuário.
  • Tipos Comuns de Entrada:
  • text, email, password, radio, checkbox, number, date.
  • Atributo action: usado para especificar a URL para onde os dados do formulário devem ser enviados.
  • Atributo method: usado para especificar o método HTTP a ser usado ao enviar os dados do formulário. Os métodos mais comuns são GET e POST.
<form method="value-goes-here" action="url-goes-here">
  <!-- inputs go inside here -->
</form>
  • Elemento input: usado para criar um campo de entrada para entrada do usuário.
  • Atributo type: usado para especificar o tipo do campo de entrada, por exemplo, text, email, number, radio e checkbox.
  • Atributo placeholder: usado para mostrar uma dica ao usuário para indicar o que deve ser inserido no campo de entrada.
  • Atributo value: usado para especificar o valor do input. Se o input for do tipo button, o atributo value pode ser usado para definir o texto do botão.
  • Atributo name: usado para atribuir um nome a um campo de entrada, que serve como chave quando os dados do formulário são enviados. Para botões de opção, atribuir o mesmo name os agrupa, permitindo que apenas uma opção do grupo seja selecionada por vez.
  • Atributo size: usado para definir o número de caracteres que devem estar visíveis enquanto o usuário digita no input.
  • Atributo min: pode ser usado com tipos de entrada como number para especificar o valor mínimo permitido no campo de entrada.
  • Atributo max: pode ser usado com tipos de entrada como number para especificar o valor máximo permitido no campo de entrada.
  • Atributo minlength: usado para especificar o número mínimo de caracteres exigidos em um campo de entrada.
  • Atributo maxlength: usado para especificar o número máximo de caracteres permitidos em um campo de entrada.
  • Atributo required: usado para especificar que um campo de entrada deve ser preenchido antes de enviar o formulário.
  • Atributo disabled: usado para especificar que um campo de entrada deve estar desabilitado.
  • Atributo readonly: usado para especificar que um campo de entrada é somente leitura.
<!-- Text input -->
<input 
  type="text"
  id="name"
  name="name"
  placeholder="e.g. Quincy Larson"
  size="20"
  minlength="5"
  maxlength="30"
  required
/>

<!-- Number input -->
<input 
  type="number"
  id="quantity"
  name="quantity"
  min="2"
  max="10"
  disabled
/>

<!-- Button -->
<input type="button" value="Show Alert" />
  • Elemento label: usado para criar um rótulo para um campo de entrada.
  • Atributo for: usado para especificar para qual campo de entrada o rótulo é.
  • Associação implícita de formulário: os inputs podem ser associados a labels envolvendo o campo de input dentro do elemento label.
<form action="">
  <label>
    Full Name:
    <input type="text" />
  </label>
</form>
  • Associação explícita de formulário: os inputs podem ser associados a labels usando o atributo for no elemento label.
<form action="">
  <label for="email">Email Address: </label>
  <input type="email" id="email" />
</form>
  • Elemento button: usado para criar um botão clicável. Um botão também pode ter um atributo type, que controla o comportamento do botão quando ele é ativado, por exemplo, submit, reset e button.
<button type="button">Show Form</button>
<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>
  • Elemento fieldset: usado para agrupar entradas relacionadas.
  • Elemento legend: usado para adicionar uma legenda para descrever o grupo de entradas.
<!-- Radio group -->
<fieldset>
  <legend>Was this your first time at our hotel?</legend>

  <input id="yes-option" type="radio" name="hotel-stay" value="yes" />
  <label for="yes-option">Yes</label>

  <input id="no-option" type="radio" name="hotel-stay" value="no" />
  <label for="no-option">No</label>
</fieldset>

<!-- Checkbox group -->
<fieldset>
  <legend>
    Why did you choose to stay at our hotel? (Check all that apply)
  </legend>

  <input type="checkbox" id="location" name="location" value="location" />
  <label for="location">Location</label>

  <input type="checkbox" id="price" name="price" value="price" />
  <label for="price">Price</label>
</fieldset>
  • Estado focado: este é o estado de um campo de entrada quando ele está selecionado pelo usuário.

Trabalhando com Elementos e Atributos de Tabela HTML

  • Elemento de tabela: usado para criar uma tabela HTML.
  • Elemento de Cabeçalho de Tabela (thead): usado para agrupar o conteúdo do cabeçalho em uma tabela HTML.
  • Elemento de linha de tabela (tr): usado para criar uma linha em uma tabela HTML.
  • Elemento de cabeçalho de tabela (th): usado para criar uma célula de cabeçalho em uma tabela HTML.
  • Elemento do corpo da tabela (tbody): usado para agrupar o conteúdo do corpo em uma tabela HTML.
  • Elemento de célula de dados da tabela (td): usado para criar uma célula de dados em uma tabela HTML.
  • Elemento Table Foot (tfoot): usado para agrupar o conteúdo do rodapé em uma tabela HTML.
  • Elemento caption: usado para adicionar um título a uma tabela HTML.
  • Atributo colspan: usado para especificar o número de colunas que uma célula da tabela deve abranger.
<table>
  <caption>Exam Grades</caption>

  <thead>
    <tr>
      <th>Last Name</th>
      <th>First Name</th>
      <th>Grade</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Davis</td>
      <td>Alex</td>
      <td>54</td>
    </tr>

    <tr>
      <td>Doe</td>
      <td>Samantha</td>
      <td>92</td>
    </tr>

    <tr>
      <td>Rodriguez</td>
      <td>Marcus</td>
      <td>88</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Average Grade</td>
      <td>78</td>
    </tr>
  </tfoot>
</table>

Ferramentas HTML

  • Validador HTML: Uma ferramenta que verifica a sintaxe do código HTML para garantir que ele seja válido.
  • Inspetor DOM: Uma ferramenta que permite inspecionar e modificar a estrutura HTML de uma página web.
  • Devtools: Um conjunto de ferramentas para desenvolvedores web integradas diretamente no navegador que ajudam você a depurar, analisar desempenho e analisar páginas web.

Introdução à Acessibilidade

  • Diretrizes de Acessibilidade para Conteúdo Web: As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) são um conjunto de diretrizes para tornar o conteúdo web mais acessível para pessoas com deficiências. Os quatro princípios do WCAG são POUR que significa Perceptível, Operável, Compreensível e Robusto.

Tecnologia Assistiva para Acessibilidade

  • Leitores de tela: Programas de software que leem o conteúdo da tela do computador em voz alta. Eles são usados por pessoas cegas ou com deficiência visual para acessar a web.
  • Teclados grandes ou braille: Usados por pessoas com deficiência visual para acessar a web.
  • Ampliadores de tela: Programas de software que ampliam o conteúdo da tela do computador. Eles são usados por pessoas com baixa visão para acessar a web.
  • Dispositivos de apontamento alternativos: Usados por pessoas com deficiências de mobilidade para acessar a web. Isso inclui dispositivos como joysticks, trackballs e touchpads.
  • Reconhecimento de voz: Usado por pessoas com deficiências de mobilidade para acessar a web. Permite que os usuários controlem um computador usando a voz.

Ferramentas de Auditoria de Acessibilidade

  • Ferramentas Comuns de Acessibilidade: Google Lighthouse, Wave, IBM Equal Accessibility Checker e axe DevTools são algumas das ferramentas comuns de acessibilidade usadas para auditar a acessibilidade de um site.

Melhores Práticas de Acessibilidade

  • Estrutura adequada de níveis de título: Você deve usar níveis de título adequados para criar uma estrutura lógica para o seu conteúdo. Isso ajuda as tecnologias assistivas a entender o conteúdo do seu site.
  • Acessibilidade e Tabelas: Ao usar tabelas, você deve usar o elemento th para definir células de cabeçalho e o elemento td para definir células de dados. Isso ajuda as tecnologias assistivas a entenderem a estrutura da tabela.
  • Importância de os inputs terem um rótulo associado: Você deve usar o elemento label para associar rótulos aos inputs de formulário. Isso ajuda as tecnologias assistivas a entenderem a finalidade do input.
  • Importância de um bom texto alt: Você deve usar o atributo alt para fornecer uma alternativa em texto para imagens. Isso ajuda as tecnologias assistivas a entenderem o conteúdo da imagem.
  • Importância de um bom texto de link: Você deve usar texto de link descritivo para ajudar os usuários a entender o propósito do link.
  • Melhores práticas para tornar conteúdo de áudio e vídeo acessível: Você deve fornecer legendas e transcrições para conteúdo de áudio e vídeo para torná-lo acessível a pessoas com deficiência auditiva. Você também deve fornecer descrições em áudio para conteúdo de vídeo para torná-lo acessível a pessoas com deficiência visual.
  • Atributo tabindex: Usado para tornar elementos focáveis e definir a ordem relativa na qual eles devem ser navegados usando o teclado. É importante nunca usar o atributo tabindex com um valor maior que 0. Em vez disso, você deve usar um valor de 0 ou -1.
  • Atributo accesskey: Usado para definir um atalho de teclado para um elemento. Isso pode ajudar usuários com deficiências de mobilidade a navegar no site com mais facilidade.

WAI-ARIA, Roles e Attributes

  • WAI-ARIA: Significa Web Accessibility Initiative - Accessible Rich Internet Applications. É um conjunto de atributos que podem ser adicionados aos elementos HTML para melhorar a acessibilidade. Ele fornece informações adicionais para tecnologias assistivas sobre o propósito e a estrutura do conteúdo.
  • Funções ARIA: Um conjunto de funções predefinidas que podem ser adicionadas a elementos HTML para definir seu propósito. Isso ajuda tecnologias assistivas a entender o conteúdo do site. Exemplos incluem role="tab", role="menu" e role="alert".
  • Atributos aria-label e aria-labelledby: Esses atributos são usados para dar a um elemento um nome programático (ou acessível), o que ajuda a tecnologia assistiva (como leitores de tela) a entender o propósito do elemento. Eles são frequentemente usados quando o rótulo visual de um elemento é uma imagem ou símbolo em vez de texto. aria-label permite que você defina o nome diretamente no atributo enquanto aria-labelledby permite que você faça referência a um texto existente na página.
  • Atributo aria-hidden: Usado para ocultar um elemento de tecnologias assistivas como leitores de tela. Por exemplo, isso pode ser usado para ocultar imagens decorativas que não fornecem nenhum conteúdo significativo.
  • Atributo aria-describedby: Usado para fornecer informações adicionais sobre um elemento associando-o a outro elemento que contém as informações. Isso ajuda as tecnologias assistivas a entenderem o propósito do elemento.