Criando hyperlinks - Aprendendo desenvolvimento web

Criando hyperlinks
==================

* Anterior
* Menu: Introduction to HTML
* Próxima

Os hiperlinks são realmente importantes — são o que torna a Web uma *web*. Este artigo mostra a sintaxe necessária para criar um link e discute as suas melhores práticas.

|  |  |
| --- | --- |
| Pre-requisitos: |
 Familiaridade básica em HTML, conforme
 Começando com o HTML. Formatação de texto em HTML, conforme
 Fundamentos do texto em HTML.
  |
| Objetivo: |
 Para aprender a implementar um hiperlink efetivamente e vincular vários
 arquivos juntos.
  |

O que é um hiperlink?
---------------------

Os hiperlinks são uma das inovações mais interessantes que a Web oferece. Bem, eles são uma característica da Web desde o início, mas são o que torna a Web como ela é — eles nos permitem vincular nossos documentos a qualquer outro documento (ou outro recurso) que queremos. Também podemos vincular para partes específicas de documentos e podemos disponibilizar aplicativos em um endereço web simples (em contraste com aplicativos nativos, que devem ser instalados e tantas outras coisas). Qualquer conteúdo da web pode ser convertido em um link, para que, quando clicado (ou ativado de outra forma) fará com que o navegador vá para outro endereço (URL).

**Nota:** Um URL pode apontar para arquivos HTML, arquivos de texto, imagens, documentos de texto, arquivos de vídeo e áudio e qualquer outra coisa que possa estar na Web. Se o navegador não souber exibir ou manipular o arquivo, ele perguntará se você deseja abrir o arquivo (nesse caso, o dever de abrir ou manipular o arquivo é passado para um aplicativo nativo adequado no dispositivo) ou fazer o download dele (nesse caso, você pode tentar lidar com isso mais tarde).

A página inicial da BBC, por exemplo, contém um grande número de links que apontam não apenas para várias notícias, mas também diferentes áreas do site (funcionalidade de navegação), páginas de login/registro (ferramentas do usuário) e muito mais.

![frontpage of bbc.co.uk, showing many news items, and navigation menu functionality](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/bbc-homepage.png)

Anatomia de um link
-------------------

Um link básico é criado envolvendo o texto (ou outro conteúdo, veja Block level links) que você quer transformar em um link dentro de um elemento `<a>`, e dando-lhe um atributo `href`, (também conhecido como **Hypertext Reference**, ou **target**) que conterá o endereço da Web para o qual você deseja que o link aponte.

```html
<p>
  Estou criando um link para
  <a href="https://www.mozilla.org/pt-BR/">a página inicial da Mozilla</a>.
</p>
```

Isso nos dá o seguinte resultado:

Estou criando um link para a página inicial da Mozilla.

### Adicionando informações de suporte com o atributo *title*

Outro atributo que você pode querer adicionar aos seus links é o `title`; pretende-se que ele contenha informações úteis adicionais sobre o link, como, que tipo de informação a página contém ou informações importantes. Por exemplo:

```html
<p>
  Estou criando um link para
  <a
 href="https://www.mozilla.org/pt-BR/"
 title="O melhor lugar para encontrar mais informações sobre a missão da Mozilla e como contribuir">
    a página inicial da Mozilla</a
 >.
</p>
```

Isto nos dá o seguinte resultado (o título aparecerá como uma dica de ferramenta quando o link estiver suspenso):

Estou criando um link para a página inicial da Mozilla.

**Nota:** Um título de link só é revelado ao passar o mouse sobre ele, o que significa que as pessoas que dependem do teclado ou *touchscreen* para navegar em páginas web terão dificuldade em acessar a informação do título. Se a informação de um título é realmente importante para a usabilidade da página, então você deve apresentá-la de uma maneira que será acessível a todos os usuários, por exemplo, colocando-o no texto normal.

Aprendizagem na prática: criando seu próprio link de exemplo

Momento da aprendizagem na prática: gostaríamos que você criasse um documento HTML usando seu editor de código local (nosso modelo inicial seria interessante.)

* Dentro do corpo do HTML, tente adicionar um ou mais parágrafos ou outros tipos de conteúdo que você já conhece.
* Transforme alguns dos conteúdos em links.
* Inclua atributos de título.
### Links de nível de bloco

Como falamos anteriormente, você pode transformar qualquer conteúdo em um link, mesmo elementos de nível de bloco. Se você tiver uma imagem que queira transformar em um link, você pode simplesmente colocar a imagem entre as tags `<a></a>`.

```html
<a href="https://www.mozilla.org/pt-BR/">
  <img
 src="mozilla-image.png"
 alt="Logotipo mozilla que liga a página inicial do mozilla" />
</a>
```

**Nota:** Você descobrirá muito mais sobre o uso de imagens na Web em artigo posterior.

Um guia rápido sobre URLs e caminhos
------------------------------------

Para entender completamente os destinos de links, você precisa entender URLs e caminhos de arquivos. Esta seção fornece as informações que você precisa para conseguir isso.

Um URL ou *Uniform Resource Locator* é simplesmente uma sequência de texto que define onde algo está localizado na Web. Por exemplo, a página inicial em inglês da Mozilla está localizada em `https://www.mozilla.org/en-US/`.

Os URLs usam caminhos para encontrar arquivos. Os caminhos especificam onde, no explorador de arquivos, o recurso que você está interessado está localizado. Vejamos um exemplo simples de uma estrutura de diretório (veja o diretório de criação de hiperlinks).

![A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/simple-directory.png)

A raiz dessa estrutura de diretório é chamada de `criação de hiperlinks`. Ao trabalhar localmente com um site, você terá um diretório no qual ele todo esta dentro. Incluído na raiz, temos um arquivo `index.html` e um arquivo `contacts.html`. Em um site real, `index.html` seria nossa página inicial ou página de entrada (uma página da web que serve como ponto de entrada para um site ou uma seção específica de um site).

Existem também dois diretórios dentro da nossa raiz — `pdfs` e `projects`. Cada um deles contém um único arquivo — um PDF (`projetos-brief.pdf`) e um arquivo `index.html`, respectivamente. Observe como é possível, felizmente, ter dois arquivos `index.html` em um projeto, desde que estejam em locais diferentes no sistema de arquivos. Muitos sites fazem isso. O segundo `index.html` poderia ser a página de destino principal para informações relacionadas ao projeto.

* **Mesmo diretório:** se você deseja incluir um hiperlink dentro de `index.html` (o `index.html` de nível superior) apontando para `contacts.html`, basta especificar o nome do arquivo ao qual deseja vincular, já que está no mesmo diretório que o arquivo atual. Portanto, o URL que você usaria seria `contacts.html`:

```html
<p>
  Deseja entrar em contato com um membro da equipe específica? Encontre
  detalhes sobre nossos serviços em nossa
  <a href="contato.html">página de contatos</a>.
</p>
```

* **Movendo-se para baixo em subdiretórios:** se você quisesse incluir um hiperlink dentro do `index.html` apontando para o `projeto/index.html`, você precisaria descer no diretório de projetos antes de indicar o arquivo que deseja vincular. Isso é feito especificando o nome do diretório, depois uma barra inclinada e, em seguida, o nome do arquivo. Então o URL que você usaria seria `projeto/index.html`:

```html
<p>
  Visite minha <a href="projects/index.html">pagina inicial do projeto</a>.
</p>
```

* **Movendo-se de volta para os diretórios pai:** se você quisesse incluir uma hiperlink dentro de `projeto/index.html` apontando para pdfs/`projetos-brief.pdf`, você precisaria subir um nível de diretório e voltar para o diretório `pdf`. "Subir um diretório" é indicado usando dois pontos — `..` — então a URL que você usaria seria `../pdfs/project-brief.pdf`

```html
<p>
  Um link para o meu
  <a href="../pdfs/project-brief.pdf"> breve de projeto</a>.
</p>
```

**Nota:** Você pode combinar várias instâncias desses recursos em URLs complexas, se necessário, por exemplo`../../../complex/path/to/my/file.html`.

### Fragmentos de documento

É possível vincular a uma parte específica de um documento HTML (conhecido como um **fragmento de documento**) e não apenas ao topo do documento. Para fazer isso, primeiro você deve atribuir um atributo "id" ao elemento ao qual deseja vincular. Normalmente faz sentido vincular a um título específico, então ficaria algo do tipo:

```html
<h2 id="Mailing\_address">Endereço de correspondência</h2>
```

Em seguida, para vincular a esse `id` específico, você o incluirá no final do URL, precedido por um símbolo de hashtag/cerquilha, por exemplo:

```html
<p>
  Quer escrever uma carta? Use nosso<a href="contacts.html#Mailing\_address"
 >endereço de correspondência</a
 >.
</p>
```

Você pode até usar apenas referência de fragmento do documento por si só para vincular a outra parte do mesmo documento:

```html
<p>
  O <a href="#Mailing\_address">endereço postal da empresa</a> pode ser
  encontrado na parte inferior desta página.
</p>
```

### URLs absolutos versus relativos

Dois termos que você encontrará na Web são URL **absoluto** e URL **relativo**:

**URL absoluto:** aponta para um local definido por sua localização absoluta na web, incluindo "protocolo" e "nome de domínio". Então, por exemplo, se uma página `index.html` for carregada para um diretório chamado `projeto` que fica dentro da raiz de um servidor web, e o domínio do site é `http://www.exemplo.com`, a página estará disponível em `http://www.exemplo.com/projeto/index.html` (ou mesmo apenas `http://www.exemplo.com/projeto/`, pois a maioria dos servidores web apenas procura uma página de destino como index.html para carregar, se não está especificado no URL.)

Um URL absoluto sempre aponta para o mesmo local, não importa onde seja usado.

**URL relativa:** aponta para um local *relativo* ao arquivo do qual você está vinculando, mais como o que vimos na seção anterior. Por exemplo, se desejássemos vincular nosso arquivo de exemplo em `http://www.exemplo.com/projeto/index.html` para um arquivo PDF no mesmo diretório, o URL seria apenas o nome do arquivo — por exemplo, `project-brief.pdf` — nenhuma informação extra é necessária. Se o PDF estava disponível em um subdiretório dentro de `projects` chamado `pdfs`, o link relativo seria `pdfs/projeto-brief.pdf` (o URL absoluto equivalente seria `http://www.example.com/projects/pdfs/project-brief.pdf`).

