DEV Community

Cover image for Tags HTML mais utilizadas, Código Semântico e Dicas do VS Code.
Douglas Toledo
Douglas Toledo

Posted on

27 3

Tags HTML mais utilizadas, Código Semântico e Dicas do VS Code.

Antes de começar, já vou te dar duas dicas!
 
Dica 01: Enquanto estou estruturando um conteúdo HTML eu sempre deixo aberto um guia rápido para possíveis dúvidas.
 
Eu gosto bastante desse Guia de Referências HTML HostingerBR.
 
Dica 02: O Visual Studio Code (VS Code) nos ajuda bastante na digitação de tags HTML, a dica é a mesma para todas as tags dessa leitura:

  • No VS Code comece digitando o nome da tag;
  • Ele irá reconhecer a tag e exibirá um pop-up; nome da tag sendo reconhecida pelo Visual Studio Code
  • Aperte Enter e o VS Code irá adicionar automaticamente a tag de abertura e fechamento (se houver). preenchimento automático do Visual Studio Code
  • Para algumas tags ele irá adicionar outros campos essenciais, como o texto alternativo alt="" da tag <img> que é muito importante para a acessibilidade de imagens nas páginas que estamos criando. preenchimento automático do Visual Studio Code

Agora vamos às Tags!

  • Cabeçalhos:

Temos 6 tags para cabeçalhos e títulos, elas vão do <h1> até o <h6>, quanto menor o número do h, maior a fonte, ou seja, <h1> é a maior delas e <h6> é a menor. Veja abaixo:

<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>
Enter fullscreen mode Exit fullscreen mode

Cabeçalho 1

Cabeçalho 2

Cabeçalho 3

Cabeçalho 4

Cabeçalho 5
Cabeçalho 6

  • Parágrafos: quando queremos adicionar um texto na página, geralmente usamos a tag <p> paragraph.
<p>Isso é um parágrafo de texto</p>
Enter fullscreen mode Exit fullscreen mode

Em alguns momentos, quando não é possível usar o CSS para formatar um texto, utiliza-se algumas tags HTML. Exemplo:

  • Vamos supor que no "Isso é um parágrafo de texto" você quer deixar apenas a palavra "parágrafo" em negrito ou itálico?

 

Para negrito você pode utilizar a tag <strong>:

<p>Isso é um <strong>parágrafo</strong> de texto</p>
Enter fullscreen mode Exit fullscreen mode

Resultado: Isso é um parágrafo de texto

 

Para itálico você pode utilizar a tag <i>:

<p>Isso é um <i>parágrafo</i> de texto</p>
Enter fullscreen mode Exit fullscreen mode

Resultado: Isso é um parágrafo de texto

 

Lembre-se, HTML estrutura, CSS estiliza/formata, então evite utilizar tags de formatação e estilização no HTML. Caso seja realmente necessário há outras tags de formatação no guia disponibilizado no início dessa leitura.


  • Listas Ordenadas: para a criação de uma lista ordenada, ou seja, a ordem dos itens é importante, utilizamos a tag <ol> ordered list e adicionamos os itens da lista com a tag <li> list item.
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
Enter fullscreen mode Exit fullscreen mode
  1. Item 1
  2. Item 2
  3. Item 3

Note que no resultado acima a lista numera cada um dos itens. Como temos 3 itens, a numeração foi de 1 a 3.


  • Listas Não Ordenadas: para a criação de uma lista não ordenada, ou seja, a ordem dos itens não é importante, utilizamos a tag <ul> unordered list e também adicionamos os itens da lista com a tag <li> list item.
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
Enter fullscreen mode Exit fullscreen mode
  • Item 1
  • Item 2
  • Item 3

Note que no resultado acima a lista apenas colocou um símbolo na frente de cada item.


  • Imagens: para adicionar imagens na página é utilizado a tag <img>.
<img src="" alt="">
Enter fullscreen mode Exit fullscreen mode

Note que é a primeira vez que temos algo dentro de uma tag. Chamamos src="" e alt="" de atributos da tag <img>. São nos atributos que colocamos informações básicas de uma tag.

Na tag <img> temos dois atributos básicos:

  • src="" é onde a imagem está localizada e;
  • alt="" é o texto alternativo (essencial para a acessibilidade das páginas para pessoas que tem deficiência visual ou quando a imagem por algum motivo não for carregada, o texto alternativo será exibido).

Na prática, se formos adicionar a imagem do logo Google, temos:

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo do Google">
Enter fullscreen mode Exit fullscreen mode

onde:

o resultado é:
Logo do Google


  • Links: para levar o usuário até um link interno ou externo da página é utilizado a tag <a> anchor. Veja um exemplo:
<a href="https://google.com" target="_blank">Clique aqui!</a>
Enter fullscreen mode Exit fullscreen mode

Na tag <a> temos um atributo básico e outros opcionais:

  • O atributo básico href="" é o link de destino.
    No exemplo, ao clicarmos no link ele nos levará ao "https://google.com";

  • O atributo target="_blank" indica que o link será aberto numa nova aba ou página, esse atributo é opcional.

O resultado do código é:
Clique aqui!


Já que colocamos uma imagem <img> e um link <a> do Google, que tal se unirmos os dois? Sim, podemos usar a tag <a> para direcionar o usuário a um link após ele clicar numa imagem!

<a href="https://google.com" target="_blank">
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo do Google">
</a>
Enter fullscreen mode Exit fullscreen mode

Resultado:
Logo do Google


Ainda tenho que falar das tags de Tabelas e Formulários.
Como essa leitura está ficando um pouco extensa, vou deixar para falar dela na próxima publicação, não percam!

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.

Top comments (1)

Collapse
 
alsouza93 profile image
Alessandra Souza

Gostei das dicas

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video