1. Estrutura Básica de um Documento HTML

Todo documento HTML começa com a declaração <!DOCTYPE html>, que define o tipo de documento e a versão do HTML.

O documento é envolto pela tag <html>, que contém duas seções principais: <head> e <body>.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título da Página</title>
</head>
<body>
    <h1>Olá, Mundo!</h1>
    <p>Este é um parágrafo de exemplo.</p>
</body>
</html>

2. Semântica HTML

Um especialista em HTML prioriza o uso de elementos semânticos para melhorar a acessibilidade e a SEO. Isso significa usar tags como <header>, <nav>, <main>, <section>, <article>, <footer>, etc., para descrever o conteúdo de forma significativa.

<header>
    <h1>Meu Site</h1>
    <nav>
        <ul>
            <li><a href="#sobre">Sobre</a></li>
            <li><a href="#servicos">Serviços</a></li>
            <li><a href="#contato">Contato</a></li>
        </ul>
    </nav>
</header>
<main>
    <section id="sobre">
        <h2>Sobre Nós</h2>
        <p>Informações sobre a empresa.</p>
    </section>
    <section id="servicos">
        <h2>Nossos Serviços</h2>
        <p>Descrição dos serviços oferecidos.</p>
    </section>
</main>
<footer>
    <p>© 2023 Meu Site</p>
</footer>

3. Acessibilidade

Um especialista em HTML sempre considera a acessibilidade, garantindo que o conteúdo seja acessível a todos os usuários, incluindo aqueles com deficiências. Isso inclui o uso de atributos como alt em imagens, aria-* para melhorar a acessibilidade de elementos interativos, e a estruturação correta do conteúdo.

<img src="imagem.jpg" alt="Descrição da imagem para leitores de tela">
<button aria-label="Fechar">X</button>

4. Formulários HTML

Formulários são uma parte essencial de muitos sites. Um especialista em HTML sabe como estruturar formulários de forma eficiente, usando elementos como <form>, <input>, <label>, <textarea>, <select>, e <button>.

<form action="/enviar" method="post">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="mensagem">Mensagem:</label>
    <textarea id="mensagem" name="mensagem" required></textarea>

    <button type="submit">Enviar</button>
</form>

5. Meta Tags e SEO

Um especialista em HTML entende a importância das meta tags para o SEO (Search Engine Optimization). Isso inclui a definição de meta charset, meta name="description", meta name="keywords", e outras tags que ajudam os motores de busca a entender o conteúdo da página.

<meta name="description" content="Descrição do site para motores de busca">
<meta name="keywords" content="HTML, CSS, JavaScript, Web Development">
<meta name="author" content="Seu Nome">

6. Boas Práticas

Validação: Sempre validar o código HTML usando ferramentas como o W3C Validator para garantir que o código esteja livre de erros.

Compatibilidade: Garantir que o HTML seja compatível com diferentes navegadores e dispositivos.

Manutenção: Escrever código limpo e bem organizado, com comentários quando necessário, para facilitar a manutenção.

7. Integração com CSS e JavaScript

Um especialista em HTML sabe como integrar corretamente CSS e JavaScript no documento HTML, usando as tags <link> e <script>.

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

8. HTML5 APIs

Um especialista em HTML está familiarizado com as APIs do HTML5, como localStorage, sessionStorage, geolocation, canvas, video, e audio, que permitem criar experiências interativas e dinâmicas.

<canvas id="meuCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById('meuCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(0, 0, 150, 75);
</script>

9. Responsividade

Um especialista em HTML entende a importância de criar layouts responsivos que se adaptem a diferentes tamanhos de tela. Isso envolve o uso de meta tags como viewport e a integração com CSS para criar designs flexíveis.

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

10. Performance

Um especialista em HTML considera a performance ao criar páginas web, minimizando o uso de recursos pesados, otimizando imagens e usando técnicas como lazy loading para melhorar o tempo de carregamento.

<img src="imagem.jpg" loading="lazy" alt="Descrição da imagem">

Comandos HTML

