Mapa visual

Mini tela mostrando onde cada tag semântica costuma ficar na página.

<html>

<head>

<body>

<nav> menu · links

<section> hero banner · chamada principal

<main>

<search> busca do site

Tags semânticas

Estrutura e significado das regiões da página.

Tags de conteúdo

Texto, listas, citações e elementos inline.

Formulário

Coleta e envio de dados do usuário.

form

A tag form é utilizada para envolver os campos de um formulário.

action="" — indica o arquivo/url que será ativado ao enviarmos o formulário.

method="" — POST (envio de informações) e GET (busca de informações).

<form action="/" method="POST">
  <div>
    <label for="nome">Nome</label>
    <input type="text" id="nome" name="nome" />
  </div>
</form>

input

Campo mais comum de formulário, possui diferentes tipos.

type="" — define o tipo: text, checkbox, radio, email, file e outros.

name="" — define um nome único. É utilizado pelo JavaScript ou Back End para puxarmos o valor do campo.

label — define o rótulo. for="" relaciona a label e o id="" do campo.

<form>
  <div>
    <label for="usuario">Usuário</label>
    <input type="text" id="usuario" name="usuario" />
  </div>
  <div>
    <label for="senha">Senha</label>
    <input type="password" id="senha" name="senha" />
  </div>
</form>

button

Cria um botão, utilizado para diferentes interações na página.

form > button — button dentro de form envia/ativa a action do form.

<button>Enviar</button>

<button class="comprar">Compre Hoje</button>

Atributos

placeholder="" — texto quando o formulário não está preenchido (dica de preenchimento).

required — define o input como obrigatório.

disabled — desabilita o input.

minlength e maxlength — mínimo e máximo de caracteres.

value — valor inicial do formulário.

<div>
  <label for="email">Email</label>
  <input
    type="email"
    id="email"
    name="email"
    required
    placeholder="nome@email.com"
  />
</div>

checkbox e radio

checkbox — caixa que pode ser marcada/desmarcada.

radio — grupo de inputs com o mesmo name; apenas um pode ser selecionado.

<div class="checkbox">
  <input type="checkbox" id="marketing" name="marketing" value="marketing" />
  <label for="marketing">Desejo receber avisos de promoções.</label>
</div>
<div class="checkbox">
  <input type="checkbox" id="termos" name="termos" value="termos" />
  <label for="termos">Li os termos e condições.</label>
</div>

<p>Entrega:</p>
<div>
  <input type="radio" id="retirada" name="entrega" value="retirada" />
  <label for="retirada">Retirada</label>
</div>
<div>
  <input type="radio" id="sedex" name="entrega" value="sedex" />
  <label for="sedex">Sedex</label>
</div>

select

Campo de seleção com diferentes opções (option).

<label for="parcelas">Parcelas</label>
<select name="parcelas" id="parcelas">
  <option value="1x">1x de R$ 1200</option>
  <option value="3x">3x de R$ 400</option>
  <option value="6x">6x de R$ 200</option>
  <option value="12x">12x de R$ 100</option>
</select>

textarea

Área de texto, para valores que ocupem mais de uma linha.

rows="" — indica o tamanho de linhas visíveis.

<label for="mensagem">Mensagem</label>
<textarea id="mensagem" name="mensagem" rows="5"></textarea>

Mídia e tabelas

Imagens, áudio, vídeo e dados tabulares.