← Voltar à lista

HTML para o dono do site: o mínimo que você precisa entender na entrega do trabalho

HTML é o "esqueleto" da página: títulos, texto, botões, formulários, links. Sem ele, o navegador não sabe onde está o título principal, o preço do produto ou o formulário de contato. Você não precisa escrever marcação, mas entender HTML na aceitação do site do contratado ajuda a pegar erros antes do pagamento: títulos vazios para SEO, formulários quebrados, "imagem no lugar do texto" para o Google, falta de alt em fotos, H1 duplicado em cada página. Não é curso de programação - é um checklist de bom senso de 30 minutos.

  • HTML - estrutura da página lida pelo navegador e buscador
  • Para o dono - aceitar o trabalho com critério, não perder SEO e conversão por causa da marcação
  • O que verificar - títulos, formulários, links, alt em imagens, layout mobile
  • Relação com CSS e JS - HTML define "o quê", CSS - "como parece", JavaScript - "como se comporta"
  • Principal risco - tela bonita com marcação vazia ou errada por baixo

HTML em linguagem simples

HTML (HyperText Markup Language) é linguagem de marcação, não de programação. Descreve blocos com tags: <h1> - título principal, <p> - parágrafo, <a> - link, <form> - formulário, <img> - imagem.

Exemplo (simplificado):

<h1>Reforma de apartamentos em Tashkent</h1>
<p>Prazo a partir de 14 dias. Medição gratuita.</p>
<a href="/contacts/">Enviar solicitação</a>

O navegador não exibe HTML como código - monta a página com essas instruções. Google e Yandex também usam HTML: o que está em <title>, qual <h1>, se links têm texto.

Tecnologia Papel Analogia
HTML Estrutura e sentido dos blocos Estrutura do prédio
CSS Cores, fontes, espaçamento, responsivo Acabamento e fachada
JavaScript Cliques, carrinho, sliders, chat Elevador, ar-condicionado
PHP / backend Dados do servidor, pedidos, email Instalações ocultas

Importante: site em WordPress, Tilda, Bitrix ou Django ainda entrega HTML ao navegador. O CMS só gera automaticamente. Na aceitação você verifica o resultado, não código manual.

O que verificar na entrega: checklist do dono

1. Títulos e marcação SEO

  • Um <h1> por página - tema principal.
  • Hierarquia H2, H3 - lógica e sequencial.
  • <title> (aba do navegador) - único, com palavra-chave.
  • Meta description - snippet útil, não vazio nem copiado.

Sem código: abra páginas-chave, veja a aba; confira títulos - um principal.

2. Texto vs "imagem com texto"

Preço ou promo só em JPG/PNG - buscador não lê. Para auditoria SEO é alerta vermelho.

Regra: texto importante - em HTML. Imagem - ilustração.

3. Imagens: alt e velocidade

  • Cada <img> com alt descritivo.
  • Logo - alt com nome da empresa.
  • Fotos de produto - não omitir alt.

4. Links

  • "Ligar" → tel:+998..., Telegram → link real.
  • Links internos sem 404.
  • Texto do link significativo.

5. Formulários

  • Campos com name e id.
  • Botão - <button type="submit">.
  • Mensagem clara após envio.
  • Mobile: tel, email nos tipos corretos.

6. Versão mobile

Texto legível, menu funcional, formulário completo. Impacta UX e promoção GEO.

7. Idioma e codificação

  • lang="pt" no <html>.
  • UTF-8 correto.

Semântica: por que tags corretas importam

Tag Uso
<header> Cabeçalho
<nav> Menu
<main> Conteúdo principal
<article> Artigo, notícia
<section> Seção
<footer> Rodapé

Semântica ajuda Google a achar o texto principal. Tudo em <div> - pior para SEO.

Pergunte na entrega: "Conteúdo principal em <main>? Títulos não são divs?"

HTML, CSS e JavaScript na aceitação

Reclamação Provável Quem
"Fonte ou cor feia" CSS Designer
"Botão não clica" JavaScript Frontend
"Google não vê texto" HTML / SSR Dev + SEO
"Email não chega" Backend (PHP) Backend
"No celular quebrou" CSS + HTML Layout

Sem texto na marcação - HTML e conteúdo, não design.

Erros típicos do contratado

  • Mesmo <title> em muitas páginas.
  • H1 genérico em todos os landings.
  • Meta vazio ou Lorem ipsum.
  • Site em construtor sem acesso a textos e meta - dependência.
  • Texto oculto para SEO - risco de penalidade.
  • Página inteira em iframe PDF - fraco para SEO.

Como ver HTML sem programar

  1. Ver código-fonte da página.
  2. DevTools (F12) - aba Elements.
  3. Extensões SEO.
  4. Google Search Console.
  5. Validador W3C - opcional.

Rota de 30 min: home, serviço, contato, uma ficha - title, H1, form, tel, alt.

Quando exigir correção HTML

Situação Ação
Sem title/H1 únicos Antes de assinar
Preço só em PNG Texto em HTML
Form "envia" sem email Backend + HTML
Site branco sem JS Conteúdo em HTML (JavaScript)
Sem alt em produtos Antes de anúncios

Exija resultado de negócio, não W3C perfeito em CMS.

Resumo

HTML é a base invisível julgada por navegador, busca e qualidade do contratado. Entenda HTML/CSS/JS, use checklist, não aceite imagem no lugar de texto, mantenha acesso ao CMS.

HTML ruim custa posições e leads.

Perguntas frequentes

Preciso aprender HTML?

Não no dia a dia - CMS e checklist bastam. Sim no básico se aceita o site e cuida de SEO. 2-3 horas evitam erro de title na home.

HTML vs CSS?

HTML - o quê na página. CSS - como parece. Estrutura - HTML; aparência - CSS.

De onde vem HTML no meu WordPress?

CMS gera HTML automaticamente. Você edita na interface. Veja WordPress, Bitrix e OpenCart.

Como saber se HTML está mal?

Mesmo title everywhere, H1 ausente ou duplicado, texto só em imagem, forms sem labels, links quebrados, sem alt. Use código-fonte, extensão SEO, auditoria SEO.

HTML afeta SEO e vendas?

Sim. Title, H1, texto indexável, alt, forms estáveis no mobile, tel: para ligações. HTML ruim drena tráfego por meses.

Contato