032.2 Lição 1
Certificação: |
Web Development Essentials |
---|---|
Versão: |
1.0 |
Tópico: |
032 Marcação de documentos HTML |
Objetivo: |
032.2 A semântica do HTML e a hierarquia de documentos |
Lição: |
1 de 1 |
Introdução
Na lição anterior, aprendemos que o HTML é uma linguagem de marcação capaz de descrever semanticamente o conteúdo de um site. Um documento HTML contém uma estrutura, que consiste nos elementos HTML <html>
, <head>
e <body>
. Enquanto o elemento <head>
descreve um bloco de metainformações sobre o documento HTML que será invisível para o visitante do site, o elemento <body>
abriga muitos outros elementos que definem a estrutura e o conteúdo do documento HTML.
Nesta lição, falaremos da formatação de texto, dos elementos semânticos fundamentais do HTML e sua finalidade e de como estruturar um documento HTML. Usaremos como exemplo uma lista de compras.
Note
|
Todos os exemplos de código apresentados estão dentro do elemento |
Texto
Em HTML, nenhum bloco de texto deve estar nu, fora de um elemento. Até mesmo um parágrafo curto deve ser rodeado pelas tags HTML <p>
, que representam um parágrafo.
<p>Short text element spanning only one line.</p>
<p>A text element containing much longer text that may span across multiple lines, depending on the size of the web browser window.</p>
Quando aberto em um navegador, esse código HTML produz o resultado mostrado na Figure 1.
Por padrão, os navegadores web adicionam espaçamento antes e depois dos elementos <p>
para melhorar a legibilidade. Por essa razão, <p>
é considerado um elemento de bloco.
Títulos
O HTML define seis níveis de títulos e subtítulos para descrever e estruturar o conteúdo de um documento HTML. Esses títulos são designados pelas tags <h1>
, <h2>
, <h3>
, <h4>
, <h5>
e <h6>
.
<h1>Heading level 1 to uniquely identify the page</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
Um navegador web exibiria este código HTML como mostrado na Figure 2.
Se você está familiarizado com processadores de texto como o LibreOffice ou o Microsoft Word, provavelmente vai notar algumas semelhanças na utilização dos diferentes níveis de títulos e como eles são processados no navegador. Por padrão, o HTML usa o tamanho para indicar a hierarquia e a importância dos títulos e adiciona espaços antes e depois deles para separá-los visualmente do conteúdo.
O título que usa o elemento <h1>
fica no topo da hierarquia e, assim, é considerado o mais importante, o que identifica o conteúdo da página. Ele é comparável ao elemento <title>
discutido na lição anterior, mas dentro do conteúdo do documento HTML. Os elementos de título subsequentes podem ser usados para estruturar mais detalhadamente o conteúdo. Procure não saltar níveis. A hierarquia de um documento deve começar com <h1>
, continuar com <h2>
, em seguida <h3>
e assim por diante. Não é obrigatório usar todos os elementos de título até o <h6>
se o conteúdo não o exigir.
Note
|
Os títulos são ferramentas importantes para estruturar um documento HTML, tanto semântica quanto visualmente. No entanto, eles nunca devem ser usados para aumentar o tamanho de um texto estruturalmente sem importância. Pelo mesmo princípio, não se deve colocar um parágrafo curto em negrito ou itálico para parecer um título; use tags de título para marcar títulos. |
Vamos começar a criação de nossa lista de compras em HTML definindo sua estrutura. Criamos primeiro um elemento <h1>
para conter o título da página, neste caso Garden Party
, seguido por um pequeno texto inserido em um elemento <p>
. Em seguida, usamos dois elementos <h2>
para introduzir as duas seções do conteúdo: Agenda
e Please bring
.
<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<h2>Please bring</h2>
Quando aberto em um navegador web, este código produz o resultado mostrado na Figure 3.
Quebras de linha
Às vezes, pode ser necessário fazer uma quebra de linha sem inserir outro elemento <p>
ou qualquer elemento de bloco semelhante. Nesses casos, você pode usar o elemento de auto-fechamento <br>
. Esse elemento deve ser usado somente para inserir quebras de linha inerentes ao conteúdo, como no caso de poemas, letras de música ou endereços. Para separar mudanças de conteúdo, é preferível usar um elemento <p>
.
Por exemplo, poderíamos dividir o texto do parágrafo informativo de nosso exemplo anterior da seguinte maneira:
<p>
Invitation to John's garden party.<br>
Saturday, next week.
</p>
No navegador, esse código HTML teria o resultado mostrado na Figure 4.
Linhas Horizontais
O elemento <hr>
define uma linha horizontal, também chamada de separador horizontal. Por padrão, ela se estende por toda a largura do elemento pai. O elemento <hr>
ajuda a definir uma mudança temática no conteúdo ou separar as seções do documento. Esse é um elemento vazio e, portanto, não tem tag de fechamento.
Em nosso exemplo, poderíamos separar os dois títulos:
<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<hr>
<h2>Please bring</h2>
A Figure 5 mostra o resultado desse código.
Listas em HTML
Em HTML, podemos definir três tipos de listas:
- Listas ordenadas
-
nas quais a ordem dos elementos listados é importante
- Listas não ordenadas
-
nas quais a ordem dos elementos listados não é particularmente importante
- Listas de definição
-
para descrever mais detalhadamente certos termos
Cada uma delas contém um certo número de itens de lista. Vamos conhecer melhor esses tipos.
Listas ordenadas
Uma lista ordenada em HTML, definida pelo elemento <ol>
, é uma coleção organizada de itens de lista. O que torna este elemento especial é que a ordem dos itens é relevante. Para enfatizar o fato, os navegadores web exibem números por padrão antes dos elementos filho da lista.
Note
|
Os elementos |
Em nosso exemplo, podemos preencher a programação da festa ao ar livre usando um elemento <ol>
com o seguinte código:
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>Barbecue</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>
Em um navegador web, esse código HTML produz o resultado mostrado na Figure 6.
Opções
Como vemos neste exemplo, os itens da lista são organizados com algarismos arábicos começando em 1 por padrão. No entanto, é possível alterar esse comportamento especificando o atributo type
da tag <ol>
. Os valores válidos para este atributo são 1
para algarismos arábicos, A
para letras maiúsculas, a
para letras minúsculas, I
para algarismos romanos maiúsculos e i
para algarismos romanos minúsculos.
Se quiser, você também pode definir o valor inicial usando o atributo start
da tag <ol>
. O atributo start
sempre é acompanhado por um valor numérico decimal, mesmo que o atributo type
defina um tipo diferente de numeração.
Por exemplo, poderíamos ajustar a lista ordenada do exemplo anterior para que os itens da lista sejam prefixados com letras maiúsculas, começando com a letra C, como mostrado no exemplo a seguir:
<h2>Agenda</h2>
<ol type="A" start="3">
<li>Welcome</li>
<li>Barbecue</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>
Em um navegador web, esse código HTML é exibido como na Figure 7.
A ordem dos itens da lista também pode ser invertida usando o atributo reversed
sem um valor.
Note
|
Em uma lista ordenada, também é possível definir o valor inicial de um item específico usando o atributo |
Listas não ordenadas
Uma lista não ordenada contém uma série de itens de lista que, ao contrário daqueles em uma lista ordenada, não têm uma ordem ou sequência especial. O elemento HTML para esse tipo de lista é <ul>
. Também neste caso, <li>
é o elemento HTML que demarca os itens de lista.
Note
|
Os elementos |
Em nosso site de exemplo, podemos usar uma lista não ordenada para sugerir os itens que os convidados devem trazer para a festa. Usamos para isso o seguinte código HTML:
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
Em um navegador da web, esse código HTML produz o resultado mostrado na Figure 8.
Por padrão, cada item da lista é representado por um marcador circular. É possível alterar a aparência do marcador usando CSS, o que será discutido em lições posteriores.
Listas aninhadas
As listas podem ser aninhadas em outras listas, como listas ordenadas em listas não ordenadas e vice-versa. Para isso, a lista aninhada deve fazer parte de um elemento de lista <li>
, já que <li>
é o único elemento filho válido nas listas ordenadas e não ordenadas. Ao aninhar, cuidado para não sobrepor as tags HTML.
Em nosso exemplo, poderíamos adicionar algumas informações à programação que criamos antes, como mostrado no exemplo a seguir:
<h2>Agenda</h2>
<ol type="A" start="3">
<li>Welcome</li>
<li>
Barbecue
<ul>
<li>Vegetables</li>
<li>Meat</li>
<li>Burgers, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>
Um navegador web exibiria esse código da maneira mostrada na Figure 9.
Podemos ainda mais longe e aninhar múltiplos níveis de profundidade. Teoricamente, não há limite de quantidade para as listas aninhadas. Porém, ao fazer isso, leve em conta a legibilidade da página.
Listas de definição
Uma lista de definição é criada com o elemento <dl>
e representa um dicionário de termos e descrições. O termo é uma palavra ou nome a descrever e a descrição é a explicação. As listas de definição vão desde pares simples de termo-descrição até definições mais extensas.
Os termos (ou termos de definição) são designados com o elemeno <dt>
; já a descrição usa o elemento <dd>
.
Um exemplo de lista de definição seria uma lista de frutas exóticas explicando a aparência delas.
<h3>Exotic Fruits</h3>
<dl>
<dt>Banana</dt>
<dd>
A long, curved fruit that is yellow-skinned when ripe. The fruit's skin
may also have a soft green color when underripe and get brown spots when
overripe.
</dd>
<dt>Kiwi</dt>
<dd>
A small, oval fruit with green flesh, black seeds, and a brown, hairy
skin.
</dd>
<dt>Mango</dt>
<dd>
A fruit larger than a fist, with a green skin, orange flesh, and one big
seed. The skin may have spots ranging from green to yellow or red.
</dd>
</dl>
Em um navegador web, isso produziria o resultado mostrado na Figure 10.
Note
|
Ao contrário das listas ordenadas e não ordenadas, em uma lista de definição qualquer elemento HTML pode ser usado como filho. Isso permite agrupar elementos e estilizá-los usando CSS. |
Formatação de texto na linha
Em HTML, podemos usar elementos de formatação para alterar a aparência do texto. Esses elementos podem ser categorizados como elementos de apresentação ou elementos de expressão (ou de frase).
Elementos de apresentação
Os elementos básicos de apresentação alteram a fonte ou a aparência do texto; eles são <b>
, <i>
, <u>
e <tt>
. Esses elementos originalmente eram definidos antes que o CSS passasse a permitir o uso de negrito, itálico, etc. Atualmente, existem maneiras melhores de alterar a aparência do texto, mas ainda encontramos esses elementos ocasionalmente.
Texto em negrito
Para deixar o texto em negrito, usamos o elemento <b>
como ilustrado no exemplo a seguir. O resultado aparece na Figure 11.
This <b>word</b> is bold.
<b>
é usada para deixar o texto em negrito.De acordo com a especificação do HTML5, o elemento <b>
deve ser usado apenas quando não houver tags mais apropriadas. O elemento que produz a mesma aparência visual, aumentando ao mesmo tempo a importância semântica do texto marcado, é <strong>
.
Texto em itálico
Para colocar o texto em itálico, usamos o elemento <i>
, como ilustrado no exemplo a seguir. O resultado aparece na Figure 12.
This <i>word</i> is in italics.
<i>
é usada para colocar o texto em itálico.De acordo com a especificação do HTML5, o elemento <i>
deve ser usado apenas quando não houver tags mais apropriadas.
Texto sublinhado
Para sublinhar o texto, usamos o elemento <u>
, como ilustrado no exemplo a seguir. O resultado aparece na Figure 13.
This <u>word</u> is underlined.
<u>
é usada para sublinhar um texto.De acordo com a especificação do HTML 5, o elemento <u>
deve ser usado apenas quando não houver maneiras melhores de sublinhar o texto. O CSS oferece uma alternativa mais moderna.
Largura fixa ou fonte monoespaçada
Para exibir texto em fonte monoespaçada (largura fixa), freqüentemente usada para exibir código de computador, usamos o elemento <tt>
, como ilustrado no exemplo a seguir. O resultado aparece na Figure 14.
This <tt>word</tt> is in fixed-width font.
<tt>
é usada para exibir texto em uma fonte de largura fixa.A tag <tt>
não é suportada em HTML5. Os navegadores ainda a exibem como esperado; porém, é preferível usar tags mais apropriadas, como <code>
, <kbd>
, <var>
e <samp>
.
Elementos de expressão
Os elementos de expressão ou de frase não apenas alteram a aparência do texto, como também adicionam importância semântica a uma palavra ou frase. Ao usá-los, podemos enfatizar uma palavra ou marcá-la como importante. Esses elementos, ao contrário dos elementos de apresentação, são reconhecidos pelos leitores de tela, o que torna o texto mais acessível aos visitantes com deficiência visual e permite que os mecanismos de busca leiam e avaliem melhor o conteúdo da página. Os elementos de frase que usamos ao longo desta lição são <em>
, <strong>
e <code>
.
Texto enfatizado
Para enfatizar um texto, usamos o elemento <em>
, como mostrado no exemplo a seguir:
This <em>word</em> is emphasized.
<em>
é usada para enfatizar o texto.Como vemos, os navegadores web exibem <em>
com a mesma aparência de <i>
, mas <em>
adiciona importância semântica ao elemento de frase, o que melhora a acessibilidade para visitantes com deficiência visual.
Texto forte
Para demonstrar que um texto é importante, usamos o elemento <strong>
como no exemplo a seguir. O resultado aparece na Figure 16.
This <strong>word</strong> is important.
<strong>
é usada para marcar a importância de um texto.Como vemos, os navegadores web exibem <strong>
da mesma forma que <b>
, mas <strong>
adiciona importância semântica ao elemento de frase, o que melhora a acessibilidade para visitantes com deficiência visual.
Código de Computador
Para inserir um trecho de código, podemos colocá-lo dentro do elemento <code>
como ilustrado no exemplo a seguir. O resultado aparece na Figure 17.
The Markdown code <code># Heading</code> creates a heading at the highest level in the hierarchy.
<code>
é usada para inserir um trecho de código de computador.Texto destacado
Para destacar o texto com um fundo amarelo, semelhante ao estilo de um marca-texto, usamos o elemento <mark>
como no exemplo a seguir. O resultado aparece na Figure 18.
This <mark>word</mark> is highlighted.
<mark>
é usada para realçar um texto com um fundo amarelo.Formatando o texto de nossa lista de compras em HTML
Com base em nossos exemplos anteriores, vamos inserir alguns elementos de expressão para alterar a aparência do texto e, ao mesmo tempo, adicionar importância semântica. O resultado aparece na Figure 19.
<h1>Garden Party</h1>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
Neste exemplo de documento HTML, as informações mais importantes sobre a festa ao ar livre foram realçadas usando o elemento <strong>
. As iguarias disponíveis para o churrasco foram enfatizadas com o elemento <em>
. Os fogos de artifício foram destacados simplesmente com o elemento <mark>
.
Para treinar, você pode remodelar outras partes do texto usando os outros elementos de formatação.
Texto pré-formatado
Na maioria dos elementos HTML, o espaço em branco geralmente é reduzido a um espaçamento simples ou mesmo totalmente ignorado. No entanto, existe um elemento HTML chamado <pre>
que permite definir o chamado texto pré-formatado. Qualquer espaço em branco incluído no conteúdo deste elemento, incluindo espaços e quebras de linha, é preservado e exibido no navegador web. Além disso, o texto é exibido em uma fonte de largura fixa, semelhante ao elemento <code>
.
<pre>
field() {
shift $1 ; echo $1
}
</pre>
<pre>
preserva os espaços em branco.Agrupando elementos
Por convenção, os elementos HTML são divididos em duas categorias:
- Elementos de bloco
-
Aparecem em uma nova linha e ocupam toda a largura disponível. Alguns exemplos já discutidos são
<p>
,<ol>
e<h2>
. - Elementos de linha
-
Aparecem na mesma linha que outros elementos de texto, ocupando apenas o espaço necessário ao conteúdo. Dentre esses elementos temos
<strong>
,<em>
e<i>
.
Note
|
O HTML5 introduziu categorias de elementos mais precisas para evitar confusões com os blocos CSS. Para simplificar, nos limitaremos aqui à subdivisão convencional em elementos de bloco e de linha. |
Os elementos fundamentais para agrupar diversos elementos juntos são <div>
e <span>
.
O elemento <div>
é um contêiner em nível de bloco para outros elementos HTML e não adiciona valor semântico por si só. Este elemento serve para dividir um documento HTML em seções e estruturar seu conteúdo, tanto para melhorar a legibilidade do código quanto para aplicar estilos CSS a um grupo de elementos, como veremos em uma lição posterior.
Por padrão, os navegadores web sempre inserem uma quebra de linha antes e depois de cada elemento <div>
para que sejam exibidos em sua própria linha.
Por sua vez, o elemento <span>
é usado como um envoltório para texto em HTML e geralmente serve para agrupar outros elementos de linha para permitir a aplicação de estilos em uma parte menor do texto usando CSS.
O elemento <span>
se comporta como um texto normal e não inicia uma nova linha. Portanto, trata-se de um elemento de linha.
O exemplo a seguir compara a representação visual do elemento semântico <p>
e os elementos de agrupamento <div>
e <span>
:
<p>Text within a paragraph</p>
<p>Another paragraph of text</p>
<hr>
<div>Text wrapped within a <code>div</code> element</div>
<div>Another <code>div</code> element with more text</div>
<hr>
<span>Span content</span>
<span>and more span content</span>
Um navegador web exibiria este código como mostrado na Figure 21.
Já vimos que, por padrão, o navegador adiciona espaços antes e depois dos elementos <p>
. Esses espaços não são aplicados aos elementos de agrupamento <div>
e <span>
. Entretanto, os elementos <div>
são formatados como blocos independentes, ao passo que o texto nos elementos <span>
são mostrados na mesma linha.
Estrutura da página HTML
Já falamos de como como usar elementos HTML para descrever o conteúdo de uma página web semanticamente — em outras palavras, para transmitir significado e contexto ao texto. Outro grupo de elementos tem o propósito de descrever a estrutura semântica de uma página web, uma expressão ou sua estrutura. Esses são os elementos de bloco, ou seja, elementos que se comportam visualmente de forma semelhante a um elemento <div>
. Sua finalidade é definir a estrutura semântica de uma página web especificando áreas bem definidas como cabeçalhos, rodapés e o conteúdo principal da página. Esses elementos permitem o agrupamento semântico do conteúdo de forma que ele também possa ser entendido por um computador, incluindo mecanismos de busca e leitores de tela.
O elemento <header>
O elemento <header>
(cabeçalho) contém informações introdutórias ao elemento semântico circundante dentro de um documento HTML. Um cabeçalho é diferente de um título, mas um cabeçalho geralmente inclui um elemento de título (<h1>
, … , <h6>
).
Na prática, esse elemento é mais frequentemente usado para representar o cabeçalho da página, como um banner com um logotipo. Também pode ser usado para introduzir o conteúdo dos seguintes elementos: <body>
, <section>
, <article>
, <nav>
ou <aside>
.
Um mesmo documento pode ter múltiplos elementos <header>
, mas um elemento <header>
não pode ser aninhado dentro de outro elemento <header>
. Um elemento <footer>
também não pode ser usado dentro de um elemento <header>
.
Por exemplo, para adicionar um cabeçalho ao nosso documento de exemplo, podemos fazer o seguinte:
<header>
<h1>Garden Party</h1>
</header>
Não haverá mudanças visíveis no documento HTML, já que <h1>
(como todos os outros elementos de título) é um elemento de nível de bloco sem outras propriedades visuais.
O elemento de conteúdo <main>
O elemento <main>
é o envoltório para o conteúdo central de uma página web. Não é possível haver mais de um elemento <main>
em um documento HTML.
Em nosso documento de exemplo, todo o código HTML que escrevemos até agora teria sido posto dentro do elemento <main>
.
<main>
<header>
<h1>Garden Party</h1>
</header>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</main>
Como no caso do elemento <header>
, o elemento <main>
não causa nenhuma mudança visual em nosso exemplo.
O elemento <footer>
O elemento <footer>
contém notas de rodapé, como informações sobre a autoria, informações de contato ou documentos relacionados ao elemento semântico circundante, por exemplo <section>
, <nav>
ou <aside>
. Um documento pode incluir diversos elementos <footer>
que permitem descrever melhor os elementos semânticos. Todavia, um elemento <footer>
não pode ser aninhado dentro de outro elemento <footer>
, nem um elemento <header>
pode ser usado dentro de um <footer>
.
Em nosso exemplo, podemos adicionar as informações de contato do host (John), como mostrado no exemplo a seguir:
<footer>
<p>John Doe</p>
<p>john.doe@example.com</p>
</footer>
O elemento <nav>
O elemento <nav>
descreve uma unidade de navegação importante, como um menu, que contém uma série de hiperlinks.
Note
|
Nem todos os hiperlinks devem ser postos dentro de um elemento |
Como os hiperlinks ainda não foram abordados, o elemento de navegação não será incluído nos exemplos desta lição.
O elemento <aside>
O elemento <aside>
é um envoltório para conteúdos que não são necessários na organização do conteúdo da página principal, mas que geralmente estão indiretamente relacionados ou são suplementares. Este elemento é freqüentemente usado para barras laterais que exibem informações secundárias, como um glossário.
Em nosso exemplo, podemos adicionar informações de endereço e rota, que são apenas indiretamente relacionados ao resto do conteúdo, usando o elemento <aside>
.
<aside>
<p>
10, Main Street<br>
Newville
</p>
<p>Parking spaces available.</p>
</aside>
O elemento <section>
O elemento <section>
define uma seção lógica de um documento que faz parte do elemento semântico circundante, mas que não funcionaria como conteúdo autônomo, como um capítulo.
Em nosso documento de exemplo, podemos agrupar as seções de conteúdo da programação e incluir seções de listagem, como mostrado no exemplo a seguir:
<section>
<header>
<h2>Agenda</h2>
</header>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</section>
<hr>
<section>
<header>
<h2>Please bring</h2>
</header>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</section>
Este exemplo também acrescenta mais elementos <header>
dentro das seções, de modo que cada seção está inserida em seu próprio elemento <header>
.
O elemento <article>
O elemento <article>
define um conteúdo independente e autônomo que faz sentido por si só, sem o resto da página. Seu conteúdo é potencialmente redistribuível ou reutilizável em outro contexto. Exemplos típicos ou materiais apropriados para um elemento <article>
seriam uma postagem de blog, uma lista de produtos de uma loja ou o anúncio de um produto. O anúncio poderia então existir tanto por conta própria quanto em uma página maior.
Em nosso exemplo, podemos substituir a primeira <section>
que envolve a programação por um elemento <article>
.
<article>
<header>
<h2>Agenda</h2>
</header>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</article>
O elemento <header>
que adicionamos no exemplo anterior também pode persistir aqui, uma vez que os elementos <article>
também podem ter seus próprios elementos <header>
.
O exemplo final
Se combinarmos todos os exemplos anteriores, o documento HTML final de nosso convite fica assim:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Garden Party</title>
</head>
<body>
<main>
<h1>Garden Party</h1>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<article>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</article>
<hr>
<section>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</section>
</main>
<aside>
<p>
10, Main Street<br>
Newville
</p>
<p>Parking spaces available.</p>
</aside>
<footer>
<p>John Doe</p>
<p>john.doe@example.com</p>
</footer>
</body>
</html>
Em um navegador web, a página inteira é exibida como na Figure 22.
Exercícios Guiados
-
Para cada uma das seguintes tags, indique a tag de fechamento correspondente:
<h5>
<br>
<ol>
<dd>
<hr>
<strong>
<tt>
<main>
-
Para cada uma das seguintes tags, indique se ela marca o início de um elemento de bloco ou de linha:
<h3>
<span>
<b>
<div>
<em>
<dl>
<li>
<nav>
<code>
<pre>
-
Que tipo de lista podemos criar em HTML? Quais tags devemos usar para cada um deles?
-
Quais tags encerram os elementos de bloco que podem ser usados para estruturar uma página HTML?
Exercícios Exploratórios
-
Crie uma página HTML básica com o título “Regras do Formulário”. Você usará essa página HTML para todos os exercícios exploratórios, cada um baseado nos anteriores. Em seguida, adicione um título de nível 1 com o texto “Como preencher o formulário de solicitação”, um parágrafo com o texto “Para receber o documento PDF com o curso de HTML completo, é necessário preencher os seguintes campos:” e uma lista não ordenada com os seguintes campos: “Nome”, “Sobrenome”, “Endereço de email”, “País”, “Estado” e “CEP/Código Postal”.
-
Coloque os três primeiros campos (“Nome”, “Sobrenome” e “Endereço de email”) em negrito, adicionando também uma importância semântica. Depois inclua um título de nível 2 com o texto “Campos obrigatórios” e um parágrafo com o texto “Os campos em negrito são obrigatórios.”
-
Adicione outro título de nível 2 com o texto “Passos a seguir”, um parágrafo com o texto “Há quatro etapas a seguir:” e uma lista ordenada com os seguintes itens: “Preencha os campos”, “Clique no botão Enviar”, “Verifique seu email e confirme sua solicitação clicando no link recebido” e “Verifique seu email - Você receberá o curso completo de HTML em alguns minutos”.
-
Usando
<div>
, crie um bloco para cada seção que começa com um título de nível 2. -
Usando
<div>
, crie outro bloco para a seção começando com o título de nível 1. Em seguida, separe esta seção das outras duas com uma linha horizontal. -
Adicione o elemento de cabeçalho com o texto “Regras do formulário - 2021” e o elemento de rodapé com o texto “Copyright - 2021”. Finalmente, adicione o elemento principal, que deve conter os três blocos
<div>
.
Resumo
Nesta lição, você aprendeu:
-
Como criar marcações para o conteúdo de um documento HTML
-
A estrutura hierárquica do texto em HTML
-
A diferença entre elementos HTML de bloco e de linha
-
Como criar documentos HTML com uma estrutura semântica
Os seguintes termos foram discutidos nesta lição:
<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
-
As tags de título.
<p>
-
A tag de parágrafo.
<ol>
-
A tag de lista ordenada.
<ul>
-
A tag de lista não ordenada.
<li>
-
A tag de item da lista.
<dl>
-
A tag da lista de definição.
<dt>
,<dd>
-
As tags de termo e descrição para uma lista de definição.
<pre>
-
A tag de preservação da formatação.
<b>
,<i>
,<u>
,<tt>
,<em>
,<strong>
,<code>
,<mark>
-
As tags de formatação.
<div>
,<span>
-
As tags de agrupamento.
<header>
,<main>
,<nav>
,<aside>
,<footer>
-
As tags usadas para criar uma estrutura e layout simples para uma página.
Respostas aos Exercícios Guiados
-
Para cada uma das seguintes tags, indique a tag de fechamento correspondente:
<h5>
</h5>
<br>
Não existe
<ol>
</ol>
<dd>
</dd>
<hr>
Não existe
<strong>
</strong>
<tt>
</tt>
<main>
</main>
-
Para cada uma das seguintes tags, indique se ela marca o início de um elemento de bloco ou de linha:
<h3>
Elemento de bloco
<span>
Elemento de linha
<b>
Elemento de linha
<div>
Elemento de bloco
<em>
Elemento de linha
<dl>
Elemento de bloco
<li>
Elemento de bloco
<nav>
Elemento de bloco
<code>
Elemento de linha
<pre>
Elemento de bloco
-
Que tipo de lista podemos criar em HTML? Quais tags devemos usar para cada um deles?
Em HTML, existem três tipos de listas: listas ordenadas, que consistem em uma série de itens de lista numerados, listas não ordenadas, que consistem em uma série de itens de lista que não têm uma ordem ou sequência especial, e listas de definição, que representam verbetes, como em um dicionário ou enciclopédia. As listas ordenadas são postas entre as tags
<ol>
e</ol>
, uma lista não ordenada entre as tags<ul>
e</ul>
e uma lista de definição entre<dl>
e</dl>
. Cada item de uma lista ordenada ou não ordenada é posto entre as tags<li>
e</li>
. Os termos da lista de definição ficam entre as tags<dt>
e</dt>
e as descrições entre<dd>
e</dd>
. -
Quais tags encerram os elementos de bloco que podem ser usados para estruturar uma página HTML?
As tags
<header>
e</header>
encerram o cabeçalho da página,<main>
e</main>
contêm o conteúdo principal da página HTML, as tags<nav>
e</nav>
contêm o que chamamos de barra de navegação,<aside>
e</aside>
incluem a barra lateral e as tags<footer>
e</footer>
encerram o rodapé da página.
Respostas aos Exercícios Exploratórios
-
Crie uma página HTML básica com o título “Regras do Formulário”. Você usará essa página HTML para todos os exercícios exploratórios, cada um baseado nos anteriores. Em seguida, adicione um título de nível 1 com o texto “Como preencher o formulário de solicitação”, um parágrafo com o texto “Para receber o documento PDF com o curso de HTML completo, é necessário preencher os seguintes campos:” e uma lista não ordenada com os seguintes campos: “Nome”, “Sobrenome”, “Endereço de email”, “País”, “Estado” e “CEP/Código Postal”.
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>Como preencher o formulário de solicitação</h1> <p> Para receber o documento PDF com o curso de HTML completo, é necessário preencher os seguintes campos: </p> <ul> <li>Nome</li> <li>Sobrenome</li> <li>Endereço de email</li> <li>País</li> <li>Estado</li> <li>CEP/Código Postal</li> </ul> </body> </html> . Coloque os três primeiros campos ("`Nome`", "`Sobrenome`" e "`Endereço de email`") em negrito, adicionando também uma importância semântica. Depois inclua um título de nível 2 com o texto "`Campos obrigatórios`" e um parágrafo com o texto "`Os campos em negrito são obrigatórios.`" + [source,html]
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head>
<body> <h1>Como preencher o formulário de solicitação</h1> <p> Para receber o documento PDF com o curso de HTML completo, é necessário preencher os seguintes campos: </p> <ul> <li><strong> Nome </strong></li> <li><strong> Sobrenome </strong></li> <li><strong> Endereço de email </strong></li> <li>País</li> <li>Estado</li> <li>CEP/Código Postal</li> </ul>
<h2>Campos obrigatórios</h2> <p>Os campos em negrito são obrigatórios.</p> </body> </html>
-
AAdicione outro título de nível 2 com o texto “Passos a seguir”, um parágrafo com o texto “Há quatro etapas a seguir:” e uma lista ordenada com os seguintes itens: “Preencha os campos”, “Clique no botão enviar”, “Verifique seu email e confirme sua solicitação clicando no link recebido” e “Verifique seu email - Você receberá o curso completo de HTML em alguns minutos”.
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>Como preencher o formulário de solicitação</h1> <p> Para receber o documento PDF com o curso de HTML completo, é necessário preencher os seguintes campos: </p> <ul> <li><strong> Nome </strong></li> <li><strong> Sobrenome </strong></li> <li><strong> Endereço de email </strong></li> <li>País</li> <li>Estado</li> <li>CEP/Código Postal</li> </ul> <h2>Campos obrigatórios</h2> <p>Os campos em negrito são obrigatórios.</p> <h2>Passos a seguir</h2> <p>Há quatro etapas a seguir:</p> <ol> <li>Preencha os campos</li> <li>Clique no botão Enviar</li> <li> Verifique seu email e confirme sua solicitação clicando no link recebido </li> <li> Verifique seu email - Você receberá o curso completo de HTML em alguns minutos </li> </ol> </body> </html>
-
Usando
<div>
, crie um bloco para cada seção que começa com um título de nível 2.<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>Como preencher o formulário de solicitação</h1> <p> Para receber o documento PDF com o curso de HTML completo, é necessário preencher os seguintes campos: </p> <ul> <li><strong> Nome </strong></li> <li><strong> Sobrenome </strong></li> <li><strong> Endereço de email </strong></li> <li>País</li> <li>Estado</li> <li>CEP/Código Postal</li> </ul> <div> <h2>Campos obrigatórios</h2> <p>Os campos em negrito são obrigatórios.</p> </div> <div> <h2>Passos a seguir</h2> <p>Há quatro etapas a seguir:</p> <ol> <li>Preencha os campos</li> <li>Clique no botão Enviar</li> <li> Verifique seu email e confirme sua solicitação clicando no link recebido </li> <li> Verifique seu email - Você receberá o curso completo de HTML em alguns minutos </li> </ol> </div> </body> </html>
-
Usando
<div>
, crie outro bloco para a seção começando com o título de nível 1. Em seguida, separe esta seção das outras duas com uma linha horizontal.<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <div> <h1>Como preencher o formulário de solicitação</h1> <p> Para receber o documento PDF com o curso de HTML completo, é necessário preencher os seguintes campos: </p> <ul> <li><strong> Nome </strong></li> <li><strong> Sobrenome </strong></li> <li><strong> Endereço de email </strong></li> <li>País</li> <li>Estado</li> <li>CEP/Código Postal</li> </ul> </div> <hr> <div> <h2>Campos obrigatórios</h2> <p>Os campos em negrito são obrigatórios.</p> </div> <div> <h2>Passos a seguir</h2> <p>Há quatro etapas a seguir:</p> <ol> <li>Preencha os campos</li> <li>Clique no botão Enviar</li> <li> Verifique seu email e confirme sua solicitação clicando no link recebido </li> <li> Verifique seu email - Você receberá o curso completo de HTML em alguns minutos </li> </ol> </div> </body> </html>
-
Adicione o elemento de cabeçalho com o texto “Regras do formulário - 2021” e o elemento de rodapé com o texto “Copyright - 2021”. Finalmente, adicione o elemento principal, que deve conter os três blocos
<div>
.<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <header> <h1>Regras do Formulário - 2021</h1> </header> <main> <div> <h1>Como preencher o formulário de solicitação</h1> <p> Para receber o documento PDF com o curso de HTML completo, é necessário preencher os seguintes campos: </p> <ul> <li><strong> Nome </strong></li> <li><strong> Sobrenome </strong></li> <li><strong> Endereço de email </strong></li> <li>País</li> <li>Estado</li> <li>CEP/Código Postal</li> </ul> </div> <hr> <div> <h2>Campos obrigatórios</h2> <p>Os campos em negrito são obrigatórios.</p> </div> <div> <h2>Passos a seguir</h2> <p>Há quatro etapas a seguir:</p> <ol> <li>Preencha os campos</li> <li>Clique no botão Enviar</li> <li> Verifique seu email e confirme sua solicitação clicando no link recebido </li> <li> Verifique seu email - Você receberá o curso completo de HTML em alguns minutos </li> </ol> </div> </main> <footer> <p>Copyright - 2021</p> </footer> </body> </html>