Ferramentas para desenvolvedores · Editor HTML WYSIWYG
forte vs b e em vs i: Por que o Semantic Inline HTML é importante para os editores
· Por que é importante
HTML acessibilidade conteúdo editável
Explica a diferença prática entre elementos inline semânticos e de apresentação, o que a tecnologia assistiva e os mecanismos de pesquisa fazem com eles e como verificar o que seu editor emite.
Ousado nem sempre é importante – escolha o significado antes da aparência
O código de um produto pode estar em negrito apenas para que os leitores possam encontrá-lo rapidamente; um aviso pode ser forte porque a sua importância pertence ao significado da frase. Essas duas intenções podem ser parecidas em uma folha de estilo padrão. Escolher apenas pela aparência torna a marcação ambígua quando CSS muda ou outro leitor consome a estrutura.
A barra de ferramentas de ToolAcre rotula suas ações como Negrito e Itálico, enquanto o sanitizador normaliza os elementos legados b e i para fortes e em. Esse é um padrão útil para prosa enfatizada, mas o editor ainda deve decidir se as palavras selecionadas realmente carregam importância ou ênfase, em vez de decoração.
O que a especificação HTML diz hoje — resume o significado atual de forte, em, b e i
Forte representa forte importância, seriedade ou urgência; em representa a ênfase do acento cujo posicionamento pode afetar a interpretação. O elemento b pode chamar a atenção sem acrescentar importância, enquanto i pode marcar o deslocamento do texto da prosa circundante, como um termo, voz ou convenção, sem afirmar ênfase.
A lição prática não é que duas tags sejam proibidas. É que a mesmice visual não apaga as diferenças semânticas. A saída restrita de ToolAcre escolhe forte e em, portanto, o conteúdo que exige um deslocamento meramente estilístico pode precisar de revisão ou de um fluxo de trabalho de destino diferente, em vez de um recurso de barra de ferramentas inventado.
A tecnologia assistiva pode expor a semântica de forma diferente; este repositório não prova nenhum anúncio
As tecnologias assistivas podem usar a semântica dos elementos, mas o tratamento falado exato varia de acordo com o produto, o modo e a configuração do usuário. O repositório não contém nenhum conjunto de compatibilidade de leitor de tela, portanto este artigo não promete que strong sempre será anunciado com uma voz específica ou que b sempre ficará em silêncio.
A estrutura ainda é importante porque fornece informações de software que faltam em uma extensão estilizada. Teste as páginas representativas com as tecnologias assistivas em sua política de suporte. Um elemento semântico cria uma oportunidade para uma interpretação significativa; não garante um efeito audível universal em todos os ambientes.
Os efeitos da pesquisa estão fora das evidências deste editor; a semântica ainda melhora a estrutura do documento
Os mecanismos de pesquisa podem analisar a estrutura do documento, mas nenhuma fonte local prova mudanças na classificação ao trocar b por forte. Evite transformar HTML semântico em uma fórmula SEO. A visibilidade da pesquisa depende do conteúdo, links, acessibilidade técnica e muitos sistemas fora deste editor.
A razão defensável para usar a semântica é a clareza e a interoperabilidade. Autores, navegadores e transformações downstream podem identificar a importância ou ênfase pretendida sem fazer engenharia reversa de uma declaração de estilo. Qualquer consequência da pesquisa deve ser descrita apenas com evidências da plataforma relevante, e não inferida a partir de um botão de formatação local.
Listas que são realmente listas — estende o argumento para <ul> e <ol> versus travessões e numeração manual
O mesmo princípio se estende às listas. Três linhas começando com hífens são texto comum, enquanto ul e li representam uma coleção de itens pares. Os caracteres numéricos digitados antes dos parágrafos não são equivalentes a ol, cuja sequência e valor inicial opcional fazem parte da estrutura.
ToolAcre expõe comandos de lista com marcadores e numerados e permite ul, ol e li através de seu filtro. O comportamento dos comandos do navegador pode variar, especialmente para aninhamento, portanto, inspecione a origem depois de criar uma lista. A semântica correta da lista não desculpa a falta de rótulos, a ordem confusa ou a profundidade não suportada no destino.
Exemplo resolvido: ToolAcre mapeia b para forte e i para em durante a filtragem
Digite “Interromper a implantação antes de alterar o esquema”, selecione “Interromper a implantação” e pressione Negrito. O comando do navegador pode inicialmente criar b, mas o mapa de alias do desinfetante emite forte. Itálico segue o mesmo padrão de i para em. O modo Fonte revela o resultado normalizado.
Agora selecione um rótulo de produto que esteja destacado apenas visualmente. ToolAcre não tem controle de atenção somente b ou baseado em classe, e a marca é incluída na lista de permissões apenas por meio de edição direta da fonte, em vez de uma reivindicação da barra de ferramentas. Decida se forte é preciso; caso contrário, use um estilo específico do destino fora desse fluxo de trabalho restrito.
O que isso não cobre — atributos ARIA, auditorias completas de acessibilidade ou estrutura de títulos, que são abordados separadamente
Este artigo não cobre ARIA, auditoria completa de acessibilidade, hierarquia de títulos ou comportamento exato do mecanismo de pesquisa. Ele também não afirma que todos os elementos embutidos na lista de permissões tenham um controle de barra de ferramentas. O modo de origem pode reter u, s, sub, sup, mark, small, code, kbd, samp, var e abbr quando válidos, mas os comandos visuais expõem menos opções.
A filtragem de tags semânticas não limpa HTML hostil arbitrário para publicação. O tokenizer de ToolAcre tem uma limitação explícita de diferencial de analisador. Um servidor que processa envios não confiáveis precisa de um sanitizador e de uma política adequados baseados em analisador, enquanto a revisão de acessibilidade deve examinar o destino final, em vez de apenas esta visualização isolada.
Conclusão: formate o significado e depois verifique - resume o hábito e como o editor HTML WYSIWYG de ToolAcre expõe os elementos exatos produzidos
Formate o significado e depois inspecione. Strong e em são valiosos quando a prosa contém genuinamente importância e ênfase; eles não são substitutos universais para todos os visuais em negrito ou itálico. ToolAcre torna sua escolha visível expondo o HTML filtrado após cada ação.
Use o controle visual para rascunho, modo de origem para verificação e destino CSS para aparência. Quando a apresentação desejada não possui um elemento semântico preciso, não force uma tag enganosa apenas porque ela se assemelha ao design. Preservar a intenção do autor num sistema capaz de representá-la.