Eu costumava ter um chefe que amado, amado, amado, amado enfatizar as palavras. Isso foi muito antes de usarmos editores WYSIWYG e eu teria que codificar manualmente essa porcaria.
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
(Não vamos entrar nas cores que ele usou para MOAR ênfase.)
Escrever toda aquela marcação nunca foi ótimo. O esforço que levou, com certeza, tanto faz. Mas é uma boa ideia adicionar conteúdo de sobrecarga com o dobro - ou mais! — ênfases?
Tags diferentes transmitem diferentes ênfases
Para começar, o <strong>
e <em>
tags são projetadas para diferentes usos. Nós os recuperamos em HTML5, onde:
então, <strong>
dá mais peso ao conteúdo no sentido de sugerir que o conteúdo é importante ou urgente. Pense em um aviso:
Atenção: O conteúdo a seguir foi sinalizado por ser incrível.
Pode ser tentador alcançar <em>
para fazer a mesma coisa. Afinal, o texto em itálico pode chamar a atenção. Mas é realmente uma dica para usar mais ênfase ao ler o conteúdo nele. Por exemplo, aqui estão duas versões da mesma frase com ênfase em locais diferentes:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Ambos os exemplos enfatizam a ênfase, mas em palavras diferentes. E eles soariam diferentes se você os lesse em voz alta. Isto faz <em>
uma ótima maneira de expressar tom em sua escrita. Muda o sentido da frase de uma forma que <strong>
não.
Ênfase visual x ênfase semântica
Essas são duas coisas que você deve pesar ao enfatizar o conteúdo. Por exemplo, há muitos casos em que você pode precisar colocar o conteúdo em itálico sem afetar o significado da frase. Mas elas podem ser tratadas com outras tags que renderizam itálico:
<i>
: Esse é o clássico! Antes do HTML5, isso era usado para enfatizar a ênfase com itálico em todo o lugar. Agora, é puramente usado para colocar o conteúdo em itálico visualmente sem alterar o significado semântico.<cite>
: Indicando a fonte de um fato ou figura. ("Fonte: Truques de CSS")<address>
: usado para marcar informações de contato, não apenas endereços físicos, mas também coisas como endereços de e-mail e números de telefone. (
)
Vai ser a mesma coisa com <strong>
. Em vez de usá-lo para estilizar o texto que deseja parecer mais pesado, é uma ideia melhor usar o clássico <b>
tag para negrito para evitar dar significado extra ao conteúdo que não precisa. E lembre-se, alguns elementos como títulos já são renderizados em negrito, graças aos estilos padrão do navegador. Não há necessidade de adicionar ênfase ainda mais forte.
Usando itálico em conteúdo enfatizado (e vice-versa)
Existem casos legítimos em que você pode precisar colocar em itálico parte de uma linha que já está enfatizada. Ou talvez adicione ênfase a um trecho do texto que já está em itálico.
Um blockquote pode ser um bom exemplo. Já vi muitas vezes em que eles estão em itálico para estilo, mesmo que os estilos padrão do navegador não façam isso:
blockquote { font-style: italic;
}
E se precisarmos mencionar o título de um filme nessa citação? Isso deve estar em itálico. Não há necessidade de enfatizar o estresse, então um <i>
marca vai fazer. Mas ainda é estranho colocar algo em itálico quando já está renderizado dessa forma:
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>
Em uma situação em que colocamos algo em itálico dentro de um conteúdo em itálico como este, devemos remova o itálico do elemento aninhado... <i>
nesse caso.
blockquote i { font-style: normal;
}
Consultas de estilo de contêiner será super útil capturar todas essas instâncias se as conseguirmos:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Este pequeno trecho avalia o blockquote para ver se é font-style
está definido para italic
. Se for, ele garantirá que o <em>
, <i>
, <cite>
e <address>
os elementos são renderizados como texto normal, mantendo o significado semântico, se houver.
Mas voltando à ênfase dentro da ênfase
eu não faria ninho <strong>
dentro <em>
como isso:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…ou ninho <em>
dentro <strong>
em vez de:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
A renderização está boa! E não importa em que ordem eles estão... pelo menos nos navegadores modernos. Jennifer Kyrnin menciona que alguns navegadores apenas renderizam a tag mais próxima do texto, mas não encontrei isso em nenhum lugar em meus testes limitados. Mas algo para assistir!
A razão pela qual eu não aninharia uma forma de ênfase em outra é porque ela simplesmente não é necessária. Não há nenhuma regra gramatical que exija isso. Como pontos de exclamação, uma forma de ênfase é suficiente e você deve usar aquela que corresponda ao que você procura, seja visual, peso ou ênfase anunciada.
E mesmo que alguns leitores de tela sejam capazes de anunciar conteúdo enfatizado, eles não lerão a marcação com nenhuma importância ou ênfase adicional. Portanto, também não há vantagens adicionais de acessibilidade, pelo que sei.
Mas eu realmente quero toda a ênfase!
Se você está na posição em que seu chefe é como o meu e quer TODAS que o ênfase, eu procuraria a tag HTML correta para o tipo de ênfase e, em seguida, aplicaria o restante dos estilos com uma mistura de tags que não afetam a semântica com CSS para ajudar a explicar qualquer coisa que os estilos do navegador não manipulem.
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
Eu posso até fazer isso com o <strong>
tag também como uma medida defensiva:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Contanto que estejamos jogando na defesa, podemos identificar erros em que as ênfases estão aninhadas dentro de ênfases, destacando-as em vermelho ou algo assim:
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}
Então eu provavelmente usaria aquele trecho da última seção que remove o estilo itálico padrão de um elemento quando ele está aninhado em outro elemento em itálico.
Algo mais?
Pode ser:
- Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
- Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
- Fonte: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- acessibilidade
- Conta
- Adicional
- endereço
- endereços
- afetar
- afetando
- Depois de
- Todos os Produtos
- sozinho
- já
- América
- e
- anunciou
- Anunciando
- Outro
- qualquer lugar
- Aplicar
- avatar
- em caminho duplo
- fundo
- Porque
- antes
- ser
- Melhor
- Pouco
- pino
- fronteira
- CHEFE
- Caixa
- bilheteria
- navegador
- navegadores
- orçamento
- chamadas
- capaz
- casas
- casos
- Alterações
- mudança
- clássico
- cor
- Contacto
- contém
- conteúdo
- APF
- Padrão
- Defesa
- defensiva
- projetado
- diferente
- Não faz
- não
- duplo
- esforço
- ou
- elementos
- ênfase
- enfatizar
- enfatizado
- enorme
- suficiente
- Todo
- erros
- Mesmo
- exemplo
- exemplos
- expresso
- extra
- lutas
- Figura
- Primeiro nome
- marcado
- seguinte
- formulário
- da
- ter
- dá
- Dando
- Globalmente
- Go
- vai
- Bom estado, com sinais de uso
- ótimo
- manipular
- ajudar
- SUA PARTICIPAÇÃO FAZ A DIFERENÇA
- Destaques
- Destacando
- HTML
- HTTPS
- idéia
- identificar
- importância
- importante
- in
- INFORMAÇÕES
- introspecção
- em vez disso
- IT
- Jennifer
- Sobrenome
- Limitado
- Line
- pequeno
- locais
- longo
- olhar
- moldadas
- fazer
- FAZ
- marca
- Importância
- significado
- a medida
- menções
- poder
- milhão
- EQUIPAMENTOS
- Ímpeto
- mais
- filme
- Filmes
- NAB
- você merece...
- Nest
- normal
- Norte
- América do Norte
- números
- Oferece
- Office
- ONE
- abertura
- ordem
- Outros
- parte
- atuação
- regalias
- telefone
- físico
- Lugar
- platão
- Inteligência de Dados Platão
- PlatãoData
- jogar
- Abundância
- pontos
- posição
- provavelmente
- protegido
- puramente
- alcançar
- Leia
- leitores
- razão
- Vermelho
- lembrar
- representação
- DESCANSO
- retenção
- Regra
- mesmo
- Peneira
- leitores de tela
- Seção
- semântica
- sentido
- sentença
- conjunto
- rede de apoio social
- simplesmente
- situação
- So
- alguns
- algo
- Parecer
- fonte
- Ainda
- estresse
- mais forte,
- estilo
- Sugere
- super
- suposto
- TAG
- testes
- A
- A fonte
- coisa
- coisas
- vezes
- Título
- para
- TOM
- também
- verdadeiro
- urgente
- usar
- aviso
- Assistir
- fim de semana
- pesar
- peso
- O Quê
- se
- enquanto
- QUEM
- precisarão
- dentro
- sem
- palavras
- seria
- escrita
- Vocês
- investimentos
- zefirnet