Front-end com Vue 3

Aparência

Introdução a estrutura padrão do HTML ​

A estrutura padrão do HTML é crucial para o desenvolvimento de páginas web, garantindo que o conteúdo seja apresentado e funcione corretamente nos navegadores. Vamos explorar os elementos fundamentais desta estrutura:

<!DOCTYPE html> ​

  • Importância: A declaração <!DOCTYPE html> deve ser o primeiro item em um documento HTML. Essa declaração não é uma tag HTML; é uma instrução para o navegador sobre a versão do HTML que a página está usando. Ao especificar <!DOCTYPE html>, estamos informando ao navegador para interpretar a página como HTML5, a versão mais recente e amplamente suportada do HTML. Isso ajuda a garantir que a página seja renderizada de forma consistente em diferentes navegadores.

Tag <html> ​

  • Função: A tag <html> é o elemento raiz de um documento HTML. Ela engloba todos os outros elementos da página, exceto a declaração <!DOCTYPE html>. Essa tag informa ao navegador onde o documento HTML começa e termina. Dentro dela, incluímos duas partes principais: <head> e <body>.

  • lang="pt-BR": Este atributo especifica a linguagem do documento, que ajuda os navegadores e as ferramentas de acessibilidade a tratar o conteúdo de forma adequada. No caso de pt-BR, indica que o idioma principal é o Português do Brasil.

Usar o atributo lang corretamente é importante para acessibilidade, pois leitores de tela e outras ferramentas assistivas podem ajustar suas operações conforme o idioma especificado. Também ajuda na indexação correta do conteúdo pelo mecanismo de busca em relação ao idioma especificado.

Tag <head> ​

  • Função: A tag <head> contém metadados, títulos e referências a folhas de estilo e scripts que não são diretamente visíveis na área de conteúdo da página. Os metadados fornecem informações sobre o documento, que podem ser usados por navegadores e mecanismos de busca.
  • Elementos Comuns:
    • <title>: Define o título da página, que é mostrado na aba do navegador.
    • <meta>: Fornece metadados sobre o documento HTML, como a codificação de caracteres com <meta charset="utf-8"> e metadados para responsividade com <meta name="viewport" content="width=device-width, initial-scale=1.0">.
    • <link>: Utilizado para vincular folhas de estilo externas, como CSS, à página com <link rel="stylesheet" href="caminho/para/estilo.css">.
    • <script>: Inclui ou referencia scripts JavaScript com <script src="caminho/para/script.js"></script> ou colocando código JavaScript diretamente dentro de tags <script>...</script>.

Tag <body> ​

  • Função: A tag <body> contém todo o conteúdo visível da página, como texto, imagens, vídeos e links. É dentro do <body> que os desenvolvedores colocam os elementos que os usuários interagem diretamente.
  • Importância: A organização e estruturação do conteúdo dentro da tag <body> são fundamentais para a usabilidade e acessibilidade do site. Uma estrutura lógica, com o uso correto de cabeçalhos (<h1>, <h2>, etc.), parágrafos (<p>), listas (<ul>, <ol>), e outros elementos HTML, não só ajuda os usuários a navegar pela página mas também permite que tecnologias assistivas interpretem o conteúdo de forma eficaz.

Ao compreender e aplicar corretamente esses elementos fundamentais da estrutura padrão do HTML, os desenvolvedores podem criar páginas web que são acessíveis, funcionais e apresentam uma performance otimizada em diferentes dispositivos e navegadores.