Criando um Container de Conteúdo Principal em HTML - Guia Completo

Introdução

Em HTML, a tag <main> é usada para representar o conteúdo principal ou dominante do documento. É uma tag recém-introduzida no HTML5 e é tipicamente escrita dentro da tag <body>. O conteúdo da tag <main> deve ser único e diretamente relacionado ao tópico central do documento. É um conceito semelhante a um landmark (marco), que identifica rapidamente e facilita a navegação em um documento grande.

Neste laboratório, aprenderemos como usar a tag <main> para criar um contêiner de conteúdo principal em HTML.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 95%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Configurando o arquivo HTML

Crie um novo arquivo e nomeie-o como index.html. Abra-o no seu editor de código preferido.

Na seção <head> do arquivo HTML, adicione o seguinte código:

<!doctype html>
<html>
  <head>
    <title>Criando um Contêiner de Conteúdo Principal em HTML</title>
  </head>
  <body></body>
</html>

Adicionando um Cabeçalho e Rodapé

Para deixar nossa página web com uma aparência completa, adicionaremos um cabeçalho e um rodapé.

Adicione o seguinte código entre as tags <body> do seu arquivo HTML:

<header>
  <h1>Meu Site</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Sobre Nós</a></li>
      <li><a href="#">Contato</a></li>
    </ul>
  </nav>
</header>

<main>
  <p>Bem-vindo ao meu site. Esta é a área de conteúdo principal.</p>
</main>

<footer>
  <p>&copy;2021 Meu Site. Todos os direitos reservados.</p>
</footer>

O código acima define um cabeçalho com um menu de navegação, uma tag <main> e um rodapé.

Adicionando Conteúdo à Tag Principal (Main)

Agora que configuramos nosso cabeçalho e rodapé, podemos adicionar conteúdo à tag main.

Adicione o seguinte código entre as tags <main>:

<main>
  <h2>Sobre Nós</h2>
  <p>
    Somos uma empresa especializada em serviços de desenvolvimento web. Nossa
    equipe é composta por desenvolvedores web experientes que podem ajudá-lo a
    criar um site que ajudará seu negócio a crescer.
  </p>
  <h2>Nossos Serviços</h2>
  <ul>
    <li>Web Design</li>
    <li>Desenvolvimento Web</li>
    <li>Otimização para Mecanismos de Busca (SEO)</li>
    <li>Marketing em Mídias Sociais</li>
  </ul>
  <h2>Nosso Portfólio</h2>
  <p>Aqui estão alguns dos sites que criamos:</p>
  <ul>
    <li><a href="#">Site 1</a></li>
    <li><a href="#">Site 2</a></li>
    <li><a href="#">Site 3</a></li>
  </ul>
</main>

Revisando o Código HTML Final

Após adicionar a área de conteúdo principal, seu código HTML deve se parecer com isto:

<!doctype html>
<html>
  <head>
    <title>Criando um Container de Conteúdo Principal em HTML</title>
  </head>
  <body>
    <header>
      <h1>Meu Site</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Sobre Nós</a></li>
          <li><a href="#">Contato</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h2>Sobre Nós</h2>
      <p>
        Somos uma empresa especializada em serviços de desenvolvimento web.
        Nossa equipe é composta por desenvolvedores web experientes que podem
        ajudá-lo a criar um site que ajudará seu negócio a crescer.
      </p>
      <h2>Nossos Serviços</h2>
      <ul>
        <li>Web Design</li>
        <li>Desenvolvimento Web</li>
        <li>Otimização para Mecanismos de Busca (SEO)</li>
        <li>Marketing em Mídias Sociais</li>
      </ul>
      <h2>Nosso Portfólio</h2>
      <p>Aqui estão alguns dos sites que criamos:</p>
      <ul>
        <li><a href="#">Site 1</a></li>
        <li><a href="#">Site 2</a></li>
        <li><a href="#">Site 3</a></li>
      </ul>
    </main>

    <footer>
      <p>&copy;2021 Meu Site. Todos os direitos reservados.</p>
    </footer>
  </body>
</html>

Resumo

Neste laboratório, aprendemos como usar a tag <main> para criar um container de conteúdo principal em um documento HTML. Criamos um cabeçalho, uma área de conteúdo principal e um rodapé com conteúdos de exemplo. Lembre-se que o conteúdo da tag <main> deve ser único e diretamente relacionado ao tópico central do documento. Ao usar a tag <main>, podemos criar uma seção do site facilmente identificável que ajudará os usuários a navegar com facilidade.