Estrutura HTML

Estrutura Básica e Tags
Básicas no HTML
Por: Tiago Luiz

Bem-Vindo ao mundo do HTML
 Hoje, entraremos em um mundo incrível e repleto de novidades. Esperamos
que esteja pronto para cada surpresa grandiosa que encontraremos juntos
nesse mundo da Web. Um mundo que tem se expandido e tido grande êxito.

O que é o HTML?
 HTML é uma das linguagens que utilizamos para desenvolver websites. O
significado da palavra HTML vem do inglês e significa Hypertext Markup
Language ou em português Linguagem de Marcação de Hipertexto.
 O HTML é a linguagem base da internet. Foi criada para ser de fácil
entendimento por seres humanos e também por máquinas, como por exemplo
o Google ou outros sistemas que percorrem a internet capturando informação.
 Tim Berners-Lee criou a linguagem HTML para a comunicação e disseminação
de pesquisas entre ele e seu grupo de colegas. A linguagem HTML ficou
bastante conhecida quando começou a ser utilizada para formar a rede
pública daquela época, o que se tornaria mais tarde o que chamamos hoje de
internet.

Estrutura básica do HTML
 Todo HTML começa do mesmo jeito. Abaixo temos um padrão que sempre
deve existir em um documento HTML. Caso ache melhor, copie a estrutura
abaixo em algum lugar para poder usar sempre que for criar um novo
documento em HTML.

Entendendo a estrutura do HTML
 A primeira linha se chamada DOCTYPE. O Doctype avisa aos navegadores, robôs de busca,
outras coisas que tipo de documento é aquele que eles estão prestes a carregar. Existem
outros códigos que podemos carregar, como o XML. Por isso o Doctype avisa ao navegador
para que ele saiba como se comportar ao ler o código.
 Depois começamos com a Tag HTML. Ou seja, tudo o que estiver entre as tags <html></html>
é escrito em HTML. Ao lado da palavra HTML tem um atributo (falaremos sobre atributos mais
pra frente) chamado lang, onde indicamos qual o idioma do texto que escreveremos.
 Logo após a tag html temos a tag <head>. Na tag head nós indicamos o título do documento e
indicamos a tabela de caracteres que o browser deve usar para renderizar seu texto(Veremos
isso depois também).
 A tag <title> é muito importante. É com ela que você indica o título do documento. O Google
e outros sistemas de busca utilizam essa tag para indicar em suas buscas o título da página.
Isso é muito importante para que você apareça bem nas buscas.
 Logo depois da tag de fechamento </head> começamos a tag <body>, como o nome mesmo
fala o corpo do site. Dentro deste elemento é que vamos escrever todo o código HTML do
site.

Tags no HTML
 O HTML é uma linguagem baseada em marcação. Nós marcamos os elementos
para mostrar quais informações a página exibe, seus significados etc. Por
exemplo, um título importante. Aquele título do artigo, da manchete do site,
nós marcamos com uma tag/elemento chamado H1. Veja um exemplo:

Entendendo mais um pouco o que são
tags
 Perceba que o texto está entre duas marcações. Essas marcações são chamadas de TAGS. As
tags são abertas e depois fechadas. No exemplo da página anterior abrimos a tag com <h1> e
fechamos com</h1>. O que está dentro é o conteúdo mostrado para o usuário.
 Os parágrafos são marcados com a tag “p” de parágrafo e os cabeçalhos
são marcados com uma tag formada por uma letra “h” de heading e uma
numeração de 0 à 6(Ex. h1, h2, h3...) . Existem muitas outras tags, mas
inicialmente conheceremos essas duas. Veja na próxima imagem:

Tags são mais do que aparentam ser
 Tags são mais do que apenas uma das partes principais de estruturação de um site, elas também
facilitam nossa vida de outro modo. Utilizando as tags, podemos dizer para os navegadores o
significado de cada área de nosso site, pois como sabemos um site é dividido em várias partes.
Temos a área de cabeçalho, navegação, conteúdo, rodapé etc. Usando tags, estamos dizendo
também o que seria cada elemento do site para os sistemas de busca, como o Google e outros.
Um motor de busca nesse caso para exibir os resultados de busca com melhor desempenho,
precisa saber o que é cada área do seu site. Ele sabe disso através das tags.
 Um bom exemplo é entendermos que ao pesquisarmos algo em um motor de busca como o
Google, esse motor terá uma facilidade muito maior para procurar o que você quer se os sites
forem construídos de maneira coerente, utilizando as tags não só para estruturar o site
fisicamente, mas também para dar um melhor significado a eles(os sites).
 Futuramente falaremos mais sobre significados de tags e grau hierarquia de algumas tags como a
heading que vai de 0 à 6. A tag heading não é numerada assim simplesmente para gerar uma
alteração de tamanho de uma para a outra, tudo isso tem um significado e chamamos esse
significado de web semântica.

Tiago Luiz
Professor e Consultor de Softwares
Atualmente professor de Informática e Consultor de Softwares, Certificado pela Adobe
como Expert em Adobe Muse CC. Dou aula de informática, Ministro Cursos de Informática
Online Gratuitamente através do site Digital Cursos e nas horas vagas faço alguns serviços
freelas para estar sempre atualizado ao mercado.
Site: http://dgcursos.com/

Estrutura HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Estrutura HTML

Semelhante a Estrutura HTML (20)

Estrutura HTML