Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

 

Um dos principais trabalhos do HTML é dar estrutura de texto e significado também conhecido como semantics) , para que um navegador possa exibilo corretamente. Este artigo explica a forma como HTML pode ser usado para estruturar uma página de texto, adicionando títulos e parágrafos, enfatizando palavras, criando listas e muito mais.

Pré-requisitos: Familiaridade básica em HTML, tal como coberto  Começando com o HTML.
Objetivo: Aprenda como marcar uma página básica de texto para dar-lhe estrutura e significado - incluindo parágrafos, títulos, listas, ênfase e citações.

O básico: cabeçalhos e parágrafos

O texto mais estruturado é composto por títulos e parágrafos, independentemente de estar lendo uma história, um jornal, um livro de texto da faculdade, uma revista, etc.

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

 

O conteúdo estruturado torna a experiência de leitura mais fácil e mais agradável.

Em HTML, cada parágrafo deve ser envolvido em um elemento <p> , assim:

<p>Eu sou um parágrafo, oh sim, eu sou.</p>

Cada título deve ser envolvido em um elemento de título:

<h1>Eu sou o título da história.</h1>

Existem seis elementos de título - <h1>, <h2>, <h3>, <h4>, <h5> e <h6> . Cada elemento representa um nível diferente de conteúdo no documento; <h1> representa o título principal, <h2> representa subtítulos, <h3> representa sub-subtítulos, e assim por diante.

Implementando hierarquia estrutural

Como exemplo, em uma história, <h1> representaria o título da história, <h2> representaria o título de cada capítulo e <h3> representaria sub-seções de cada capítulo, e assim por diante.

<h1>O furo de esmagamento</h1>

<p>Por Chris Mills</p>

<h2>Capítulo 1: A noite escura</h2>

<p>Era uma noite escura. Em algum lugar, uma coruja hooted. A chuva bateu no ...</p>

<h2>Capítulo 2: o eterno silêncio</h2>

<p>Nosso protagonista não podia tanto como um sussurro da figura sombria ...</p>

<h3>O espectro fala</h3>

<p>Mais de horas passaram, quando, de repente, o espectro sentou-se certo e exclamou: "Tenha piedade da minha alma!"</p>

É realmente importante que os elementos envolvidos representam, desde que a hierarquia faça sentido. Você só precisa ter em mente algumas das melhores práticas ao criar tais estruturas:

  • De preferência, você deve usar apenas um <h1> por página - este é o título do nível superior, e todos os outros se sentem abaixo desta na hierarquia.
  • Certifique-se de usar os títulos na ordem correta na hierarquia. Não use <h3> para representar subtítulos, seguido de <h2>para representar sub-subtítulos - isso não faz sentido e levará a resultados estranhos.
  • Dos seis níveis de título disponíveis, você deve tentar usar mais de três por página, a menos que você sinta que é necessário. Documentos com muitos níveis (ou seja, uma hierarquia de títulos profundos) tornam-se difíceis de navegar. Em tais ocasiões, é aconselhável espalhar o conteúdo em várias páginas, se possível.

Por que precisamos de estrutura?

Para responder a esta pergunta, dê uma olhada em text-start.html - o ponto de partida do nosso exemplo em execução para este artigo (uma boa receita de hummus.) Você deve salvar uma cópia deste arquivo em sua máquina local, como você vai Preciso dos exercícios mais tarde. O corpo deste documento atualmente contém vários itens - eles não são marcados de forma alguma, mas eles são separados por setas (Enter / Return pressionado para ir para a próxima linha).

No entanto, quando você abre o documento em seu navegador, você verá que o texto aparece como um grande pedaço!

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

Isso ocorre porque não há elementos para dar a estrutura de conteúdo, então o navegador não sabe o que é um título e o que é um parágrafo. Além disso:

  • Os usuários que olham para uma página da Web tendem a digitalizar rapidamente para encontrar conteúdo relevante, muitas vezes apenas lendo os títulos para começar (normalmente passamos um tempo muito curto em uma página da web). Se eles não conseguem ver nada útil dentro de alguns segundos, eles provavelmente ficarão frustrados e irão para outro lugar.
  • Os mecanismos de pesquisa que indexam sua página consideram o conteúdo dos títulos como palavras-chave importantes para influenciar os rankings de pesquisa da página. Sem cabeçalhos, sua página irá funcionar mal em termos de SEO (Search Engine Optimization).
  • As pessoas gravemente deficientes visuais muitas vezes não lê páginas da web; Eles os escutam em vez disso. Isso é feito com um software chamado screen reader. Este software fornece formas de obter acesso rápido a determinado conteúdo de texto. Entre as várias técnicas utilizadas, elas fornecem um esboço do documento lendo os títulos, permitindo que seus usuários encontrem as informações que precisam rapidamente. Se os títulos não estiverem disponíveis, eles serão obrigados a ouvir todo o documento lido alto.
  • Para criar um estilo de conteúdo com CSS, ou fazer coisas interessantes com "JavaScript", você precisa ter elementos que envolvam o conteúdo relevante, o CSS / JavaScript pode efetivamente segmentá-lo.

