DEV Community

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

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

dwtoledo profile image Douglas Toledo ・4 min read

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.

Discussion (1)

Collapse
alsouza93 profile image
Alessandra Souza

Gostei das dicas

Forem Open with the Forem app