Semantic HTML
HTML Semântico
HTML Semântico significa escolher elementos HTML pelo que eles fazem, não apenas por como eles aparecem. A página mantém sua estrutura e comportamento embutido mesmo sem CSS.
Outro exemplo
Um site de notícias constrói um artigo com article, h1, time, figure e nav. Quando o CSS está desligado, a história ainda possui uma ordem clara. Tecnologias assistivas podem pular para o cabeçalho ou navegação.
Partes principais
- 01Estrutura do documento
- 02Semântica do elemento
- 03Comportamento nativo
Use-o quando
Comece com o elemento HTML nativo que corresponda ao conteúdo e à ação. Adicione ARIA apenas quando o HTML nativo deixar uma lacuna real.
Não o use quando
Não use elementos div simples para simular links, botões, cabeçalhos ou tabelas só porque são fáceis de estilizar.
Nome usado no código
native HTML elements before ARIA roles Antes de lançar
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with HTML Semântico (Semantic HTML). User context: Um site de notícias constrói um artigo com article, h1, time, figure e nav. Quando o CSS está desligado, a história ainda possui uma ordem clara. Tecnologias assistivas podem pular para o cabeçalho ou navegação. Recommended pattern: HTML Semântico (Semantic HTML). Why it fits: Comece com o elemento HTML nativo que corresponda ao conteúdo e à ação. Adicione ARIA apenas quando o HTML nativo deixar uma lacuna real. Do not use it when: Não use elementos div simples para simular links, botões, cabeçalhos ou tabelas só porque são fáceis de estilizar. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): O padrão cobre apenas o escopo listado. Ele não escolhe o estilo visual, decisão do produto ou exemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Conferir este pedido
Review how HTML Semântico (Semantic HTML) is used now. Definition: HTML Semântico significa escolher elementos HTML pelo que eles fazem, não apenas por como eles aparecem. A página mantém sua estrutura e comportamento embutido mesmo sem CSS. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.