Um URL relativo apontará para lugares diferentes, dependendo da localização real do arquivo ao qual você se refere — por exemplo, se tivermos movido nosso arquivo `index.html` para fora do diretório de projetos e para a raiz do site (no nível superior, não em qualquer diretório), o link relativo à URL referente a `pdfs/project-brief.pdf` agora apontaria para um arquivo localizado em `http://www.example.com/pdfs/project-brief.pdf`, não para um arquivo localizado em `http://www.example.com/projects/pdfs/project-brief.pdf`.

Práticas recomendadas
---------------------

Existem algumas práticas recomendadas a seguir, ao escrever links. Vejamos.

### Use palavras-chave claras

É muito fácil jogar links na sua página, porém somente isto não é suficiente. Precisamos tornar nossos links *acessíveis* a todos os leitores, independentemente do contexto atual e de quais ferramentas eles prefiram. Por exemplo:

* Os usuários de leitores de telas gostam pular de link a outro link na página e ler links fora do contexto.
* Os motores de busca usam o texto do link para indexar arquivos de destino, por isso é uma boa idéia incluir palavras-chave no texto do link para descrever efetivamente o que está sendo vinculado.
* Os usuários normalmente deslizam sobre a página em vez de ler cada palavra, e são atraídos para recursos de página que se destacam, como links. Eles acharão os textos descritivos de links úteis.

Vejamos um exemplo específico:

*Texto de link* **correto**: Baixe o Firefox

```html
<p><a href="https://firefox.com/"> Baixe o Firefox </a></p>
```

*Texto de link* **incorreto**: clique aqui para baixar o Firefox

```html
<p><a href="https://firefox.com/"> clique aqui </a> para baixar o Firefox</p>
```

Outras dicas:

* Não repita o URL como parte do texto do link — Os URLs parecem feios e até são mais feios quando um leitor de tela os lê letra por letra.
* Não diga "link" ou "links para" no texto do link — é apenas ruído. Os leitores de tela já dizem às pessoas que existe um link. Os usuários visuais também sabem que existe um link, porque eles geralmente são de cor diferente e sublinhados (esta convenção geralmente não deve ser quebrada, pois os usuários estão muito acostumados a isso).
* Mantenha seu rótulo de link o mais curto possível — links longos irritam especialmente os usuários de leitores de tela, que têm que ouvir o texto inteiro lido.
* Minimize instâncias em que o mesmo texto esteja ligado a diferentes lugares. Isso pode causar problemas para os usuários do leitor de tela, que muitas vezes mostrará uma lista dos links fora do contexto — vários links todos rotulados como "clique aqui", "clique aqui", "clique aqui"... seria confuso.
### Use links relativos sempre que possível

A partir da descrição acima, você pode pensar que é uma boa idéia usar apenas links absolutos o tempo todo; Afinal, eles não quebram quando uma página é movida como pode ocorrer com *links relativos*. No entanto, você deve usar *links relativos* sempre que possível ao vincular a outros locais dentro do mesmo site (ao vincular a outro site, você precisará usar um link absoluto):

* Para começar, é muito mais fácil verificar seu código — os URL relativos geralmente são muito mais curtos que os URLs absolutos, o que torna o código de leitura muito mais fácil.
* Em segundo lugar, é mais eficiente usar URLs relativas sempre que possível. Quando você usa um URL absoluto, o navegador começa procurando a localização real do servidor no Servidor de Nomes de Domínio "DNS"; veja Como a web funciona para obter mais informações), então ele vai para esse servidor e encontra o arquivo que está sendo solicitado. Por outro lado, com um URL relativo, o navegador apenas procura o arquivo que está sendo solicitado, no mesmo servidor. Então, se você usa URLs absolutos para fazer o que os URLs relativos fariam, você está constantemente fazendo o seu navegador realizar trabalho extra, o que significa que ele irá executar de forma menos eficiente.
### Vinculando-se a recursos que não sejam HTML — deixe indicadores claros

Ao vincular a um arquivo que será baixado (como um documento PDF ou Word) ou transmitido (como vídeo ou áudio) ou ainda tiver outro efeito potencialmente inesperado (abrir uma janela pop-up ou carregar um filme Flash), você deve adicionar uma redação clara para reduzir qualquer confusão. Pode ser bastante irritante, por exemplo:

* Se você estiver em uma conexão de baixa banda larga, clicar em um link e, em seguida, um download de muitos megabytes começa inesperadamente.
* Se você não tiver instalado o Flash Player, clicar em um link e, de repente, ser levado para uma página que requer Flash Player.

Vejamos alguns exemplos, para ver que tipo de texto pode ser usado aqui:

```html
<p>
  <a href="http://www.example.com/large-report.pdf">
    Baixe o relatório de vendas (PDF, 10MB)
  </a>
</p>

<p>
  <a href="http://www.example.com/video-stream/">
    Assista ao vídeo (o fluxo abre em separado, qualidade HD)
  </a>
</p>

<p>
  <a href="http://www.example.com/car-game">
    Jogue o jogo de carro (requer Flash Player)
  </a>
</p>
```

### Use o atributo de download ao vincular a um download

Quando você está apontando para um arquivo que deve ser baixado em vez de ser aberto no navegador, poderá usar o atributo de download para fornecer um nome de arquivo salvo padrão. Aqui está um exemplo, com um link de `baixar` para a versão do Windows 39 do Firefox:

```html
<a
 href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
 download="firefox-39-installer.exe">
  Faça o download do Firefox 39 para Windows
</a>
```

Aprendizagem ativa: criando um menu de navegação
------------------------------------------------

Para este exercício, gostaríamos que você vinculasse algumas páginas a um menu de navegação para criar um *site* com várias páginas. Essa é uma maneira comum de criá-los — a mesma estrutura de página é usada em todas elas, incluindo o mesmo menu de navegação. Portanto, quando os *links* são clicados, dá a impressão de que você permanece no mesmo lugar e que um conteúdo diferente está sendo criado.

Você precisará fazer cópias locais das quatro páginas a seguir, tudo no mesmo diretório (veja também o diretório de início do menu de navegação para uma lista completa de arquivos):

* index.html
* projects.html
* pictures.html
* social.html

Você deve:

1. Adicionar uma lista não ordenada no local indicado em uma página, contendo os nomes das páginas a serem vinculadas. Um menu de navegação geralmente é apenas uma lista de *links*, então está semanticamente correto.
2. Transformar o nome de cada página em um *link* para essa página.
3. Copiar o menu de navegação para cada uma.
4. Em cada página, remova apenas o *link* para a mesma página - é confuso e inútil que uma página inclua um link para si mesma, e a falta de um *link* é um bom lembrete visual de qual página você está atualmente.

O exemplo final acabaria por parecer algo assim:

![An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/navigation-example.png)

**Nota:** Se você ficar preso, ou não tem certeza se o fez bem, você pode verificar o diretório de navegação-menu-marcado para ver a resposta correta.

Links de e-mail
---------------

É possível criar *links* ou botões que, quando clicados, abrem uma nova mensagem de e-mail de saída em vez de vincular a um recurso ou página. Isso é feito usando o elemento `<a>` e o `mailto:` estrutura de URL.

Na sua forma mais comum, um `mailto:` simplesmente indica o endereço de e-mail do destinatário pretendido. Por exemplo:

```html
<a href="mailto:nowhere@mozilla.org">Enviar email para nenhum lugar</a>
```

Isso resulta em um *link* que se parece com isto: Enviar e-mail para lugar nenhum.

Na verdade, o endereço de e-mail é opcional. Se você deixar de fora (ou seja, seu `href` for simplesmente "mailto:"), uma nova janela de e-mail de saída será aberta pelo aplicativo de e-mail do usuário sem um destinatário. Isso geralmente é útil como "Compartilhar" *links* que os usuários podem clicar para enviar um e-mail para um endereço escolhido.

### Especificando detalhes

Além do endereço de e-mail, você pode fornecer outras informações. Na verdade, qualquer campo de cabeçalho de correio padrão pode ser adicionado ao URL do `mailto:` que você fornece. Os mais utilizados são "assunto", "cc" e "corpo" (que não é um campo de cabeçalho verdadeiro, mas permite que você especifique uma mensagem de conteúdo curta para o novo e-mail). Cada campo e seu valor são especificados como um termo de consulta.

Aqui está um exemplo que inclui um cc, bcc, assunto e corpo de texto:

```html
<a
 href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Aqui está um exemplo, incluindo um cc, bcc, assunto e corpo:
</a>
```

**Nota:** Os valores de cada campo devem ser codificados por URL, ou seja, com caracteres não imprimíveis (caracteres invisíveis, como guias, carriage returns e quebras de página) e espaços com percent-escaped. Observe também o uso do ponto de interrogação (`?`) Para separar o URL principal dos valores do campo e do *e* comercial (&) para separar cada campo no `mailto:` URL. Essa é a notação de consulta padrão do URL. Leia O método GET (en-US) para entender para que esta notação de consulta é mais comum.

Aqui estão alguns outros exemplos de URLs de `mailto:`

* mailto:
* mailto:nowhere@mozilla.org
* mailto:nowhere@mozilla.org,nobody@mozilla.org
* mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
* mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject
Resumo
------

Por enquanto isto é tudo sobre links! Você retornará aos links mais tarde no curso quando começar a analisar o estilo deles. Em seguida, em HTML, retornaremos à semântica de texto e veremos alguns recursos mais avançados/incomuns que você achará úteis — No próximo artigo você verá a formatação avançada de texto.

* Anterior
* Menu: Introduction to HTML
* Próxima


O que está no cabeçalho? Metadados em HTML - Aprendendo desenvolvimento web

O que está no cabeçalho? Metadados em HTML
==========================================

* Anterior
* Menu: Introduction to HTML
* Próxima

O head (en-US) de um documento HTML é a parte que não é exibida no navegador da Web quando a página é carregada. Ele contém informações como title , links para `<css>` (se você deseja modelar seu conteúdo HTML com CSS), links para favicons personalizados e outros metadados (dados sobre o HTML, como quem o escreveu, e palavras-chave importantes que descrevem o documento.) Neste artigo, abordaremos todas as coisas acima e mais. Dando-lhe uma boa base para lidar com marcação.

|  |  |  |
| --- | --- | --- |
| Pré-requisitos: |

|  |
| --- |
|
 Familiaridade básica em HTML, tal como
 Iniciando com HTML. |

 |
| Objetivo: |
 Aprender sobre o cabeçalho HTML, seu propósito, os itens mais
 importantes que ele pode conter e que efeito isso pode ter no documento
 HTML.
  |

O que há no cabeçalho HTML?
---------------------------

Vamos rever o simples Documento HTML que abordamos no artigo anterior:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Minha página de teste</title>
  </head>
  <body>
    <p>Essa é minha página</p>
  </body>
