DEV Community

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

Posted on

23 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.

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (1)

Collapse
 
alsouza93 profile image
Alessandra Souza

Gostei das dicas

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay