DEV Community: Cândido_Kuerten

HTML em Dados: Formulários e Tabelas para Construção de Conteúdo

Cândido_Kuerten — Mon, 20 Jul 2026 23:27:54 +0000

Seguindo o projeto de formação como Dev Fullstack Junior, trago novos elementos essenciais para construção de página na Web, sendo eles o Formulário para captura de dados e a Tabela que permite a estruturação de dados de forma que possamos construir documentações mais completas e mais técnicas.

Formulário:

Vamos supor que você queira anunciar o curso, ao qual pretende ensinar os outros a programar, como você vai conseguir os dados para fornecer instruções específicas a somente quem vai querer participar? Ai está, o formulário ajuda nessas situações, pois, através dele você pode solicitar dados para que os alunos preencham como o nome, o interesse que tem no curso ou e-mail/número como forma de contato.

Além dos campos de texto e e-mail, o formulário abaixo usa um <select> (lista suspensa) para a pergunta de indicação e um <textarea> (campo de texto multilinha) para o comentário livre.

<form action="" method="POST">
                <fieldset>
                    <legend>Formulário para participar do curso!</legend>
                    <label for="nome">Nome: </label><input type="text" id="nome" name="nome" placeholder="João" required><br>
                    <label for="email">Email: </label><input type="email" id="email" name="email"
                        placeholder="email@exemplo.com" required><br>
                    <label for="telefone">Telefone: </label><input type="tel" id="telefone" name="telefone"
                        placeholder="(ddd) nnnnn-nnnn" required>
                    <!--Mini fieldset para agrupamento do tipo Radio, ao qual pode ser identificado por IDs, mas, o name deve seguir o mesmo padrão para todos-->
                    <fieldset id="recomendacao">
                        <legend>Qual é a probabilidade de você nos recomendar?</legend><br>
                        <input type="radio" id="recomendacao_baixa" name="recomendacao"
                            value="recomendacao_baixa"><label for="recomendacao_baixa">Baixa</label>
                        <input type="radio" id="recomendacao_media" name="recomendacao"
                            value="recomendacao_media"><label for="recomendacao_media">Média</label>
                        <input type="radio" id="recomendacao_alta" name="recomendacao" value="recomendacao_alta"><label
                            for="recomendacao_alta">Alta</label>
                    </fieldset>
                    <label for="indicacao">Você veio por qual meio?</label><br>
                    <select id="indicacao" name="indicacao">
                        <optgroup label="Redes Sociais">
                            <option value="Instagram">Instagram</option>
                            <option value="Facebook">Facebook</option>
                            <option value="Dev">Dev.to</option>
                        </optgroup>
                        <optgroup label="Divulgação">
                            <option value="Youtube">Youtube</option>
                            <option value="Linkedin">Linkedin</option>
                            <option value="Anuncio">Anúncio</option>
                        </optgroup>
                    </select>
                    <br>
                    <textarea id="comentario" name="comentario" rows="5" cols="40"
                        placeholder="Deixe seu comentário:" maxlength="500"></textarea>
                    <br>
                    <button type="submit">Enviar</button>
                </fieldset>
            </form>

O que cada parte está fazendo:

required em nome, e-mail e telefone ativa a validação nativa do navegador — o formulário simplesmente não deixa enviar se esses campos estiverem vazios, acaba tornando o preenchimento obrigatório.
maxlength="500" no <textarea> limita o comentário a 500 caracteres, evitando que o usuário escreva um texto maior do que o backend está preparado pra receber.
O <fieldset id="recomendacao"> está aninhado dentro do fieldset principal — isso agrupa visualmente e semanticamente só os radio buttons daquela pergunta específica, sem misturar com o restante dos campos do formulário. Assim, é interpretado de forma automática que aquele conjunto de radio buttons pertencem ao mesmo grupo de perguntas.

Um detalhe importante é que para casos onde você queira somente escolher uma das opções entre os radio buttons, se torna necessário que o atributo name seja igual entre eles para permitir uma seleção única.

Também, no exemplo acima que formulei trago diversas opções que podem ser utilizadas para criação de um formulário completo, ao qual além dos exemplos de uso que havia citado anteriormente, agora temos opções de múltipla seleção e botões.

Tabela:

