Dominando Títulos HTML: Uma Abordagem Estruturada para Conteúdo Web

Introdução

Os títulos HTML são essenciais para criar uma página web bem estruturada. Eles fornecem uma hierarquia e ajudam os leitores a navegar rapidamente por um site. Neste laboratório, você aprenderá a criar os diferentes níveis de títulos HTML usando as tags <h1> a <h6>.

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 90%. Recebeu uma taxa de avaliações positivas de 89% dos estudantes.

Adicionando o Boilerplate HTML

O primeiro passo é criar um arquivo HTML chamado index.html. Você pode usar qualquer editor de texto, como Notepad, TextEdit ou Sublime Text.

Adicione a estrutura HTML básica ao seu arquivo index.html digitando <!DOCTYPE html> na primeira linha e as tags <html></html> na segunda e última linhas, respectivamente.

<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

Adicionando a Seção Head

Dentro das tags <html>, crie a seção head usando a tag <head>. Dentro da seção head, adicione o título da sua página web usando a tag <title>.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
</html>

Criando a Seção Body

Crie a seção body usando as tags <body></body>. Dentro da seção body, adicione os diferentes níveis de títulos usando as tags <h1> a <h6>.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <h2>First Sub-Heading</h2>
    <h3>Second Sub-Heading</h3>
    <h4>Third Sub-Heading</h4>
    <h5>Fourth Sub-Heading</h5>
    <h6>Fifth Sub-Heading</h6>
  </body>
</html>

Certifique-se de substituir "Main Heading" e os subtítulos com seus próprios títulos relevantes.

Agrupando Títulos usando

Você pode agrupar múltiplos títulos usando a tag <hgroup>. No exemplo abaixo, estamos agrupando os últimos três títulos usando <hgroup>.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <h2>First Sub-Heading</h2>
    <h3>Second Sub-Heading</h3>
    <h4>Third Sub-Heading</h4>
    <hgroup>
      <h4>Fourth Sub-Heading Part 1</h4>
      <h5>Fourth Sub-Heading Part 2</h5>
      <h6>Fourth Sub-Heading Part 3</h6>
    </hgroup>
  </body>
</html>

Salve seu arquivo index.html e abra-o em um navegador web para ver os títulos que você criou.

Resumo

Neste laboratório, você aprendeu como criar títulos HTML usando as tags <h1> a <h6>. Títulos são essenciais para criar uma página web bem estruturada e também ajudam na otimização para mecanismos de busca (SEO - Search Engine Optimization). Lembre-se que cada arquivo HTML deve conter apenas uma tag <h1>, para o título principal da página.

Títulos HTML de Vários Níveis