Destacando texto com cabeçalhos em html

Utilizando headings(cabeçalhos) em seu documento html

Em Marcando Texto e Definindo o Idioma do Documento, vimos como marcar textos em um documento html utilizando a tag <p></p> e também aprendemos como definir o idioma para o documento. Na postagem de hoje veremos como dar destaque ao nosso texto através da utilização de cabeçalhos.

Tags h1 a h6

O html possui tags específicas que destacam o texto, de modo tanto o usuário que lê o texto, quanto o navegador, ferramentas de busca e leitores de telas para pessoas com deficiência visual possam identificar parte do texto como cabeçalhos para títulos de capítulos e subcapítulos. As tags de cabeçalho vão de <h1></h1>a</h6></h6> começando pelo nível mais importante (h1).

Não é mera estética

É boa prática que cada documento html possua um e somente um <h1>. Embora o navegador utilize um estilo próprio para exibição dos textos de cabeçahos <h> (normalmente com letras maiores e em negrito), eles não devem ser utilizados com fins meramente estéticos. Veremos em postagens futuras como estilizar texto quando aprendermos a tecnologia chamada CSS.

Da mesma forma que fizemos com os exemplos anteriores crie um novo documento do zero, usando a mesma estrutura básica que já aprendemos (<!DOCTYPE html>, <html>, <head>, <title>, <meta>, <body>... Quanto mais você reescreve e pratica, mais rápido você se acostuma com o uso das tags e sua estrutura. Somente APÒS terminar compare o seu código com o código abaixo:

<!DOCTYPE html>

<html>

<head>

<title>Minha Página Web</title>

</head>

<body>

<h1>Este é um cabeçalho H1</h1>

<h2>Este é um cabeçalho H2</h2>

<h3>Este é um cabeçalho H3</h3>

<h4>Este é um cabeçalho H4</h4>

<h5>Este é um cabeçalho H5</h5>

<h6>Este é um cabeçalho H6</h6>

</body>

</html>

Salve o documento com o nome que preferir, em um local de fácil acesso e com a extensão do arquivo ".html" ou ".htm" e abra o documento para visualizar o resultado no navegador.

Importante! Embora existam 6 níveis possíveis, é boa prática utilizar cabeçalhos até o nível 3 ou 4 somente visando tornar o documento mais simples e estruturado.

Conclusão

Lembrando, o grande poder e uso das tags <h> (1-6) é para estruturar os cabeçalhos, títulos e subtítulos por ordem de importância, não para destacá-los visualmente, como já havia falado antes.

Por hoje é isso! Na próxima postagem veremos uma breve introdução ao alinhamento e estilização de textos. Ficou com alguma dúvida? Comente!

Até a próxima!

Comentários

Postagens mais visitadas deste blog

Estilos Inline no HTML (Não faça isso!)

Estilos Inline São Rápidos, Mas Perigosos A forma mais rápida de aplicar estilos em elementos é inserindo-os na própria tag html do elemento, através do atributo style="". Todas propriedades e valores inseridos entre as aspas do atributo style serão aplicados ao elemento que o contiver, porém, não faça isso! Na presente postagem explicaremos melhor o que você deve preferir na hora de estilizar seu código. Por que não devemos usar estilos direto nos elementos (inline) html? Primeiro porque não é considerada uma boa prática misturar código html e css no mesmo local, o que causa desorganização e problemas para pesquisar e corrigir erros. O outro bom motivo para não utilizar estilos inline é que em pequenos projetos como os exemplos html que usamos, onde há poucas linhas de códigos e poucos elementos, você não terá problema em usá-los, porém conforme o código for crescendo e com isso a complexidade dele, você não achará uma boa ideia usar estilos inline. Aqui vai um exemplo: se...

Introdução a CSS (Cascading Style Sheets)

O que é CSS Aprendemos que HTML é a linguagem que estrutura os documentos web, pode ser considerado a espinha dorsal dos documentos web. Da mesma forma, que o html é considerado a espinha dorsal ou estrutura básica dos sites, CSS (Cascading Style Sheets "Folhas de Estilo em Cascata") é a linguagem responsável por estilizar, colorir e organizar o leiaute da visualização do documento web. Podemos utilizar uma analogia com o corpo humano para entendermos melhor o papel das CSS em uma página web: Assim como a estrutura para o nosso corpo é o nosso esqueleto, em um documento web esse "esqueleto" seria o código HTML, por cima desse esqueleto recebemos outras camadas como músculos, tecidos e pele... essas camadas que dão forma ao nosso corpo, podem ser comparadas às folhas de estilo em cascata (CSS) que em nossos códigos nos permitem dentre outras coisas: alterar a cor dos elementos em um documento, alterar a cor de fundo, adicionar imagens ou padrões de fundo, ed...

Introdução a formulários HTML

Criando um formulário de contato simples O que iremos fazer hoje Formulários permitem ao usuário de um site ou aplicativo inserirem e enviarem informações para o site ou programa. Em html temos a tag <form></form> que nos permite criar um formulário em nossos documentos. hoje teremos uma visão bem superficial do assunto, já que a intenção é introduzir a funcionalidade de forma simplificada e não entrar nos detalhes de implementação e estilo neste primeiro momento. Fazendo a nossa marcação básica Abra o bloco de notas e insira a nossa tão conhecida estrutura básica html: <!DOCTYPE html> <html lang="pt-br"> <head> <title>Formulário de Contato</title> <meta charset="utf-8"> </head> <body> </body> </html> Insira um cabeçalho de nível 1 (<h1>) dentro do body com o seguinte texto: Formulário de Contato Salve o documento com o nome...

Aprendendo Web Design Básico

Pesquisar este blog