</html>
```

O cabeçalho HTML é o conteúdo do elemento `<head>` — ao contrário do conteúdo do elemento `<body>` (que são exibidos na página quando carregados no navegador), o conteúdo do cabeçalho não é exibido na página, em vez disso, o trabalho do cabeçalho é conter metadados sobre o documento. No exemplo seguinte, o cabeçalho é bem simples:

```html
<head>
  <meta charset="utf-8" />
  <title>Minha página de teste</title>
</head>
```

Em páginas maiores, o cabeçalho pode ter mais conteúdo. Tente acessar um dos seus sites favoritos e use as ferramentas de desenvolvimento para verificar o conteúdo do cabeçalho. Nosso objetivo aqui não é mostrar a você como usar tudo o que é possível pôr no cabeçalho, mas te ensinar a usar as coisas mais obvias que você vai querer incluir no cabeçalho, e lhe dar alguma familiaridade. Vamos começar.

Adicionando um título
---------------------

Nós já vimos o elemento `<title>` em ação — ele pode ser usado para adicionar um título ao documento, mas pode ser confundido com o elemento `<h1>` (en-US), que é usado para adicionar um título de nível superior ao conteúdo do body — as vezes também é associado como o título da página. Mas são coisas diferentes!

* O elemento `<h1>` (en-US) aparece na página quando é carregado no navegador — geralmente isso deve ser usado uma vez por página, para marcar o título do conteúdo da sua página, (o título da história, ou da notícia, ou o que quer que seja apropriado para o uso).
* O elemento `<title>` é um metadado que representa o título de todo o document HTML (não o conteúdo do documento).
### Aprendizado ativo: observando um exemplo simples

1. Para começar esta aprendizagem ativa, gostaríamos que você fosse ao nosso depósito GitHub e baixasse uma cópia do nossa página title-example.html. Para fazer isso:
    1. Copie e cole o código em um novo arquivo de texto no seu editor e salve-o com o nome de index.html em um lugar de fácil acesso.
    2. Pressione o botão "Raw" na página do GitHub, que faz com que o código bruto apareça (possivelmente em uma nova guia do navegador). Em seguida, escolha o menu *Arquivo do navegador> Salvar página como ...* e escolha um local adequado para salvar o arquivo.
2. Agora abra o arquivo no seu navegador. Você deve ver algo assim:

 ![A simple web page with the title set to 'title' element, and the 'h1' set to 'h1' element.](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/title-example.png)Agora deve ser completamente óbvio onde o conteúdo `<h1>` aparece e onde o conteúdo `<title>` aparece!
3. Você também deve tentar abrir o código no seu editor, editar o conteúdo desses elementos e atualizar a página no seu navegador. divirta-se.

O conteúdo do elemento `<title>` também é usado de outras maneiras. Por exemplo, se você tentar favoritar a página, (*Favoritos > Adicionar página aos favoritos* ou o ícone da estrela na barra de URL no Fireofx), você verá o conteúdo `<title>` preenchido como o nome sugerido do favorito.

![A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the 'title' element ](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bookmark-example.png)

Os conteúdos `<title>` também são usados nos resultados de pesquisa, conforme você verá abaixo.

Metadados: o elemento <meta>
----------------------------

Metadados é dado descreve dados, e HTML possui uma maneira "oficial" de adicionar metadados a um documento — o elemento `<meta>`. Claro, as outras coisas em que estamos falando neste artigo também podem ser pensadas como metadados. Existem muitos tipos diferentes de elementos `<meta>` que podem ser incluídos no <head> da sua página, mas não tentaremos explicar todos eles nesta fase, pois seria muito confuso. Em vez disso, explicaremos algumas coisas que você pode ver comumente, apenas para lhe dar uma idéia.

### Especificando a codificação de caracteres do seu documento

No exemplo que vimos acima, esta linha foi incluída:

```html
<meta charset="utf-8" />
```

Este elemento simplesmente especifica a codificação de caracteres do documento — o conjunto de caracteres que o documento está autorizado a usar. `utf-8` é um conjunto de caracteres universal que inclui praticamente qualquer caractere de qualquer linguagem humana. Isso significa que sua página web poderá lidar com a exibição de qualquer idioma; portanto, é uma boa idéia configurar isso em todas as páginas web que você cria! Por exemplo, sua página poderia lidar com o Inglês e Japonês muito bem:

![a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/correct-encoding.png)Se você definir sua codificação de caracteres para `ISO-8859-1`, por exemplo (o conjunto de caracteres para o alfabeto latino), a renderização de sua página ficaria toda bagunçada:

![a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bad-encoding.png)

**Nota:** Alguns navegadores (como o Chrome) corrigem automaticamente as codificações incorretas, então, dependendo do navegador que você usar, você pode não ver esse problema. Ainda assim, você deve definir uma codificação do `utf-8` em sua página, para evitar problemas em outros navegadores.

### Aprendizagem ativa: Experimento com a codificação de caracteres

Para experimentar isso, revise o modelo HTML simples que você obteve na seção anterior em `<title>` (a página title-example.html), tente alterar o valor do meta charset para `ISO-8859-1` e adicione o Japonês à sua página . Este é o código que usamos:

```html
<p>Exemplo Japonês:ご飯が熱い</p>
```

### Adicionando um autor e descrição

Muitos elementos `<meta>` incluem atributos de `name` e `content`:

* O `name` especifica o tipo de elemento meta que é; que tipo de informação contém.
* O `content` especifica o conteúdo real do meta.

Dois desses meta-elementos que são úteis para incluir na sua página definem o autor da página e fornecem uma descrição concisa da página. Vejamos um exemplo:

```html
<meta name="author" content="Chris Mills" />
<meta
 name="description"
 content="A Área de Aprendizagem do MDN tem como objetivo
proporcionar iniciantes em Web com tudo o que eles precisam saber
para começar a desenvolver sites e aplicativos." />
```

Especificar um autor é útil de muitas maneiras: é útil para poder descobrir quem escreveu a página, se quiser enviar perguntas sobre o conteúdo que você gostaria de contacta-la. Alguns sistemas de gerenciamento de conteúdo possuem ferramentas para extrair automaticamente as informações do autor da página e disponibilizá-las para seus propósitos.

Especificar uma descrição que inclua palavras-chave relacionadas ao conteúdo da sua página é útil porque tem potencial para tornar sua página mais alta nas pesquisas relevantes realizadas nos mecanismos de busca (tais atividades são denominadas Search Engine Optimization ou SEO.

### Aprendizagem ativa: Uso da descrição nos motores de busca

A descrição também é usada nas páginas de resultados do mecanismo de pesquisa. Vamos passar por um exercício para explorar isso

1. Vá para a página inicial da Mozilla Developer Network.
2. Veja a fonte da página (botão direito do mouse/
 `Ctrl`
 + clique na página, escolha *Ver código-fonte da página* no menu de contexto).
3. Encontre a meta tag de descrição. Isso parecerá assim:

```html
<meta
 name="description"
 content="A Mozilla Developer Network (MDN) fornece
informações sobre tecnologias Open Web, incluindo HTML, CSS e API para ambos
Sites e aplicativos HTML5. Ele também documenta produtos Mozilla, como o sistema operacional Firefox." />
```

4. Agora, procure por "Mozilla Developer Network" no seu motor de busca favorito (Utilizamos o Yahoo.) Você notará a descrição `<meta>` e `<title>` elemento usado no resultado da pesquisa — definitivamente vale a pena ter!

 ![A Yahoo search result for "Mozilla Developer Network"](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/search-result.png)

**Nota:** No Google, você verá algumas subpáginas relevantes do MDN listadas abaixo do principal link da página inicial do MDN — estes são chamados de sitelinks e são configuráveis nas Ferramentas para webmasters do Google — uma maneira de melhorar os resultados de pesquisa do seu site no mecanismo de pesquisa do Google.

**Nota:** Muitos recursos `<meta>` simplesmente não são mais usados. Por exemplo, a palavra-chave `<meta>` elemento (`<meta name="keywords" content="preencha, suas, palavras-chave, aqui">`) — que é suposto fornecer palavras-chave para os motores de busca para determinar a relevância dessa página para diferentes termos de pesquisa — são ignorados pelos motores de busca, porque os spammers estavam apenas preenchendo a lista de palavras-chave com centenas de palavras-chave, influenciando os resultados.

### Outros tipos de metadados

Ao navegar pela web, você também encontrará outros tipos de metadados. Muitos dos recursos que você verá em sites são criações proprietárias, projetados para fornecer a determinados sites (como sites de redes sociais) informações específicas que eles podem usar.

Por exemplo, Open Graph Data é um protocolo de metadados que o Facebook inventou para fornecer metadados mais ricos para sites. No código-fonte MDN, você encontrará isso:

```html
<meta
 property="og:image"
 content="https://developer.mozilla.org/mdn-social-share.png" />
<meta
 property="og:description"
 content="A Mozilla Developer Network (MDN) fornece
informações sobre tecnologias Open Web, incluindo HTML, CSS e APIs para ambos os sites da Web
e aplicativos HTML5. Ele também documenta produtos Mozilla, como o sistema operacional Firefox." />
<meta property="og:title" content="Mozilla Developer Network" />
```

Um efeito disso é que, quando você liga a MDN no facebook, o link aparece junto com uma imagem e descrição: uma experiência mais rica para usuários.

![Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/facebook-output.png)O Twitter também possui seus próprios metadados proprietários, o que tem um efeito semelhante quando o URL do site é exibido no twitter.com. Por exemplo:

```html
<meta name="twitter:title" content="Mozilla Developer Network" />
```

Adicionando ícones personalizados ao seu site
---------------------------------------------

Para enriquecer ainda mais o design do seu site, você pode adicionar referências a ícones personalizados em seus metadados, e estes serão exibidos em determinados contextos. O mais usado é o **favicon** (abreviação de "favorites icon", referindo-se ao seu uso nas listas "favoritos" nos navegadores).

O humilde favicon existe há muitos anos. É o primeiro ícone desse tipo: um ícone 16 pixels quadrados usado em vários lugares. Você pode ver (dependendo do navegador) ícones favoritos exibidos na guia do navegador que contém cada página aberta e ao lado de páginas marcadas no painel de favoritos.

Um favicon pode ser adicionado à sua página:

1. Salvando-o no mesmo diretório que a página de índice do site, salvo no formato `.ico` (a maioria dos navegadores suportará favicons em formatos mais comuns como `.gif` ou `.png`, mas usar o formato ICO irá garantir que ele funcione tão bem como o Internet Explorer 6 .)
2. Adicionando a seguinte linha ao HTML `<head>` para fazer referência a ele:

```html
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
```

Aqui está um exemplo de um favicon em um painel de faforitos:

![The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bookmark-favicon.png)

Há muitos outros tipos de ícones para considerar nestes dias também. Por exemplo, você encontrará isso no código-fonte da página inicial do MDN Web Docs:

```html
<!-- iPad de terceira geração com tela retina de alta resolução: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="144x144"
 href="https://developer.mozilla.org/static/img/favicon144.png" />
