TheLazy.Dev
Portfolio GitHub

Blog

html |webdev |codequality |vscode

O que é HTML? Principais Tags e Dicas do VS Code.

dwtoledo

Douglas Toledo

Posted on January 9, 2021

O que é HTML? Principais Tags e Dicas do VS Code.

O que é HTML?

HTML (Linguagem de Marcação de HiperTexto) é o que estrutura o conteúdo de uma página através de marcadores.

O que são Tags?

São exatamente esses marcadores! Existem inúmeros marcadores/tags para deixar o seu conteúdo o mais estruturado e organizado possível. O HTML5 nos ajudou nessa missão, trazendo muitas tags novas!

Temos tags para botões, formulários, imagens, tabelas, textos, entre outras.

Aaaaahh, é importante avisar que geralmente abrimos uma tag escrevendo o nome dela entre < > e fechamos* uma tag escrevendo o nome dela entre < />. Exemplo:

Temos uma tag chamada body (vou explicar para que ela serve depois). Se quisermos estruturar um conteúdo dentro dela, abrimos a tag digitando <body>, colocamos o conteúdo em seu interior e depois fechamos a tag digitando </body>.

<body>
   Conteúdo
</body>
Enter fullscreen mode Exit fullscreen mode

* Nem todas as tags precisam ser fechadas, não se preocupe com elas agora, o VS Code irá te ajudar durante a digitação e com o tempo você irá se acostumar.
 

Conteúdo é muito genérico neh?!
Então vamos supor que o seu conteúdo seja um artigo que tenha um título e um texto. A estrutura ficaria:

<body>
   <article>
      <h1>Título</h1>
      <p>Texto<p>
   </article>
</body>
Enter fullscreen mode Exit fullscreen mode

Analisando o código, temos:

  1. A tag <article> é usada quando vamos escrever um artigo;
  2. Todo o conteúdo do artigo deve ser escrito entre a tag de abertura <article> e da tag de fechamento </article>;
  3. A tag <h1> representa o "Título" do artigo;
  4. A tag <p> representa o "Texto" do artigo.

Principais Tags

As principais tags são aquelas mais importantes, a base para uma página web e o Visual Studio Code (VS Code) nos dá uma pista de quais são, olha só!
 

  1. Abra o VS Code;
  2. Crie um novo arquivo .html;
  3. Comece digitando ! e depois aperte Enter.

Teremos como resultado o código abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Ou seja, as tags mais importantes são:

<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode

A tag acima indica ao navegador que estamos usando o HTML5.
Nota-se que ela é uma tag que não é necessário fechar.

<html lang="en"></html>
Enter fullscreen mode Exit fullscreen mode

A tag html é a principal e possui todas as outras dentro dela. Geralmente temos duas tags importantíssimas dentro dela: a tag <head> e <body>.

E lang="en" indica ao navegador que a página está no idioma Inglês, caso o idioma seja Português Brasil, necessário alterar de "en" para "pt-br";

<head></head>
Enter fullscreen mode Exit fullscreen mode

A tag <head> não exibe nenhum conteúdo na página. É dentro dessa tag que colocamos todas as informações de configuração do documento html (codificação de caracteres pelo navegador, como o dispositivo vai interpretar a largura e altura da página, o ícone e o título da página, onde o navegador irá buscar as informações de estilização e interações inteligentes da página).

<meta charset="UTF-8">
Enter fullscreen mode Exit fullscreen mode

Indica ao navegador que a codificação de caracteres será UTF-8. Essa tag é importante para que os caracteres especiais e acentuação sejam exibidos corretamente para o usuário;

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

Indica ao navegador que a largura do dispositivo do usuário deve ser levado em consideração para a estilização e visualização da página. Muito útil para adequar o conteúdo para tela pequenas (smartphones por exemplo).

<title>Document</title>
Enter fullscreen mode Exit fullscreen mode

Indica ao navegador o título da página; No código acima o título da página é Document.

<body></body>
Enter fullscreen mode Exit fullscreen mode

A última tag, mas não menos importante é a tag <body>. É uma das mais importantes, pois é nela que fica todo o conteúdo visual que queremos exibir ao usuário.
 
Lembra do exemplo do artigo com um título e um texto?
Agora é o momento que vamos exibí-lo no navegador, olha que simples:

  1. Abra o VS Code;
  2. Crie um novo arquivo chamado index.html;
  3. Comece digitando ! e depois aperte Enter;
  4. Após o VS Code adicionar a base do HTML, altera na linha 2 o idioma para "pt-br" ao invés de "en";
  5. Na linha 6, altere o título da página para "Minha primeira página HTML" ao invés de "Document";
  6. Na linha 9, entre as duas tags <body> e </body> adicione o artigo que estruturamos anteriormente: 
<article>
   <h1>Título</h1>
   <p>Texto<p>
</article>
Enter fullscreen mode Exit fullscreen mode

 
O código final ficará assim:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha primeira página HTML</title>
</head>
<body>
    <article>
        <h1>Título</h1>
        <p>Texto<p>
     </article>  
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

 
Abrindo no navegador o arquivo index.html salvo no computador, o resultado será:

Alt Text

Parabéns!!!

Fico muito feliz que chegou até o final dessa publicação.
Espero que você tenha aprendido muito!

Quer aprender mais?

Te convido a visitar o meu canal na Twitch: https://www.twitch.tv/dwtoledo.
Lá a gente faz muitas lives de front-end e tem uma playlist muito legal sobre conceitos de HTML.

💖 💪 🙅 🚩
dwtoledo
Douglas Toledo

Posted on January 9, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

O que é HTML? Principais Tags e Dicas do VS Code.
html O que é HTML? Principais Tags e Dicas do VS Code.

January 9, 2021