Neste artigo
Os títulos são comuns na maioria das páginas da web. Na verdade, praticamente qualquer documento de texto tende a ter pelo menos um título para que você saiba o título do que está lendo. Esses títulos são codificados usando os elementos de cabeçalho HTML – h1, h2, h3, h4, h5 e h6. Em alguns sites, você pode descobrir que os títulos são codificados sem usar esses elementos. Em vez disso, os títulos podem usar parágrafos com atributos de classe específicos adicionados a eles, ou divisões com elementos de classe. A razão pela qual ouvimos freqüentemente sobre essa prática incorreta é que o designer “não gosta da aparência dos títulos”. Por padrão, os títulos são exibidos em negrito e são maiores em tamanho, especialmente os elementos h1 e h2 que são exibidos em um tamanho de fonte muito maior do que o resto do texto de uma página. Lembre-se de que essa é apenas a aparência padrão desses elementos! Com CSS, você pode fazer com que o título tenha a aparência que quiser! Você pode alterar o tamanho da fonte, remover o negrito e muito mais. Os títulos são a maneira adequada de codificar os títulos de uma página. Aqui estão algumas razões do porquê.
Por que usar tags de título em vez de divisões
Esta é a melhor razão para usar cabeçalhos e usá-los na ordem correta (ou seja, h1, depois h2, depois h3, etc.). Os mecanismos de pesquisa dão a maior ponderação ao texto incluído nas tags de título porque há um valor semântico para esse texto. Em outras palavras, ao rotular o título da página como H1, você diz ao mecanismo de pesquisa que esse é o foco nº 1 da página. Os cabeçalhos H2 têm ênfase no. 2 e assim por diante.
Você não precisa se lembrar das aulas que usou para definir seus títulos
Quando você sabe que todas as suas páginas da Web terão um H1 em negrito, 2em e amarelo, você pode definir isso uma vez em sua folha de estilo e pronto. 6 meses depois, ao adicionar outra página, basta adicionar uma tag H1 ao topo de sua página, você não precisa voltar para outras páginas para descobrir qual ID de estilo ou classe você usou para definir o principal título e subtítulos.
Forneça um Contorno de Página Forte
Os contornos tornam o texto mais fácil de ler. É por isso que a maioria das escolas americanas ensinou os alunos a escrever um esboço antes de escrever o artigo. Quando você usa tags de título em um formato de esboço, seu texto tem uma estrutura clara que se torna aparente muito rapidamente. Além disso, existem ferramentas que podem revisar o esboço da página para fornecer uma sinopse e contam com tags de título para a estrutura do esboço.
Sua página fará sentido mesmo com os estilos desligados
Nem todos podem visualizar ou usar folhas de estilo (e isso volta ao nº 1 – os mecanismos de pesquisa exibem o conteúdo (texto) de sua página, não as folhas de estilo). Se você usar tags de título, estará tornando suas páginas mais acessíveis porque os títulos fornecem informações que uma tag DIV não forneceria.
É útil para leitores de tela e acessibilidade do site
O uso adequado de títulos cria uma estrutura lógica para um documento. Isso é o que os leitores de tela usarão para “ler” um site para um usuário com deficiência visual, tornando seu site acessível a pessoas com deficiência.
Estilize o texto e a fonte de seus títulos
A maneira mais fácil de fugir do problema “grande, negrito e feio” das tags de título é estilizar o texto da maneira que você deseja. Na verdade, ao trabalhar em um novo site, é melhor escrever normalmente os estilos de parágrafo, h1, h2 e h3 primeiro. Use apenas a família da fonte e o tamanho / peso. Por exemplo, esta pode ser uma folha de estilo preliminar para um novo site (estes são apenas alguns exemplos de estilos que podem ser usados): Você pode modificar as fontes do seu título ou alterar o estilo do texto ou mesmo a cor do texto. Tudo isso vai transformar o seu título “feio” em algo mais vibrante e de acordo com o seu design.
Fronteiras podem enfeitar manchetes
As bordas são uma ótima maneira de melhorar seus títulos e são fáceis de adicionar. Mas não se esqueça de experimentar as bordas – você não precisa de uma borda em cada lado do título. E você pode usar mais do que apenas bordas chatas. Adicionamos uma borda superior e inferior ao nosso título de amostra para apresentar alguns estilos visuais interessantes. Você pode adicionar bordas da maneira que quiser para obter o estilo de design desejado.
Adicione imagens de fundo às suas manchetes para ainda mais entusiasmo
Muitos sites têm uma seção de cabeçalho na parte superior da página que inclui um título – normalmente o título do site e um gráfico. A maioria dos designers pensa nisso como dois elementos separados, mas você não precisa. Se o gráfico existe apenas para decorar o título, por que não adicioná-lo aos estilos de título? O truque deste título é que sabemos que nossa imagem tem 90 pixels de altura. Então, adicionamos preenchimento na parte inferior do título de 90 px (preenchimento: 0,5 0 90px 0p;). Você pode brincar com as margens, a altura da linha e o preenchimento para fazer com que o texto do título seja exibido exatamente onde você deseja. Uma coisa a lembrar ao usar imagens é que se você tiver um site responsivo (o que deveria ser) com um layout que muda com base no tamanho da tela e nos dispositivos, seu título nem sempre será do mesmo tamanho. Se você precisa que seu título tenha um tamanho exato, isso pode causar problemas. É uma das razões pelas quais geralmente evitamos imagens de fundo em um título, por mais legais que possam parecer às vezes.
Substituição de imagem em títulos
Esta é outra técnica popular para Web designers porque permite criar um título gráfico e substituir o texto da marca do título por essa imagem. Esta é realmente uma prática antiquada de web designers, que tinham acesso a muito poucas fontes e queriam usar fontes mais exóticas em seus trabalhos. O surgimento das fontes da web realmente mudou a forma como os designers abordam os sites. Agora, os títulos podem ser definidos em uma ampla variedade de fontes e as imagens com essas fontes incorporadas não são mais necessárias. Como tal, você só encontrará imagens CSS substitutas para títulos em sites mais antigos que ainda não foram atualizados para práticas mais modernas.
Editado por Jeremy Girard