<!-- iPhone com tela retina de alta resolução: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="https://developer.mozilla.org/static/img/favicon114.png" />
<!-- iPad de primeira e segunda geração: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="72x72"
 href="https://developer.mozilla.org/static/img/favicon72.png" />
<!-- iPhone não-Retina, iPod Touch e dispositivos Android 2.1+: -->
<link
 rel="apple-touch-icon-precomposed"
 href="https://developer.mozilla.org/static/img/favicon57.png" />
<!-- favicon básico -->
<link
 rel="shortcut icon"
 href="https://developer.mozilla.org/static/img/favicon32.png" />
```

Os comentários explicam onde cada ícone é usado - esses elementos cobrem coisas como fornecer um ícone de alta resolução agradável para usar quando o site é salvo na tela inicial do iPad.

Não se preocupe muito com a implementação de todos esses tipos de ícone agora — este é um recurso bastante avançado, e você não precisará ter conhecimento disso para avançar no curso. O objetivo principal aqui é permitir que você saiba o que são essas coisas, no caso de você encontrá-las enquanto navega no código-fonte dos outros sites.

**Nota:** Se o seu site usa uma Política de Segurança de Conteúdo (CSP) para aumentar sua segurança, a política se aplica ao favicon. Se você encontrar problemas com o favicon não carregando, verifique se a diretiva `img-src` (en-US) do cabeçalho `Content-Security-Policy` não está impedindo o acesso a ele.

Aplicando CSS e JavaScript ao HTML
----------------------------------

Todos os sites que você usar nos dias atuais empregarão o CSS para torná-los legais e o JavaScript para ativar a funcionalidade interativa, como players de vídeo, mapas, jogos e muito mais. Estes são comumente aplicados a uma página web usando o elemento `<link>` e o elemento `<script>` , respectivamente.

* O elemento `<link>` sempre vai no cabeçalho do seu documento. Isso requer dois atributos, rel = "stylesheet", que indica que é a folha de estilo do documento e href, que contém o caminho para o arquivo de folha de estilo:

```html
<link rel="stylesheet" href="meu-arquivo-css.css" />
```

* O elemento `<script>` não precisa ir no cabeçalho; na verdade, muitas vezes é melhor colocá-lo na parte inferior do corpo do documento (antes da tag `</body>` de fechamento), para garantir que todo o conteúdo HTML tenha sido lido pelo navegador antes de tentar aplicar o JavaScript nele (se o JavaScript tentar acessar um elemento que ainda não existe, o navegador gerará um erro.)

```html
<script src="meu-arquivo-js.js"></script>
```

**Nota:** O elemento `<script>` pode parecer um elemento vazio, mas não é, e, portanto, precisa de uma tag de fechamento. Em vez de apontar para um arquivo de script externo, você também pode escolher colocar seu script dentro do elemento `<script>`.
### Aprendizagem ativa: aplicar CSS e JavaScript a uma página

1. Para iniciar esta aprendizagem ativa, pegue uma cópia dos nossos arquivos meta-example.html, script.js e style.css e salve-os em seu computador local no mesmo diretório. Verifique se eles são salvos com os nomes e extensões de arquivo corretos.
2. Abra o arquivo HTML em seu navegador e seu editor de texto.
3. Ao seguir as informações fornecidas acima, adicione os elementos `<link>` e `<script>` ao seu HTML, para que seu CSS e JavaScript sejam aplicados ao seu HTML.

Se for feito corretamente, quando você salvar seu HTML e atualizar seu navegador, verá que as coisas mudaram:

![Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/js-and-css.png)

* O JavaScript adicionou uma lista vazia à página. Agora, quando você clica em qualquer lugar da lista, uma caixa de diálogo aparecerá pedindo para que você, insira algum texto para um novo item de lista. Quando você pressiona o botão OK, um novo item será adicionado à lista contendo o texto. Quando você clica em um item de lista existente, uma caixa de diálogo será exibida permitindo que você altere o texto do item.
* O CSS fez com que o plano de fundo ficasse verde e o texto se tornasse maior. Ele também estilizou parte do conteúdo que o JavaScript adicionou à página (a barra vermelha com a borda preta é o estilo que o CSS adicionou à lista gerada por JS).

**Nota:** Se você ficar preso neste exercício e não conseguir aplicar o CSS/JS, tente verificar nossa página de exemplo css-and-js.html.

Definir o idioma principal do documento
---------------------------------------

Finalmente, vale a pena mencionar que você pode (e realmente deveria) definir o idioma da sua página. Isso pode ser feito adicionando o atributo lang à tag HTML de abertura (como visto no meta-example.html e mostrado abaixo).

```html
<html lang="pt-BR"></html>
```

Isso é útil de várias maneiras. O seu documento HTML será indexado de forma mais eficaz pelos motores de busca se o seu idioma for definido (permitindo que ele apareça corretamente em resultados específicos do idioma, por exemplo), e é útil para pessoas com deficiências visuais usando leitores de tela (por exemplo, a palavra "seis" existe em Francês e Inglês, mas é pronunciado de forma diferente.)

Você também pode definir seções secundárias do seu documento para serem reconhecidas em diferentes idiomas. Por exemplo, podemos configurar nossa seção do idioma Japonês para ser reconhecida como japonesa, assim:

```html
<p>Exemplo japonês: <span lang="jp">ご飯が熱い。</span>.</p>
```

Esses códigos são definidos pelo padrão ISO 639. Você pode encontrar mais sobre eles em Tags de idioma em HTML e XML.

Resumo
------

Isso marca o fim de nossa rápida turnê pelo HTML — há muito mais que você pode fazer aqui, mas uma excursão exaustiva seria chata e confusa nesta fase, e nós só queríamos dar uma idéia das coisas mais comuns você encontrará lá, por enquanto! No próximo artigo, veremos o básico do texto HTML.

* Anterior
* Menu: Introduction to HTML
* Próxima


Estrutura de documento e sites - Aprendendo desenvolvimento web

Estrutura de documento e sites
==============================

* Anterior
* Menu: Introduction to HTML
* Próxima

Além de definir as partes individuais de sua página (como "um parágrafo" ou "uma imagem"),
o HTML também conta com vários elementos de nível de bloco usados para definir as áreas de seu site (como "o cabeçalho", "o menu de navegação", "a coluna de conteúdo príncipal"). Este artigo explora como planejar uma estrutura básica de website, e escrever o HTML para representar essa estrutura.

|  |  |
| --- | --- |
| Pre-requisitos: |
 Familiaridade básica com HTML, como mostrado em
 Iniciando com HTML. Formatação de texto HTML, como mostrado em
 Fundamentos do texto em HTML. O funcionamento de hiperlinks, como visto em
 Criando hyperlinks.
  |
| Objetivo: |
 Aprenda a estruturar seu documento usando tags semânticas e como
 elaborar a estrutura de um site simples.
  |

Seções básicas de um documento
------------------------------

As páginas da web podem e serão muito diferentes umas das outras, mas todas tendem a compartilhar componentes padrão semelhantes, a menos que a página exiba um vídeo ou um jogo em tela cheia, seja parte de algum tipo de projeto de arte ou seja mal estruturada:

cabeçalho (header)

Normalmente, uma grande faixa na parte superior com um grande título e / ou logotipo. É aí que as principais informações comuns sobre um site geralmente ficam de uma página para outra.

barra de navegação

Links para as principais seções do site; geralmente representado por botões de menu, links ou guias. Como o cabeçalho, esse conteúdo geralmente permanece consistente de uma página para outra - ter uma navegação inconsistente em seu site levará a usuários confusos e frustrados. Muitos web designers consideram a barra de navegação parte do cabeçalho em vez de um componente individual, mas isso não é um requisito; na verdade, alguns também argumentam que ter os dois separados é melhor para acessibilidade, já que os leitores de tela podem ler melhor os dois recursos se estiverem separados.

conteúdo principal

Uma grande área no centro que contém a maior parte do conteúdo exclusivo de uma determinada página da Web, por exemplo, o vídeo que você deseja assistir ou a história principal que você está lendo ou o mapa que deseja visualizar ou as manchetes de notícias, etc. Esta é a única parte do site que definitivamente irá variar de página para página!

barra lateral (sidebar)

Algumas informações periféricas, links, cotações, anúncios etc. Geralmente, isso é contextual ao conteúdo principal (por exemplo, em uma página de um artigo de notícias, a barra lateral pode conter a biografia do autor ou links para artigos relacionados), mas há também casos em que você encontrará alguns elementos recorrentes como um sistema de navegação secundário.

rodapé (footer)

Uma faixa na parte inferior da página que geralmente contém letras pequenas, avisos de direitos autorais ou informações de contato. É um lugar para colocar informações comuns (como o cabeçalho), mas geralmente essas informações não são críticas ou secundárias ao próprio site. O rodapé também é usado às vezes para fins de SEO, fornecendo links para acesso rápido a conteúdo popular. Um "site típico" poderia ser colocado assim:

![a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/sample-website.png)

HTML para estruturar conteúdo
-----------------------------

O exemplo simples mostrado acima não é bonito, mas é perfeitamente aceitável para ilustrar um exemplo típico de layout de website. Alguns sites têm mais colunas, algumas são bem mais complexas, mas você tem a ideia. Com o CSS certo, você poderia usar praticamente todos os elementos para agrupar as diferentes seções e fazer com que parecesse como você queria, mas como discutido anteriormente, precisamos respeitar a semântica e **usar o elemento certo para o trabalho certo.**

Isso ocorre porque os visuais não contam toda a história. Usamos cor e tamanho de fonte para chamar a atenção dos usuários para as partes mais úteis do conteúdo, como o menu de navegação e links relacionados, mas sobre pessoas com deficiência visual, por exemplo, que podem não encontrar conceitos como "rosa" e "grande". fonte "muito útil?

**Nota:** Nota: as pessoas daltônicas representam cerca de 4% da população mundial ou, em outras palavras, aproximadamente 1 em cada 12 homens e 1 em cada 200 mulheres são daltônicas. Cegos e deficientes visuais representam cerca de 4-5% da população mundial (em 2012 havia 285 milhões de pessoas no mundo, enquanto a população total era de cerca de 7 bilhões).

Em seu código HTML, você pode marcar seções de conteúdo com base em sua funcionalidade. Você pode usar elementos que representam as seções de conteúdo descritas acima sem ambigüidade, e tecnologias assistivas, como leitores de tela, podem reconhecer esses elementos e ajudar com tarefas como "localizar a navegação principal". "ou" encontre o conteúdo principal. " Como mencionamos anteriormente no curso, há um número de consequências de não usar a estrutura de elemento e semâtica certas para o trabalho certo.

Para implementar essa marcação semântica, o HTML fornece tags dedicadas que você pode usar para representar essas seções, por exemplo:

* **cabeçalho**: `<header>`.
* **barra de navegação:** `<nav>`.
* **conteúdo principal:** `<main>`, com várias subseções de conteúdo representadas por `<article>`, `<section>`, e elementos `<div>`.
* **rodapé:** `<footer>`.
### Aprendizagem ativa: explorando o código para o nosso exemplo

Nosso exemplo visto acima é representado pelo seguinte código (você também pode encontrar o exemplo em nosso repositório GitHub). Gostaríamos que você olhasse o exemplo acima e, em seguida, examine a listagem abaixo para ver quais partes compõem a seção do visual.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>My page title</title>
    <link
 href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
 rel="stylesheet"
 type="text/css" />
    <link rel="stylesheet" href="style.css" />

    <!-- as três linhas abaixo são uma correção para que elementos semânticos HTML5 funcionem em versões antigas do Internet Explorer-->
    <!--[if lt IE 9]>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
 <![endif]-->
  </head>

  <body>
    <!-- Esse é o cabeçalho (header) principal que vai ser usado em todas as páginas do nosso website -->

    <header>
      <h1>Header</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our team</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

      <!-- Um formulário de pesquisa é uma outra maneira não linear comum de navegar por um site. -->

      <form>
        <input type="search" name="q" placeholder="Search query" />
        <input type="submit" value="Go!" />
      </form>
    </nav>

    <!-- Esse é o conteúdo principal da nossa página -->
    <main>
      <!-- Contém um artigo -->
      <article>
        <h2>Article heading</h2>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
          lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
          viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
          et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
          congue enim, ut porta lorem lacinia consectetur.
        </p>

        <h3>Subsection</h3>

        <p>
          Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
          dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem.
          Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
        </p>

        <p>
          Pelientesque auctor nisi id magna consequat sagittis. Curabitur
          dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet.
          Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
        </p>

        <h3>Another subsection</h3>

        <p>
          Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
          soclis natoque penatibus et manis dis parturient montes, nascetur
          ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
          facilisis semper ac in est.
        </p>

        <p>
          Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
          tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
          ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
          diam iaculis velit, is fringille sem nunc vet mi.
        </p>
      </article>

      <!-- O contéudo do elemento aside pode ser aninhado dentro do conteúdo do elemento main -->
      <aside>
        <h2>Related</h2>

        <ul>
          <li><a href="#">Oh I do like to be beside the seaside</a></li>
          <li><a href="#">Oh I do like to be beside the sea</a></li>
          <li><a href="#">Although in the North of England</a></li>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well...</a></li>
        </ul>
      </aside>
    </main>

    <!-- Esse é o rodapé principal que vai ser usado em todas as páginas do nosso website -->

    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>
  </body>
</html>
```