Tag	Descrição
<!DOCTYPE html>	Define o tipo de documento como HTML5.
<head>	Contém metadados sobre o documento, como título, links para CSS e scripts.
<title>	Define o título da página, exibido na aba do navegador.
<body>	Contém o conteúdo visível da página.
<h1>	Define um cabeçalho de nível 1 (título principal).
<h2>	Define um cabeçalho de nível 2 (subtítulo).
<h3>	Define um cabeçalho de nível 3.
<h4>	Define um cabeçalho de nível 4.
<h5>	Define um cabeçalho de nível 5.
<h6>	Define um cabeçalho de nível 6.
<p>	Define um parágrafo de texto.
<a>	Cria um link para outra página ou recurso.
<img>	Exibe uma imagem na página.
<ul>	Cria uma lista não ordenada (com marcadores).
<ol>	Cria uma lista ordenada (com números ou letras).
<li>	Define um item de lista (usado dentro de <ul> ou <ol>).
<div>	Cria uma divisão ou seção genérica no documento.
<br>	Cria uma linha de quebra de texto (sem fechamento).
<hr>	Cria uma linha horizontal (usada para separar conteúdo).
<form>	Define um formulário para coletar dados do usuário.
<input>	Cria um campo de entrada de texto, e-mail, senha, etc.
<button>	Define um botão clicável.
<textarea>	Cria uma área de texto para múltiplas linhas de entrada.
<select>	Define uma lista suspensa (dropdown).
<option>	Define uma opção em uma lista suspensa (usada dentro de <select>).
<fieldset>	Agrupa elementos em um formulário e adiciona uma legenda.
<legend>	Define a legenda de um <fieldset>.
<table>	Cria uma tabela.
<tr>	Define uma linha em uma tabela.
<th>	Define uma célula de cabeçalho em uma tabela.
<td>	Define uma célula de dados em uma tabela.
<thead>	Define o cabeçalho de uma tabela.
<tbody>	Define o corpo de uma tabela.
<tfoot>	Define o rodapé de uma tabela.
<figure>	Cria um contêiner para conteúdo multimídia, como vídeos ou áudios.
<figcaption>	Define uma legenda para um <figure>.
<blockquote>	Cria um bloco de citação.
<q>	Define uma citação curta.
<em>	Define texto em itálico (ênfase).
<strong>	Define texto em negrito (importância).
<u>	Define texto sublinhado.
<s>	Define texto riscado.
<small>	Define texto pequeno (comentários ou notas).
<code>	Define texto como código de computador.
<pre>	Define texto pré-formatado (preserva espaços e quebras de linha).
<link>	Cria um link para um arquivo CSS externo.
<script>	Define um script JavaScript dentro do documento.
<style>	Define um estilo CSS dentro do documento.
<!-- -->	Define um comentário (não é exibido no navegador).
<header>	Define o cabeçalho da página ou seção.
<footer>	Define o rodapé da página ou seção.
<main>	Define a seção principal do conteúdo.
<article>	Define uma seção independente do conteúdo.
<section>	Define uma seção genérica do conteúdo.
<nav>	Define uma barra de navegação.
<aside>	Define conteúdo adicional ou relacionado ao conteúdo principal.
<details>	Define detalhes que podem ser expandidos/recolhidos pelo usuário.
<summary>	Define o resumo visível de um <details>.
<video>	Define um vídeo incorporado na página.
<audio>	Define um áudio incorporado na página.
<track>	Define uma legenda para um vídeo ou áudio.
<iframe>	Define um contêiner para conteúdo externo, como um mapa ou vídeo do YouTube.
<input type="date">	Define um campo de entrada de data.
<input type="color">	Define um campo de entrada de cor.
<input type="email">	Define um campo de entrada de e-mail.
<input type="password">	Define um campo de entrada de senha.
<input type="number">	Define um campo de entrada de número.
<input type="file">	Define um campo de entrada de arquivo.
<input type="search">	Define um campo de entrada de pesquisa.
<input type="url">	Define um campo de entrada de URL.
<input type="range">	Define um campo de entrada de intervalo (slider).
<input type="time">	Define um campo de entrada de tempo.
<input type="datetime-local">	Define um campo de entrada de data e hora.