As manchetes 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 título HTML - h1, h2, h3, h4, h5 e h6.
Em alguns sites, você pode descobrir que as manchetes são codificadas 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 eu ouço com frequência sobre essa prática incorreta é que o designer "não gosta da aparência dos cabeçalhos". 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 tamanho de fonte muito maior do que o restante do texto de uma página. Tenha em mente que esta é apenas a aparência padrão desses elementos! Com o CSS, você pode fazer a aparência do título como quiser! Você pode alterar o tamanho da fonte, remover o negrito e muito mais. Os títulos são a maneira correta de codificar as manchetes de uma página. Aqui estão algumas razões do porquê.
Por que usar tags de título em vez de DIVs e Styling
Motores de busca como tags de cabeçalho
Este é o melhor motivo para usar títulos e usá-los na ordem correta (ou seja, h1, h2, h3, etc.). Os mecanismos de pesquisa fornecem o peso mais alto ao texto incluído nas tags de título porque existe um valor semântico para esse texto. Em outras palavras, ao rotular o título da página H1, você diz ao mecanismo de busca que esse é o foco número 1 da página. Os cabeçalhos H2 têm ênfase nº 2 e assim por diante.
Você não precisa se lembrar de quais classes você usou para definir seus títulos
Quando você sabe que todas as suas páginas da Web terão um H1 que seja em negrito, 2em e amarelo, você poderá defini-lo uma vez em sua folha de estilo e pronto. 6 meses depois, quando você está adicionando outra página, basta adicionar uma tag H1 à parte superior da página, não é preciso voltar a outras páginas para descobrir qual ID ou classe de estilo você usou para definir a principal título e sub-cabeças.
Eles fornecem um esboço de página forte
Os contornos tornam o texto mais fácil de ler. É por isso que a maioria das escolas dos EUA ensinou os alunos a escrever um esboço antes de escrever o artigo. Quando você usa tags de título em um formato de estrutura de tópicos, seu texto tem uma estrutura clara que se torna aparente muito rapidamente. Além disso, existem ferramentas que podem revisar o esquema da página para fornecer uma sinopse, e elas dependem de tags de cabeçalho para a estrutura de tópicos.
Sua página fará sentido mesmo com os estilos desativados
Nem todos podem ver ou usar folhas de estilo (e isso volta ao # 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 cabeçalho, estará tornando suas páginas mais acessíveis, porque as manchetes fornecem informações que uma tag DIV não forneceria.
É útil para leitores de tela e acessibilidade ao 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ências.
Estilo o texto e fonte de seus títulos
A maneira mais fácil de se afastar do problema "grande, corajoso e feio" das tags de cabeçalho é estilizar o texto da maneira que você quer que elas pareçam. Na verdade, quando se trabalha em um novo site, é melhor escrever o primeiro, os estilos h1, h2 e h3. Ficar com apenas a família da fonte e tamanho / peso. Por exemplo, isso pode ser uma folha de estilos preliminar para um novo site (esses 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 até mesmo a cor do texto. Tudo isso transformará seu título "feio" em algo mais vibrante e de acordo com seu design.
Fronteiras podem vestir 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 fronteiras - você não precisa de uma borda em cada lado do título. E você pode usar mais do que apenas bordas simples e chatas.
Eu adicionei uma borda superior e inferior ao título da minha amostra para introduzir alguns estilos visuais interessantes. Você pode adicionar bordas de qualquer maneira que queira alcançar o estilo de design desejado.
Adicione imagens de fundo aos seus títulos para ainda mais entusiasmo
Muitos sites da Web têm uma seção de cabeçalho na parte superior da página que inclui um título - geralmente 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 está lá apenas para decorar o título, então por que não adicioná-lo aos estilos de título?
O truque para esse título é que eu sei que minha imagem tem 90 pixels de altura. Então, adicionei preenchimento à parte inferior do título de 90px (preenchimento: 0,5 0 90px 0p;). Você pode jogar com as margens, a altura da linha e o preenchimento para obter o texto do título para exibir exatamente onde você deseja.
Uma coisa a ser lembrada ao usar imagens é que, se você tiver um website responsivo (que deveria) com um layout que muda com base nos tamanhos e dispositivos de tela, o título nem sempre será do mesmo tamanho. Se você precisar que seu título tenha um tamanho exato, isso pode causar problemas. É uma das razões pelas quais eu geralmente evito imagens de fundo em um título, por mais legal que possam parecer.
Substituição de imagem em manchetes
Essa é outra técnica popular para os designers da Web, pois permite criar um título gráfico e substituir o texto da tag de cabeçalho por essa imagem.Esta é verdadeiramente uma prática antiqued de web designers, que tiveram acesso a muito poucas fontes e queria usar fontes mais exóticas em seu trabalho. A ascensão das fontes da web realmente mudou a forma como os designers abordam os sites. As manchetes agora podem ser definidas em uma ampla variedade de fontes e as imagens com essas fontes incorporadas não são mais necessárias. Dessa forma, você só encontrará substituição de imagens CSS para manchetes em sites mais antigos que ainda não foram atualizados para práticas mais modernas.
Editado por Jeremy Girard em 9/6/17
