O que é sintaxe?

Assim como na língua portuguesa ou qualquer outra língua, sintaxe é a "parte da gramática que estuda as palavras enquanto elementos de uma frase, as suas relações de concordância, de subordinação e de ordem", como visto no Google se você pesquisar apenas por sintaxe.

E no HTML não é diferente, sendo que quando se usa as tags de forma correta, toda a estrutura de sua página apresenta uma ordem e relação de concordância.

Vamos descobrir quais são as tags e como as usar?

Para começar, as tags são compostas por "<>" e uma palavra (normalmente em inglês) entre eles, isso para determinar o inicio da tag, desta forma:

.

De forma semelhante, para fechar a tag, apenas adiciona o sinal "/", desta forma: .

Obs.: Algumas tags não são necessárias aplicar a tag de fechamento, pois, todas as informações necessárias ficam dentro da tag de abertura, assim economiza tempo e escrita, dessa forma: .

Compreendendo isso, podemos dar uma olhada e conhecer a estrutura básica de uma página, e seus componentes mais importantes, segue os códigos abaixo:

|

|

|

|

Titulo que aparece na aba do navegador

|

Uma página um pouco mais completa

|

|

|

|

Vai até o h6

|

Um paragrafo

|

|

|

Um titulo que é colocado para acompanhar o conteúdo

|

|

|

|

É normalmente usado para fazer um "menu" lateral de navegação da página.

|

|

|

|

Vamos agora entender o que significa cada tag usada tanto na estrutura mais simples (a da esquerda) quanto na mais completa (a da direita).

Uma tag usada nos dois casos é a "DOCTYPE! HTML", que determina a versão do html em questão, sendo a que estamos aprendendo a versão 5.

A tag "html", como o nome já fala, declara o inicio e fim do html.

A tag "head", segue justamente o seu nome, cabeça em inglês, onde são carregados os arquivos referenciados na página e outras informações, para que a página não fique com um carregamento mais devagar. A tag "meta charset" define os caracteres que serão usados, pois como os teclados não são iguais em todos os lugares, você tem que definir qual está usando. A tag "title" já foi explicada sua função dentro da própria tag.

A tag "body" é o corpo da página, onde todo o conteúdo da página vai ficar localizado e organizado. Então daqui passamos para parte mais completa onde é usado algumas outas tags. A primeira é a "div", que podemos definir como um recipiente para organizar conteúdo. A "hx" é utilizado para titulos e subtitulos, e esse "x" é substituido de 1 a 6, onde o 1 é o titulo maior e o 6 é o menor, e o "p" já é informado na própria tag. A tag "section", é uma seção de conteúdo, ou seja, tendo uma função semelhante com a div, mas sua diferença é a situação de uso, pois a section é usada para segmentar a informação em seções, já a div engloba essas seções em um "recipiente vazio". A "header" seria como um titulo para determinado conteúdo, normalmente em uma seção ou dentro de uma div. A "article" seria o conteúdo propriamente dito. E finalmente mas não menos importante, o "aside" é explicado no paragrafo, porém para ser realmente um menu de navegação, precisa ter um vinculo com o CSS, a linguagem para estilização de sites.

Next up

Previous