[Tutorial][HTML/CSS] As Heading Tags!

Maio 20, 2015

Falae zueiros, zueiras e três pernas do GamersBoard

Aqui está o segundo tutorial sobre HTML/CSS, espero que gostem :)

Hoje vou ensinar sobre as Heading Tags(importância e estruturas)

Bom, no primeiro tutorial ensinei sobre a estrutura basica de uma página, e agora que temos essa estrutura, podemos começar a colocar o conteudo na página.

Primeiramente nossa página precisa ter um titulo interno, para que os visitantes saibam qual o assunto dessa página. Para isso usamos as "heading tags" (tags de cabeçalho), esse conjunto possue 6 tags em ordem(da mais importante a menos importante).

<h1>
	<h2>
		<h3>
			<h4>
				<h5>
					<h6>

Essas são as heading tags em sequência. O H significa em inglês "header" ("cabeçalho" em português).

Qual é a importância dessas tags?

Além delas serem úteis para os visitantes se orientarem pela pagina, elas também são de grande importancia em termos de SEO, ou seja, será extremamente util para os motores de busca como o Google.

----------------------------------------------------------------------------------------

Um exemplo: Se uma pessoa pesquisa sobre "curso de html" no google, o primeiro resultado da busca depois dos anuncios será um video do youtube, e abaixo dele, um site. Você deve pensar que o video apareceu primeiro porque a Google é dona do YouTube, porém não é assim que funciona. O video do youtube apareceu primeiro porque em sua tag <h1> tem a frase "curso de html", veja só:

O titulo de uma página de video no youtube fica na tag h1, porque as pessoas precisam saber qual o assunto do video logo de inicio.

E por que aquele site não apareceu em primeiro na busca?

Porque aquele site simplesmente não possue uma tag <h1>, ele começou com a tag <h2>, o que diminuiu a relevancia na pesquisa:

Se ele utilizasse a tag <h1> certamente ficaria em primeiro porque possue uma quantidade maior de palavras da busca, como "html".

----------------------------------------------------------------------------

Por isso sempre use heading tags se quiser ter melhores posicionamentos nos resultados de busca

Como usar essas tags?

As principais coisas que você deve saber é que:

A tag <h1> deve ser unica. Não use mais de uma tag <h1> por página, porque se você usar irá confundir os motores de busca e ele não usar essas tags para exibir seu site em pesquisas.
A tag <h1> deve aparecer sempre primeiro das demais.
Use as heading tags em ordem de importancia.
Fora a <h1> as outras tags são como subtitulos, elas servirão para dar titulo a topicos de um determinado assunto.
As tags <h2>, <h3>, <h4>, <h5>, <h6> podem ser repitidas ao longo da página

Aqui vai um exemplo de como utilizá-las:

<!DOCTYPE html>
<html>
	<head>
		<title>Heading Tags - Tutorial</title>
	</head>

	<body>
		<h1>Heading Tags - Tudo sobre elas</h1>

		<h2>Importancia dessas tags</h2>
		<p>Bla Bla Bla</p>

		<h2>Como usar essas tags</h2>
		<p>Bla Bla Bla, estou mostrando como usar agora mesmo :)</p>

		<h3>Outras referencias</h3>
		<p>links aqui</p>
	</body>
</html>

Veja que elas estão em ordem, e que o assunto principal fica na <h1>

That's all folks!

Se você tem alguma dúvida/sugestao/critica/agradecimento poste ai nos comentarios!

Esses primeiros tutoriais nao estao ficando taaao bons assim pq ainda to aprendendo a cria-los mais empolgantes, vai melhorando com o tempo ._.

Proximo tutorial: Introdução ao CSS e um pouco mais de HTML!

Editado Maio 20, 2015 por Dêemezeká

leonardosc · Maio 20, 2015

lesgal

vitorrdgs · Maio 21, 2015

Hard topzao, agora faz de php u.u

Entrar

[Tutorial][HTML/CSS] As Heading Tags!

Posts Recomendados

Guest Dêemezeká

Link para o comentário

Compartilhar em outros sites

leonardosc

Link para o comentário

Compartilhar em outros sites

vitorrdgs

Link para o comentário

Compartilhar em outros sites

Participe da Conversa

Popular Agora

Quem está navegando 0 membros estão online

Equipe