Para você criar o seu site, seja para uso pessoal, seja para uso profissional, você vai precisar de uma estrutura HTML. Tendo isso em mente, você deva aprender a estrutura básica de HTML para que no futuro fique mais fácil o entendimento quando for incorporado mais elementos ao código.
Em primeiro lugar, vou apresentar a estrutura básica de HTML e, em seguida, vou explicar cada elemento um por um, o mais detalho possível. Para nos ajudar, no final do artigo, deixe o seu comentário para melhoremos cada vez mais.
Estrutura básica de HTML
<!DOCTYPE html>
O DOCTYPE indica para o navegador e para outros meios qual a especificação de código utilizar. Ou seja, é uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita, no caso HTML5.
Lembrando que o DOCTYPE não é uma tag do HTML, ele é uma instrução que informa qual versão do HTML. Na estrutura básica de HTML, ele é o primeiro elemento. Não se esqueça dele!
Certamente, você vai usar um editor de código para criar seus projetos. Na imagem acima, o editor é o VScode, nele podemos por meio de um comando criar a estrutura básica de HTML automaticamente.
Porém, o VScode não é o único editor de código, como exemplo temos o Sublime Text. Fique à vontade para escolhe o de sua preferência. Lembrando que existem vários.
Veja também:
Introdução rápida sobre CSS
Introdução rápida sobre Python
Introdução rápida sobre JavaScript
Elemento (Tag) HTML
É utilizado para informar ao navegador que tipo de estrutura está sendo construída. É importante ressaltar, que todas as outras tags devem ser descendentes desse elemento. Essa tag é muito importante e aninha todas as outras tags do seu código.
Nota: Aninhamento, de uma forma bem simples, é um elemento dentro de outro elemento.
Atributo lang=”pt-br”
Antes de explicar esse tópico, quero falar sobre os atributos. Assim, para facilitar, vou citar algumas afirmações sobre atributos e sua sintaxe:
- Todos os elementos HTML podem ter atributos;
- Os atributos fornecem informações adicionais sobre os elementos;
- Os atributos são sempre especificados na tag inicial;
- Os atributos geralmente vêm em pares nome/valor como: name=”value“.
Sintaxe do elemento (tag) HTML
Exemplificando:
Head e body seguem a mesma lógica da sintaxe citada na imagem acima, mas nesse contexto do exemplo, eles são conteúdo da tag html.
Bom, agora sabemos o que é atributo, podemos falar sobre o lang=”pt-br”, ele nada mais é que um atributo necessário para que os usuários e o mecanismos de busca saibam qual a linguagem principal do documento. O valor “pt-br” especifica que o idioma é o português do Brasil.
Certamente, não existe só esse idioma citado, podemos colocar outros idiomas e cada um tem a sua abreviação.
Elemento (Tag) head
É uma das tags mais importante, porque ela que comanda a parte estratégica do seu site. Além disso, interage com os usuários de forma inteligente usando os metadados.
O conteúdo dessa tag geralmente não são visíveis para os usuários, mas há uma tag em que seu conteúdo pode ser visto pelo usurário, essa tag é <title>. Dentro do <head> podemos inserir algumas tags, vou citar algumas:
- <title> (obrigatório em todo documento HTML)
- <style>
- <base>
- <link>
- <meta>
- <script>
- <noscript>
Como o foco é a estrutura básica de HTML, não vou escrever a definição de cada tag citada, pois elas serão definidas detalhadamente em seus próprios artigos.
Mas o intuito é que você tenha noção que são muitas tags para aprender. Logo, fica bem mais fácil de fixar o conteúdo quando aprendemos por partes.
<meta charset=”UTF-8″>
Elemento (Tag) meta
Tem um papel de ajudar os mecanismos de busca em encontrar o seu site porque, a tag meta tem um resumo do que o usuário vai encontrar nele. Mas não é só isso que tag meta faz, ela tem funções mais complexas que podem ajudar em determinados momentos.
Essa ajuda não quer dizer que a tag meta vai fazer milagres para deixar o seu site bem ranqueado rapidamente. Portanto, você deve ter em mente que para deixar o site bem-posicionado na pesquisa, deve ter a união de todas as técnicas SEO.
Atributo charset=”UTF-8″
Um atributo que fala para os navegadores qual formato de codificação de caracteres que está sendo usado no projeto. De uma forma mais simples, o atributo charset permite escolher quais caracteres vão ser usando.
Por exemplo, existem idiomas que não tem o cedilha ou o acento agudo. Logo, se não for especificado o conjunto de caracteres, o navegador vai ignorar o cedilho e o acento agudo.
Por isso, o valor UTF-8 tem esse papel de habilitar o máximo de caracteres possível, porque ele abrange quase todos os caracteres e símbolos do mundo!
Mas não pense que só existe esse valor UTF-8 para o atributo charset, há outros conjuntos de caracteres.
<Meta name=”viewpor” contente=”width=device-width, initial-scale=0,1”>
Atributo name=”viewpor”
Esse atributo é muito importante para a responsividade do seu projeto, porque esse valor permite que os dispositivos móveis renderizam as páginas para o tamanho ideal nos celulares.
Sem esse valor, a largura renderizada ao tamanho de tela típica de desktop. Dessa forma, as páginas são reduzidas, tornando-as difíceis de ler.
Atributo contente=”width=device-width”
Esse valor diz ao navegador que o tamanho da tela tem que ser adaptado ao tamanho da tela que está sendo acessada pelo usuário. Assim, se a largura do dispositivo for 320px, a janela do navegador vai ser 320px.
Atributo contente= “initial-scale=0,1”
Já a definição desse valor é bem simples, ele define o nível de zoom inicial quando o usuário visita à página.
Elemento (Tag) title
Como em qualquer criação tem que ter um nome, a sua página não seria diferente. Quem faz esse papel de nomear é a tag title. Além disso, esse elemento é muito importante para os mecanismos de busca.
A tag de título é um fator de classificação confirmado. O Google usa sua tag de título para ter uma ideia do que está em sua página e, também, quão relevante é o seu conteúdo para a consulta de pesquisa do usuário.
Além disso, ela também informa aos navegadores como exibir o título da sua página em três locais principais: resultados de pesquisa, guias do navegador e mídia social
Então, não deixe de usar a tag title e sempre pense como usá-la da melhor forma.
Elemento (Tag) body
O body define o conteúdo principal do documento HTML ou a seção do documento HTML que ficará diretamente visível em sua página web. Ele engloba conjuntos de tags muito usada como:
- Listas ordenadas – <ol></ol>
- Listas desordenadas – <ul></ul>
- Formulários – <form></form>
- Tabelas – <table></table>
Elas vão ser explicadas detalhadamente em seus artigos.
Mapas Mentais
Essa foi a estrutura básica de HTML explicada de uma forma mais objetiva possível, passando por cada elemento detalhadamente. Então estude cada elemento para fixar bem na sua cabeça e, obviamente, a melhor forma é colocando a mão no código.
Perguntas frequentes
HTML (HyperText Markup Language) é o código usado para estruturar uma página da Web e seu conteúdo. HTML é uma linguagem de marcação que define a estrutura do seu conteúdo. Se fizermos uma analogia, HTML é o esqueleto da nossa página.
São os elementos HTML que sempre vão está na estrutura de uma página de internet. Por isso, devemos saber quais são esse elementos.
Todos são importantes, mas existem 4 que são mais importantes ainda, são eles: DOCTYPE, <html>, <head> e <body>.