Nós, portanto, precisamos dar o nosso conteúdo marcação estrutural.

Aprendizagem ativa: Dando nossa estrutura de conteúdo

Vamos pular diretamente com um exemplo ao vivo. No exemplo abaixo, adicione elementos ao texto bruto no campo de Entrada para que ele apareça como um título e dois parágrafos no campo Saída.

Se você cometer um erro, você sempre pode reiniciá-lo usando o botão Redefinir. Se você ficar preso, pressione o botão Mostrar solução para ver a resposta.

Por que precisamos de semântica?

A semântica é baseada em todos os lados de nós - contamos com experiência anterior para nos dizer qual é a função dos objetos comuns; Quando vemos algo, sabemos qual será a sua função. Então, por exemplo, esperamos que um semáforo vermelho signifique "parar" e um semáforo verde para significar "ir". As coisas podem ficar complicadas muito rapidamente se a semântica errada for aplicada (os países usam vermelho para significar "ir"? Espero que não).

Na mesma linha, precisamos ter certeza de que estamos usando os elementos corretos, dando ao nosso conteúdo o significado, função ou aparência corretos. Nesse contexto, o elemento  <h1> também é um elemento semântico, que dá o texto que envolve o papel (ou significado) de "um título de nível superior em sua página".

<h1>Este é um título de nível superior</h1>

Por padrão, o navegador irá dar-lhe um tamanho de fonte grande para fazer com que pareça um título (embora você possa estilo para se parecer com qualquer coisa que você quisesse usar CSS). Mais importante ainda, seu valor semântico será usado de várias maneiras, por exemplo, por mecanismos de pesquisa e leitores de tela (como mencionado acima).

Por outro lado, você pode fazer com que qualquer elemento pareça um título de nível superior. Considere o seguinte:

<span style="font-size: 32px; margin: 21px 0;">Este é um título de nível superior?</span>

Este é um elemento <span>. Não tem semântica. Você usa isso para embrulhar conteúdo quando deseja aplicar o CSS (ou fazer algo com JavaScript) sem dar-lhe nenhum significado extra (você encontrará mais sobre estes mais tarde no curso). Nós aplicamos alguns CSS para fazê-lo parecer um título de nível superior, mas como não tem valor semântico, ele não receberá nenhum dos benefícios extras descritos acima. É uma boa idéia usar o elemento HTML relevante para o trabalho.

Listas

Agora voltemos nossa atenção para as listas. As listas estão em toda parte da vida - da sua lista de compras à lista de instruções que você seguiu inconscientemente para chegar à sua casa todos os dias, para as listas das instruções que você está seguindo nesses tutoriais! As listas também estão na Web e temos três tipos diferentes de preocupações.

Não ordenado

As listas não ordenadas são usadas para marcar listas de itens para os quais a ordem dos itens não importa - vamos pegar uma lista de compras como um exemplo.

leite
ovos
pão
homus

Toda lista desordenada começa com um <ul> - isso envolve todos os itens da lista:

<ul>
leite
ovos
pão
homus
</ul>

O último passo é envolver cada item da lista em um elemento <li> (elemento da lista):

<ul>
  <li>leite</li>
  <li>ovos</li>
  <li>pão</li>
  <li>homus</li>
</ul>

Aprendizagem ativa: Marcando uma lista desordenada

Tente editar a amostra ao vivo abaixo para criar sua própria lista não ordenada HTML.

Lista Ordenada

As listas ordenadas são listas em que a ordem dos itens é importante - vamos seguir um conjunto de instruções como exemplo:

Dirija até o final da estrada
Vire à direita
Vá em frente nas duas primeiras rotundas
Vire à esquerda na terceira rotatória
A escola fica à sua direita, a 300 metros da estrada

A estrutura de marcação é a mesma que para as listas não ordenadas, exceto que você deve conter os itens da lista em um elemento <ol>, em vez de <ul>:

<ol>
  <li>Dirija até o final da estrada</li>
  <li>Vire à direita</li>
  <li>Vá em frente nas duas primeiras rotundas</li>
  <li>Vire à esquerda na terceira rotatória</li>
  <li>A escola fica à sua direita, a 300 metros da estrada</li>
</ol>

Aprendizagem ativa: Marcando uma lista ordenada

Tente editar a amostra ao vivo abaixo para criar sua própria lista ordenada por HTML.

Aprendizagem ativa: marcando nossa página de receita

Então, neste ponto do artigo, você tem todas as informações necessárias para marcar nosso exemplo de página de receita. Você pode optar por salvar uma cópia local do nosso arquivo inicial de  text-start.html e fazer o trabalho lá, ou fazê-lo no exemplo editável abaixo. Fazê-lo localmente provavelmente será melhor, pois então você conseguirá salvar o trabalho que está fazendo, enquanto que se o preencher no exemplo editável, ele será perdido na próxima vez que você abrir a página. Ambos têm prós e contras.

Se você ficar preso, você sempre pode pressionar o botão Mostrar solução, ou confira nosso exemplo de  text-complete.html em nosso repositório github.

Listas de aninhamento

É perfeitamente adequado aninhar uma lista dentro de outra. Você pode querer ter algumas sub-listas sentadas abaixo de uma lista de nível superior. Vamos pegar a segunda lista do nosso exemplo de receita:

<ol>
  <li>Remova a pele do alho e corte grosseiramente.</li>
  <li>Remova todas as sementes e pedal da pimenta e corte grosseiramente.</li>
  <li>Adicione todos os ingredientes a um processador de alimentos.</li>
  <li>Processe todos os ingredientes em uma pasta.</li>
  <li>Se você quer um hummus grosso "grosso", processe-o por um curto período de tempo.</li>
  <li>Se você quer um hummus suave, processe-o por mais tempo.</li>
</ol> 

Uma vez que as duas últimas listas estão muito intimamente relacionadas com a anterior (elas lêem como sub-instruções ou escolhas que se encaixam abaixo dessa lista), pode fazer sentido aninhá-las dentro de sua própria lista desordenada e colocar essa lista dentro da atualidade quarta lista. Isso pareceria assim:

<ol>
  <li> Remova a pele do alho e corte grosseiramente.</li>
   <li>Remova todas as sementes e haste da pimenta e corte grosseiramente.</li>
   <li>Adicione todos os ingredientes a um processador de alimentos.</li>
   <li>Processe todos os ingredientes em uma pasta.
     <ul>
       <li>Se você quer um hummus grosso "grosso", processe-o por um curto período de tempo.</li>
       <li>Se você quer um hummus suave, processe-o por mais tempo.</li>
    </ul>
  </li>
</ol>

Tente voltar ao exemplo de aprendizagem ativo anterior e atualizar a segunda lista assim.

Ênfase e importância

Na linguagem humana, muitas vezes enfatizamos certas palavras para alterar o significado de uma frase, e muitas vezes queremos marcar certas palavras como importantes ou diferentes de alguma forma. O HTML fornece vários elementos semânticos que nos permitem marcar o conteúdo textual com esses efeitos, e nesta seção, vamos ver alguns dos mais comuns.

Ênfase

Quando queremos acrescentar ênfase na linguagem falada, enfatizamos certas palavras, alterando sutilmente o significado do que estamos dizendo. Da mesma forma, em linguagem escrita tendemos a enfatizar as palavras colocando-as em itálico. Por exemplo, as seguintes duas frases têm significados diferentes.

Estou feliz que você não chegou atrasado.

Estou feliz que você não chegou atrasado.

A primeira frase parece genuinamente aliviada de que a pessoa não estava atrasada. Em contraste, a segunda parece ser sarcástica ou passiva-agressiva, expressando aborrecimento que a pessoa chegou um pouco atrasada.

Em HTML usamos o elemento de ênfase <em> para marcar tais instâncias. Além de tornar o documento mais interessante para ler, estes são reconhecidos pelos leitores de tela e falados em um tom de voz diferente. Os navegadores procuram isso como itálico por padrão, mas você não deve usar esta tag apenas para obter estilo itálico. Para fazer isso, você usaria um elemento <span> e alguns CSS, ou talvez um elemento <i> (veja abaixo).

 

<p>Eu estou <em>feliz</em> você não está atrasado</em>.</ p>

Forte importância

