Introdução ao desenvolvimento web(Front-end) - HTML

Bem-vindo ao meu segundo post sobre introdução ao front-end. No post anterior, eu discuti sobre HTML e como ele é usado para estruturar o conteúdo de uma página web. Neste post, vamos ir um pouco mais além e explorar algumas outras tags HTML utilizando alguns exemplos, em cada exemplo vou explicar o que cada linha faz.

Você pode encontrar o código apresentado nesse post aqui!

Exemplo 1:

<section>
  <p>Este é um parágrafo dentro de uma seção.</p>
  <img src="imagem.jpg" alt="Uma imagem">
</section>

A tag <section> é usada para criar uma seção no documento HTML, por exemplo se eu tenho um site com 2 'seções' cada uma delas será envolta de uma tag section.

A tag <p> é usada para criar um parágrafo de texto, nada mais, nada menos.

A tag <img> é usada para incluir uma imagem em uma página web. O atributo 'src' especifica a localização da imagem e o atributo alt fornece uma descrição alternativa da imagem que aparece no lugar dela caso algum problema aconteça no caminho, você sempre deve usar esse atributo quando estiver trabalhando com imagens para que o seu site seja mais accessível.

Exemplo 2:

<nav>
  <a href="index.html">Home</a> |
  <a href="about.html">Sobre</a> |
  <a href="contact.html">Contato</a>
</nav>

A tag nav é usada para criar uma área de navegação, menus de opções no geral.

A tag <a> é usada para criar um link para outra página externa ou interna. O atributo href especifica o destino do link, quando você clica em algo e é levado para outra parte da página ou para outro site em si, isso é um link.

Exemplo 3:

<article>
  <h2>Título do artigo</h2>
  <p>Conteúdo do artigo.</p>
</article>

A tag <article> é usada para indicar uma seção do site que contém um conteúdo independente, que se fosse tirado dali ainda faria sentido, como por exemplo um artigo ou post de um blog, o conteúdo normalmente é estruturado de maneira bem semelhante a um artigo de jornal ou revista, com um título, autor, data, e corpo principal, mas é importante ressaltar que isso não é uma regra.

A tag <h2> é usada para criar um cabeçalho de nível 2, o que significa que é um cabeçalho menor do que <h1>(Explicado no post anterior).

Exemplo 4:

<aside>
  <h3>Informações adicionais</h3>
  <p>Conteúdo adicional relacionado ao conteúdo principal da página.</p>
</aside>

A tag <h3> como você pode imaginar é utilizada para criar um cabeçalho de nível 3.

A tag <aside> é usada para criar um conteúdo adicional relacionado ao conteúdo principal da página, o dev.to por exemplo faz o uso de 2 tags aside na página de post que você está lendo agora, uma na esquerda e uma na direita da página, caso queira ver você pode inspecionar a página a qualquer momento.

Para inspecionar a página, você pode usar o recurso de inspeção de elementos do navegador web. Isso geralmente pode ser acessado pressionando as teclas "Ctrl + Shift + I" (no Windows) ou "Cmd + Shift + I" (no Mac) enquanto estiver na página que você deseja inspecionar. Isso abrirá uma janela com várias abas, incluindo:

Elements: mostra o código HTML da página, permitindo que você veja como a página é estruturada e que elementos estão sendo usados.
Console: mostra qualquer erro ou saída de console gerada pela página.
Network: mostra informações sobre as solicitações de rede feitas pela página, como imagens, scripts e arquivos CSS.

Existem outras abas e recursos na inspeção de sites porém pretendo falar sobre isso em outro post.

Exemplo 5:

<figure>
  <img src="imagem.jpg" alt="Uma imagem">
  <figcaption>Uma legenda para a imagem</figcaption>
</figure>

A tag <figure> é usada para criar uma seção que contém imagem ou outro conteúdo, como um gráfico ou um código.

A tag <figcaption> é usada para adicionar uma legenda para a imagem.

Em resumo, neste post, discutimos algumas tags HTML adicionais que podem ser úteis na estruturação do conteúdo de uma página web, abaixo segue um exemplo final que utiliza todas as tags que discutimos nesse post e no anterior:

Exemplo final:

<html>
  <header>
    <nav>
      <a href="index.html">Home</a> |
      <a href="about.html">Sobre</a> |
      <a href="contact.html">Contato</a>
    </nav>
  </header>
  <body>
    <section>
      <article>
        <h1>Título do artigo</h1>
        <p>Conteúdo do artigo.</p>
      </article>
      <aside>
        <h3>Informações adicionais</h3>
        <p>Conteúdo adicional relacionado ao conteúdo principal da página.</p>
      </aside>
    </section>
    <figure>
      <img src="imagem.jpg" alt="Uma imagem">
      <figcaption>Uma legenda para a imagem</figcaption>
    </figure>
  </body>
</html>

Este exemplo mostra como as tags discutidas neste post podem ser combinadas para estruturar o conteúdo de uma página web, porém existem muitas outras tags além das que eu mostrei aqui, portanto vou deixar alguns links pra você que quer se aprofundar ainda mais(Inclusive recomendo que acesse elas e tente fazer uma página simples com HTML):

Mozilla docs oferece uma descrição detalhada de todas as tags HTML, incluindo exemplos e informações de compatibilidade do navegador.
W3Schools é um site popular que oferece tutoriais e exemplos para ajudar a aprender HTML e outras tecnologias da web.
FreeCodeCamp tem diversos cursos gratuitos de programação.
Codecademy tem um curso interativo para aprender HTML e CSS.

Obrigado por ler este post! Espero que você tenha aprendido algo novo sobre HTML e como ele pode ser usado para estruturar o conteúdo de uma página web.

Blog

Introdução ao desenvolvimento web(Front-end) - HTML

Carmichael Ferreira

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

Related