Seção 1. Estrutura de conteúdo com tags semânticas HTML5
1.1. Estrutura
- HTML nos permite estruturar o documento conforme o significado do conteúdo
- Div, tags de tabela são usadas para criar estrutura, layout, mas não é semântico
- Tags semânticas HTML - Estrutura da página da web para mostrar significado, não apenas layout
- Os elementos estruturais/seccionários semânticos HTML ajudam a criar páginas mais legíveis, acessíveis e melhores, orientadas para resultados, fácil de modificar/atualizar
- Um elemento semântico descreve claramente seu significado para o navegador e o desenvolvedor
Nota : Os elementos semânticos HTML5 são suportados em todos os navegadores modernos.
Elementos de corte de título HTML
H1 a H6
Elementos estruturais/de secção HTML5
| Marcação | Usar |
|---|
<main> | Especifica o conteúdo principal de um documento |
<header> | Especifica um cabeçalho para um documento ou seção |
<nav> | Define links de navegação |
<section> | Define uma seção em um documento |
<article> | Define um artigo. |
<aside> | Define o conteúdo além do conteúdo da página |
<footer> | Define um rodapé para um documento ou seção |
Por que os elementos estruturais/de secção HTML5 introduzidos?
- Anteriormente, com o HTML, os desenvolvedores usaram/criaram seus próprios nomes de identificação/classe para estilizar elementos como cabeçalho, rodapé, navegação superior, navegação inferior, menu principal, navegação - navegação, contêiner inferior esquerdo principal esquerdo, conteúdo, artigo esquerdo, barra lateral direita, etc.
- Isso tornou difícil e impossível para os mecanismos de pesquisa identificar o conteúdo correto da página da web também um desenvolvedor para o navegador e editar conteúdo
- Com os novos elementos semânticos/significativos do HTML5 como (
<header> <footer> <nav> <section> <article> <aside> ), isso ficará mais fácil - Elementos semânticos/significativos HTML5 tornam as páginas mais legíveis para máquinas, bem como usuários com acessibilidade, resultados do mecanismo de pesquisa, mais consistente e fácil de usar e estilizar
De acordo com o W3C, uma web semântica: "permite que os dados sejam compartilhados e reutilizados entre aplicativos, empresas e comunidades"
Implementando hierarquia estrutural
Depende de você o que exatamente os elementos envolvidos representam, desde que a hierarquia faça sentido. Você só precisa ter em mente algumas práticas recomendadas ao criar essas estruturas:
- De preferência, você deve apenas
use a single <h1> per page - este é o título de nível superior, e todos os outros ficam abaixo disso na hierarquia - Certifique -se de usar os títulos na ordem correta na hierarquia. Não use
<h3>s para representar subtítulos, seguido de <h2>s para representar sub-sub-sub-sub-sub-sub-sub-sub-subsídios-isso não faz sentido e levará a resultados estranhos
Por que precisamos de estrutura?
- Os usuários que olham para uma página da web tendem a digitalizar rapidamente para encontrar conteúdo relevante. Se eles não puderem ver nada útil em alguns segundos, provavelmente ficarão frustrados e irão para outro lugar.
- Os mecanismos de pesquisa indexando sua página consideram o conteúdo dos títulos como palavras -chave importantes para influenciar as classificações de pesquisa da página. Sem títulos, sua página terá um desempenho ruim em termos de
SEO (Search Engine Optimization) - Pessoas com deficiência visual geralmente não leem páginas da web; Eles os ouvem. Se os títulos não estiverem disponíveis, eles serão forçados a ouvir todo o documento, leia em voz alta
1.2. Contornos
- O HTML usa elementos semânticos, títulos, tags semânticas para gerar/descrever o esboço do documento do conteúdo da página (Document Outline = tópicos, índice, índice)
- O esboço do documento é usado por dispositivos/navegadores para digitalizar e pesquisar conteúdo, navegue para uma seção específica/específica, também para determinar como o conteúdo se relaciona
- Outlliner html5 é usado para entender e saber o esboço exato, ou seja, estrutura de página da página/documento html
- Use Outliner Utility: https://gsnedders.html1.org/outliner/
- Editor de texto como colchetes usa um
Document Outliner Plugin/extension para mostrar o esboço de documentos/tópicos/tópicos/indexação de documentos adequados da página - Suportes -> Exibir menu -> Mostrar contorno do documento
1.3. Nav
- Representa uma seção do documento destinado à navegação
- O elemento define um conjunto de links de navegação
- O elemento HTML representa uma seção de uma página cujo objetivo é fornecer links de navegação, dentro do documento atual ou em outros documentos
- Exemplos comuns de seções de navegação são menus, mesas de conteúdo e índices
Nota : não é uma regra de que todos os links de um documento devem estar dentro de um
Elemento O elemento se destina apenas a um grande bloco de links de navegação
1.4. Seção
- Representa um documento genérico ou seção de aplicativos
- O elemento define uma seção em um documento
- O html elemento representa uma seção independente
De acordo com a documentação HTML5 do W3C: "Uma seção é um agrupamento temático de conteúdo, normalmente com um título"
- Uma página da web normalmente pode ser dividida em seções para introdução, conteúdo, seção do meio com seções esquerda e direita, etc.
1.5. Artigo
- Representa um conteúdo independente de um documento, como uma entrada de blog ou artigo de jornal
- O elemento especifica conteúdo independente e independente
- O elemento HTML representa uma composição independente em um documento
- A tag html é usada em um blog/post do fórum, artigo de jornal, entrada de blogs etc.
1.6. Aparte
- Representa um conteúdo que está apenas ligeiramente relacionado ao restante da página
- O elemento define algum conteúdo além do conteúdo em que é colocado (como uma barra lateral)
- Além disso, são frequentemente apresentados como barras laterais ou caixas de chamada
1.7. Cabeçalho
- Representa um grupo de auxílios introdutórios ou de navegação
- O elemento especifica um cabeçalho para um documento ou seção
- O elemento deve ser usado como um contêiner para conteúdo introdutório
- O elemento HTML representa conteúdo introdutório, normalmente um grupo de auxílios introdutórios ou de navegação
- Pode conter alguns elementos de cabeçalho, mas também um logotipo, um formulário de pesquisa, um nome de autor e outros elementos
- Você pode ter vários elementos em um documento
1.8. Rodapé
- Representa um rodapé para uma seção
- O elemento especifica um rodapé para um documento ou seção
- O elemento HTML representa um rodapé para o seu conteúdo de corte mais próximo ou o elemento raiz de secção
- Um rodapé normalmente contém informações sobre o autor da seção, dados de direitos autorais ou links para documentos relacionados
- Você pode ter vários elementos em um documento
1.9. Div
- A tag Div é conhecida como
Division, Divider tag - O elemento da divisão de conteúdo HTML (
) é o recipiente genérico para o conteúdo de fluxo
- Antes das tags semânticas HTML5, a tag Div é usada no HTML para fazer divisões de conteúdo na página da web como (texto, imagens, cabeçalho, rodapé, barra de navegação, etc.)
- O
A tag é uma tag de contêiner vazia, que define uma divisão ou uma seção especificando elementos infantis
- Com tags semânticas html5, div uma tag poderosa também usada para estruturar, dividir, layout, gorjear a página/conteúdo com CSS ou manipulada com scripts
- O
A tag é um elemento no nível do bloco, então uma quebra de linha é colocada antes e depois dela
- A div é a tag mais utilizável no desenvolvimento da web, porque nos ajuda a separar os dados na página da web e podemos criar uma seção específica
- É usado para o grupo de várias tags de HTML para que as seções possam ser criadas e o estilo pode ser aplicado a eles
1.10. Wai-Ara
- Aplicativo de Internet Rico Acessível para Acessibilidade da Web
- É um conjunto de atributos para ajudar a aprimorar a semântica de um site ou aplicativo da web para ajudar as tecnologias de assistência, como os leitores de tela para cegos, entendem certas coisas que não são nativas do HTML
- ARIA (WAI-ARIA) é um conjunto de atributos que você pode adicionar aos elementos HTML. Esses atributos comunicam o papel, o estado e a semântica da propriedade às tecnologias de assistência por meio das APIs de acessibilidade implementadas em navegadores
- ARIA (WAI-ARIA) fornece ao usuário uma boa maneira de navegar e interagir com o seu site. Faça seu código HTML o mais semântico possível, para que o código seja fácil de entender para os visitantes e leitores de tela
- WAI-ARIA é uma tecnologia incrivelmente poderosa que permite aos desenvolvedores descrever facilmente o objetivo, o estado e outras funcionalidades de interfaces de usuário visualmente ricas
- Funções marcantes (leitores de tela e outros dispositivos digitalizam e pulem para a função necessária)
- <header role="banner">
- <nav role="navigation">
- <main role="main">
- <article role="article">
- <footer role="footer">
- <aside role="complementary">
- <footer role="contentinfo">
1.11. Sites / blogs
- https://www.w3schools.com/html/html_accessibility.asp
- https://www.w3.org/wai/standards-guidelines/aria/
- https://www.w3.org/tr/wai-aria/
- https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/
