O que é sintaxe?

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.