Tags HTML5 que você precisa conhecer

Para quem trabalha com desenvolvimento web, conhecer tags HTML5, é fundamental, embora existam muitas ferramentas, frameworks e bibliotecas que agilizam o trabalho.

O HTML5 é a versão mais recente do HTML (linguagem de marcação de hipertexto), que define a estrutura e o conteúdo de uma página na web. O HTML5 trouxe novas tags que permitem criar páginas mais semânticas, acessíveis e interativas. Neste artigo, vamos conhecer algumas dessas tags HTML5 muito úteis para quem trabalha com desenvolvimento web.

datalist

A tag datalist permite criar uma lista de opções predefinidas para um campo de entrada de texto. Assim, o usuário pode digitar ou escolher uma das opções sugeridas pelo navegador. Por exemplo:

<input type="text" list="frutas">
<datalist id="frutas">
<option value="Banana">
<option value="Maçã">
<option value="Laranja">
<option value="Manga">
</datalist>

wbr

A tag wbr indica um ponto opcional de quebra de linha dentro de um texto. Isso é útil para evitar que palavras muito longas ou URLs sejam cortadas na borda da tela. Por exemplo:

<p>Acesse o site brasilcode.com.br<wbr>para conhcer os nossos cursos</p>

mark

A tag mark destaca uma parte do texto com uma cor de fundo. Isso é útil para chamar a atenção do usuário para alguma informação importante ou relevante. Por exemplo:

<p>Aqui um exemplo de texto com a <mark>palavra</mark> destacada.</p>

time

A tag time representa uma data ou hora específica. Ela pode receber um atributo datetime que especifica o valor da data ou hora em um formato padronizado. Isso facilita a interpretação dos dados por máquinas e melhora a acessibilidade. Por exemplo:

<p>Temos um encontro marcado às <time>20:00</time>.</p>

<p>O artigo foi publicado em <time datetime="2022-01-20">20 de janeiro de 2022</time>.</p>

nav

A tag nav representa uma seção de navegação dentro de uma página. Ela pode conter links para outras páginas ou partes do mesmo documento. Isso ajuda a organizar o conteúdo e a melhorar a semântica da página. Por exemplo:

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>

figure

A tag figure representa um conteúdo independente e autocontido, como uma imagem, um gráfico, um diagrama ou um código. Ela pode ser acompanhada de uma tag figcaption que fornece uma legenda ou uma explicação para o conteúdo. Por exemplo:

<figure>
<img src="logo.png" alt="Logo da empresa">
<figcaption>Logo da empresa XYZ</figcaption>
</figure>

video

A tag video permite incorporar um vídeo em uma página. Ela pode receber vários atributos para controlar o comportamento do vídeo, como:

src: Defini a URL do vídeo.

poster: Defini uma imagem para ser a capa do vídeo, antes de iniciar a reprodução.

muted: Defini que o vídeo deve iniciar por padrão com o áudio mudo.

autoplay: Inicia o vídeo automaticamente após carregamento da página.

controls: Permiti que o usuário controle a reprodução do vídeo, como reproduzir/pausar, etc.

loop: Indica que o vídeo deve recomeçar quando chegar ao fim.

width: Defini a largura da área de exibição do vídeo

height: Defini a altura da área de exibição do vídeo.

Ela também pode conter tags source que especificam diferentes formatos do vídeo para diferentes navegadores. Por exemplo:

<video width="320" height="240" controls poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Seu navegador não suporta a tag video.
</video>

section

A tag section representa uma seção temática dentro de um documento. Ela pode conter um título e outros elementos relacionados ao tema da seção. Isso ajuda a dividir o conteúdo em partes lógicas e a melhorar a semântica da página. Por exemplo:

<section>
<h1>Introdução</h1>
<p>Insira um texto aqui</p>
</section>

A tag footer define um rodapé para um documento ou uma seção. Normalmente contém informações como autor, direitos autorais, links de navegação ou contato. Por exemplo:

<footer>
  <nav>
    <a href="/sobre">Sobre</a>
  </nav>
  <p>Todos os direitos reservados © 2023 Brasil Code</p>
</footer>

header

A tag header define um cabeçalho para um documento ou uma seção. Normalmente contém um logotipo, um título, um menu ou uma barra de pesquisa. Por exemplo:

<header>
  <h1>Título da Página</h1>
  <p>Algum conteúdo da página.</p>
</header>

A tag main define o conteúdo principal de um documento. Deve haver apenas um elemento main por página e ele deve ser único e relevante para o propósito da página. Por exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <title>Nome da página</title>
</head>
<body>
  <header>
    <h1>Título principal do conteúdo</h1>
  </header>
  <main>
    <h2>FullStack Developer</h2>
    <p>Conteúdo da página</p>
    <article>
      <h3>Artigo</h3>
      <p>Conteúdo do artigo.</p>
    </article>
  </main>
  <footer>
    <p>Todos os direitos reservados © 2022 Brasil Code</p>
  </footer>
</body>
</html>

Outras tags HTML que você precisa conhecer

Além dessas tags HTML5, existem outras tags HTML que são extremamente úteis para organizar nosso conteúdo de maneira mais significativa. Se você ainda não está familiarizado com elas, veja abaixo.

dl, dt e dd

As tags dl, dt e dd definem uma lista de descrição, que consiste em termos (dt) e suas definições (dd). A tag dl é o elemento pai que envolve os pares de dt e dd. Por exemplo:

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

A tag optgroup define um grupo de opções dentro de um elemento select. Permite agrupar as opções por categorias e facilita a navegação do usuário. Por exemplo:

<select>
  <optgroup label="Frutas">
    <option value="maçã">Maçã</option>
    <option value="banana">Banana</option>
    <option value="laranja">Laranja</option>
  </optgroup>
  <optgroup label="Legumes">
    <option value="cenoura">Cenoura</option>
    <option value="alface">Alface</option>
    <option value="tomate">Tomate</option>
  </optgroup>
</select>

A tag address define as informações de contato do autor ou proprietário de um documento ou de um artigo. Pode conter elementos como nome, endereço, telefone, email ou links. Por exemplo:

<address>
  Escrito por João Silva.<br>
  Visite-nos em:<br>
  Example.com<br>
  Rua Fictícia, 123<br>
  Brasil
</address>

A tag abbr define uma abreviação ou acrônimo e opcionalmente fornece o significado completo usando o atributo title. Por exemplo:

<p>O <abbr title="Sistema Único de Saúde">SUS</abbr> é o sistema público de saúde do Brasil.</p>

Conclusão

Estas são apenas algumas das tags HTML5 mais usadas por desenvolvddores web. Cada uma dessas tags tem um papel importante na criação de sites e aplicativos web modernos e responsivos. Dominar o uso dessas tags pode ajudar os desenvolvedores a criar conteúdo mais estruturado e semântico, o que pode melhorar significativamente a experiência do usuário.

Se você é um programador interessado em aprender mais sobre as tags HTML5 e outras tecnologias web, inscreva-se agora mesmo no treinamento Fullstack Developer. Nesse treinamento, você terá a oportunidade de aprimorar suas habilidades em desenvolvimento web, aprender novas técnicas e ferramentas, e se tornar um desenvolvedor completo e confiante. Não perca mais tempo e comece a investir em seu futuro hoje mesmo.

Leia também:

• CSS Flexbox: Guia Completo
• 10 Geradores de Códigos CSS Prontos e Gratuitos

Tags: frontend | HTML | tags HTML | tags html5