Ferramentas para desenvolvedores · Editor HTML WYSIWYG
Os títulos não são textos grandes em negrito: por que os níveis dos títulos são importantes no conteúdo da web
· Por que é importante
HTML acessibilidade edição de texto
Explica por que h1 a h6 formam um esboço de documento no qual os usuários de leitores de tela e mecanismos de pesquisa confiam e como verificar se os títulos visuais são títulos reais.
O artigo sem títulos – abre com uma página onde cada título aparente é um parágrafo em negrito
Uma linha ampliada e em negrito por CSS pode parecer um título de seção enquanto permanece um parágrafo na árvore do documento. Leitores com visão podem inferir a divisão a partir da tipografia, mas o software não recebe nenhum elemento de título para identificar, coletar ou navegar. A aparência por si só não cria hierarquia.
ToolAcre evita controles de estilo e fornece opções de bloco explícitas para h1 a h4. Um escritor pode, portanto, codificar um título em vez de simular um com texto forte. A lista de permissões também aceita h5 e h6 na origem, embora a barra de ferramentas não anuncie controles para esses níveis.
O que um elemento de título faz além do tamanho — explica o contorno, os atalhos de navegação e a estrutura que ele fornece
Um elemento de título rotula o conteúdo a seguir e contribui para a estrutura navegável do documento. Os navegadores expõem essa função por meio de APIs de acessibilidade, e muitas ferramentas assistivas podem apresentar uma lista de títulos ou mover-se entre eles. O elemento permanece identificável quando uma folha de estilo está ausente ou substituída.
Um parágrafo em negrito não oferece nada desse sinal estrutural. Ainda pode ser uma prosa útil, mas não deve substituir o limite de uma seção. Teste o documento final com um esboço ou ferramenta de inspeção de acessibilidade porque a visualização local não relata relações de cabeçalho nem valida a organização do autor.
Os níveis são aninhados, não tamanhos - explica por que pular de h2 para h4 confunde leitores e ferramentas
Os níveis expressam o aninhamento, não um menu de tamanhos de tipo. Um h2 normalmente introduz uma seção abaixo do contexto principal da página; um h3 introduz uma subseção desse h2. Selecionar h4 simplesmente porque sua fonte padrão parece correta pode implicar na falta de uma estrutura intermediária.
ToolAcre preservará h1 a h6 e não rejeitará níveis ignorados. O filtro reforça o vocabulário, não a lógica editorial. Crie o esboço no papel ou na fonte e, em seguida, use CSS no destino para controlar a aparência sem alterar os níveis para buscar uma escala visual preferida.
Escolha o título da página no contexto; este editor não impõe uma regra one-h1
A apostila prescreve um h1, mas a implementação não possui tal regra e este artigo não inventa uma como lei universal. Modelos de página, fragmentos incorporados e convenções de documentos determinam se o conteúdo deve fornecer seu título principal ou começar abaixo de um fornecido pelo host.
Inspecione o destino completo, não apenas o fragmento. Se CMS já renderiza o título do artigo como h1, o conteúdo do corpo colado pode começar com h2. ToolAcre não pode ver esse modelo externo, então sua opção h1 é um recurso e não uma recomendação para cada rascunho.
Exemplo resolvido: compare um parágrafo em negrito com um elemento de título na fonte
Crie `<p><strong>Installation</strong></p>` e `<h2>Configuration</h2>`. Ambos podem parecer proeminentes na sandbox, mas a fonte revela que apenas Configuração é um título. Uma inspeção da árvore de acessibilidade na página publicada também deve identificar apenas o h2 como título.
Altere a Instalação para o nível correto através do seletor de bloco ou modo de origem. Em seguida, revise se os dois títulos são pares ou pai e filho. O desinfetante preserva ambas as formas, mas não consegue decidir a relação a partir de suas palavras. Esse julgamento pertence ao autor do documento e ao contexto da página.
Estilizar títulos sem abusar de níveis — explica que CSS, e não a escolha de nível, deve controlar a aparência
A aparência do título pertence a CSS. Um site pode tornar h2 modesto e h3 visualmente distinto, mantendo níveis lógicos, desde que o design ainda comunique hierarquia. Estilizar um h2 correto é mais seguro do que substituir h4 apenas para obter um padrão de navegador menor.
A folha de estilo da visualização é intencionalmente simples e leve. Não é o tema do seu produto, portanto, as dimensões padrão do título são uma evidência insuficiente para o design do destino. Copie o fragmento semântico, aplique estilos aprovados nele e revise o comportamento responsivo sem reescrever o esboço para satisfazer uma visão isolada.
O que isso não cobre — seccionamento de elementos como <section> e <article> ou SEO além da estrutura
Este artigo não cobre elementos de seção e artigo, funções de cabeçalho ARIA, orientação completa SEO ou todos os leitores de tela. Ele também não afirma que ToolAcre valida níveis ignorados, títulos duplicados ou qualidade do texto do título. A barra de ferramentas fornece elementos; os autores fornecem uma estrutura coerente.
A saída higienizada não é automaticamente uma publicação não confiável e segura. A sandbox de visualização limita a execução dentro de ToolAcre, enquanto a marcação copiada deixa essa proteção. Utilize testes de saneamento e acessibilidade no destino. Uma árvore de títulos correta é uma dimensão de qualidade, não um controle de segurança ou auditoria completa.
Conclusão: estrutura primeiro, estilo depois - resume a regra e como o editor HTML WYSIWYG de ToolAcre permite confirmar se a marcação por trás de um título visual é um elemento de título
Estrutura primeiro, estilo depois. Decida quais tópicos são seções e subseções, atribua níveis desse relacionamento e, em seguida, inspecione os elementos h reais que ToolAcre emite. Um título deve permanecer significativo quando as fontes, cores e espaçamentos desaparecem.
Por fim, coloque o fragmento dentro do seu modelo real e revise a hierarquia combinada. O editor local não pode conhecer o título da página externa ou o shell de navegação. Seu valor é a transparência: a formatação visual e a fonte ficam lado a lado, tornando mais fácil detectar títulos falsos antes da publicação.