Boas Práticas e Publicação

Fazer aparecer é básico. Entregar profissionalmente é domínio.

Boas práticas em HTML unem semântica, acessibilidade, SEO, performance, organização, validação e manutenção. Publicar profissionalmente não é jogar arquivos na internet: é entregar um site testado, versionado, validado e confiável.

• Semântica: tag certa para o significado certo.
• Acessibilidade: todos conseguem usar.
• SEO: buscadores entendem.
• Performance: carrega rápido.
• Organização: fácil de manter.
• Validação: sem erros estruturais graves.
• Publicação: versionado e online com confiança.

Qualidade HTML antes de publicar

O documento final precisa ter estrutura semântica clara, títulos em hierarquia correta, links seguros, imagens com alternativas textuais e formulários com labels associados.

<header>
  <nav aria-label="Navegação principal">
    <a href="#conteudo">Ir para o conteúdo</a>
  </nav>
</header>

<main id="conteudo">
  <section aria-labelledby="titulo-secao">
    <h2 id="titulo-secao">Seção temática</h2>
    <article>
      <h3>Artigo interno</h3>
      <p>Conteúdo independente dentro da seção.</p>
    </article>
  </section>

  <aside>Conteúdo complementar.</aside>
</main>

<footer>Encerramento da página.</footer>

• Use apenas um main por página.
• Use um h1 soberano e hierarquia lógica com h2 e h3.
• Não use section sem tema claro.
• Use links externos com target="_blank" e rel="noopener noreferrer".
• Use alt descritivo em imagem de conteúdo.
• Use alt="" em imagem puramente decorativa.
• Associe label ao input com for e id.

<a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">
  Acessar documentação MDN
</a>

<img src="images/grafico-html5.png" alt="Gráfico de progresso do módulo HTML5">
<img src="images/divisor-decorativo.svg" alt="">

<label for="email">E-mail</label>
<input id="email" name="email" type="email">

Checklist de acessibilidade antes de publicar

Um site só está pronto quando pode ser usado por teclado, leitores de tela, usuários com baixa visão e pessoas que não dependem de mouse ou percepção perfeita de cores.

• A navegação por teclado funciona com Tab.
• O foco visível não foi removido.
• O contraste entre texto e fundo é suficiente.
• Imagens informativas têm alt útil.
• Formulários têm labels conectados.
• Mensagens dinâmicas usam aria-live.
• Erros não dependem apenas de cor vermelha.
• Botões têm texto ou aria-label.

<button type="button" aria-label="Fechar menu">×</button>

<a href="edital.pdf">Baixar edital de matrícula em PDF</a>

<label for="nome">Nome completo</label>
<input id="nome" name="nome" type="text">

<p id="feedback" aria-live="polite">
  Aguardando preenchimento do formulário.
</p>

Head profissional antes da publicação

SEO técnico começa no head, mas também depende de URLs limpas, nomes de arquivos profissionais, canonical correto, Open Graph e dados estruturados.

<title>Projeto Final HTML5 Publicável | Mateus Ernandes</title>
<meta name="description" content="Projeto final HTML5 com semântica, acessibilidade, SEO técnico, performance, organização e publicação profissional.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://seusite.com/projeto-final-html5-publicavel.html">

<meta property="og:title" content="Projeto Final HTML5 Publicável">
<meta property="og:description" content="Página final com HTML5 profissional, acessível, otimizada e pronta para publicação.">
<meta property="og:image" content="https://seusite.com/assets/og-projeto-final.jpg">
<meta property="og:url" content="https://seusite.com/projeto-final-html5-publicavel.html">

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "Projeto Final HTML5 Publicável"
}
</script>

Pastas, arquivos, imagens, scripts e validação

Um projeto publicável precisa de pastas claras, nomes sem espaços e sem acentos, CSS e JavaScript externos, imagens otimizadas, scripts com defer, teste no DevTools, validação HTML e teste responsivo.

meu-projeto/
  index.html
  assets/
    styles/
      style.css
    scripts/
      app.js
    images/
      logo-dev-mestre.png

<link rel="stylesheet" href="assets/styles/style.css">
<script src="assets/scripts/app.js" defer></script>

Checklist pré-publicação

• Arquivos organizados por função.
• Nomes em minúsculas, sem acentos e com hífens.
• CSS não está gigante dentro do HTML sem necessidade.
• JavaScript não está gigante dentro do HTML.
• Imagens estão otimizadas.
• Scripts não bloqueiam o carregamento.
• Layout foi testado em mobile.
• HTML foi validado.
• Console do DevTools está sem erros vermelhos.
• Links e imagens não estão quebrados.

git status
git add .
git commit -m "aula-40: cria pagina final html5 publicavel"
git push

15 perguntas com gabarito

1. O que significa HTML? Linguagem de Marcação de Hipertexto.
2. Quem criou o HTML? Tim Berners-Lee.
3. Qual a função do Doctype? Informar o modo HTML5 ao navegador.
4. Onde ficam os metadados? No head.
5. Diferença entre div e span? Div é bloco; span é inline.
6. Para que serve alt? Acessibilidade e descrição de imagem.
7. O que faz target="_blank"? Abre link em nova aba.
8. Qual tag define o conteúdo principal? main.
9. Diferença entre b e strong? b é visual; strong indica importância.
10. Para que serve viewport? Responsividade em dispositivos móveis.
11. O que é Schema.org? Vocabulário para dados estruturados.
12. Como associar label a input? Com for no label e id no input.
13. O que é FTP? Protocolo de transferência de arquivos.
14. HTML é linguagem de programação? Não, é linguagem de marcação.
15. Como indicar URL oficial? Com link rel="canonical".

Registre a conclusão da Aula 40

git status
git add .
git commit -m "aula-40: cria pagina final html5 publicavel"
git push

• git status: verifica os arquivos alterados.
• git add .: prepara a aula final para versionamento.
• git commit: registra o marco de conclusão do HTML5.
• git push: envia a evidência para o repositório remoto.