1. Estrutura Básica de um Documento HTML:

Um documento HTML típico começa com a declaração do tipo de documento, seguido pela estrutura básica que inclui <html>, <head>, e <body>.

2. Organizando o Conteúdo com <header>, <nav>, <section>, e <footer>:

Essas tags ajudam a organizar o conteúdo da página de forma semântica, tornando o site mais acessível e melhorando a SEO.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Exemplo de Página</title>
</head>

<body>
    <h1>Bem-vindo ao nosso site!</h1>
    <p>Este é um exemplo de parágrafo no corpo do documento.</p>
</body>

</html>

3. Criando Listas com <ul>, <ol>, e <li>

Listas são usadas para agrupar um conjunto de itens relacionados, seja em formato numerado (<ol>) ou com marcadores (<ul>).

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Exemplo de Página com listas</title>
</head>

<body>
    <h3>Nossos Serviços</h3>
    <ul>
        <li>Design Web</li>
        <li>Desenvolvimento de Aplicativos</li>
        <li>Marketing Digital</li>
    </ul>
    <h3>Passos para Contratação</h3>
    <ol>
        <li>Entre em contato conosco.</li>
        <li>Agende uma reunião.</li>
        <li>Inicie seu projeto!</li>
    </ol>
</body>

</html>

4. Utilizando <div> e <span> para Agrupamento e Estilização

<div> é frequentemente usado para agrupar blocos de conteúdo ou seções para fins de estilização ou script, enquanto <span> é usado para estilizar partes específicas do texto.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Exemplo de Página com 'div' e 'span'</title>
</head>

<body>
    <div class="card">
        <h4>Produto 1</h4>
        <p>Descrição do produto. <span class="destaque">Em promoção!</span></p>
    </div>
</body>

</html>

5. Formulários com <form>, <input>, e <button>

Formulários são essenciais para interação com o usuário, permitindo a entrada de dados.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Exemplo de Página com Fomulário</title>
</head>

<body>
    <form action="/submit-form" method="POST">
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <button type="submit">Enviar</button>
    </form>
</body>

</html>