Agora temos outro elemento com extrema utilidade para criar conteúdo com informações técnicas mais estruturadas: as tabelas permitem organizar explicações complexas de um jeito mais fácil de entender.

A tabela abaixo é dividida em <thead> (cabeçalho), <tbody> (dados) e usa <tr> para cada linha, com <th> nas células de título e <td> nas células de dado comum.

<table>
                    <caption>Aqui temos sugestões para encaixar os treinos em seu tempo:</caption>
                    <thead>
                        <tr>
                            <!--O atributo scope permite que faça uma melhor conexão de cabeçalhos com conteúdo-->
                                <th scope="col">Tempo Disponível</th>
                                <th scope="col">O Que Fazer (Estratégia)</th>
                                <th scope="col">Foco Principal</th>
                                <th scope="col">Mentalidade de Sucesso</th>
                        </tr>
                    </thead>
                    <tbody>
                            <tr>
                                <td>15 a 20 minutos</td>
                                <td>
                                    <ul>
                                        <li>Treinos HIIT (Alta Intensidade)</li>
                                        <li>Circuitos funcionais sem equipamento</li>
                                        <li>Caminhada ou corrida acelerada</li>
                                    </ul>
                                </td>
                                <td>Intensidade e Eficiência<br><br>Manter os batimentos altos e acelerar o metabolismo.
                                </td>
                                <td>"Pouco tempo é melhor que nenhum. 15 minutos já quebram o sedentarismo."</td>
                            </tr>
                            <tr>
                                <td>30 a 45 minutos</td>
                                <td>
                                    <ul>
                                        <li>Musculação focada (compostos)</li>
                                        <li>Treinos de força e resistência</li>
                                        <li>Corrida de ritmo moderado</li>
                                    </ul>
                                </td>
                                <td>Qualidade e Constância<br><br>O "ponto doce" para a maioria das rotinas modernas.</td>
                                <td>"Eficiência máxima. Menos conversa no celular e mais foco no movimento."</td>
                            </tr>
                            <tr>
                                <td>60 minutos ou mais</td>
                                <td>
                                    <ul>
                                        <li>Treino completo de força + Cardio</li>
                                        <li>Prática de esportes (futebol, tênis, natação)</li>
                                        <li>Aulas coletivas (Crossfit, Dança, Yoga)</li>
                                    </ul>
                                </td>
                                <td>Volume e Variedade<br><br>Ideal para quem tem a rotina mais flexível.</td>
                                <td>"Aproveite o processo sem pressa, mas cuide para não procrastinar entre as séries."</td>
                            </tr>
                    </tbody>
                </table>

O que cada parte está fazendo:

<caption> dá um título descritivo à tabela — é o primeiro conteúdo lido por leitores de tela ao entrar nela, então ajuda quem não está enxergando a tabela a entender do que se trata antes mesmo de chegar nos dados, funciona como a legenda da tabela.
scope="col" em cada <th> conecta explicitamente aquele título à coluna inteira abaixo dele.

O que fica desse post:

Formulário e tabela parecem assuntos separados, mas têm o mesmo propósito no fundo: dar estrutura e significado aos dados — seja recebendo informação do usuário (formulário) ou exibindo informação organizada (tabela). A diferença entre "colocar campos/células na tela" e construir algo que realmente funciona pra quem usa está justamente nesses detalhes que só aparecem quando você testa de verdade: o name compartilhado que faz radio buttons funcionarem como grupo, a ordem certa das tags de tabela, o scope que conecta título a dado. Acaba que a semântica que é um detalhe entre elementos, se torna um fator determinante para um boa experiência de diversos usuários.

⚠️ Post de aprendizado: compartilho aqui o que estou estudando, não é documentação oficial. Feedbacks são super bem-vindos!

Se você também está começando agora, deixa aqui nos comentários: qual desses pontos você já domina e qual ainda gera mais dúvida? Também, se quiser deixar algum ponto da explicação que ficou faltando ou pode ser melhor, fique a vontade para comentar!

Esse post faz parte da minha jornada documentada rumo a Dev Fullstack Júnior. Me acompanha aqui no Dev.to pras próximas etapas!

HTML na Prática: 7 fundamentos essências para todos os iniciantes

Cândido_Kuerten — Tue, 14 Jul 2026 23:24:32 +0000

