Primeiras marcações
Last updated
Last updated
Para estruturar páginas a linguagem HTML usa um conjunto predefinido de regras para identificar os diversos tipos de conteúdos. Usamos as Tags para criar marcações que dizem aos navegadores quais elementos estão presentes na página e como devem ser interpretados.
Uma tag precisa começar com o sinal de menor < e terminar com o sinal de maior >. Exemplo:
Embora algumas tags especiais sejam fechadas por padrão, a maior parte delas não é. Logo, ao criar uma tag para abrir uma marcação precisamos também adicionar uma para fecha-la. Para criar uma tag de fechamento, usamos um sinal de barra / depois do sinal de maior.
Exemplo:
As tags devem dizer exatamente o que é o conteúdo entre sua tag de abertura e fechamento. Devemos marcar com as tags quais partes do conteúdo são parágrafos, títulos, listas, etc, chamamos isso de Semântica.
Há algumas tags principais que compõem uma página padrão. Toda página na web tem uma tag html, head e body. A tag html indica elementos em html, dentro dela temos <head>, que significa cabeça, e <body>, que significa corpo.
Fazendo uma analogia ao corpo humano, na cabeça temos as coisas que não vemos, coisas que pensamos e que são importantes para nosso funcionamento. Mas as coisas do nosso corpo são as partes de nós que podem ser vistas. Assim é no HTML, as coisas que ficam na head são importantes, mas não são exibidas no navegador quando a página é carregada. A parte que queremos exibir e o nosso conteúdo que deve ficar na body.
Um exemplo de elemento importante mas não precisa ser visto diretamente na página é o title. Veremos outros no decorrer deste módulo.
Há vários elementos diferentes, continue conhecendo mais alguns!
Nossa estrutura HTML contém vários elementos diferentes e alguns elementos até estão dentro de outros elementos, como se guardássemos uma caixa dentro de outra caixa e dentro dela colocássemos outra caixa, e outra caixa... Confuso, não é?
Imaginar a cena das caixas já pode ter sido confuso para muita gente, assim como para o navegador diante de elementos dispostos dessa forma. Para que isso não aconteça, nós aninhamos nossos elementos, ou seja, usamos esses espaçamentos nas linhas para indicar que um elemento está dentro de outro. Exemplo:
Existem seis níveis diferentes de títulos para usar em uma imagem. O título H1 é o mais importante,h6 é o menos importante.
Exemplo:
