Iniciando com HTML - Aprendendo desenvolvimento web

Iniciando com HTML
==================

* Menu: Introduction to HTML
* Próxima

Neste artigo nós abordamos os princípios básicos do HTML, para você começar. Definimos os elementos, atributos e todos os outros termos importantes que você possa ter ouvido e onde eles se encaixam na linguagem. Também mostramos como um elemento HTML é estruturado, como uma página HTML típica é estruturada e explicamos outras importantes características básicas da linguagem. Ao longo do caminho, nós brincaremos com um pouco de HTML, para despertar seu interesse!

|  |  |
| --- | --- |
| Pré-requisitos: |
 Básico de informática,
 software básico instalado
 e conhecimento básico de como
 trabalhar com arquivos.
  |
| Objetivos: |
 Obter uma familiaridade básica com a linguagem HTML e adquirir um pouco
 de prática escrevendo alguns elementos HTML.
  |

O que é HTML?
-------------

HTML (HyperText Markup Language) não é uma linguagem de programação, é uma *linguagem de marcação* utilizada para dizer ao seu navegador como estruturar a página web que você visita. A página pode ser tanto complicada como simples quanto o desenvolvedor web desejar que seja. HTML consiste em uma série de elementos que você usa para anexar, envolver ou *marcar* diferentes partes do conteúdo para que apareça ou aja de uma certa maneira. O fechamento das tags pode transformar uma parte do conteúdo dentro do elemento em um link para direcionar à uma outra página web, colocar as palavras em itálico, e assim por diante. Por exemplo, observe o conteúdo a seguir:
```

Meu gato é muito mal-humorado.
```

Se nós quisermos que a linha permaneça, nós podemos especificar que é um parágrafo, fechando-a com a elemento de parágrafo(`<p>`):

```html
<p>Meu gato é muito mal-humorado.</p>
```

Anatomia de um elemento HTML
----------------------------

Vamos explorar nosso elemento parágrafo um pouco mais:

![](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-small.png)

As partes principais do elemento são:

1. **Tag de abertura:** Consiste no nome do elemento ( neste caso: p ), envolvido entre **parênteses angulares** de abertura e fechamento. Isso indica onde o elemento começa, ou inicia a produzir efeito — neste caso, onde o parágrafo se inicia.
2. **Tag de fechamento:** É o mesmo que a tag de abertura, exceto que este inclui uma barra diagonal antes do nome do elemento. Indica onde o elemento termina — neste caso, onde fica o fim do parágrafo. Falhar em incluir o fechamento de uma tag é um erro comum para iniciantes e pode levar a resultados estranhos.
3. **O conteúdo:** Este é o conteúdo do elemento, que neste caso é somente texto.
4. **O elemento:** A tag de abertura, mais a tag de fechamento, mais o conteúdo, é igual ao elemento.
### Aprendizado ativo: criando seu primeiro elemento HTML

Edite a linha abaixo na área *Entrada* colocando-a entre as tags `<em>` e `</em>` (adicione o `<em>` *antes para abrir o elemento*, e `</em>` depois, *para fechar o elemento*). Isto dará à linha uma ênfase em itálico! Você poderá ver as mudanças efetuadas no momento na área *Saída.*

Caso você cometa um erro, você pode usar o botão *Resetar* para desfazer a ação incorreta. Se você realmente não souber o que fazer, pressione o botão *Mostrar solução* para visualizar a resposta.
```

<h2>Saída ao vivo</h2>
<div class="output" style="min-height: 50px;"></div>

<h2>Código editável</h2>
<p class="a11y-label">
  Pressione Esc para afastar o foco da área de código (Tab insere um caractere
  de tabulação).
</p>

<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%">
  Este é meu texto.
</textarea>

<div class="controls">
  <input id="reset" type="button" value="Resetar" />
  <input id="solution" type="button" value="Mostrar solução" />
</div>
```

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

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

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

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

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Mostrar solução";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Mostrar solução") {
    textarea.value = solutionEntry;
    solution.value = "Ocultar solução";
  } else {
    textarea.value = userEntry;
    solution.value = "Mostrar solução";
  }
  updateCode();
});

var htmlSolution = "<em>Este é meu texto.</em>";
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Mostrar solução") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### Aninhando elementos

Elementos podem ser inseridos dentro de outros elementos — isto é chamado de **aninhamento**. Se nós quisermos dizer que nosso gato é **muito** mal-humorado, nós poderemos envolver a palavra "muito" com o elemento `<strong>`, que significa enfatizar fortemente a palavra:

```html
<p>Meu gato é <strong>muito</strong> mal-humorado.</p>
```

No entanto, você precisa garantir que seus elementos estejam adequadamente aninhados: no exemplo acima nós abrimos o elemento `p` primeiro, e então o elemento `strong`, portanto temos que fechar o elemento `strong` primeiro, depois o `p`. O código a seguir está errado:

```html
<p>Meu gato é <strong>muito mal-humorado.</p></strong>
```

Os elementos devem abrir e fechar corretamente para que eles fiquem claramente dentro ou fora do outro. Caso eles se sobreponham, como no exemplo acima, então o seu navegador tentará adivinhar o que você quis dizer, e talvez você obtenha resultados inesperados. Então não faça isso!

### Elementos em bloco versus elementos inline

Há duas categorias importantes no HTML, que você precisa conhecer. Eles são elementos em bloco e elementos inline.

* Elementos em bloco formam um bloco visível na página — eles aparecerão em uma nova linha logo após qualquer elemento que venha antes dele, e qualquer conteúdo depois de um elemento em bloco também aparecerá em uma nova linha. Elementos em bloco geralmente são elementos estruturais na página que representam, por exemplo: parágrafos, listas, menus de navegação, rodapés etc. Um elemento em bloco não seria aninhado dentro de um elemento inline, mas pode ser aninhado dentro de outro elemento em bloco.
* Elementos inline (na linha) são aqueles que estão contidos dentro de elementos em bloco envolvem apenas pequenas partes do conteúdo do documento e não parágrafos inteiros ou agrupamentos de conteúdo. Um elemento inline não fará com que uma nova linha apareça no documento: os elementos inline geralmente aparecem dentro de um parágrafo de texto, por exemplo: um elemento `<a>`(hyperlink) ou elementos de ênfase como `<em>` ou `<strong>`.

Veja o seguinte exemplo:

```html
<em>primeiro</em>
<em>segundo</em>
<em>terceiro</em>

<p>quarto</p>
<p>quinto</p>
<p>sexto</p>
```

O elemento `<em>` é inline, então como você pode ver abaixo, os três primeiros elementos ficam na mesma linha uns dos outros sem espaço entre eles. O `<p>`, por outro lado, é um elemento em bloco, então cada elemento aparece em uma nova linha, com espaço acima e abaixo de cada um (o espaçamento é devido à estilização CSS padrão que o browser aplica aos parágrafos).

**Nota:** o HTML5 redefiniu as categorias de elemento em HTML5: veja Categorias de conteúdo de elementos. Enquanto essas definições são mais precisas e menos ambíguas que as anteriores, elas são muito mais complicadas de entender do que "em bloco" e "inline", então usaremos estas ao longo deste tópico.

**Nota:** Os termos "bloco" e "inline", conforme usados neste tópico, não devem ser confundidos com os tipos de caixas CSS (en-US) com os mesmos nomes. Embora eles se correlacionem por padrão, alterar o tipo de exibição CSS não altera a categoria do elemento e não afeta em quais elementos ele pode conter e em quais elementos ele pode estar contido. Um dos motivos pelos quais o HTML5 abandonou esses termos foi evitar essa confusão bastante comum.

**Nota:** Você pode encontrar páginas de referência úteis que incluem uma lista de elementos inline e em bloco — veja elementos em bloco e elementos inline.

### Elementos vazios

Nem todos os elementos seguem o padrão acima de: tag de abertura, conteúdo, tag de fechamento. Alguns elementos consistem apenas em uma única tag, que é geralmente usada para inserir/incorporar algo no documento no lugar em que ele é incluído. Por exemplo, o elemento `<img>` insere uma imagem em uma página na posição em que ele é incluído:

```html
<img
 src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />
```

Isto exibirá em sua página:

**Nota:** Elementos vazios são também chamados de *void elements*.

Atributos
---------

Elementos também podem conter atributos, que se apresentam da seguinte forma:

![My cat is very grumpy](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-attribute-small.png)

Atributos contém informação extra sobre o elemento, mas que você não deseja que apareça no conteúdo. Neste caso, o atributo `class` permite que você dê ao elemento um nome de identificação, que pode ser usada mais tarde para direcionar informação de estilo ao elemento e outras coisas.

Um atributo deve conter:

1. Um espaço entre ele e o nome do elemento (ou o atributo anterior, caso o elemento já contenha um ou mais atributos.)
2. O nome do atributo, seguido por um sinal de igual.
3. Um valor de atributo, com aspas de abertura e fechamento em volta dele.
### Aprendizado ativo: Adicionando atributos a um elemento

Outro exemplo de um elemento é `<a>` — isso significa "âncora" e fará com que a parte do texto que ele envolve vire um link. Isso pode ter vários atributos, mas o mais comuns são os seguintes:

* O valor desse atributo especifica o endereço da web para o qual você deseja que o link aponte; onde o navegador irá quando o link for clicado. Por exemplo `href="https://www.mozilla.org/"`.
* `title`: O atributo `title` especifica uma informação extra sobre o link, assim como o assunto da página que está sendo linkada. Por exemplo `title="Homepage da Mozilla"`. Isto será exibido como uma *tooltip (dica de contexto)* quando passarmos o mouse sobre o link.

Edite a linha abaixo na área de Entrada para transformá-la em um link para o seu site favorito.

1. Primeiro, adicione o elemento `<a>`.
2. Segundo, adicione o atributo `href` e o atributo `title`.
3. Por último, especifique o atributo `target` para abrir o link em uma nova aba.

Você poderá ver as atualizações das alterações ao vivo na área Saída. Você deve ver um link que, quando passa o mouse sobre ele, exibe o valor do atributo `title` e, quando clicado, navega para o endereço da web no atributo `href`. Lembre-se de que você precisa incluir um espaço entre o nome do elemento e cada atributo.

Caso você cometa um erro, você poderá desfazê-lo usando o botão *Reset* ar. Caso você realmente não saiba como fazer, pressione o botão *Mostrar solução* para ver a resposta.
```

<h2>Saída ao vivo</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Código editável</h2>
<p class="a11y-label">
  Pressione Esc para afastar o foco da área de código (Tab insere um caractere
  de tabulação).
</p>

<textarea id="code" class="input" style="min-height: 100px;width: 95%">
  <p>Um link para o meu site favorito.</p>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Resetar" />
  <input id="solution" type="button" value="Mostrar solução" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

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

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

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Mostrar solução";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Mostrar solução") {
    textarea.value = solutionEntry;
    solution.value = "Ocultar solução";
  } else {
    textarea.value = userEntry;
    solution.value = "Mostrar solução";
  }
  updateCode();
});

var htmlSolution =
  '<p>Um link para o meu <a href="https://www.mozilla.org/" title="Página da Mozilla" target="\_blank"> site favorito</a>.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Mostrar solução") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### Atributos boleanos

Às vezes você verá atributos escritos sem valores — isso é permitido nos chamados atributos boleanos, e eles podem ter somente um valor, que é geralmente o mesmo nome do atributo. Por exemplo, o atributo `disabled` você pode atribuir para os elementos de entrada de formulários, se desejar que estes estejam desativados (acinzentados), para que o usuário não possa inserir nenhum dado neles.
```

<input type="text" disabled="disabled">
```

De forma abreviada, é perfeitamente permitido escrever isso da seguinte maneira (também incluímos um elemento de entrada de formulário não desativado para referência, para dar uma idéia do que está acontecendo):

```html
<!-- o uso do atributo disabled impede que o usuário final insira texto na caixa de entrada -->
<input type="text" disabled />

<!-- O usuário pode inserir texto na caixa de entrada a seguir, pois não contém o atributo disabled -->
<input type="text" />
```

Ambos resultarão em uma *Saída* da seguinte forma:

### Omitindo as aspas dos valores do atributo

Olhando a World Wide Web (internet), você encontrará todos os tipos de estilos de marcação HTML, incluindo valores de atributos sem as aspas. Isso é permitido em algumas circunstâncias, mas irá quebrar sua marcação em outras. Por exemplo, se voltarmos ao exemplo anterior de link , nós podemos escrever a versão básica deste somente com o atributo `href`, da seguinte forma:
```

<a href=https://www.mozilla.org/>site favorito</a>
```

No entanto, assim que adicionamos o atributo `title` neste elemento, a marcação resultará em erro:

```html
<a href=https://www.mozilla.org/ title=The Mozilla homepage>site favorito</a>
```

Neste ponto, o navegador irá interpretar errado sua marcação, de modo a pensar que o atributo `title` trata-se, na verdade, de três atributos: o atributo `title` com o valor "The", e dois atributos boleanos, `Mozilla` e `homepage`. Esta obviamente não era a intenção e irá causar erros ou um comportamento inesperado no código, assim como visto no exemplo abaixo. Tente colocar o mouse em cima do link para visualizar qual é o título que aparece!

Nossa recomendação é *sempre incluir as aspas nos valores dos atributos* — isto evita inúmeros problemas, além de resultar em um código mais legível.

### Aspas simples ou duplas?

Você pode perceber que os valores dos atributos exemplificados neste artigo estão todos com aspas duplas, mas você poderá ver aspas simples no HTML de algumas pessoas. Esta é puramente uma questão de estilo e você pode se sentir livre para escolher qual prefere. As duas linhas de código a seguir são equivalentes:

```html
<a href="http://www.example.com">Um link para o exemplo.</a>

<a href="http://www.example.com">Um link para o exemplo.</a>
```

Entretanto, você deve se certificar de não misturar os dois tipos de aspas juntos. O exemplo a seguir está errado!

```html
<a href="http://www.exemplo.com'>Um link para o exemplo.</a>
```

Se utilizar um tipo de aspas no seu HTML, você pode inserir o outro tipo de aspas no texto, por exemplo, que não ocorrerá erro, desta forma:

```html
<a href="http://www.example.com" title="Isn't this fun?"
 >A link to my example.</a
>
```

No entanto, se você quiser incluir aspas, dentro de aspas onde ambas as aspas são do mesmo tipo (aspas simples ou aspas duplas), será necessário usar entidades HTML para as aspas. Por exemplo, isso irá quebrar:

```html
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
```

Então você precisa fazer isso:

```html
<a href="http://www.example.com" title="Isn't this fun?"
 >A link to my example.</a
>
```

Anatomia de um documento HTML
-----------------------------

Já vimos os conceitos básicos dos elementos individuais do HTML, mas eles não são muito úteis sozinhos, Vamos aprender como estes elementos individuais são combinados entre si para criar uma página HTML inteira:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
```

Neste código nós temos:

1. `<!DOCTYPE html>`: O doctype. Nas névoas do tempo, quando o HTML era recente (por volta de 1991/2), doctypes funcionavam como links para uma série de regras as quais uma página HTML tinha que seguir para ser considerada uma página com um bom HTML, o que poderia significar a verificação automática de erros e outras coisas úteis. Ele costumava ser assim:

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```

No entanto, atualmente, ninguém se importa com eles, e eles são realmente apenas um artefato histórico que precisa ser incluído para que tudo funcione corretamente. `<!DOCTYPE html>` é a menor cadeia de caracteres que conta como um doctype válido; é tudo o que você realmente precisa saber.
2. `<html></html>`: O elemento `<html>` envolve o conteúdo da página inteira e é conhecido como o "elemento raiz" da página HTML.
3. `<head></head>`: O elemento `<head>` atua como um container para todo o conteúdo da página HTML que não é visível para os visitantes do site. Isso inclui palavras-chave e a descrição da página que você quer que apareça nos resultados de busca, o CSS para estilizar o conteúdo da página (apesar de ser recomendado faze-lo num aquivo separado), declaração de conjunto de caracteres, e etc. Você aprenderá mais sobre isso no próximo artigo da série.
4. `<meta charset="utf-8">`: Este elemento define o tipo da codificação dos caracteres que o seu documento deve usar, neste caso, para o tipo UTF-8, que inclui a maioria dos caracteres das linguas humanas escritas. Essencialmente, ele consegue lidar com qualquer tipo de conteúdo textual que você puder colocar no documento. Não há motivos para não indicar essa informação e esse elemento ajuda a evitar vários problemas na sua página.
5. `<title></title>`: O elemento `<title>`. Isto define o título de sua página, que aparecerá na guia do navegador na qual a página está carregada e é usado para descrevê-la quando for salva nos favoritos.
6. `<body></body>`: O elemento `<body>` contém *todo* o conteúdo que você quer mostrar aos usuários quando eles visitarem sua página, como texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis, ou qualquer outra coisa.
### Aprendizado ativo: Adicionando alguns recursos ao documento HTML

Se você quiser experimentar como funciona um documento HTML no seu computador, você pode:

1. Copiar o exemplo de página HTML mostrada acima.
2. Criar um novo documento em seu editor de texto.
3. Colar o código no novo arquivo de texto.
4. Salvar o arquivo com o nome `index.html`.

**Nota:** Você também pode encontrar o template básico de HTML no MDN Learning Area Github repo.

Você pode abrir este arquivo no navegador para ver como o código renderizado se apresenta, e então, editar o código e atualizar a página no navegador para ver o resultado com as mudanças. Inicialmente será exibido assim:

![A simple HTML page that says This is my page](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Getting_started/template-screenshot.png)Neste exercício, você pode editar o código localmente em seu computador, com descrito acima, ou você pode editá-lo na janela de exemplo editável abaixo (esta janela editável representa apenas o conteúdo do elemento `<body>` , neste caso). Nós gostaríamos que você seguisse as seguintes etapas:

* Logo abaixo da tag de abertura `<body>`, adicione um título principal para o documento. Isso deve estar dentro da tag de abertura `<h1>`e da tag de fechamento `</h1>` .
* Edite o conteúdo do parágrafo para incluir algum texto sobre algo de seu interesse.
* Faça com que todas as palavras importantes sejam destacadas em negrito, colocando-as dentro da tag de abertura `<strong>` e da tag de fechamento `</strong>` .
* Adicione um link ao seu parágrafo, conforme explicado anteriormente neste artigo.
* conforme explicado anteriormente no artigo. Você receberá pontos de bônus se conseguir vincular a uma imagem diferente (localmente no seu computador ou em outro lugar da web).

Caso você cometa um erro, você poderá desfazê-lo usando o botão *Resetar*. Caso você realmente não saiba como fazer, pressione o botão *Mostrar solução* para ver a resposta.
```

<h2>Saída ao vivo</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Código editável</h2>
<p class="a11y-label">
  Pressione Esc para afastar o foco da área de código (Tab insere um caractere
  de tabulação).
</p>

<textarea id="code" class="input" style="min-height: 100px;width: 95%">
  <p>Esta é minha página</p>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Resetar" />
  <input id="solution" type="button" value="Mostrar Solução" />
</div>
```

```
html {
  font-family: sans-serif;
}

h1 {
  color: blue;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

img {
  max-width: 100%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

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

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

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Mostrar Solução";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Mostrar Solução") {
    textarea.value = solutionEntry;
    solution.value = "Ocultar Solução";
  } else {
    textarea.value = userEntry;
    solution.value = "Mostrar Solução";
  }
  updateCode();
});

var htmlSolution =
  '<h1>Algumas músicas</h1><p>Gosto muito de <strong> tocar bateria </strong>. Um dos meus bateristas favoritos é Neal Peart, que toca na banda <a href="https://pt.wikipedia.org/wiki/Rush" title="Artigo da Rush na Wikipedia">Rush</a>. Meu álbum favorito do Rush atualmente é <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p><img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">';
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Mostrar Solução") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### Espaços em branco no HTML

Nos exemplos anteriores, você pode ter percebido a presença de espaços em branco nos códigos — isto não é necessário; os dois trechos de códigos a seguir são equivalentes:

```html
<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>
```

Não importa quantos espaços em branco você use (que pode incluir caracteres de espaço, mas também quebras de linha), o analisador de HTML reduz cada um deles em um único espaço ao renderizar o código. Então, por que espaço em branco? A resposta é legibilidade — é muito mais fácil entender o que está acontecendo no seu código, se você o tiver bem formatado, e não apenas agrupado em uma grande confusão. Em nosso HTML, cada elemento aninhado é indentado em dois espaços a mais do que aquele em que está localizado. Depende de você que estilo de formatação você usa (quantos espaços para cada nível de recuo, por exemplo), mas considere formatá-lo.

Referências de entidades: incluindo caracteres especiais no HTML
----------------------------------------------------------------

No HTML, os caracteres `<`, `>`,`"`,`'` e o `&` são caracteres especiais. Eles fazem parte da própria sintaxe HTML; portanto, como você inclui um desses caracteres no seu texto? Por exemplo, se você realmente deseja usar um e comercial ou sinal de menor que, e não tenha ele interpretado como código.

Temos que usar referências de caracteres — códigos especiais que representam caracteres e podem ser usados nessas circunstâncias. Cada referência de caractere é iniciada com um e comercial (&) e finalizada por um ponto e vírgula (;).

| Caractere literal | Referência de caractere equivalente |
| --- | --- |
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |

No exemplo abaixo, você pode ver dois parágrafos, que estão falando sobre tecnologias da web:

```html-noint
<p>Em HTML, você define um parágrafo usando o elemento <p>.</p>

<p>Em HTML, você define um parágrafo usando o elemento <p>.</p>
```

Na saída ao vivo abaixo, você pode ver que o primeiro parágrafo deu errado, porque o navegador pensa que a segunda instância de <p> está iniciando um novo parágrafo. O segundo parágrafo parece bom, porque substituímos os parênteses angulares por referências de caracteres.

**Nota:** A tabela com todas as referências de caracteres disponíveis em HTML pode ser encontrada na Wikipédia: List of XML and HTML character entity references. Observe que você não precisa usar referências de entidade para outros símbolos, pois os navegadores modernos manipularão os símbolos reais muito bem, desde que a codificação de caracteres do HTML esteja definida como UTF-8.

Comentários no HTML
-------------------

Em HTML, assim como na maioria das linguagens de programação, há um mecanismo para escrevermos comentários no código — comentários são ignorados pelo navegador e são invisíveis para o usuário, seu propósito é permitir a inclusão de comentários para descrever como o código funciona, especificar o que cada parte dele faz, e por ai vai. Isso pode ser muito útil se você retornar a uma base de código em que não trabalhou há muito tempo e não se lembrar do que fez — ou se você entregar seu código para outra pessoa trabalhar.

Para transformar uma seção do conteúdo HTML em um comentário, você precisa agrupá-lo nos marcadores especiais `<!--` e `-->`, por exemplo:

```html
<p>Eu não estou dentro de um comentário</p>

<!-- <p>Eu estou!</p> -->
```

Como você pode ver abaixo, o primeiro parágrafo fica visível na saída ao vivo, mas o segundo (que é um comentário) não.

Sumário
-------

Você chegou ao final do artigo — esperamos que tenha gostado do seu tour pelos princípios básicos do HTML! Nesse ponto, você deve entender como é a linguagem, como ela funciona em um nível básico e ser capaz de escrever alguns elementos e atributos. Este é o lugar perfeito para se estar agora, já que os artigos subseqüentes deste módulo abordarão algumas das coisas que você já examinou com mais detalhes e introduzirão alguns novos conceitos da linguagem. Fique ligado!

**Nota:** Nesse ponto, à medida que você começa a aprender mais sobre HTML, também pode querer explorar os conceitos básicos de Cascading Style Sheets, ou CSS. CSS é a linguagem usada para estilizar suas páginas da web (por exemplo, alterando a fonte ou as cores ou alterando o layout da página). HTML e CSS vão muito bem juntos, como você descobrirá em breve.

Veja também
-----------

* Aplicando cores a elementos HTML usando CSS
* Menu: Introduction to HTML
* Próxima


Fundamentos do texto em HTML - Aprendendo desenvolvimento web

Fundamentos do texto em HTML
============================

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

Um dos principais objetivos do HTML é dar estrutura de texto e significado, também conhecido como semântica), para que um navegador possa exibi-lo corretamente. Este artigo explica a forma como HTML pode ser usado para estruturar uma página de texto, adicionar títulos e parágrafos, enfatizar palavras, criar listas e muito mais.

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

O básico: Cabeçalhos e Parágrafos
---------------------------------

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

![An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals/newspaper_small.jpg)

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

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

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

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

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

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

### Implementando hierarquia estrutural

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

```html
<h1>O furo esmagador</h1>

<p>Por Chris Mills</p>

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

<p>
  Era uma noite escura. Em algum lugar, uma coruja piou. A chuva caiu no chão
  ...
</p>

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

<p>
  Nosso protagonista não podia ver mais que um relance da figura sombria ...
</p>

<h3>O espectro fala</h3>

<p>
  Várias horas se passaram, quando, de repente, o espectro ficou em pé e
  exclamou: "Por favor, tenha piedade da minha alma!"
</p>
```

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

* Preferencialmente, você deve usar apenas um `<h1>` por página — esse é o título do nível superior e todos os outros ficam abaixo dele, na hierarquia.
* Certifique-se de usar os títulos na ordem correta na hierarquia. Não use `<h3>` para representar subtítulos, seguido de `<h2>`para representar sub-subtítulos - isso não faz sentido e levará a resultados estranhos.
* Dos seis níveis de cabeçalho disponíveis, você deve usar no máximo três por página, a menos que considere necessário usar mais. Documentos com vários níveis (ou seja, uma hierarquia profunda de cabeçalho) tornam-se difíceis de navegar. Nessas ocasiões, é aconselhável espalhar o conteúdo por várias páginas, se possível.
### Por que precisamos de estrutura?

Para responder a esta pergunta, dê uma olhada em text-start.html — o ponto de partida do nosso exemplo em execução para este artigo (uma boa receita de hummus.) Você deve salvar uma cópia desse arquivo em sua máquina local, pois será necessário para os exercícios posteriores. No momento, o corpo deste documento contém várias partes do conteúdo — elas não são marcadas de forma alguma, mas são separadas por quebras de linha (Enter/Return pressionado para ir para a próxima linha).

No entanto, quando você abre o documento em seu navegador, você verá que o texto aparece como uma só parte!

![A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.](/pt-BR/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals/screen_shot_2017-03-29_at_09.20.35.png)

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

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

Nós, portanto, precisamos dar marcações estruturais ao nosso conteúdo.

### Aprendizagem ativa: Fornecendo nossa estrutura de conteúdo

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

Se você cometer um erro, você sempre pode reiniciar usando o botão *Resetar*. Se você ficar preso, pressione o botão *Mostrar solução* para ver a resposta.
```

<h2>Saída ao vivo</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Código editável</h2>
<p class="a11y-label">
  Pressione Esc para afastar o foco da área de código (Tab insere um caractere
  de tabulação).
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
Minha pequena história: sou policial e meu nome é Trish.

Minhas pernas são feitas de papelão e sou casada com um peixe.</textarea
>

<div class="playable-buttons">
  <input id="reset" type="button" value="Resetar" />
  <input id="solution" type="button" value="Mostrar solução" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

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

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

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Mostrar solução";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Mostrar solução") {
    textarea.value = solutionEntry;
    solution.value = "Ocultar solução";
  } else {
    textarea.value = userEntry;
    solution.value = "Mostrar solução";
  }
  updateCode();
});

var htmlSolution =
  "<h1>Minha pequena história</h1>\n<p>Sou policial e meu nome é Trish.</p>\n<p>Minhas pernas são feitas de papelão e sou casada com um peixe.</p>";
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Mostrar solução") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### Por que precisamos de semântica?

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

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

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

Por padrão, o navegador fornecerá um tamanho de fonte grande para torná-lo um cabeçalho (embora você possa estilizá-lo como qualquer coisa que você quiser usando CSS). Mais importante, seu valor semântico será usado de várias maneiras, por exemplo, por mecanismos de pesquisa e leitores de tela (como mencionado acima).

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

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

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

Listas
------

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

### Não ordenada

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

leite
ovos
pão
homus
```

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

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

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

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

#### Aprendizagem ativa: Marcando uma lista desordenada

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

<h2>Saída ao vivo</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Código editável</h2>
<p class="a11y-label">
  Pressione Esc para afastar o foco da área de código (Tab insere um caractere
  de tabulação).
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
leite
ovos
pão
hummus</textarea
>

<div class="playable-buttons">
  <input id="reset" type="button" value="Resetar" />
  <input id="solution" type="button" value="Mostrar solução" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

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

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

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Mostrar solução";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Mostrar solução") {
    textarea.value = solutionEntry;
    solution.value = "Ocultar solução";
  } else {
    textarea.value = userEntry;
    solution.value = "Mostrar solução";
  }
  updateCode();
});

var htmlSolution =
  "<ul>\n<li>leite</li>\n<li>ovos</li>\n<li>pão</li>\n<li>hummus</li>\n</ul>";
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Mostrar solução") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### Ordenada

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

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

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

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

#### Aprendizagem ativa: Marcando uma lista ordenada

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

<h2>Saída ao vivo</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Código editável</h2>
<p class="a11y-label">
  Pressione Esc para afastar o foco da área de código (Tab insere um caractere
  de tabulação).
</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">
Dirija até o final da estrada
Vire à direita
Vá em frente nas duas primeiras rotatórias
Vire à esquerda na terceira rotatória
A escola fica à sua direita, a 300 metros da estrada</textarea
>

<div class="playable-buttons">
  <input id="reset" type="button" value="Resetar" />
  <input id="solution" type="button" value="Mostrar solução" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

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

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

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Mostrar solução";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Mostrar solução") {
    textarea.value = solutionEntry;
    solution.value = "Ocultar solução";
  } else {
    textarea.value = userEntry;
    solution.value = "Mostrar solução";
  }
  updateCode();
});

var htmlSolution =
  "<ol>\n<li>Dirija até o final da estrada</li>\n<li>Vire à direita</li>\n<li>Vá em frente nas duas primeiras rotatórias</li>\n<li>Vire à esquerda na terceira rotatória</li>\n<li>A escola fica à sua direita, a 300 metros da estrada</li>\n</ol>";
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Mostrar solução") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### Aprendizagem ativa: marcando nossa página de receita

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

<h2>Saída ao vivo</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Código editável</h2>
<p class="a11y-label">
  Pressione Esc para afastar o foco da área de código (Tab insere um caractere
  de tabulação).
</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">
Receita rápida de hummus

  Esta receita faz hummus rápido e saboroso, sem mexer. Foi adaptado de várias receitas diferentes que li ao longo dos anos.

  Hummus é uma deliciosa pasta grossa usada fortemente em pratos gregos e do Oriente Médio. É muito saboroso com salada, carnes grelhadas e pães pitta.

  Ingredientes

  1 lata (400g) de grão de bico
  175g de tahine
  6 tomates secos
  Metade de pimenta vermelha
  Uma pitada de pimenta caiena
  1 dente de alho
  Uma pitada de azeite

  Instruções

  Retire a pele do alho e pique
  Retire todas as sementes e caule da pimenta e pique
  Adicione todos os ingredientes em um processador de alimentos
  Processar todos os ingredientes em uma pasta
  Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo
  Se você deseja um hummus suave, processe-o por mais tempo

  Para um sabor diferente, você pode tentar misturar uma pequena quantidade de limão e coentro, pimenta, limão e chipotle, harissa e hortelã ou espinafre e queijo feta. Experimente e veja o que funciona para você.

  Armazenamento

  Leve à geladeira o hummus processado em um recipiente fechado. Você poderá usá-lo por cerca de uma semana depois de fazer isso. Se começar a ficar borbulhante, você definitivamente deve descartá-lo.

  Hummus é adequado para congelamento; você pode descongelá-lo e usá-lo dentro de alguns meses.</textarea
>

<div class="playable-buttons">
  <input id="reset" type="button" value="Resetar" />
  <input id="solution" type="button" value="Mostrar solução" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

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

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

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Mostrar solução";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Mostrar solução") {
    textarea.value = solutionEntry;
    solution.value = "Ocultar solução";
  } else {
    textarea.value = userEntry;
    solution.value = "Mostrar solução";
  }
  updateCode();
});

var htmlSolution =
  '<h1>Receita rápida de hummus</h1>\n\n<p>Esta receita faz hummus rápido e saboroso, sem mexer. Foi adaptado de várias receitas diferentes que li ao longo dos anos.</p>\n\n<p>Hummus é uma deliciosa pasta grossa usada fortemente em pratos gregos e do Oriente Médio. É muito saboroso com salada, carnes grelhadas e pães pitta.</p>\n\n<h2>Ingredientes</h2>\n\n<ul>\n<li>1 lata (400g) de grão de bico</li>\n<li>175g de tahine</li>\n<li>6 tomates secos</li>\n<li>Metade de pimenta vermelha</li>\n<li>Uma pitada de pimenta caiena</li>\n<li>1 dente de alho</li>\n<li>Uma pitada de azeite</li>\n</ul>\n\n<h2>Instruções</h2>\n\n<ol>\n<li>Retire a pele do alho e pique</li>\n<li>Retire todas as sementes e caule da pimenta e pique</li>\n<li>Adicione todos os ingredientes em um processador de alimentos</li>\n<li>Processar todos os ingredientes em uma pasta</li>\n<li>Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo</li>\n<li>Se você deseja um hummus suave, processe-o por mais tempo</li>\n</ol>\n\n<p>Para um sabor diferente, você pode tentar misturar uma pequena quantidade de limão e coentro, pimenta, limão e chipotle, harissa e hortelã ou espinafre e queijo feta. Experimente e veja o que funciona para você.</p>\n\n<h2>Armazenamento</h2>\n\n<p>Leve à geladeira o hummus processado em um recipiente fechado. Você poderá usá-lo por cerca de uma semana depois de fazer isso. Se começar a ficar borbulhante, você definitivamente deve descartá-lo.</p>\n\n<p>Hummus é adequado para congelamento; você pode descongelá-lo e usá-lo dentro de alguns meses.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Mostrar solução") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

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

### Aninhando listas

Não há problema em aninhar uma lista dentro de outra. Você pode ter algumas sub-listas abaixo de uma lista de nível superior. Vamos pegar a segunda lista do nosso exemplo de receita:

```html
<ol>
  <li>Retire a pele do alho e pique</li>
  <li>Retire todas as sementes e caule da pimenta e pique</li>
  <li>Adicione todos os ingredientes em um processador de alimentos</li>
  <li>Processar todos os ingredientes em uma pasta</li>
  <li>
    Se você quiser um hummus grosso "pesado", processe-o por um curto período de
    tempo
  </li>
  <li>Se você deseja um hummus suave, processe-o por mais tempo</li>
</ol>
```

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

Como os dois últimos itens da lista estão intimamente relacionadas (eles são lidos como sub-instruções ou opções que se encaixam abaixo dessa lista), pode fazer sentido aninha-los em sua própria lista não ordenada e colocá-los no quarto item da lista atual. Isso seria assim:

```html
<ol>
  <li>Retire a pele do alho e pique</li>
  <li>Retire todas as sementes e caule da pimenta e pique</li>
  <li>Adicione todos os ingredientes em um processador de alimentos</li>
  <li>
    Processar todos os ingredientes em uma pasta
    <ul>
      <li>
        Se você quiser um hummus grosso "pesado", processe-o por um curto
        período de tempo
      </li>
      <li>Se você deseja um hummus suave, processe-o por mais tempo</li>
    </ul>
  </li>
</ol>
```

Tente voltar ao exemplo de aprendizagem ativo anterior e atualizar a segunda lista como esta aqui.

Ênfase e importância
--------------------

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

### Ênfase

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

Estou *feliz* que você não chegou *atrasado*.

Estou **feliz** que você não chegou **atrasado**.

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

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

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

### Importância

Para enfatizar palavras importantes, tendemos a enfatizá-las na linguagem falada e colocá-la em **negrito** na linguagem escrita. Por exemplo:

Este líquido é **altamente tóxico**.

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

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

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

<p>Estou contando com você. <strong>Não</strong> se atrase!</p>
```

Você pode aninhar importância e ênfase entre si, se desejar:

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

### Aprendizagem ativa: Vamos ser importantes!

Nesta seção de aprendizado ativo, fornecemos um exemplo editável. Nele, gostaríamos que você tentasse adicionar ênfase e importância às palavras que acha que precisam delas, apenas para praticar um pouco.
```

<h2>Saída ao vivo</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Código editável</h2>
<p class="a11y-label">
  Pressione Esc para afastar o foco da área de código (Tab insere um caractere
  de tabulação).
</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">
<h1>Notícia importante</h1>
<p>No domingo, 9 de janeiro de 2010, uma gangue de góticos foi
   vista roubando vários gnomos de jardim de um
   centro comercial no centro de Milwaukee. Eles estavam
   todos vestindo macacões verdes e chapéus bobos, que
   pareciam ter a forma de uma baleia. Se alguém
   tiver alguma informação sobre este incidente, por favor
   entre em contato com a polícia.</p></textarea
>

<div class="playable-buttons">
  <input id="reset" type="button" value="Resetar" />
  <input id="solution" type="button" value="Mostrar solução" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

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

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

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Mostrar solução";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Mostrar solução") {
    textarea.value = solutionEntry;
    solution.value = "Ocultar solução";
  } else {
    textarea.value = userEntry;
    solution.value = "Mostrar solução";
  }
  updateCode();
});

var htmlSolution =
  "<h1>Notícia importante</h1>\n<p>No <strong>domingo, 9 de janeiro de 2010</strong>, uma gangue de <em>góticos</em> foi vista roubando <strong><em>vários</em> gnomos de jardim</strong> de um centro comercial no centro de <strong>Milwaukee</strong>. Eles estavam todos <em>vestindo macacões verdes e chapéus bobos</em>, que pareciam ter a forma de uma baleia. Se alguém tiver <strong>alguma informação</strong> sobre este incidente, por favor entre em contato com a <strong>polícia</strong>.</p>";
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Mostrar solução") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### Itálico, negrito, sublinhado

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

O HTML5 redefiniu `<b>`, `<i>` e `<u>` com novas funções semânticas um pouco confusas.

Aqui está a melhor regra geral: provavelmente é apropriado usar `<b>`, `<i>` ou `<u>` para transmitir um significado tradicionalmente transmitido com negrito, itálico ou sublinhado, desde que não exista um elemento mais adequado. No entanto, sempre é essencial manter uma mentalidade de acessibilidade. O conceito de itálico não é muito útil para pessoas que usam leitores de tela ou para pessoas que usam um sistema de escrita diferente do alfabeto Latino.

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

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

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

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

<!-- um erro de ortografia conhecido -->
<p>
  Algum dia eu vou aprender como
  <u style="text-decoration-line: underline; text-decoration-style: wavy;"
 >jogar</u
 >
  melhor.
</p>

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

Teste suas habilidades!
-----------------------

Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes? Você pode encontrar alguns testes adicionais para verificar se você absorveu essas informações antes de prosseguir — consulte Teste suas habilidades: noções básicas de texto HTML.

Resumo
------

Por enquanto é isso! Este artigo deve fornecer uma boa idéia de como começar a marcar texto em HTML e apresentar alguns dos elementos mais importantes nessa área. Há muito mais elementos semânticos a serem abordados nesta área, e veremos muito mais em nosso artigo de Formatação avançada de texto, mais adiante neste curso. No próximo artigo, veremos detalhadamente como criar links, possivelmente o elemento mais importante na Web.

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


Dicas para criar páginas HTML de carregamento rápido - Aprendendo desenvolvimento web

Dicas para criar páginas HTML de carregamento rápido
====================================================

Estas dicas são baseadas em conhecimento comum e experimentação.

Uma página web otimizada não apenas provê um site mais responsivo aos visitantes, como também reduz a carga sobre os servidores e a conexão com a Internet. Isso pode ser crucial para sites de grande volume ou sites que tenham um pico de tráfego devido a circunstâncias extraordinárias, como plantões de notícias urgentes.

Otimizar a performance do carregamento de páginas não serve apenas para o conteúdo que será visto por visitantes com linha discada ou aparelhos móveis. É igualmente importante para banda larga e pode levar a melhorias dramáticas até mesmo para seus visitantes com as mais rápidas conexões.

Dicas
-----

### Reduza o peso da página

O peso da página é, de longe, o fator mais importante na performance de seu carregamento.

Reduzir o peso da página através da eliminação de espaço em branco desnecessário e comentários, comumente conhecido como minimização, e mover scripts e CSS *inline* para arquivos externos pode melhorar a performance de download sem muita necessidade de outras mudanças na estrutura da página.

Ferramentas como HTML Tidy podem automaticamente cortar espaços em branco desnecessários e linhas vazias de um código HTML validado. Outras ferramentas podem "comprimir" JavaScript ao reformatar o código-fonte ou o obfuscando e substituindo identificadores longos por versões mais curtas.

### Minimize o número de arquivos

Reduzir o número de arquivos referenciados por uma página diminui o número de conexões HTTP (en-US) requeridas para realizar o download da página.

Dependendo das configurações de cache do *browser*, este pode enviar uma requisição `If-Modified-Since` ao servidor para cada arquivo CSS, JavaScript ou de imagem, perguntando se o arquivo foi modificado desde a última vez que foi baixado.

Ao reduzir o número de arquivos referenciados de dentro de uma página, reduz-se o tempo necessário para essas requisições serem enviadas e suas respostas recebidas.

Se você usa muitas imagens de fundo em seu CSS, pode reduzir o número de verificações HTTP combinando imagens em um único arquivo, o que é conhecido como um *sprite* de imagens. Então você apenas utiliza a mesma imagem cada vez que precisá-la, ajustando as coordenadas x/y apropriadamente. Essa técnica funciona melhor com elementos que terão dimensões limitadas, não sendo aplicável para todas as imagens. Contudo, o número menor de requisições HTTP e *caching* de uma única imagem devem ajudar a reduzir o tempo de carregamento.

Muito tempo gasto pesquisando quando foi a modificação mais recente de arquivos referenciados pode atrasar a exibição inicial de uma página, já que o *browser* deve verificar o momento de modificação para cada arquivo CSS ou JavaScript antes de carregar a página.

### Reduza pesquisa de domínio

Já que cada domínio distinto demanda tempo durante uma pesquisa de DNS, o tempo de carregamento da página aumentará conforme o número de domínios distintos que aparecem em links de CSS e fontes de JavaScript e imagens.

Pode nem sempre ser prático, mas você deve sempre tomar cuidado para utilizar apenas o mínimo necessário de domínios diferentes nas suas páginas.

### Conteúdo em cache reutilizado

Assegure que qualquer conteúdo que possa ser armazenado em cache o seja, e com tempos de expiração adequados.

Em especial, atente ao cabeçalho `Last-Modified`. Ele permite mecanismos de cache eficientes; através desse cabeçalho, informações sobre o arquivo que o agente de usuário quer carregar, como quando foi modificado da última vez, são transferidas. A maioria dos servidores web automaticamente anexam o cabeçalho `Last-Modified` a páginas estáticas (p. ex.: `.html`, `.css`), baseado na data de última modificação armazenada no sistema de arquivos. Com páginas dinâmicas (p. ex:`.php`, `.aspx`), isso não pode ser feito, e o cabeçalho não é enviado.

Então, para essas páginas que são geradas dinamicamente, alguma pesquisa adicional é benéfica. Isso vai salvar muito tempo em requisições nas páginas que normalmente não permitem armazenamento em cache.

Mais informações:

1. Get HTTP Condicional para Hackers RSS
2. HTTP 304: Not Modified
3. Sobre o Last-Modified HTTP e ETag
### Estabeleça a ordem dos componentes da página de forma otimizada

Baixe o conteúdo da página primeiro, junto com qualquer CSS ou JavaScript que pode ser requerido para sua exibição inicial, de modo que o usuário receba a resposta mais rápida possível durante o carregamento. Esse conteúdo é tipicamente texto, e portanto pode ser beneficiado por técnicas de compressão de texto durante o tráfego, permitindo uma resposta ainda mais rápida ao usuário.

Quaisquer elementos dinâmicos que requeiram que a página complete seu carregamento antes de serem usados devem ser inicialmente desabilitados, e apenas habilitados após o carregamento completo. Isso fará com que o JavaScript seja carregado após o conteúdo da página, o que melhorará a aparência geral do carregamento.

### Reduza o número de scripts *inline*

Scripts *inline* podem ser custosos para o carregamento, uma vez que o parser deve assumir que o script pode modificar a estrutura da página enquanto o processo de *parsing* está em andamento. Reduzir o número de scripts *inline* no geral e reduzir o uso de `document.write()` para a saída de conteúdo pode melhorar o carregamento da página. Use métodos AJAX modernos para manipular o conteúdo da página, ao invés de abordagens antigas baseadas em `document.write()`.

### Use CSS moderno e marcação validada

O uso de CSS moderno reduz a quantidade de marcação, pode reduzir a necessidade de imagens, em termos de layout, e frequentemente substitui imagens de textos estilizados — que "custam" muito mais do que o texto estilizado com CSS.

Usar marcações validadas tem outras vantagens. Primeiro, *browsers* não precisarão realizar correção de erros durante o *parsing* de HTML (isso é à parte da preocupação filosófica de permitir variação de formato na entrada do usuário, e então programaticamente "corrigir" ou normalizá-la; ou se, ao invés disso, forçar um formato de entrada rígido, sem tolerância a desvios).

Além do mais, marcação válida permite o livre uso de outras ferramentas que podem pré-processar páginas web. Por exemplo, HTML Tidy pode remover espaços em branco e tags finais opcionais; contudo, a ferramenta não será executada em uma página com erros graves de marcação.

### Divida seu conteúdo

Layout de tabelas é um método legado que não deve mais ser empregado. Layouts utilizando blocos `<div>` e, no futuro próximo, layout multi-colunas CSS3 (en-US) ou layout de caixas flexíveis CSS3, devem ser utilizadas ao invés disso.

Tabelas ainda são consideradas marcações válidas, mas devem ser usadas para exibir dados tabulares. Para ajudar o browser a renderizar sua página mais rapidamente, você deve evitar aninhar suas tabelas.

Ao invés de realizar aninhamentos profundos como:
```

<TABLE>
  <TABLE>
    <TABLE>
          ...
    </TABLE>
  </TABLE>
</TABLE>
```

use tabelas não-aninhadas ou divs, como em
```

<TABLE>...</TABLE>
<TABLE>...</TABLE>
<TABLE>...</TABLE>
```

Veja também: Especificações do layout multi-colunas CSS3 e layout de caixas flexíveis CSS3

### Especifique tamanhos para imagens e tabelas

Se o *browser* puder imediatamente determinar a altura e/ou largura de suas imagens e tabelas, ele será capaz de exibir uma página sem ter que recalcular o fluxo do conteúdo. Isso não apenas acelera a exibição da página como previne mudanças irritantes no layout ao finalizar o carregamento. Por essa razão, `height` e `width` devem ser especificadas para imagens, sempre que possível.

Tabelas devem usar a combinação CSS selector:property:
```

  table-layout: fixed;
```

e devem especificar as larguras das colunas usando as tags HTML `COL` e `COLGROUP`.

### Escolha bem seus requisitos de agente de usuário

Para atingir as maiores melhorias no design de páginas, tenha certeza de que requisitos de agente de usuário razoáveis estejam especificados para os projetos. Não espere que seu conteúdo apareça de forma perfeita, pixel por pixel, em todos os *browsers*, especialmente nos obsoletos.

Idealmente, seus requisitos básicos devem ser baseados em considerações sobre os *browsers* modernos que suportam os padrões relevantes. Isso pode incluir: Firefox 3.6+ em qualquer plataforma, Internet Explorer 8.0+ no Windows, Opera 10+ no Windows, e Safari 4 no Mac OS X.

Note, contudo, que muitas das dicas listadas neste artigo são técnicas de senso comum que se aplicam a qualquer agente-usuário, e podem ser aplicadas a qualquer página web, independentemente de requisitos de compatibilidade em *browsers*.

Exemplo de estrutura de página
------------------------------

* `html`
* `head`
    + `link`...
     Arquivos CSS requeridos para a aparência da página. Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.
    + `script`...
     Arquivos JavaScript para funções **requeridas** durante o carregamento da página, sem qualquer DHTML que só pode ser executado após o carregamento completo.
* Minimize o número de arquivos para performance enquanto mantém JavaScript não-relacionado em arquivos separados para manutenção.
* `body`
* Páginas de conteúdo visíveis ao usuário em pequenas divisões (tabelas / divs) que podem ser exibidas sem esperar a página inteira ser baixada.
    + `script`...
     Quaisquer scripts que forem usados para realizar DHTML. Um script DHTML geralmente só pode ser executado após o carregamento completo da página e a inicialização de todos os objetos necessários. Não há necessidade de carregar esses scripts antes do conteúdo. Isso apenas desacelera a aparência inicial do carregamento da página.
* Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.
* Se uma ou mais imagens forem usadas para efeitos de *rollover*, você deve pré-carregá-las aqui após o conteúdo da página ter sido baixado.
Use async and defer, se possível
--------------------------------

Faça com que scripts JavaScript sejam compatíveis tanto com async (en-US) como defer (en-US) e use async (en-US) sempre que possível, especialmente se você tiver múltiplas tags de script.

Com isso, a página pode parar de renderizar enquanto o JavaScript ainda estiver sendo carregado. Do contrário, o *browser* não renderizará nada que estiver após as tags de script sem esses atributos.

Nota: Apesar desses atributos ajudarem muito na primeira vez que a página for carregada, você não pode confiar que vai funcionar em todos os *browsers*. Se você seguir todas as orientações para produzir bom código JavaScript, não há necessidade de alterá-lo.

Links Relacionados
------------------

* Livro: "Speed Up Your Site" por Andy King
* O excelente e muito completo Melhores Práticas para Acelerar Seu Web Site (Yahoo!)
* Ferramentas para analisar e otimizar a performance: Google PageSpeed
Informações do Documento Original
---------------------------------

* Autor(es): Bob Clary, Evangelista de Tecnologia, Netscape Communications
* Última Data de Atualização: Publicado em 04 Abr 2003
* Informações de Copyright: Copyright © 2001-2003 Netscape. Todos os direitos reservados.
* Nota: Este artigo reeditado foi originalmente parte do site DevEdge.


Utilizando data attributes - Aprendendo desenvolvimento web

Utilizando data attributes
==========================

O HTML5 (en-US) foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido. Atributos data-\* nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como classList (en-US), atributos fora do padrão, propriedades extras no DOM ou o método depreciado setUserData.

Sintaxe HTML
------------

A sintaxe é simples. Qualquer atributo de qualquer elemento no qual o nome do atributo inicia com `data-` é um atributo data. Digamos que você possui um article e quer armazenar informações extras que não possuem nenhuma representação visual. Use atributos data para isso:

```html
<article
 id="electriccars"
 data-columns="3"
 data-index-number="12314"
 data-parent="cars">
  ...
</article>
```

Acesso no JavaScript
--------------------

Ler os valores destes atributos via JavaScript é muito simples também. Você pode lê-los usando `getAttribute()` com o nome html completo, mas a forma padrão provê uma alternativa mais simples: um `DOMStringMap` pode ser lido através da propriedade `dataset` (en-US).

Para obter o atributo data através do objeto `dataset`, acesse a propriedade utilizando a parte do nome do atributo após o prefixo `data-` (note que o hífen é convertido para camelCase).

```js
var article = document.getElementById("electriccars");

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
```

Cada propriedade é uma String e pode ser lida e escrita. No exemplo acima a atribuição `article.dataset.columns = 5` iria alterar esse atributo para "5".

Acesso no CSS
-------------

Note que os atributos data são atributos em HTML puro, e você pode inclusive acessá-los via CSS. Por exemplo, para mostrar o elemento pai em um artigo, você pode usar conteúdo gerado em CSS com a função `attr()`:

```css
article::before {
  content: attr(data-parent);
}
```

Pode-se também usar os seletores de atributos em CSS para alterar estilos de acordo com o atributo data:

```css
article[data-columns="3"] {
  width: 400px;
}
article[data-columns="4"] {
  width: 600px;
}
```

Pode-se tudo isso em funcionamento neste exemplo JSBin.

Atributos data também podem ser utilizados para conter informações que mudam constantemente, como a pontuação em um jogo. Usando seletores CSS e acesso com JavaScript permite que se construa efeitos excelentes sem ter que escrever suas próprias rotinas de display. Veja esta tela para um exemplo utilizando conteúdo gerado e transições CSS (exemplo JSBin).

Uma vez que valores data são strings, todos os valores devem estar entre aspas ou então a estilização não fará efeito.

Issues
------

Não armazene conteúdo que deve estar visível e acessível nos atributos data porque tecnologias assistivas podem não acessá-los. Além disso, motores de busca podem não indexar os valores dos atributos data.

Os principais issues a serem considerados são com suporte e performance no Internet Explorer. O Internet Explorer 11+ provê suporte para o padrão, mas todas as versões anteriores não suportam `dataset`. Para suporte ao IE 10 e anteriores, deve-se acessar atributos data através de `getAttribute()` . E ainda, a performance de leitura dos atributos data é ruim, comparada com o armazenamento em um data warehouse JS. O uso de `dataset` é até pior que a leitura dos dados com `getAttribute()`.

Apesar do que foi colocado, para metadados customizados associados a elementos, eles são uma ótima solução.

No Firefox 49.0.2 (e talvez em versões anteriores/posteriores), os atributos data que excederem 1022 caracteres não serão lidos pelo Javascript (EcmaScript 4).

Veja também
-----------

* Este artigo é uma adaptação de Usando atributos data em JavaScript e CSS no hacks.mozilla.org.
* Como usar atributos data em HTML5 (Sitepoint)