Reserve um tempo para examinar o código e entendê-lo - os comentários dentro do código também devem ajudá-lo a entendê-lo. Não estamos pedindo que você faça muito mais neste artigo, porque a chave para entender o layout do documento é escrever uma estrutura HTML sólida e, em seguida, defini-la com CSS. Nós vamos aguardar isso até que você comece a estudar o CSS layout como parte do tópico do estudo de CSS.

Elementos de layout do HTML em mais detalhes
--------------------------------------------

É bom entender o significado geral de todos os elementos de seção do HTML em detalhes - isso é algo em que você trabalhará gradualmente ao começar a obter mais experiência com o desenvolvimento web. Você pode encontrar muitos detalhes lendo o nosso Elementos HTML. Para agora, estes são as principais definições que você deve tentar entender:

* `<main>` é para o conteúdo único dessa página.Use  apenas uma vez por página, e o coloca diretamente dentro do `<body>`. Não é ideal aninhar ele dentro de qualquer outro elemento senão o elemento .
* `<article>` inclui um bloco de conteúdo relacionado o qual faz sentido por si só, sem o restante da página (por exemplo, uma postagem singular dum blog).
* `<section>` é similar com
, mas ele é mais para agrupar uma única parte de página que constitui em um único pedaço de funcionalidade (por exemplo, um minimapa, ou um conjunto de manchetes e resumo). É considerado boa prática começar cada seção com um título; observe também que você pode dividir um
s em diferentes
s, ou
s em diferentes
s, dependendo do contexto.
* `<aside>` é para conteúdo que não está relacionados diretamente com os conteúdos principais, mas que podem providenciar informações complementares a esses (entradas de glossários, biografia do autor, links relacionados, etc.).
* `<header>` representa um grupo de conteúdo introdutório. Se ele for um elemento filho do `<body>`, Ele é um header global da página do site, mas se for um elemento filho de um `<article>` ou `<section>`, é definido como um header específico para essa seção ( tenta não confundir isso com títulos e cabeçalhos).
* `<nav>` contém a funcionalidade principal de navegação da página. Links secundários, etc., não iria na navegação
* `<footer>` representa um grupo de conteúdo final da página.
### Elementos de layout não-semânticos

Às vezes, você se depara numa situação em que não consegue encontrar um elemento semântico ideal para agrupar alguns itens ou agrupar algum conteúdo. Nesses momentos, convém agrupar um conjunto de elementos para afetá-los todos como uma única entidade com alguns CSS ou JavaScript. Para casos como esses, HTML oferece os elementos `<div>` e `<span>`. Você deve usá-los preferencialmente com um atributo `class` adequado, para fornecer a eles algum tipo de rótulo para que possam ser facilmente referenciados.

`<span>` é um elemento não-semântico embutido, que você deve usar apenas se não conseguir pensar em um elemento de texto semântico melhor para agrupar seu conteúdo ou se não quiser adicionar um significado específico. Por exemplo:

```html
<p>
  O rei voltou bêbado para o quarto às 01:00, a cerveja não fez nada para
  ajudá-lo enquanto ele cambaleando pela porta
  <span class="editor-note"
 >[Nota do editor: Neste ponto da peça, as luzes devem estar baixas]</span
 >.
</p>
```

Nesse caso, a nota do editor deve meramente fornecer orientação extra para o diretor da peça; não é suposto ter um significado semântico extra. Para usuários observador, talvez o CSS fosse usado para distanciar a nota um pouco do texto principal.

`<div>` é um elemento não semântico no nível de bloco, que você deve usar apenas se não conseguir pensar em um elemento de bloco semântico melhor para usar ou se não quiser adicionar um significado específico. Por exemplo, imagine um widget de carrinho de compras que você poderia escolher a qualquer momento durante o seu tempo em um site de comércio eletrônico:

```html
<div class="carrinho-de-compras">
  <h2>Carrinho de compras</h2>
  <ul>
    <li>
      <p>
        <a href=""><strong>Brincos de prata</strong></a
 >: $99.95.
      </p>
      <img src="../products/3333-0985/thumb.png" alt="Brincos de prata" />
    </li>
    <li>...</li>
  </ul>
  <p>Preço total: $237.89</p>
</div>
```

Este não é realmente um `<aside>`, pois não está necessariamente relacionado ao conteúdo principal da página (você deseja visualizá-lo de qualquer lugar). Nem sequer garante particularmente o uso de uma `<section>`, pois não faz parte do conteúdo principal da página. Portanto, um
 é bom neste caso. Incluímos um cabeçalho como orientação para ajudar os usuários de leitores de tela a encontrá-lo.

**Aviso:** Divs são tão convenientes de usar que é fácil usá-los demais. Como eles não carregam valor semântico, eles apenas confundem seu código HTML. Tome cuidado para usá-los somente quando não houver uma solução semântica melhor e tente reduzir ao mínimo o uso deles, caso contrário, será difícil atualizar e manter seus documentos.

### Quebras de linha e regras horizontais

Dois elementos que você ocasionalmente vai usar e desejerá conhecer são `<br>` e `<hr>`:

`<br>` cria uma quebra de linha em um parágrafo; é a única maneira de forçar uma estrutura rígida em uma situação em que você deseja uma série de linhas curtas fixas, como em um endereço postal ou um poema. Por exemplo:

```html
<p>
  Era uma vez um homem chamado O'Dell<br />
  Que adorava escrever HTML<br />
  Mas sua estrutura era ruim, sua semântica era triste<br />
  e sua marcação não leu muito bem.
</p>
```

Sem os elementos `<br>`, o parágrafo seria apenas renderizado em uma longa linha (como dissemos anteriormente no curso, o HTML ignora a maioria dos espaços em branco); com elementos `<br>` no código, a marcação é renderizada assim

 Era uma vez um homem chamado O'Dell
 Que adorava escrever HTML
 Mas sua estrutura era ruim, sua semântica era triste
 e sua marcação não leu muito bem.

Elementos `<hr>` criam uma regra horizontal no documento que indica uma alteração temática no texto (como uma alteração no tópico ou na cena). Visualmente, apenas se parece com uma linha horizontal. Como um exemplo:
```

<p>Ron foi apoiado em um canto pelas feras inferiores saqueadores. Assustado, mas determinado a proteger seus amigos, ele levantou a varinha e se preparou para a batalha, esperando que seu pedido de socorro tivesse passado.</p>
<hr>
<p>Enquanto isso, Harry estava sentado em casa, olhando para sua declaração de realeza e ponderando quando a próxima série sairia, quando uma carta de socorro encantada voou pela janela e aterrissou em seu colo. Ele leu-o nebuloso e suspirou; "é melhor voltar ao trabalho então", ele pensou.</p>
```

Seria renderizado assim:

Ron foi apoiado em um canto pelas feras inferiores saqueadores. Assustado, mas determinado a proteger seus amigos, ele levantou a varinha e se preparou para a batalha, esperando que seu pedido de socorro tivesse passado.

---

Enquanto isso, Harry estava sentado em casa, olhando para sua declaração de realeza e ponderando quando a próxima série sairia, quando uma carta de socorro encantada voou pela janela e aterrissou em seu colo. Ele leu-o nebuloso e suspirou; "é melhor voltar ao trabalho então", ele pensou.

Planejando um simples website
-----------------------------

