HTML: A base da Web Moderna e sua Importância para a Experiência do Usuário
Por que usar HTML semântico?
Já parou para pensar na importância do HTML na web atualmente? Essa linguagem de marcação de hipertexto é a codificação que estrutura e organiza todos os conteúdos que estão disponíveis na internet. Mas o que significa “semântico”?
A semântica é o estudo do significado e interpretação das palavras na comunicação, seja ela humana ou não. Nesse sentido, o HTML semântico refere-se a marcações usadas para estruturar e dar significado ao conteúdo de uma página, facilitando a interpretação de usuários e outras máquinas como mecanismos de buscas e leitores de tela. Seu papel é garantir uma experiência de navegação acessível, eficiente e intuitiva para todas as pessoas. O HTML nos garante essa navegabilidade fluida por meio das suas tags semânticas, trazendo significado para os elementos interativos, o que possibilitou a incorporação de gráficos, animações e conteúdo multimídia diretamente nas páginas da web, sem a necessidade de plugins externos. A ausência dessa classificação, dificultaria o carregamento desses conteúdos em diferentes navegadores e plataformas.
As tecnologias assistivas dependem da marcação semântica para interpretar e apresentar o conteúdo de forma acessível, permitindo que os usuários com deficiência possam compreender e interagir com o site de maneira eficaz. A documentação do MDN (Mozilla Developer Network) é uma excelente fonte de referência para entender e utilizar as principais tags semânticas existentes no HTML 5. Essa documentação fornece informações detalhadas sobre cada tag, explicando seu propósito, uso adequado e exemplos práticos. Confira o material completo em Elementos HTML.
Além de melhorar a acessibilidade do seu conteúdo, o uso correto do HTML traz benefícios, como: otimização do seu conteúdo no ranking de buscas (SEO), aumento da sua manutenibilidade (código mais limpo, e mais fácil de ler e atualizar) e aumento da compatibilidade do seu conteúdo com diferentes navegadores e dispositivos. Vale lembrar que o HTML é uma linguagem de marcação, não de programação. Isso significa que sua principal função é organizar o conteúdo, determinar a posição dos elementos e controlar sua apresentação visual.
Principais tags semânticas:
A quinta versão do HTML trouxe consigo uma série de tags semânticas que vão além de apenas organizar o conteúdo na internet. Essas tags também desempenham um papel fundamental na acessibilidade dos sites, tornando mais fácil demarcar o conteúdo de acordo com seu propósito, dentre eles:
Estruturação da página:
É fundamental definir duas características da página:
- <!DOCTYPE html>: assegura que o navegador interprete corretamente sua página.
- <html lang=”pt-br”>: definir o idioma da sua página garante que tecnologias como leitores de tela e SEO interpretem o conteúdo na língua correta.
Demarcação de landmarks:
Essas tags marcam uma região, criando um ponto de referência. São usadas para marcar blocos importantes que facilitam a navegação permitindo aos usuários acessarem diretamente esses blocos. Os principais landmarks são:
- <main>: O elemento <main> é uma tag semântica do HTML que tem como objetivo envolver todo o conteúdo principal de uma página. Ao utilizar essa tag corretamente, é possível indicar aos mecanismos de busca e aos leitores de tela qual é o conteúdo mais relevante e central da página.
- <header>: demarca o cabeçalho de uma página ou seção, onde geralmente ficam logotipos, menus de navegação e títulos de página.
- <nav>: A tag <nav> é utilizada para marcar a seção de navegação principal de uma página, ou seja, onde estão os links que direcionam o usuário para diferentes partes do site. Ao inserir os links de navegação dentro dessa tag, é possível separar claramente o conteúdo principal do site do menu de navegação.
- <article>: utilizado para declarar um conteúdo que não precisa de outro para fazer sentido em um documento HTML, por exemplo, um artigo em um blog;
- <section>: usada para definir seções dentro de um documento, como capítulos, grupos de conteúdo relacionado ou partes de uma página com um tema específico.
- <footer>: demarca o rodapé de um documento e geralmente apresenta contatos e direitos autorais.
- <aside>: utilizado quando precisamos criar um conteúdo de apoio/adicional ao conteúdo principal;
Estruturação textual:
As tags de marcação textual dão significado semântico, podendo fazer sentido mesmo quando lido sem estilo (CSS). Por isso, é crucial usar as tags adequadas para títulos, subtítulos, parágrafos e listas, sendo essas:
- <h1>: Título principal,
- <h2>: Subtítulos
- <h3> a <h6>: são títulos secundários, que estruturam o conteúdo e auxiliam o usuário a encontrar o conteúdo principal de maneira mais rápida.
- <p>: parágrafo normal.
- <ul>: lista não-numerada
- <ol>: lista numerada.
Com essas tags, é possível criar uma hierarquia clara e facilitar a navegação de uma forma rápida e objetiva por títulos com o leitor de tela. Além disso, há as tags <strong>, que faz com que o texto seja lido com entonação acentuada e <em>, que faz com que o texto seja lido com ênfase.
Definição de elementos de interação:
São elementos de controle de interface, como botões, links e formulários que quando usados corretamente, facilitam a navegação alternativa, ou seja, apenas por teclado. São elas:
- <button>: deve ser usado em um componente clicável para realizar ações, como fazer uma busca ou submeter dados.
- <a>: deve ser usada para navegação por hiperlinks, dentro do conteúdo ou fora.
- <input>: deve ser usada para campos de inserção de dados.
- <label>: é o rótulo que deve contextualizar os controle de formulários.
- <fieldset>: deve ser usada para agrupar opções de um formulário, como checkbox ou radiobutton.
Conclusão
As tecnologias assistivas dependem da marcação semântica, que é uma prática crucial para a acessibilidade da web. Ao utilizar tags HTML semânticas, podemos estruturar o conteúdo de forma clara e organizada, transmitindo informações essenciais sobre o significado e propósito de cada elemento da página.
Como podemos observar, o HTML 5 trouxe diversas vantagens para a web moderna, tornando sites e aplicativos mais acessíveis, interativos, dinâmicos e também, compatíveis com dispositivos móveis. A capacidade de criar layouts flexíveis, facilita a experiência do usuário nesses dispositivos, mas também ajuda na otimização para mecanismos de busca, uma vez que o Google e outros motores de busca priorizam sites responsivos em seus resultados de pesquisa.
Referências
HMTL: Boas Práticas em acessibilidade (MDN)
HTML semântico: Entendendo e utilizando para Web mais significativas (Sujeito Programador)
Escrito por @Isa Gardenia Santana, Luisa Cavalheiro e Folgadus.
