DEV Community: Sther

A importância de um HTML semântico

Sther — Wed, 03 Sep 2025 22:40:59 +0000

Olá! Eu sou a Sther e hoje quero compartilhar com vocês a importância do HTML semântico.
Muita gente pensa que frontend é só sair colocando <div> e "ser feliz". Mas, a longo prazo, isso pode se transformar em um verdadeiro pesadelo: código confuso, difícil de manter, prejudicial para o SEO e nada acessível para usuários que dependem de tecnologias assistivas.

Aí que entra o poder da semântica :D

🏷️ O que é HTML Semântico?

Segundo o MDN Web Docs:

Semântica:
Na programação, a semântica se refere ao significado de um trecho de código — por exemplo, "que efeito tem a execução dessa linha de JavaScript?" ou "que finalidade ou função esse elemento HTML tem" (em vez de "como ele se parece?").

Ou seja, não é sobre a aparência de um elemento, mas sobre o significado e o papel que ele exerce dentro da página.

Um exemplo simples:

<!-- Ruim: sem semântica -->
<div>Meu título principal</div>
<div>Seção de artigos</div>
<div>Rodapé</div>

<!-- Bom: com semântica -->
<h1>Meu título principal</h1>
<section>Seção de artigos</section>
<footer>Rodapé</footer>

Com o uso correto, navegadores, mecanismos de busca e leitores de tela conseguem entender melhor a estrutura do conteúdo.

📈 HTML Semântico e SEO

O SEO (Search Engine Optimization) é um dos maiores aliados de quem quer destacar um site nos mecanismos de busca.

Um dos erros mais comuns é usar vários <h1> na mesma página: isso confunde o bot do Google, e ele não sabe qual título considerar como o principal.

Exemplo:

<!-- Errado -->
<h1>Sobre nós</h1>
<h1>Produtos</h1>
<h1>Contato</h1>

<!-- Correto -->
<h1>Minha Empresa</h1>
<h2>Sobre nós</h2>
<h2>Produtos</h2>
<h2>Contato</h2>

A hierarquia correta de cabeçalhos ajuda os “bots” a entenderem a estrutura da informação e melhora o ranqueamento do site.

♿ HTML Semântico e Acessibilidade

A acessibilidade é uma das funcionalidades principais do site, gosto de imaginar que garante que qualquer pessoa consiga navegar pelo seu site, inclusive quem utiliza leitores de tela.

Veja a diferença que uma boa estrutura faz:

<header>
  <h1>Blog da Sther</h1>
</header>

<nav>
  <ul>
    <li><a href="#artigos">Artigos</a></li>
    <li><a href="#sobre">Sobre</a></li>
  </ul>
</nav>

<main>
  <article id="artigos">
    <h2>Por que HTML semântico importa?</h2>
    <p>Explicação do conteúdo…</p>
  </article>
</main>

Com essa organização, o leitor de tela consegue identificar cabeçalho, menu, conteúdo principal e artigos de forma clara.

🔧 ARIA: Quando a Semântica Precisa de Ajuda

Nem sempre apenas as tags são suficientes. Em elementos dinâmicos como carrosséis, abas ou menus dropdown é possível usar atributos ARIA para dar mais contexto às tecnologias assistivas.

<div role="region" aria-label="Carrossel de imagens">
  <button aria-label="Imagem anterior">◀</button>
  <img src="foto1.jpg" alt="Pôr do sol na praia" aria-hidden="false" />
  <img src="foto2.jpg" alt="Montanha nevada" aria-hidden="true" />
  <button aria-label="Próxima imagem">▶</button>
</div>

Aqui, o role="region" indica que se trata de um carrossel, e o aria-label descreve os botões para quem não consegue vê-los. Assim, a experiência de navegação se torna mais inclusiva e acessível.

O HTML semântico vai muito além de um detalhe técnico: ele é a base para sites mais organizados, acessíveis e preparados para o futuro.
Praticar boas escolhas de tags e atributos não só facilita a vida de quem desenvolve, como também melhora a experiência de quem navega.

Obrigada por te lido até aqui, câmbio desligo.

Front-end além de pintar botão!

Sther — Wed, 02 Jul 2025 13:26:24 +0000

Oi, pessoal! Eu sou a Sther, e esse é um blogpost sobre meu aprendizado em usar cache no front-end.

SIM, CACHE NO FRONTEND! Achou que front-end era só pintar botão ou pensar em componente mobile first?

Bom… tambémmm é. XD

Porém temos umas coisas bem legais que podemos aproveitar nele, e uma delas é o ✨cache✨.

Você sabia que ele não vive só no back-end? Então, bora ver como funciona!

Por que usar cache no front-end?

Às vezes, a gente tem aquele dado que não muda com frequência, e queremos evitar requisições desnecessárias toda vez que a página for atualizada.
Aí entra o cache no front, que pode salvar nossa performance e até melhorar a experiência do usuário.

Aqui são algumas formas de fazer cache no front:

ㅤ

🟡 SessionStorage

