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.