Para enfatizar palavras importantes, tendemos a enfatizá-las na linguagem falada e atrevê-las em linguagem escrita. Por exemplo:

Este líquido é altamente tóxico.

Eu estou contando com você. Não se atrase!

Em HTML usamos o elemento <strong> (forte importância) para marcar tais instâncias. Além de tornar o documento mais útil, novamente estes são reconhecidos pelos leitores de tela e falados em um tom de voz diferente. Os navegadores usam este texto como negrito por padrão, mas você não deve usar esta marca apenas para obter um estilo audaz. Para fazer isso, você usaria um elemento <span> e algum CSS, ou talvez um <b> (veja abaixo).

<p>Este líquido é <strong>altamente tóxico</ strong>.</p>

<p>Estou contando com você. <strong>Não</strong> esteja atrasado!</p>

Você pode aninhar forte e ênfase entre si, se desejar:

<p>Este líquido é <strong>altamente tóxico</strong> -
Se você beber, <strong>você pode <em>morrer</em></strong>.</p>

Aprendizagem ativa: Vamos ser importantes!

Nesta seção de aprendizagem ativa, fornecemos um exemplo editável. Dentro disso, gostaríamos que você tentasse adicionar ênfase e negrito, é importância que às palavras que você pensar precise deles, apenas para ter alguma prática.

Itálico, negrito, sublinhado ...

Os elementos que discutimos até agora têm clara semântica associada. A situação com with <b> e with <i> , e with <u> é um pouco mais complicada. Eles surgiram para que as pessoas pudessem escrever negrito, itálico ou texto sublinhado em uma época em que o CSS ainda era mal suportado. Elementos como este, que apenas afetam a apresentação e não a semântica, são conhecidos como elementos de apresentação e não devem mais ser usados, porque, como já vimos, a semântica é tão importante para a acessibilidade, SEO, etc.

HTML5 redefiniu  <b><i> e <u>  com papéis semigos novos, um pouco confusos.

Aqui está a melhor regra geral: é provável que use  <b><i> ou <u>  para transmitir um significado tradicionalmente transmitido com negrito, itálico ou sublinhado, desde que não haja mais elementos adequados. No entanto, sempre é crítico manter uma mentalidade de acessibilidade. O conceito de itálico não é muito útil para as pessoas que usam leitores de tela, ou para pessoas que usam um sistema de escrita diferente do alfabeto latino.

  • with <i> é usado para transmitir um significado tradicionalmente transmitido por itálico: palavras estrangeiras, designação taxonômica, termos técnicos, um pensamento ...
  • with <b>  é usado para transmitir um significado tradicionalmente transmitido por negrito: palavras-chave, nomes de produtos, sentença principal ...
  • with <u>  é usado para transmitir um significado tradicionalmente transmitido pelo sublinhado: nome próprio, erro de ortografia ...

Um aviso amável sobre o sublinhado: as pessoas associam fortemente o sublinhado com hiperlinks. Portanto, na Web, é melhor sublinhar apenas os links. Use o elemento <u> quando for semanticamente apropriado, mas considere usar o CSS para alterar o sublinhado padrão para algo mais apropriado na Web. O exemplo abaixo ilustra como isso pode ser feito.

<!-- nomes científicos -->
<p>
  O Colibri Ruby-throated <i> Archilochus colubris </i> 
é o colibri mais comum do Leste da América do Norte.
</p>

<!-- palavras estrangeiras -->
<p>
  O menu era um mar de palavras exóticas como <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> e <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- um erro de ortografia conhecido -->
<p>
  Algum dia eu vou aprender como <u>jogo</u> Melhor.
</p>

<!-- Destaque as palavras-chave em um conjunto de instruções -->
<ol>
  <li>
    <b> Fatia </b>dois pedaços de pão do pão.
  </li>
  <li>
    <b>Inserir </b> uma fatia de tomate e uma folha de
     Alface entre as fatias de pão.
  </li>
</ol>

Resumo

É por agora! Este artigo deveria ter dado uma boa idéia de como começar a marcar o texto em HTML e apresentou alguns dos elementos mais importantes nesta área. Há muito mais elementos semânticos para abordar nesta área, e veremos muito mais em nosso artigo "Elementos mais semânticos", mais tarde no curso. No próximo artigo, estaremos procurando em detalhes como criar hiperlinks, possivelmente o elemento mais importante na Web.

Etiquetas do documento e colaboradores

Colaboradores desta página: RobMota, SphinxKnight, programando, stefanocbl
Última atualização por: RobMota,