Guarda os dados enquanto a aba está aberta. É ótimo para dados temporários que não precisam sobreviver a um refresh completo.

Mas, como você acessa isso?

Segue aqui um exemplo:

sessionStorage.setItem('nome', 'Sther');
const nome = sessionStorage.getItem('nome'); // 'Sther'

Quando posso usar isso?

Em um formulário de múltiplas etapas. O usuário pode navegar entre os passos sem perder o progresso, mas se fechar a aba… já era!

🟢 LocalStorage

O meu preferido! Ele persiste os dados mesmo após fechar o navegador. Ideal para lembrar preferências do usuário, temas, login, etc.

Mas como posso acessar isso?

Segue um exemplo, ele é muito parecido com o SessionStorage quando vamos fazer a chamada:

localStorage.setItem('tema', 'dark');
const tema = localStorage.getItem('tema'); // 'dark'

Exemplo real:

A Shopify utiliza isso no processo de checkout (veja aqui). Quando você adiciona um produto ao carrinho, os dados são salvos no LocalStorage, se você recarregar a página, o carrinho continua lá! Isso dá uma sensação de continuidade super fluida.

Outros exemplos de uso que são conhecidos:

Lembrar o tema claro/escuro da aplicação
Salvar o token de autenticação (embora não seja recomendado)
Lembrar filtros ou preferências em uma listagem de produtos

🔵 IndexedDB

É um banco de dados completo no navegador. Suporta dados estruturados e de grande volume, diferente dos dois acima que são key-value simples. É mais complexo de usar porém muito poderoso!

Como posso acessar?

O acesso ao IndexedDB é assíncrono e um pouco mais verboso:

const request = indexedDB.open('meuBanco', 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  // Aqui você pode começar a ler e escrever dados
};

request.onerror = (event) => {
  console.error('Erro ao abrir o banco', event);
};

Exemplo real:

O Google Docs usa IndexedDB para salvar seus documentos offline. Mesmo se você perder a conexão, ele continua funcionando e depois sincroniza com o servidor e também PWAs que precisam funcionar sem conexão!

Olha quanta coisa bacana dá pra fazer além de pintar alguns botões, hahaha

É ÓBVIO que o back-end tem seu papel essencial, mas pensando em performance, experiência do usuário e praticidade, vale a pena explorar o que temos disponível no navegador.

É isso, pessoal, obrigada por terem lido até aqui!

Câmbio e desligo!

Como foi voltar para o desenvolvimento?

Sther — Tue, 03 Sep 2024 17:15:35 +0000

Oi, eu sou a Sthefany Sther, mas você pode me conhecer como Sther ou Stherzada. Neste texto, quero compartilhar minha experiência no mundo do desenvolvimento. Para quem não me acompanha nas redes, vou dar um breve contexto. Eu fazia lives de live coding na Twitch e, diga-se de passagem, sou uma ótima comunicadora. Fui contratada por uma empresa como Tech Community, mas como o projeto não estava avançando, fui realocada como Product Manager. Desde então, fiquei nessa posição por um tempo.

Minha experiência como Product Manager foi muito boa. Eu criava dashboards, organizava tarefas, melhorava fluxos e, claro, ajudava o time da maneira que conseguia. Sinto que essa experiência me enriqueceu muito como profissional, mas ainda assim, eu sentia aquela vontade de estar no meio de campo, criando features incríveis, sabe? Queria codar. Para não perder o ritmo de aprendizado em programação, continuei fazendo live coding, desenvolvendo projetos mais simples, como meu portfólio e o Tindev. Esse conhecimento me permitia ir além do "Jira" no meu trabalho, pois eu sabia um pouco sobre programação.

Até que apareceu uma oportunidade através de um dos viewers da minha live, que hoje, além de parceiro de trabalho, é meu amigo, me deu a chance de voltar para o desenvolvimento.

Fiz a entrevista e expliquei que era Product Manager, mas que desejava muito voltar para o desenvolvimento. Tentei destacar meus pontos fortes, e, cara, essa entrevista foi maravilhosa, pois tive a sensação de que estava seguindo o que realmente queria, e não sendo induzida.

Uma semana depois, fui chamada para trabalhar onde estou hoje, na Carcará. Pretendo muito, no futuro, escrever sobre minha experiência aqui, porque vocês não imaginam o quanto eu mudei nesse tempo. A Carcará é uma empresa da Deco, onde implementamos e-commerce e buscamos a melhor performance possível.

Meu onboarding foi diferenciado; conheci quase todos pessoalmente por conta do Team Building, o que me deu uma noção melhor de quem é quem. Depois de todos esses processos, hoje estou implementando uma loja que, até agora, não caiu a ficha que estou fazendo.

O resumo disso tudo é que, se você tem um desejo e vontade, corra atrás. Mostre-se de alguma forma, seja através de código de aprendizado ou de uma grande implementação, documentando seu processo. Deixe que o mundo te enxergue de alguma maneira. Não há receita certa para o sucesso, mas existem formas de alcançá-lo.

Obrigada por ter lido até aqui. Câmbio, desligo.