Estou iniciando meu projeto para uma jornada de aprimoramento tanto de conhecimento, quanto de portfólio para formação como Dev Fullstack Junior e aqui vou documentar cada etapa - para também ajudar que precisar como eu!

Os 7 fundamentos são:

1. Estrutura básica do documento (Boilerplate):

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Minha Página</title>
</head>
<body>
  <!-- Conteúdo visível da página vai aqui -->
</body>
</html>

<!DOCTYPE html> -> informa o navegador que está lendo HTML5
<html lang="pt-BR"> -> elemento raiz que engloba todo o conteúdo, junto com o atributo lang, para definição sobre idioma da página
<head> -> a parte onde consta metadados, como as meta tags e o título da aba
<body> -> parte onde fica localizado todo o conteúdo que será exibido ao usuário

2. Tags Semânticas:

As tags semânticas funcionam para organizar as áreas do projeto e também ajudam os navegadores a fazerem a interpretação da página:

<header>
  <nav>
    <a href="#inicio">Início</a>
    <a href="#sobre">Sobre</a>
  </nav>
</header>

<main>
  <section>
    <h2>Sobre mim</h2>
    <p>Conteúdo da seção...</p>
  </section>
</main>

<footer>
  <p>&copy; 2026 - Todos os direitos reservados</p>
</footer>

<header> -> Seção específica para o cabeçalho da página
<nav> -> Seção para navegação como menu ou conjunto de links
<main> -> Seção com o conteúdo principal da página
<section> -> Seção para agrupar conteúdos por tema
<footer> -> Seção específica para o rodapé da página

Tratando de navegadores em específico, a semântica implica em 2 fatores principais que seriam o SEO (ajuda o navegador a entender melhor o conteúdo) e acessibilidade para facilitar o reconhecimento a leitores de tela.

3. Elementos de Texto:

Dentre esses elementos consta a parte estrutural e de significado da escrita na página:

<h1>Título Principal (só um por página)</h1>
<h2>Subtítulo de Seção</h2>

<p>Um parágrafo normal de texto.</p>

<p>Você pode dar <strong>ênfase forte</strong> numa palavra, 
ou uma <em>ênfase mais sutil</em> em outra.</p>

<blockquote>
  "Uma citação de outra fonte fica bem marcada aqui dentro."
</blockquote>

4. Links e Navegação:

O elemento <a> é o que permite acessar outras páginas ou até outras partes da própria página, a partir de um elemento.

<!-- Link externo, abrindo em nova aba -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  Documentação MDN
</a>

<!-- Link interno (âncora) -->
<a href="#secao-contato">Ir para Contato</a>

<!-- Link relativo, pra outra página do mesmo site -->
<a href="/sobre.html">Sobre</a>

href="" -> é o atributo que define o caminho que o elemento vai levar o usuário
target="_blank" -> faz a abertura do destino em uma nova página; ao utilizar esse atributo é considerado boa prática usar também rel="noopener noreferrer" por segurança (evita que a página aberta tenha acesso à página de origem via window.opener)

5. Meta tags básicas:

Como mencionado anteriormente, essas tags ficam alocadas dentro do elemento <head>:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

charset="UTF-8" -> garante que acentos e caracteres especiais sejam exibidos corretamente
viewport -> é a meta tag responsável por fazer a página se comportar adequadamente em celulares

6. Atributos globais:

São atributos que podem ser utilizados em qualquer tag HTML para ajudar em identificação:

<div id="cabecalho" class="container destaque" title="Área principal">
  Conteúdo
</div>

id -> identificador único por página, muito utilizado para integração com JS
class -> identificador que pode ser replicado em diversos elementos, ideal para integração com CSS
title -> mostra uma dica ao usuário, caso passe com o mouse por cima

7. Comentários:

Como o próprio nome já declara, você pode utilizar para deixar anotações no código sem que se apareçam diretamente na página:

<!-- Isso é um comentário e não aparece pro usuário -->
<p>Isso aparece normalmente.</p>

<!-- 
  Comentários também podem
  ocupar várias linhas
-->

São muito utilizados para marcar grandes seções do código, como .

⚠️ Post de aprendizado: compartilho aqui o que estou estudando, não é documentação oficial. Feedbacks são super bem-vindos!

Esse post faz parte da minha jornada documentada rumo a Dev Fullstack Júnior. Me acompanha aqui no Dev.to pras próximas etapas!