Depois de planejar o conteúdo de uma página da Web simples, o próximo passo lógico é tentar descobrir qual conteúdo você deseja colocar em um site inteiro, quais páginas você precisa e como elas devem ser organizadas e vinculadas umas às outras. para a melhor experiência de usuário possível. Isso é chamado Information architecture (en-US). Em um site grande e complexo, é possível planejar muito esse processo, mas para um site simples de poucas páginas, isso pode ser bastante simples e divertido!

1. Lembre-se de que você terá alguns elementos comuns à maioria das páginas (se não todas), como o menu de navegação e o conteúdo do rodapé. Se seu site é para uma empresa, por exemplo, é uma boa ideia ter suas informações de contato disponíveis no rodapé de cada página. Anote o que você deseja que seja comum a todas as páginas.
 ![the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/common-features.png)
2. Em seguida, desenhe um esboço de como a estrutura de cada página deve parecer (pode parecer com nosso site simples acima). Observe o que cada bloco será.
 ![A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/site-structure.png)
3. Agora, faça um brainstorm de todos os outros conteúdos (comuns a todas as páginas) que você deseja ter no seu site - escreva uma grande lista.
 ![A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/feature-list.png)
4. Em seguida, tente classificar todos esses itens de conteúdo em grupos, para ter uma idéia de quais partes podem viver juntas em páginas diferentes. Isso é muito semelhante a uma técnica chamada Card sorting (en-US).
 ![The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/card-sorting.png)
5. Agora, tente esboçar um mapa do site aproximado - faça um balão para cada página do seu site e desenhe linhas para mostrar o fluxo de trabalho típico entre as páginas. A página inicial provavelmente estará no centro e terá um link para a maioria, senão todas as outras; a maioria das páginas em um site pequeno deve estar disponível na navegação principal, embora haja exceções. Você também pode incluir notas sobre como as coisas podem ser apresentadas.
 ![A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/site-map.png)
### Aprendizado ativo: crie seu próprio mapa do site

Tente realizar o exercício acima para um site de sua própria criação. Sobre o que você gostaria de criar um site?

**Nota:** Salve seu trabalho em algum lugar; você pode precisar mais tarde.

Resumo
------

Nesse ponto, você deve ter uma idéia melhor sobre como estruturar uma página / site. No último artigo deste módulo, estudaremos como depurar HTML.

Ver também
----------

* Seções e estruturas de um documento HTML5: Guia avançado para elementos semânticos do HTML5 e o algoritmo de estrutura de tópicos do HTML5.
* Anterior
* Menu: Introduction to HTML
* Próxima


Teste suas habilidades: Noções básicas de texto HTML - Aprendendo desenvolvimento web

Teste suas habilidades: Noções básicas de texto HTML
====================================================

O objetivo deste teste de habilidades é avaliar se você entendeu nosso artigo Fundamentos do texto em HTML.

**Nota:** Você pode testar suas soluções nos editores interativos abaixo, entretanto pode ser de ajuda fazer download do código e usar uma ferramenta online como CodePen, jsFiddle, ou Glitch para trabalhar nas tarefas.

Se você ficar travado em alguma tarefa, peça-nos ajuda — veja a seçãoAssessment or further help no final desta página.

Texto básico em HTML 1
----------------------

Nesta tarefa queremos que você faça a marcação do HTML fornecido, utilizando a semântica de título e parágrafo. Tente editar a amostra, ao vivo, para alterar o exemplo final:

**Nota:** Faça download do ponto de partida desta tarefa para trabalhar em seu próprio editor ou em um editor online.

Texto básico em HTML 2
----------------------

Nesta tarefa queremos que você transforme a primeira lista sem marcação em uma lista não ordenada e a segunda em uma lista ordenada.

Tente editar a amostra, ao vivo, para alterar o exemplo final:

**Nota:** Faça download do ponto de partida desta tarefa para trabalhar em seu próprio editor ou em um editor online.

Texto básico em HTML 3
----------------------

Nesta tarefa um parágrafo é fornecido e o seu objetivo é usar elementos de ênfase para fazer a marcação apropriada de algumas palavras com forte importância e com ênfase.

Tente editar a amostra, ao vivo, para alterar o exemplo final:

**Nota:** Faça download do ponto de partida desta tarefa para trabalhar em seu próprio editor ou em um editor online.

Avaliação ou ajuda adicional
----------------------------

Você pode praticar os exemplos nos Editores Interativos acima.

Se você gostaria de ter seu trabalho avaliado ou está travado e quer pedir ajuda:

1. Coloque seu trabalho em um editor online compartilhável como CodePen, jsFiddle ou Glitch. Você pode escrever o código por si só ou usar os arquivos linkados nas seções acima.
2. Escreva um post pedindo por avaliação e/ou ajuda no Fórum de discussão do MDN na categoria Learning. Seu post deve incluir:
    * Um título descritivo como "Avaliação desejada para o teste de habilidade Texto básico em HTML 1"
    * Detalhes sobre o que você já tentou e o que você gostaria que fizéssemos, p. ex. se você está travado e precisa de ajuda ou se deseja uma avaliação.
    * Um link para o exemplo que você deseja ser avaliado ou ajudado em um editor online compartilhável (como mencionado no passo 1 acima). Essa é uma boa prática para se adquirir - é muito difícil ajudar alguém com um problema no código, se você não consegue ver o código.
    * Um link para a tarefa atual ou página de avaliação, assim poderemos achar a questão na qual você quer ajuda.


Formatação avançada de texto - Aprendendo desenvolvimento web

Formatação avançada de texto
============================

* Anterior
* Menu: Introduction to HTML
* Próxima

Existem muitos outros elementos em HTML para formatação de texto, que não tratamos no artigo de Fundamentos do texto em HTML. Os elementos descritos neste artigo são menos conhecidos, mas ainda são úteis para conhecer (e isso ainda não é uma lista completa de todos os elementos). Aqui, você aprenderá a marcar citações, listas de descrição, código de computador e outros textos relacionados, subscrito e sobrescrito, informações de contato e muito mais.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Familiaridade básica em HTML, conforme abordado em
 Introdução ao HTML. Formatação de texto em HTML, conforme abordado em
 Fundamentais de texto em HTML.
  |
| Objetivo: |
 Aprender a usar elementos HTML menos conhecidos para marcar recursos
 semânticos avançados.
  |

Listas de descrição
-------------------

Nos Fundamentos do texto em HTML, falamos sobre como marcar as listas básicas em HTML, mas não mencionamos o terceiro tipo de lista que ocasionalmente irá encontrar - listas de descrição. O objetivo dessas listas é marcar um conjunto de itens e suas descrições associadas, como termos e definições, ou perguntas e respostas. Vejamos um exemplo de um conjunto de termos e definições:
```

solilóquio
No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens).
monólogo
No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes.
aparte
No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.
```

As listas de descrição usam um invólucro diferente dos outros tipos de lista — `<dl>`; além disso, cada termo está envolvido em um `<dt>` (termo de descrição) elemento, e cada descrição está envolvida em um `<dd>` (definição de descrição) elemento. Vamos terminar marcando nosso exemplo:

```html
<dl>
  <dt>solilóquio</dt>
  <dd>
    No drama, onde um personagem fala a si mesmo, representando seus pensamentos
    ou sentimentos internos e no processo, transmitindo-os ao público (mas não a
    outros personagens).
  </dd>
  <dt>monólogo</dt>
  <dd>
    No drama, onde um personagem fala seus pensamentos em voz alta para
    compartilhá-los com o público e com outros personagens presentes.
  </dd>
  <dt>aparte</dt>
  <dd>
    No drama, onde um personagem compartilha um comentário apenas com o público
    para efeito humorístico ou dramático. Isso geralmente é um sentimento,
    pensamento ou parte de informação de fundo adicional.
  </dd>
</dl>
```

Os estilos padrões do navegador exibirão as listas com as descrições indentadas um pouco dos termos. Os estilos da MDN seguem esta convenção de forma bastante parecida, mas também enfatizam os termos, para uma definição extra.

solilóquio

No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens).

monólogo

No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes.

aparte

No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.

Observe que é permitido ter um único termo com múltiplas descrições, por exemplo:

aparte

No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.

Por escrito, uma seção de conteúdo que está relacionada ao tópico atual, mas não se encaixa diretamente no fluxo principal de conteúdo, então é apresentado próximo (muitas vezes em uma caixa ao lado).

### Aprendizagem ativa: marcando um conjunto de definições

É hora de pôr as mãos nas listas de descrição. Adicione elementos ao texto bruto no campo de *Entrada* para que ele se pareça como uma lista de descrição no campo *Saída*. Você pode tentar usar seus próprios termos e descrições, se quiser.

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

<h2>Entrada</h2>
<textarea id="code" class="input">
Bacon
A cola que liga o mundo em conjunto.
Ovos
A cola que une o bolo juntos.
Café
A bebida que faz correr o mundo pela manhã.
Uma cor castanho claro.</textarea
>
<h2>Saída</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Limpar" />
  <input id="solution" type="button" value="Mostrar solução" />
