Passo 1 de 5
Organizar títulos e subtítulos
Marque o título principal, os assuntos equivalentes e suas subdivisões com níveis coerentes de títulos HTML.
Trilha de aprendizado · Nível 2 · Tutorial 1
Organize um texto com títulos, subtítulos e parágrafos, escolhendo a marcação pelo papel de cada trecho, e não pelo tamanho visual das letras.
Organizar títulos e subtítulos
Marque o título principal, os assuntos equivalentes e suas subdivisões com níveis coerentes de títulos HTML. 3 min
Escolher pelo significado, não pela aparência
Escolha o nível de cada título pela relação com o conteúdo, sem usar o tamanho das letras como critério. 2 min
Separar ideias em parágrafos
Use p para marcar blocos de texto, mantendo cada parágrafo separado dos demais e dos títulos. 2 min
Entender espaços e quebras de linha
Preveja como o navegador exibe espaços e quebras de linha e diferencie linhas em branco de parágrafos. 2 min
Organizar e revisar um texto completo
Organize um texto com títulos e parágrafos e revise suas escolhas pela função de cada trecho. 3 min
Passo 1 de 5
Marque o título principal, os assuntos equivalentes e suas subdivisões com níveis coerentes de títulos HTML.
Os elementos h1, h2, h3, h4, h5 e h6 representam seis níveis de títulos.
Na página simples que vamos trabalhar, use:
h1 para o título principal.h2 para os assuntos principais.h3 para subdivisões de um assunto em h2.Os níveis h4 a h6 permitem aprofundar a hierarquia quando necessário. Não é preciso usar todos os seis níveis.
Neste trecho do conteúdo da página, “Plantio” é um assunto principal do guia.
<h1>Guia de jardinagem</h1>
<h2>Plantio</h2>Dica
Lembrete: title identifica a aba do navegador; h1 marca o título principal visível no conteúdo.
No guia de jardinagem, “Escolha das sementes” será uma subdivisão de “Plantio”, que usa h2.
Complete com o nome do elemento: esse novo título deve usar ___.
Ao abrir uma subdivisão, evite pular níveis: depois de h2, use h3, não h4.
Assuntos equivalentes usam o mesmo nível. Por isso, depois de uma subdivisão em h3, você pode voltar a h2 para iniciar outro assunto principal.
“Cuidados” está no mesmo nível de “Plantio”, não é uma subdivisão dele.
<h1>Guia de jardinagem</h1>
<h2>Plantio</h2>
<h3>Escolha das sementes</h3>
<h2>Cuidados</h2>Dica
Observe que h2 é fechado antes de h3 começar. A relação de subdivisão é expressa pelos níveis e pela sequência do conteúdo, não colocando um elemento de título dentro de outro.
A página já começa com <h1>Guia de passeios</h1>. Em seguida vêm, nesta ordem:
Complete cada resposta apenas com o nome do elemento.
O elemento para marcar “Parques” é ___.
O elemento para marcar “Trilhas” é ___.
O elemento para marcar “Museus” é ___.
Passo 2 de 5
Escolha o nível de cada título pela relação com o conteúdo, sem usar o tamanho das letras como critério.
O navegador costuma exibir os níveis de título com tamanhos diferentes. Mas essa aparência padrão não deve guiar sua escolha: o nível comunica a relação do título com o conteúdo, não o tamanho desejado das letras.
Exemplo
“Guia da biblioteca” é o título principal da página. Achar suas letras grandes demais não justifica trocar h1 por h2: essa troca mudaria seu nível na estrutura, não apenas sua aparência.
No “Guia da biblioteca”, “Serviços” usa h2. “Empréstimos” é uma subdivisão desse assunto, mas você gostaria de letras maiores. Qual escolha respeita o conteúdo?
Antes de escolher um nível, pergunte: este trecho realmente nomeia a página, um assunto ou uma subdivisão? Uma frase comum não se torna título só porque você quer destacá-la.
Exemplo
Dentro do assunto “Horários”, a frase “A biblioteca fecha às 18h” apenas informa um horário. Nesse contexto, usar h2 só para deixá-la maior atribuiria a ela uma função de título que não tem.
“Serviços” e “Horários” são assuntos principais equivalentes no “Guia da biblioteca”. “Serviços” usa h2. Alguém sugere h3 para “Horários” apenas para diminuir as letras. Qual nível você usaria e por quê?
Escreva pelo menos 15 caracteres (0/15).
Passo 3 de 5
Use p para marcar blocos de texto, mantendo cada parágrafo separado dos demais e dos títulos.
O elemento p representa um parágrafo. Ele reúne uma ideia ou um conjunto de frases relacionadas: não é necessário criar um p para cada frase.
Nas práticas deste tutorial, escreva sempre a abertura <p> e o fechamento </p>.
As duas frases descrevem o mesmo espaço da biblioteca.
<p>A biblioteca tem um espaço infantil. Nesse espaço, há livros ilustrados.</p>Cada frase de um texto deve ter seu próprio elemento p, mesmo quando as frases desenvolvem a mesma ideia.
Parágrafos sucessivos são elementos separados: feche um p antes de abrir o próximo, sem colocar um dentro do outro.
O título identifica o assunto; os parágrafos desenvolvem o texto. Por isso, o título também fica fora dos elementos p.
O primeiro parágrafo apresenta o espaço infantil. O segundo informa o horário.
<h1>Biblioteca do bairro</h1>
<p>A biblioteca tem um espaço infantil. Nesse espaço, há livros ilustrados.</p>
<p>A biblioteca abre de segunda a sábado, das 9h às 18h.</p>O título já está marcado. Faltam os parágrafos.
<h2>Oficina de desenho</h2>
A oficina explora desenhos com lápis. Os participantes praticam traços e sombras.
As inscrições ficam abertas até sexta-feira.Reescreva o trecho com um parágrafo para as duas frases sobre a atividade e outro para a informação sobre inscrições. Use <p> e </p>, sem alterar o título nem as frases.
Escreva pelo menos 30 caracteres (0/30).
Passo 4 de 5
Preveja como o navegador exibe espaços e quebras de linha e diferencie linhas em branco de parágrafos.
No fluxo normal de texto HTML, sequências de espaços comuns, tabulações e quebras de linha no código normalmente viram um único espaço entre as palavras. Uma linha em branco dentro de um p não cria outro parágrafo.
<p>O museu abre
às nove.
A entrada é gratuita.</p>Exemplo
O museu abre às nove. A entrada é gratuita.
As duas frases aparecem no mesmo parágrafo, com um espaço entre as palavras e sem reproduzir a linha em branco do código.
Relacione cada trecho à sua exibição no fluxo normal de texto HTML.
Toque em um item e depois no par correspondente.
Você pode distribuir o conteúdo de um p em várias linhas no código. Essa organização pode ajudar na leitura do arquivo sem mudar a estrutura do parágrafo exibido.
<p>
O museu abre às nove.
A entrada é gratuita.
</p>Dica
O navegador pode levar parte do texto para a linha seguinte conforme a largura disponível. Essa quebra automática muda a quantidade de linhas na tela, mas não cria outro parágrafo.
<p>A exposição reúne fotografias antigas.
Os ingressos estão disponíveis na recepção.</p>Por que a linha em branco não basta para criar dois parágrafos? Explique o que precisa mudar na marcação.
Passo 5 de 5
Organize um texto com títulos e parágrafos e revise suas escolhas pela função de cada trecho.
Organize o conteúdo de uma página sobre um clube de leitura. A estrutura do documento já está pronta: você escreverá apenas o fragmento que ficará entre as tags abaixo.
Depois, revise se a marcação representa a organização das ideias, sem depender da aparência das letras.
<body>
</body>Título principal: Clube de leitura
Assunto: Encontros
Texto: O grupo se reúne aos sábados.
Subdivisão de Encontros: Local
Texto: A conversa acontece na biblioteca.
Assunto: Participação
Primeiro parágrafo: Os encontros são abertos. Não é preciso se inscrever.
Segundo parágrafo: Você pode sugerir livros para o próximo mês.
Marque o conteúdo acima usando um h1, dois h2, um h3 e os parágrafos necessários, com abertura e fechamento explícitos.
Mantenha juntas as duas frases do primeiro parágrafo de “Participação”. Não copie os rótulos de orientação, como “Assunto” e “Texto”, nem repita as tags de body.
Explique brevemente:
Resumo
Parabéns! Você concluiu: Títulos e parágrafos para organizar o texto
Você concluiu “Títulos e parágrafos para organizar o texto”. Ao organizar seu próximo texto, escolha a marcação pelo papel de cada trecho e revise a hierarquia dos títulos e a separação dos parágrafos.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
