Uma das tags que você aprenderá no início de sua educação em web design é um par de tags conhecidas como “tags de ênfase”.
Vamos dar uma olhada no que são essas tags e como são usadas no design da web hoje.
Voltar para XHTML
Se você aprendeu HTML anos atrás, bem antes do surgimento do HTML5, provavelmente usou as tags negrito e itálico. Como seria de se esperar, essas tags transformaram os elementos em texto em negrito ou itálico, respectivamente.
O problema com essas tags, e por que foram deixadas de lado em favor de novos elementos (que veremos em breve), é que não são elementos semânticos. Isso ocorre porque eles definem a aparência do texto, em vez de informações sobre o texto.
Lembre-se de que o HTML (que é onde essas tags seriam escritas) trata de estrutura, não de estilo visual! Os visuais são controlados por CSS e as melhores práticas de web design há muito afirmam que você deve ter uma separação clara de estilo e estrutura em suas páginas da web.
Isso significa não usar elementos que não sejam semânticos e cujos detalhes pareçam em vez de estrutura. É por isso que as marcas de negrito e itálico foram geralmente substituídas por forte (para negrito) e ênfase (para itálico).
Tags de Enfase: <strong> e <em>
Os elementos fortes e de ênfase adicionam informações ao seu texto, detalhando o conteúdo que deve ser tratado de forma diferente e enfatizado quando esse conteúdo é falado.
Você usa esses elementos da mesma forma que usaria negrito e itálico no passado. Basta cercar seu texto com as marcas de abertura e fechamento (<em> e </em> para ênfase e <strong> e </strong> para ênfase forte) e o texto incluído será enfatizado.
Você pode aninhar essas tags e não importa qual é a tag externa. Aqui estão alguns exemplos.
<em> Este texto é enfatizado </em> e a maioria dos navegadores o exibiria em itálico.
<strong> Este texto é fortemente enfatizado </strong> e a maioria dos navegadores o exibiria em negrito
Em ambos os exemplos, não estamos ditando a aparência visual com o HTML . Sim, a aparência padrão da tag <em> seria itálico e <strong> em negrito, mas essa aparência poderia ser facilmente alterada em CSS. Esse é o melhor de ambos mundos.
Você pode aproveitar os estilos padrão do navegador para obter texto em itálico ou negrito em seu documento sem realmente cruzar a linha e misturar estrutura e estilo.
Digamos que você queira que o <strong> texto não fique apenas em negrito, mas também em vermelho, você pode adicioná-lo ao SCS
strong {
color: red;
}
Neste exemplo, você não precisa adicionar uma propriedade para a espessura da fonte em negrito, pois é o padrão. Se você não quiser deixar isso ao acaso, você pode sempre adicioná-lo em:
strong {
font-weight: bold;
color: red;
}
Agora você teria quase a garantia de ter uma página com texto em negrito (e vermelho) onde quer que a tag <strong> fosse usada.
Duplique a Ênfase
Uma coisa que observamos ao longo do ano é o que acontece se você tentar dobrar a ênfase. Por exemplo:
Este texto deve ter texto <strong> <em> em negrito e itálico </em> </strong> dentro dele.
Você pensaria que esta linha produziria uma área com texto em negrito E itálico.
Às vezes, isso realmente acontece, mas vimos alguns navegadores apenas honrarem o segundo dos dois estilos de ênfase, o mais próximo do texto real em questão, e exibi-lo apenas em itálico.
Esta é uma das razões pelas quais não dobramos as tags de ênfase.
Outra razão para evitar essa “duplicação” é para fins estilísticos. Uma forma de ênfase geralmente é suficiente para transmitir o tom que você deseja definir.
Você não precisa colocar em negrito, itálico, colorir, ampliar e sublinhar o texto para que ele se destaque.
Esse texto, com todos aqueles diferentes tipos de ênfase, se tornaria extravagante.
Portanto, tenha cuidado ao usar tags de ênfase ou estilos CSS para fornecer ênfase e não exagere.
Uma nota sobre as tags de ênfase: negrito e itálico
Um pensamento final – embora as tags negrito (<b>) e itálico (<i>) não sejam mais recomendadas para serem usadas como elementos de ênfase, existem alguns web designers que usam essas tags para estilizar áreas embutidas de texto.
Basicamente, eles o usam como um elemento <span>. Isso é bom porque as tags são muito curtas, mas usar esses elementos dessa maneira geralmente não é recomendado.
Mencionamos isso caso você o veja em alguns sites sendo usados não para criar texto em negrito ou itálico, mas para criar um gancho CSS para algum outro tipo de estilo visual.