</div>
```

```
body {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

.input,
.output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function () {
  textarea.value =
    "<dl>\n <dt>Bacon</dt>\n <dd>The glue that binds the world together.</dd>\n <dt>Eggs</dt>\n <dd>The glue that binds the cake together.</dd>\n <dt>Coffee</dt>\n <dd>The drink that gets the world running in the morning.</dd>\n <dd>A light brown color.</dd>\n</dl>";
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
```

Citações
--------

HTML também possui recursos disponíveis para marcação de citações. Qual elemento você pode usar? Depende se está marcando um bloco ou uma citação em linha.

### Blockquotes

Se uma seção de conteúdo em nível de bloco (seja um parágrafo, vários parágrafos, uma lista, etc.) for citada em algum outro lugar, você deverá envolvê-la em um elemento <blockquote> para indicar isso e incluir um URL apontando para a fonte da citação dentro de um atributo cite. Por exemplo, a marcação a seguir é obtida da página do elemento `<blockquote>` do MDN:

```html
<p>
  The <strong>HTML <code><blockquote></code> Element</strong> (or
  <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an
  extended quotation.
</p>
```

Para transformar isso em uma citação em bloco, faríamos assim:

```html
<blockquote cite="/pt-BR/docs/Web/HTML/Element/blockquote">
  <p>
    The <strong>HTML <code><blockquote></code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>
```

O estilo padrão do navegador renderiza isso como um parágrafo recuado, como um indicador de que é uma citação. O MDN faz isso, mas também, adiciona um estilo extra:

>
> O \*\*Elemento HTML `<blockquote>` \*\*(or *HTML Block Quotation Element*) indica que o texto em anexo é uma citação estendida.
>
>
>

### Citações em linha

As citações embutidas funcionam exatamente da mesma maneira, exceto pelo uso do elemento `<q>`. Por exemplo, o bit de marcação abaixo contém uma citação da página MDN <q>:

```html
<p>
  The quote element — <code><q></code> — is
  <q cite="/pt-BR/docs/Web/HTML/Element/q"
 >intended for short quotations that don't require paragraph breaks.</q
 >
</p>
```

O estilo padrão do navegador renderiza isso como texto normal entre aspas para indicar uma citação, assim:

O elemento de citação — `<q>` — é "destinado a citações curtas que não exigem quebras de parágrafo".

### Citações

O conteúdo do atributo `cite` parece útil, mas, infelizmente, navegadores, leitores de tela etc. não fazem muito uso dele. Não há como fazer com que o navegador exiba o conteúdo de `cite`, sem escrever sua própria solução usando JavaScript ou CSS. Se você deseja disponibilizar a fonte da citação na página, uma maneira melhor de marcá-la é colocar o elemento `<cite>` próximo ao elemento quote. Isso realmente tem o objetivo de conter o nome da fonte da citação — ou seja, o nome do livro ou o nome da pessoa que disse a citação — mas não há razão para que você não possa vincular o texto dentro de `<cite>` à citação fonte de alguma forma:

```html
<p>
  According to the
  <a href="/pt-BR/docs/Web/HTML/Element/blockquote">
    <cite>MDN blockquote page</cite></a
 >:
</p>

<blockquote cite="/pt-BR/docs/Web/HTML/Element/blockquote">
  <p>
    The <strong>HTML <code><blockquote></code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

<p>
  The quote element — <code><q></code> — is
  <q cite="/pt-BR/docs/Web/HTML/Element/q"
 >intended for short quotations that don't require paragraph breaks.</q
 >
  -- <a href="/pt-BR/docs/Web/HTML/Element/q"> <cite>MDN q page</cite></a
 >.
</p>
```

As citações são estilizadas em fonte itálica por padrão. Você pode ver esse código funcionando em nosso exemplo quotations.html.

### Aprendizado ativo: quem disse isso?

Hora de outro exemplo de aprendizado ativo! Neste exemplo, gostaríamos que você:

1. Transforme o parágrafo do meio em uma citação em bloco, que inclui um atributo `cite`.
2. Transforme parte do terceiro parágrafo em uma citação embutida, que inclui um atributo de `cite`.
3. Inclua um elemento `<cite>` para cada link.

Pesquise on-line para encontrar fontes de citação apropriadas.

Se você cometer um erro, sempre poderá redefini-lo usando o botão 'Limpar'. Se você realmente ficar atolado, pressione o botão 'Mostrar solução' para ver a resposta.
```

<h2>Entrada</h2>
<textarea id="code" class="input">
<p>Hello and welcome to my motivation page. As Confucius once said:</p>

<p>It does not matter how slowly you go as long as you do not stop.</p>

<p>I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk
(as mentioned in Affirmations for Positive Thinking.)</p></textarea
>
<h2>Saída</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Limpar" />
  <input id="solution" type="button" value="Mostrar solução" />
</div>
```

```
body {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

.input,
.output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function () {
  textarea.value =
    '<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> once said:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>It does not matter how slowly you go as long as you do not stop.</p>\n</blockquote>\n\n<p>I also love the concept of positive thinking, and <q cite="http://www.affirmationsforpositivethinking.com/index.htm">The Need To Eliminate Negative Self Talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
```

Abreviações
-----------

Outro elemento bastante comum que você encontrará ao olhar na Web é o `<abbr>` — usado para contornar uma abreviação ou sigla e fornecer uma expansão completa do termo (incluído em um atributo `title`.) Vejamos alguns exemplos
```

<p>Usamos <abbr title="Hypertext Markup Language">HTML</abbr> para estruturar nossos documentos da web.</p>

<p>Acho que o <abbr title="Reverendo">Rev.</abbr> Green fez isso na cozinha com a motosserra.</p>
```

Elas aparecerão da seguinte forma (a expansão aparecerá em uma dica de ferramenta quando o termo passar o mouse):

Usamos HTML para estruturar nossos documentos da web.

Acho que o Rev. Green fez isso na cozinha com a motosserra.

**Nota:** Há outro elemento, `<acronym>`, que basicamente faz a mesma coisa que `<abbr>`, e foi projetado especificamente para acrônimos, em vez de abreviações. Isso, no entanto, caiu em desuso — não era suportado em navegadores nem o `<abbr>`, e tem uma função semelhante que foi considerado inútil ter os dois. Apenas use `<abbr>`.

### Aprendizado ativo: marcando uma abreviação

Para esta tarefa simples de aprendizado ativo, gostaríamos que você simplesmente marque uma abreviação. Você pode usar nossa amostra abaixo ou substituí-la por uma de sua preferência.
```

<h2>Entrada</h2>
<textarea id="code" class="input">
<p>NASA sure does some exciting work.</p></textarea
>
<h2>Saída</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
body {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

.input,
.output {
  width: 90%;
  height: 5em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function () {
  textarea.value =
    '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> sure does some exciting work.</p>';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
```

Marcando detalhes de contato
----------------------------

O HTML possui um elemento para marcar os detalhes do contato — `<address>`. Isso simplesmente envolve seus detalhes de contato, por exemplo:

```html
<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>
```

Porém, uma coisa a se lembrar é que o elemento <address> destina-se a marcar os detalhes de contato da pessoa que escreveu o documento HTML e não qualquer endereço. Portanto, o exposto acima só seria bom se Chris tivesse escrito o documento em que a marcação aparece. Observe, que, algo assim também seria bom:

```html
<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>
```

Sobrescrito e subscrito
-----------------------

Ocasionalmente, você precisará usar sobrescrito e subscrito ao marcar itens como datas, fórmulas químicas e equações matemáticas para que eles tenham o significado correto. Os elementos `<sup>` (en-US) e `<sub>` (en-US) manipulam esse trabalho. Por exemplo:

```html
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>
  Caffeine's chemical formula is
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.
</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
```

A saída desse código é assim:

Meu aniversário é no dia 25 de maio de 2001.

A fórmula química da cafeína é C8H10N4O2.

Se x2 é 9, x deve ser igual a 3 ou -3.

Representando código de computador
----------------------------------

Existem vários elementos disponíveis para marcar código de computador usando HTML:

* `<code>`: Para marcar partes genéricas de código de computador.
* `<pre>`: Para reter espaço em branco (geralmente blocos de código) — se você usar recuo ou espaço em branco em excesso no seu texto, os navegadores o ignorarão e você não o verá na sua página renderizada. Se você envolver o texto nas tags `<pre></pre>` seu espaço em branco será renderizado de forma idêntica à maneira como você o vê no seu editor de texto.
* `<var>`: Para marcar especificamente nomes de variáveis.
* `<kbd>` (en-US): Para marcar a entrada do teclado (e outros tipos) inserida no computador.
* `<samp>` (en-US): Para marcar a saída de um programa de computador.

Vejamos alguns exemplos. Você deve tentar brincar com eles (tente pegar uma cópia do nosso arquivo de exemplo other-semantics.html):

```html
<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>
  You shouldn't use presentational elements like <code><font></code> and
  <code><center></code>.
</p>

<p>
  In the above JavaScript example, <var>para</var> represents a paragraph
  element.
</p>

<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
```

O código acima terá a seguinte aparência:

Marcando horários e datas
-------------------------

O HTML também fornece o elemento `<time>` para marcar horários e datas em um formato legível por máquina. Por exemplo:

```html
<time datetime="2016-01-20">20 January 2016</time>
```

Por que isso é útil? Bem, existem muitas maneiras diferentes pelas quais os humanos escrevem datas. A data acima pode ser escrita como:

* 20 January 2016
* 20th January 2016
* Jan 20 2016
* 20/01/16
* 01/20/16
* The 20th of next month
* 20e Janvier 2016
* 2016 年 1 月 20 日
* And so on

Mas essas formas diferentes não podem ser facilmente reconhecidas pelos computadores — e se você quiser pegar automaticamente as datas de todos os eventos em uma página e inseri-las em um calendário? O elemento `<time>` permite anexar uma data/hora inequívoca e legível por máquina para esse fim.

O exemplo básico acima fornece apenas uma data legível por máquina simples, mas existem muitas outras opções possíveis, por exemplo:

```html
<!-- Data simples padrão -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Apenas ano e mês -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Apenas tempo, horas e minutos -->
<time datetime="19:30">19:30</time>
<!-- Você pode fazer segundos e milissegundos também! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Data e hora -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Data e hora com compensação de fuso horário -->
<time datetime="2016-01-20T19:30+01:00"
 >7.30pm, 20 January 2016 is 8.30pm in France</time
>
<!-- Chamando um número de semana específico -->
<time datetime="2016-W04">The fourth week of 2016</time>
```

Resumo
------

Isso marca o fim de nosso estudo da semântica de texto HTML. Lembre-se de que o que você viu durante este curso não é uma lista exaustiva de elementos de texto HTML — queríamos tentar cobrir o essencial, e alguns dos mais comuns que você verá na natureza, ou pelo menos podem achar interessantes. Para encontrar muito mais elementos HTML, você pode dar uma olhada no nosso HTML element reference (a seção Inline text semantics seria um ótimo ponto de partida.) No próximo artigo, examinaremos os elementos HTML que você usaria para estruturar as diferentes partes de um documento HTML.

* Anterior
* Menu: Introduction to HTML
* Próxima


Debugging HTML - Aprendendo desenvolvimento web

Debugging HTML
==============

* Anterior
* Menu: Introduction to HTML
* Próxima  (en-US)

Escrever HTML é legal, mas e se algo der errado, e você não conseguir descobrir onde está o erro no código? Este artigo apresentará algumas ferramentas que podem ajudá-lo a encontrar e corrigir erros no HTML.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Familiaridade com HTML, conforme abordado, por exemplo, em
 Introdução ao HTML,
 Fundamentos de texto em HTML
 e
 Criação de Hiperlinks.
  |
| Objetivo: |
 Aprender o básico sobre o uso de ferramentas de depuração (debugging)
 para encontrar problemas em HTML.
  |

Depurar não é assustador
------------------------

Ao escrever algum tipo de código, tudo costuma ir bem, até o temido momento quando ocorre um erro — você fez algo errado, então seu código não funciona - talvez não funcione mais nada ou não funciona exatamente como você queria. Por exemplo, a seguir é mostrado um erro relatado ao tentar Compile (en-US) um programa simples escrito na linguagem Rust.

![A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML/error-message.png)Aqui, a mensagem de erro é relativamente fácil de entender — "string de aspas duplas sem terminação". Se você olhar a listagem, provavelmente verá como `println!(Hello, world!");` pode estar faltando logicamente uma aspa dupla. No entanto, as mensagens de erro podem ficar mais complicadas e menos fáceis de interpretar à medida que os programas se tornam maiores, e até mesmo casos simples podem parecer um pouco intimidadores para alguém que não sabe nada sobre o Rust.

Depurar um código não tem que ser assustador, porém — a chave para se sentir confortável em escrever e depurar qualquer linguagem ou código de programação é a familiaridade com a linguagem e as ferramentas.

HTML e depuração
----------------

HTML não é tão complicado de entender quanto o Rust. O HTML **não é compilado** em um formato diferente antes do navegador analisá-lo e mostrar o resultado (ele é interpretado, não compilado). E a sintaxe do Element HTML é muito mais fácil de entender do que uma "linguagem de programação real" como Rust, JavaScript, ou Python. A forma como os navegadores analisam o HTML é muito mais **permissiva** do que a forma como as linguagens de programação são executadas, o que é bom e ruim.

### Código permissivo

Então, o que queremos dizer com permissivo? Bem, geralmente quando você faz algo errado no código, existem dois tipos principais de erros que você encontrará:

* **Erros de sintaxe**: São os erros de ortografia no seu código que realmente fazem com que o programa não seja executado, como o erro do Rust mostrado acima. Estes geralmente são fáceis de corrigir, desde que você esteja familiarizado com a sintaxe (forma de escrever) da linguagem e saiba o que significam as mensagens de erro.
* **Erros lógicos**: São erros onde a sintaxe está correta, mas o código não é o que você pretendia, o que significa que o programa é executado incorretamente. Geralmente, eles são mais difíceis de corrigir do que erros de sintaxe, pois não há uma mensagem de erro para direcioná-lo para a origem deste erro.

O próprio HTML não sofre de erros de sintaxe porque os navegadores o analisam permissivamente, o que significa que a página ainda é exibida mesmo se houver erros de sintaxe. Os navegadores têm regras internas para indicar como interpretar a marcação escrita incorretamente, para que você obtenha algo em execução, mesmo que não seja o esperado. Isso, claro, ainda pode ser um problema!

**Nota:** O HTML é analisado permissivamente porque, quando a web foi criada, foi decidido que permitir que as pessoas publicassem seus conteúdos era mais importante do que garantir que a sintaxe estivesse absolutamente correta. A web provavelmente não seria tão popular quanto é hoje, se tivesse sido mais rigorosa desde o início.

### Aprendizado Ativo: Estudando código permissivo

É hora de estudar a natureza permissiva do código HTML.

1. Primeiramente, faça o download do debug-example demo e o salve localmente. Esse exemplo contém erros propositais para que possamos explorá-los (tal código HTML é dito ***badly-formed***, em contraponto ao HTML ***well-formed***).
2. Em seguida, abra o arquivo em um navegador. Você verá algo como:
 ![A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. ](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML/badly-formed-html.png)
3. Isso claramente não parece bom; vamos dar uma olhada no código fonte para tentar achar os erros (somente o conteúdo de *body* é mostrado):

```html
<h1>Exemplo de debugação HTML</h1>

<p>O quê causa erros em HTML?

<ul>
  <li>Elementos não fechados: Se um elemento não for <strong>fechado corretamente,
      pode se espalhar e afetar áreas que você não imaginava

  <li>Elementos desagrupados: Agrupar elementos corretamente é importante para
    o comportamento do código. <strong>negrito <em>negrito sublinhado?</strong>
      O que é isso?</em>

  <li>Atributos não fechados: Outra fonte comum de problemas HTML. Vamos dar uma olhada: <a href="https://www.mozilla.org/>Link para página da Mozilla</a>
</ul>
```

4. Vamos analisar os erros:
    * Os elementos parágrafo e item da lista não possuem *tags* de fechamento. Olhando a imagem acima, isso não parece ter afetado muito a renderização do HTML já que é fácil deduzir onde um elemento deveria terminar e outro, começar.
    * O primeiro elemento `<strong>` não possui *tag* de fechamento. Isto é um pouco mais problemático porque não é necessariamente fácil determinar onde um elemento deveria terminar. Assim, todo o resto do texto foi fortemente enfatizado.
    * Essa seção foi aninhada incorretamente: `<strong>negrito <em>negrito sublinhado?</strong> O que é isso?</em>`. Não é fácil dizer como esse trecho foi interpretado por causa do problema anterior.
    * O valor do atributo `href` não tem as aspas de fechamento. Isso parece ter causado o maior problema — o *link* não foi renderizado.
5. Agora vamos dar uma olhada no HTML que o navegador renderizou, comparando-o com o nosso código fonte. Para fazer isso, usaremos as ferramentas de desenvolvimento oferecidas pelo navegador. Se você não está familiarizado com estas ferramentas, dê uma olhadinha nesse tutorial: O que são as ferramentas de desenvolvimento do navegador.
6. No inspetor DOM, você pode ver como o HTML renderizado fica:
 ![The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML/html-inspector.png)
7. Utilizando o inspetor DOM, vamos explorar nosso código detalhadamente para ver como o navegador tentou consertar os erros do código HTML (nós fizemos a análise com o Firefox, mas outros navegadores modernos *devem* apresentar o mesmo resultado):
    * As *tags* de fechamento foram colocadas nos parágrafos e itens da lista.
    * Não está claro onde o primeiro elemento `<strong>` deveria terminar, portanto o navegador envolveu cada bloco subsequente em uma *tag* *strong* própria até o fim do documento!
    * O aninhamento incorreto foi corrigido pelo navegador da seguinte maneira:
     html
    ```html
    <strong
     >strong
      <em>strong emphasised?</em>
    </strong>
    <em> what is this?</em>

    ```
    * O link cujas aspas de fechamento não estavam presentes foi totalmente excluído da renderização. Então o último item ficou assim:
     html
    ```html
    <li>
      <strong
     >Unclosed attributes: Another common source of HTML problems. Let's
        look at an example:
      </strong>
    </li>

    ```
### Validação HTML

Então, você pode ver pelo exemplo acima que você realmente quer ter certeza de que o seu HTML foi bem construido! Mas Como? Em um pequeno exemplo como o que foi visto acima, é facil analisar as linhas e achar os erros, mas e se fosse um gigante e complexo documento HTML?

A melhor estratégia é começar rodando a sua página HTML através do Markup Validation Service — criado e mantido pelo W3C, uma organização que cuida das especificações que define o HTML, CSS, e outras tecnologias WEB. Esta página considera um documento HTML como uma entrada, fazendo a leitura dela e retornando o que há de errado com o seu HTML.

![The HTML validator homepage](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML/validator.png)

Para especificar o HTML a ser validado, você pode dar um endereço web, fazer o upload de um arquivo HTML, ou diretamente inserir o código HTML.

### Aprendizado Ativo: Validando um documento HTML

Vamos tentar fazer isto com o nosso sample document.

1. Primero, carregue o Markup Validation Service em uma aba no seu navegador, caso já não esteja carregada.
2. Troque para a aba Validate by Direct Input.
3. Copie todo o código do documento de exemplo (não apenas o body) e cole dentro da grande área de texto mostrada no Markup Validation Service.
4. Pressione o botão *Check*.

Você deverá receber uma lista de erros e outras informações.

![A list of of HTML validation results from the W3C markup validation service](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML/validation-results.png)

#### Interpretando as mensagens de erros

As mensagens de erros geralmente são úteis, mas algumas vezes elas não ajudam tanto; com um pouco de prática você pode descobrir como interpretar-lás para arrumar o seu código. Vamos dar uma olhada nas mensagens de erros e ver o que elas significam. Você verá que cada mensagem vem com um número para a linha e um para a coluna afim de ajudar você a localizar o erro facilmente.

* "End tag `li` implied, but there were open elements" (2 instances): Estas mensagens indicam que um elemento que esta aberto deveria estar fechado. O final da tag esta implicito, mas não esta realmente lá. A informação de linha/coluna indica para a primeira linha depois de onde a tag de fechamento realmente deveria estar, mas isto é uma pista boa o suficiente para ver o que há de errado.
* "Unclosed element `strong`": Este é muito fácil de entender — um `<strong>` elemento esta aberto, e uma informação de linha/coluna indica diretamente para onde esta.
* "End tag `strong` violates nesting rules": Este aponta os elementos incorretamente aninhados, e a informação de linha/coluna aponta onde o erro está.
* "End of file reached when inside an attribute value. Ignoring tag": Essa é mais enigmática; se refere ao fato de que há um valor do atributo formado indevidamente em algum lugar, possivelmente próximo ao fim do arquivo porquê o fim do arquivo aparece dentro do valor do atributo. O fato de o navegador não renderizar o link deveria nos dar uma boa pista de qual elemento está em falta.
* "End of file seen and there were open elements": Essa é um pouco ambígua, mas basicamente se refere ao fato de que há elementos em aberto que devem ser fechados devidamente. A linha de números aponta para as últimas linhas do arquivo, e esta mensagem de erro vem com uma linha do código que aponta um exemplo de um elemento em aberto:
```

Exemplo: <a href="https://www.mozilla.org/>link para página da Mozilla</a> ↩ </ul>↩ </body>↩</html>
```

**Nota:** Um atributo faltando uma aspas pode resultar em um elemento aberto porque o resto do documento é interpretado como conteúdo do atributo.
* "Unclosed element `ul`": Esta não ajuda em nada, já que o elemento `<ul>` *está* fechado corretamente. Este erro aparece porque o elemento `<a>` não foi fechado, devido a falta de aspas de fechamento.

Se você não descobrir o significado de todas mensagens de erro, não se preocupe — uma boa ideia é tentar resolver alguns erros por vez. Então tente revalidar seu HTML para ver o que restou. Às vezes resolver erros anteriores pode te livrar de outras mensagens de erro — vários erros podem ser causados na maioria das vezes por um só, tipo um efeito dominó.

Você vai saber quando todos os seus erros forem resolvidos quando ver a seguinte bandeira no output:

![Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML/valid-html-banner.png)

Sumário
-------

Então é isso, uma introdução a debugação de HTML, na qual deve te dar dicas úteis quando você começar a debugar CSS, JavaScript, e outros tipos de códigos mais tarde na sua carreira. Isso também significa o fim dos artigos de aprendizado do Módulo de Introdução ao HTML — agora você pode testar a si mesmo com nossa avaliação: a primeira está no link abaixo.

* Anterior
* Menu: Introduction to HTML
* Próxima  (en-US)