canvas - HTML: Linguagem de Marcação de Hipertexto

canvas
======

Sumário
-------

O elemento HTML *Canvas* (`<canvas>`) pode ser utilizado para desenhar gráficos utilizando scripts (geralmente JavaScript). Por exemplo, além de desenhar gráficos, ele pode ser usado para fazer composições de fotos e também para animações. Você poderá colocar conteúdos alternativos dentro do bloco `<canvas>`. Este conteúdo será renderizado também em navegadores antigos e em navegadores com JavaScript desabilitado.

Para mais artigos sobre canvas, veja canvas topic page.

Contexto de uso
---------------

| Conteúdo permitido | Transparente, tanto phrasing content ou flow content. |
| --- | --- |
| Omissão de tags | Nenhuma, tanto a tag de início quanto a de fim devem ser incluídas. |
| Elementos "pai" permitidos | Qualquer elemento que aceite phrasing content ou flow content. |
| Documento normativo | HTML 5, section 4.8.10 |

Atributos
---------

Como qualquer outro elemento HTML, este também tem global attributes.

`width`

A largura do espaço em pixels CSS. O padrão é 300.

`height`

A altura do espaço em pixels CSS. O padrão é 150.

**Nota:** The displayed size of the canvas can be changed using a stylesheet. The image is scaled during rendering to fit the styled size.

Interface DOM
-------------

* HTMLCanvasElement
Exemplo
-------

```html
<canvas id="canvas" width="300" height="300">
  Desculpe-me, seu navegador não suporta o elemento <canvas>.
</canvas>
```

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* MDN canvas portal
* Um canvas tutorial
* Canvas cheat sheet
* Canvas-related demos


<table>: O elemento Table - HTML: Linguagem de Marcação de Hipertexto

<table>: O elemento Table
=========================

O elemento **`<table>`** HTML representa dados tabulares — isto é, informações apresentadas em uma tabela bidimensional composta por linhas e colunas de células contendo dados .

Experimente
-----------

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categoria de conteúdo | Fluxo de conteúdo (en-US) |
| Conteúdo permitido | Nesta ordem:
 1. um elemento `<caption>` opcional,
2. zero ou mais `<colgroup>` (en-US) elementos,
3. um elemento `<thead>` (en-US) opcional,
4. uma das duas alternativas:
    * zero ou mais elementos `<tbody>` (en-US)
    * um ou mais elementos `<tr>` (en-US)
5. um elemento `<tfoot>` opcional
 |
| Omissão de tag | None, both the starting and ending tag are mandatory. |
| Elementos pais permitidos | Qualquer elemento que aceite fluxo de conteúdo |
| Função ARIA implícita | `table (en-US)` |
| Permitted ARIA roles | Any |
| Interface DOM | `HTMLTableElement` (en-US) |

Atributos
---------

Este elemento inclui os atributos globais (en-US).

### Atributos depreciados

`align`
Deprecated

Este atributo enumerado (en-US) indica como a tabela deve ser alinhada dentro do documento que a contém. Pode ter os seguintes valores:

* `left`: a tabela é exibida no lado esquerdo do documento;
* `center`: a tabela é exibida no centro do documento;
* `right`: a tabela é exibida no lado direito do documento.

Defina `margin-left` (en-US) e `margin-right` (en-US) como `auto` ou `margin` como `0 auto` para obter um efeito que é semelhante ao atributo align.

`bgcolor`
Deprecated

A cor de fundo da tabela. É um código RGB hexadecimal de 6 dígitos (en-US), prefixado por um '`#`'. Uma das [palavras-chave de cor] predefinidas (/pt-BR/docs/Web/CSS/named-color) também pode ser usada.

Para obter um efeito semelhante, use a propriedade CSS `background-color`.

`border`
Deprecated

Este atributo inteiro define, em pixels, o tamanho do quadro ao redor da tabela. Se definido como 0, o atributo `frame` é definido como void.

Para obter um efeito semelhante, use a propriedade abreviada CSS `border` (en-US).

`cellpadding`
Deprecated

Este atributo define o espaço entre o conteúdo de uma célula e sua borda, exibida ou não. Se o comprimento do preenchimento da célula for definido em pixels, esse espaço de tamanho de pixel será aplicado a todos os quatro lados do conteúdo da célula. Se o comprimento for definido usando um valor percentual, o conteúdo será centralizado e o espaço vertical total (superior e inferior) representará este valor. O mesmo vale para o espaço horizontal total (esquerda e direita).

Para obter um efeito semelhante, aplique a propriedade `border-collapse` (en-US) ao elemento `<table>`, com seu valor definido para recolher, e a propriedade `padding` aos elementos `<td>` (en-US).

`cellspacing`
Deprecated

Este atributo define o tamanho do espaço entre duas células em um valor percentual ou pixels. O atributo é aplicado horizontal e verticalmente, ao espaço entre o topo da tabela e as células da primeira linha, a esquerda da tabela e a primeira coluna, a direita da tabela e a última coluna e a parte inferior da tabela e a última linha.

Para obter um efeito semelhante, aplique a propriedade `border-spacing` (en-US) ao elemento `<table>`. `border-spacing` não tem nenhum efeito se `border-collapse` (en-US) estiver definido para recolher.

`frame`
Deprecated

Este atributo enumerado define qual lado do quadro ao redor da tabela deve ser exibido.

Para obter um efeito semelhante, use as propriedades `border-style` (en-US) e `border-width` (en-US).

`rules`
Deprecated

Este atributo enumerado define onde as rules, ou seja, as linhas, devem aparecer em uma tabela. Pode ter os seguintes valores:

* `none`, que indica que nenhuma regra será exibida; é o valor padrão;
* `groups`, que fará com que as regras sejam exibidas entre os grupos de linhas (definidas por `<thead>` (en-US), `<tbody>` (en-US) e `<tfoot>` elementos) e entre grupos de colunas (definidos apenas pelos elementos `<col>` (en-US) e `<colgroup>` (en-US));
* `rows`, que fará com que as regras sejam exibidas entre as linhas;
* `cols`, que fará com que as regras sejam exibidas entre as colunas;
* `all`, que fará com que as regras sejam exibidas entre linhas e colunas.

Para obter um efeito semelhante, aplique a propriedade `border` (en-US) ao apropriado `<thead>` (en-US), `<tbody>` (en-US), tfoot , `<col>` (en-US), ou `<colgroup>` (en-US) elementos.

`summary`
Deprecated

Este atributo define um texto alternativo que resume o conteúdo da tabela. Use o elemento `<caption>` em vez disso.

`width`
Deprecated

Este atributo define a largura da tabela. Em vez disso, use a propriedade CSS `width`.

Exemplos
--------

### Table simples

```html
<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>
```

#### Resultado

### Outros exemplos simples

```html
<p>Tabela simples com cabeçalho</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>Tabela com thead, tfoot, e tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

<p>Tabela com colgroup</p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington, D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

<p>Tabela com colgroup e col</p>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

<p>Tabela simples com caption</p>
<table>
  <caption>
    Awesome caption
  </caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>
```

```
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  padding: 5px;
  border: 1px solid black;
}
```

#### Resultado

### Ordenação de tabela

#### Ordenando as linhas da tabela

Não há métodos nativos para classificar as linhas (elementos `<tr>` (en-US)) de uma tabela HTML. Mas usando `Array.prototype.slice()`, `Array.prototype.sort()`, `Node.removeChild()` e `Node.appendChild()`, você pode implementar sua própria função `sort()` para classificar uma `HTMLCollection` de elementos `<tr>`.

No exemplo abaixo, você pode ver tal exemplo. Estamos anexando-o ao elemento <tbody> para que ele classifique as células da tabela em ordem crescente de valor e atualize a exibição para se adequar.

##### HTML

```html
<table>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>
```

##### JavaScript

```js
HTMLTableSectionElement.prototype.sort = function (cb) {
  Array.from(this.rows)
    .sort(cb)
    .forEach((e) => this.appendChild(this.removeChild(e)));
};

document
  .querySelector("table")
  .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
```

##### Resultado

#### Ordenando as linhas com um clique no elemento th

O exemplo a seguir adiciona um manipulador de eventos a cada elemento `<th>` de cada `<table>` no `document`; ele ordena todas as linhas do `<tbody>`, baseando a ordenação nas células `td` contidas nas linhas.

**Nota:** Esta solução assume que os elementos `<td>` são preenchidos por texto bruto sem elementos descendentes.

##### HTML

```html
<table>
  <thead>
    <tr>
      <th>Números</th>
      <th>Letras</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>A</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
    </tr>
    <tr>
      <td>1</td>
      <td>C</td>
    </tr>
  </tbody>
</table>
```

##### JavaScript

```js
const allTables = document.querySelectorAll("table");

for (const table of allTables) {
  const tBody = table.tBodies[0];
  const rows = Array.from(tBody.rows);
  const headerCells = table.tHead.rows[0].cells;

  for (const th of headerCells) {
    const cellIndex = th.cellIndex;

    th.addEventListener("click", () => {
      rows.sort((tr1, tr2) => {
        const tr1Text = tr1.cells[cellIndex].textContent;
        const tr2Text = tr2.cells[cellIndex].textContent;
        return tr1Text.localeCompare(tr2Text);
      });

      tBody.append(...rows);
    });
  }
}
```

##### Resultado

### Exibindo tabelas grandes em espaços pequenos

Um problema comum com tabelas na web é que elas não funcionam muito bem nativamente em telas pequenas quando a quantidade de conteúdo é grande, e a maneira de torná-las roláveis não é óbvia, especialmente quando a marcação pode vir de um CMS e não pode ser modificado para ter um wrapper.

Este exemplo fornece uma maneira de exibir tabelas em espaços pequenos. Ocultamos o conteúdo HTML porque ele é muito grande e não há nada de extraordinário nele. O CSS é mais útil para inspecionar neste exemplo.
```

<table>
  <thead>
    <tr>
      <th>1<sup>3</sup> equals:
      <th>2<sup>3</sup> equals:
      <th>3<sup>3</sup> equals:
      <th>4<sup>3</sup> equals:
      <th>5<sup>3</sup> equals:
      <th>6<sup>3</sup> equals:
      <th>7<sup>3</sup> equals:
  <tbody>
    <tr>
      <td>row 1: 1
      <td>row 1: 8
      <td>row 1: 27
      <td>row 1: 64
      <td>row 1: 125
      <td>row 1: 216
      <td>row 1: 343
    <tr>
      <td>row 2: 1
      <td>row 2: 8
      <td>row 2: 27
      <td>row 2: 64
      <td>row 2: 125
      <td>row 2: 216
      <td>row 2: 343
    <tr>
      <td>row 3: 1
      <td>row 3: 8
      <td>row 3: 27
      <td>row 3: 64
      <td>row 3: 125
      <td>row 3: 216
      <td>row 3: 343
    <tr>
      <td>row 4: 1
      <td>row 4: 8
      <td>row 4: 27
      <td>row 4: 64
      <td>row 4: 125
      <td>row 4: 216
      <td>row 4: 343
    <tr>
      <td>row 5: 1
      <td>row 5: 8
      <td>row 5: 27
      <td>row 5: 64
      <td>row 5: 125
      <td>row 5: 216
      <td>row 5: 343
    <tr>
      <td>row 6: 1
      <td>row 6: 8
      <td>row 6: 27
      <td>row 6: 64
      <td>row 6: 125
      <td>row 6: 216
      <td>row 6: 343
    <tr>
      <td>row 7: 1
      <td>row 7: 8
      <td>row 7: 27
      <td>row 7: 64
      <td>row 7: 125
      <td>row 7: 216
      <td>row 7: 343
    <tr>
      <td>row 8: 1
      <td>row 8: 8
      <td>row 8: 27
      <td>row 8: 64
      <td>row 8: 125
      <td>row 8: 216
      <td>row 8: 343
    <tr>
      <td>row 9: 1
      <td>row 9: 8
      <td>row 9: 27
      <td>row 9: 64
      <td>row 9: 125
      <td>row 9: 216
      <td>row 9: 343
    <tr>
      <td>row 10: 1
      <td>row 10: 8
      <td>row 10: 27
      <td>row 10: 64
      <td>row 10: 125
      <td>row 10: 216
      <td>row 10: 343
    <tr>
      <td>row 11: 1
      <td>row 11: 8
      <td>row 11: 27
      <td>row 11: 64
      <td>row 11: 125
      <td>row 11: 216
      <td>row 11: 343
    <tr>
      <td>row 12: 1
      <td>row 12: 8
      <td>row 12: 27
      <td>row 12: 64
      <td>row 12: 125
      <td>row 12: 216
      <td>row 12: 343
    <tr>
      <td>row 13: 1
      <td>row 13: 8
      <td>row 13: 27
      <td>row 13: 64
      <td>row 13: 125
      <td>row 13: 216
      <td>row 13: 343
    <tr>
      <td>row 14: 1
      <td>row 14: 8
      <td>row 14: 27
      <td>row 14: 64
      <td>row 14: 125
      <td>row 14: 216
      <td>row 14: 343
    <tr>
      <td>row 15: 1
      <td>row 15: 8
      <td>row 15: 27
      <td>row 15: 64
      <td>row 15: 125
      <td>row 15: 216
      <td>row 15: 343
    <tr>
      <td>row 16: 1
      <td>row 16: 8
      <td>row 16: 27
      <td>row 16: 64
      <td>row 16: 125
      <td>row 16: 216
      <td>row 16: 343
    <tr>
      <td>row 17: 1
      <td>row 17: 8
      <td>row 17: 27
      <td>row 17: 64
      <td>row 17: 125
      <td>row 17: 216
      <td>row 17: 343
    <tr>
      <td>row 18: 1
      <td>row 18: 8
      <td>row 18: 27
      <td>row 18: 64
      <td>row 18: 125
      <td>row 18: 216
      <td>row 18: 343
    <tr>
      <td>row 19: 1
      <td>row 19: 8
      <td>row 19: 27
      <td>row 19: 64
      <td>row 19: 125
      <td>row 19: 216
      <td>row 19: 343
    <tr>
      <td>row 20: 1
      <td>row 20: 8
      <td>row 20: 27
      <td>row 20: 64
      <td>row 20: 125
      <td>row 20: 216
      <td>row 20: 343
</table>
```

Ao observar esses estilos, você notará que a propriedade `display` da tabela foi definida como `block`. Embora isso permita a rolagem, a tabela perde um pouco de sua integridade e as células da tabela tentam se tornar o menor possível. Para atenuar esse problema, definimos `white-space` como `nowrap` no `<tbody>`. No entanto, não fazemos isso para o `<thead>` para evitar que títulos longos forcem as colunas a serem mais largas do que o necessário para exibir os dados.

Para manter os cabeçalhos da tabela na página durante a rolagem para baixo, definimos `position` para fixar nos elementos `<th>`. Observe que **não** definimos `border-collapse` (en-US) como `collapse`, pois se o fizermos, o cabeçalho não pode ser separado corretamente do restante da tabela.

```css
table,
th,
td {
  border: 1px solid;
}

table {
  width: 100%;
  max-width: 400px;
  height: 240px;
  margin: 0 auto;
  display: block;
  overflow-x: auto;
  border-spacing: 0;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
  border-top-width: 0;
  border-left-width: 0;
}

th {
  position: sticky;
  top: 0;
  background: #fff;
  vertical-align: bottom;
}

th:last-child,
td:last-child {
  border-right-width: 0;
}

tr:last-child td {
  border-bottom-width: 0;
}
```

#### Resultado

Preocupações com acessibilidade
-------------------------------

### Legendas

Ao fornecer um elemento `<caption>` cujo valor descreve de forma clara e concisa o propósito da tabela, ele ajuda as pessoas a decidirem se precisam ler o restante do conteúdo da tabela ou ignorá-lo.

Isso ajuda as pessoas a navegar com o auxílio de tecnologia assistiva, como um leitor de tela, pessoas com problemas de visão subnormal e pessoas com problemas cognitivos.

* MDN Adicionando uma legenda à sua tabela com <caption> (en-US)
* Legenda e resumo • Tabelas • Tutoriais de acessibilidade na Web do W3C WAI
### Escopo de linhas e colunas

O atributo `scope` em elementos de cabeçalho é redundante em contextos simples, porque o escopo é inferido. No entanto, algumas tecnologias assistivas podem não obter inferências corretas, portanto, especificar o escopo do cabeçalho pode melhorar a experiência do usuário. Em tabelas complexas, o escopo pode ser especificado para fornecer as informações necessárias sobre as células relacionadas a um cabeçalho.

#### Examples

```html
<table>
  <caption>
    Nomes das cores e valores
  </caption>
  <tbody>
    <tr>
      <th scope="col">Nome</th>
      <th scope="col">HEX</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
    <tr>
      <th scope="row">Teal</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsl(180 90% 64% / 1)</code></td>
      <td><code>rgb(81 246 246 / 1)</code></td>
    </tr>
    <tr>
      <th scope="row">Goldenrod</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsl(38 90% 65% / 1)</code></td>
      <td><code>rgba(246 188 87 / 1)</code></td>
    </tr>
  </tbody>
</table>
```

##### Resultado

Fornecer uma declaração de `scope="col"` em um elemento `<th>` ajudará a descrever que a célula está no topo de uma coluna. Fornecer uma declaração de `scope="row"` em um elemento `<th>` ajudará a descrever que a célula é a primeira em uma linha.

* Tabelas MDN para usuários com deficiência visual (en-US)
* Tabelas com dois cabeçalhos • Tabelas • Tutoriais de acessibilidade na Web do W3C WAI
* Tabelas com cabeçalhos irregulares • Tabelas • Tutoriais de acessibilidade na Web W3C WAI
* H63: Usando o atributo scope para associar células de cabeçalho e células de dados em tabelas de dados | Técnicas W3C para WCAG 2.0
### Tabelas complicadas

A tecnologia assistiva, como leitores de tela, pode ter dificuldade em analisar tabelas que são tão complexas que as células de cabeçalho não podem ser associadas de maneira estritamente horizontal ou vertical. Isso é normalmente indicado pela presença de `colspan` (en-US) e [`rowspan`](/pt-BR/docs/Web/HTML/ Element/td#rowspan).

Idealmente, considere maneiras alternativas de apresentar o conteúdo da tabela, incluindo dividi-la em uma coleção de tabelas relacionadas menores que não precisam depender do uso dos atributos `colspan` e `rowspan`. Além de ajudar as pessoas que usam tecnologia assistiva a entender o conteúdo da tabela, isso também pode beneficiar pessoas com problemas cognitivos que podem ter dificuldade em entender as associações que o layout da tabela está descrevendo.

Se a tabela não puder ser separada, use uma combinação de `id` e [`headers`](/pt-BR/docs/Web/ HTML/Element/td#headers) para associar programaticamente cada célula da tabela aos cabeçalhos aos quais a célula está associada.

* Tabelas MDN para usuários com deficiência visual (en-US)
* Tabelas com cabeçalhos de vários níveis • Tabelas • Tutoriais de acessibilidade na Web do W3C WAI
* H43: Usando os atributos id e headers para associar células de dados com células de cabeçalho em tabelas de dados | Técnicas para W3C WCAG 2.0
Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-table-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Tutorial de tabela de dados HTML
* Propriedades CSS que podem ser especialmente úteis para estilizar o elemento `<table>`:
    + `width` para controlar a largura da tabela;
    + `border` (en-US), `border-style` (en-US), `border-color` (en-US), `border-width` (en-US) , `border-collapse` (en-US), `border-spacing` (en-US) para controlar o aspecto das bordas das células, réguas e moldura;
    + `margin` e `padding` para estilizar o conteúdo da célula individual;
    + `text-align` e `vertical-align` para definir o alinhamento do texto e do conteúdo da célula.


<aside> - HTML: Linguagem de Marcação de Hipertexto

<aside>
=======

Sumario
-------

O elemento HTML **`<aside>`** representa uma seção de uma página que consiste de conteúdo que é tangencialmente relacionado ao conteúdo do seu entorno, que poderia ser considerado separado do conteúdo. Essas seções são, muitas vezes, representadas como barras laterais. Elas muitas vezes contem explicações laterais, como a definição de um glossário; conteúdo vagamente relacionado, como avisos; a biografia do autor; ou, em aplicações web, informações de perfil ou links de blogs relacionados.

>
> **Note:** *Notas de uso:*
>
>
> * **Não use** o elemento `<aside>` para texto entre parenteses, pois este tipo de texto é considerado parte do fluxo principal.
>
>
>

* *Categoria de conteudo (en-US)* Conteudo de fluxo (en-US), conteudo de secionamento, conteudo palpavel.
* *Conteudo permitido* Conteudo de fluxo (en-US).
* *Omissao de tag* Nenhuma, ambas as tags de início e fim são obrigatórias.
* *Elementos pai permitidos* Qualquer elemento que aceita conteudo de fluxo (en-US). Note que um elemento `<aside>` nao deve ser descendente de um elemento `<address>`.
* *Interface DOM* `HTMLElement` (en-US)
Atributos
---------

Este elemento inclui apenas os atributos globais (en-US).

Exemplos
--------

```html
<aside>
  <p>Algum conteudo relacionado a um <article></p>
</aside>
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-aside-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Outros elementos de seçao relacionados: `<body>`, `<article>`, `<section>`, `<nav>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<header>`, `<footer>`, `<address>`;
* Seçoes e outlines de um documento HTML5.


<del> - HTML: Linguagem de Marcação de Hipertexto

<del>
=====

Sumário
-------

O **elemento** **HTML `<del>`** (ou *Elemento* *HTML* *de Texto Excluído*) representa uma parte do texto que foi excluída de um documento. Este elemento é (não necessariamente) renderizado pelos navegadores com uma linha entre o texto.

* *Content categories (en-US)*Phrasing content (en-US) or flow content (en-US).
* *Permitted content* Transparent (en-US).
* *Tag omission* None, both the starting and ending tag are mandatory.
* *Permitted parent elements* Any element that accepts phrasing content (en-US).
* *DOM interface* `HTMLModElement` (en-US)
Attributes
----------

This element includes the global attributes (en-US).

`cite`

A URI for a resource that explains the change (for example, meeting minutes).

`datetime`

This attribute indicates the time and date of the change and must be a valid date with an optional time string. If the value cannot be parsed as a date with an optional time string, the element does not have an associated time stamp.

Examples
--------

```html
<p><del>This text has been deleted</del></p>
```

### Result

~~This text has been deleted~~

Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-del-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<ins>` (en-US) element for insertions into a text


<img> - HTML: Linguagem de Marcação de Hipertexto

<img>
=====

Resumo
------

O **elemento** \*\*HTML `<img>` \*\*(or *HTML Image Element*) representa a inserção de imagem no documento, sendo implementado também pelo HTML5 para uma melhor experiência com o elemento `<figure>` e `<figcaption>`.

Exemplo da implementação do HTML5
---------------------------------
```

<figure>
  <img src="imagem.jpg" alt="Minha Figura">
  <figcaption>Informações da Figura</figcaption>
</figure>
```

>
>
> **Note:** **Usage note:**
>  Navegadores nem sempre exibem a imagem referenciada pelo elemento. Este é o caso para navegadores não gráficos (incluindo aqueles usados por pessoas com deficiência de visão), ou se o usuário optar por não exibir imagens ou se o navegador não conseguir exibir a imagem porque é inválido ou um tipo não suportado. Nesses casos, o navegador pode substituir a imagem pelo texto definido no atributo **alt** deste elemento.
>
>
>
>

* *Content categories (en-US)* Flow content (en-US), phrasing content (en-US), embedded content, palpable content. If the element has a `usemap` attribute, it also is a part of the interactive content category.
* *Permitted content* None, it is an empty element (en-US).
* *Tag omission* Must have a start tag and must not have an end tag.
* *Permitted parent elements* Any element that accepts embedded content.
* *DOM interface* `HTMLImageElement` (en-US)
Atributos
---------

Este Elemeto inlcui o atributo global.

`align`
Deprecated

The alignment of the image with respect to its surrounding context. Use the `vertical-align` CSS property.

`alt`

Este atributo define um texto alternativo que descreve a imagem. Os Usuários irão ver o texto se a URL da imagem estiver errado, a imagem não está em um dos formatos suportados ou até a imagem ser baixada .

>
> **Note:** **Usage note:** Omitting this attribute indicates that the image *is* a key part of the content, but no textual equivalent is available. Setting this attribute to the empty string indicates that this image is *not* a key part of the content; non-visual browsers may omit it from rendering.
>
>
>

`border`
Deprecated

The width of a border around the image.

`crossorigin`

This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. CORS-enabled images (en-US) can be reused in the `<canvas>` element without being *tainted*. The allowed values are:

anonymous

A cross-origin request (i.e. with `Origin:` HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the `Access-Control-Allow-Origin:` HTTP header), the image will be *tainted* and its usage restricted..

use-credentials

A cross-origin request (i.e. with `Origin:` HTTP header) performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through `Access-Control-Allow-Credentials:` HTTP header), the image will be *tainted* and its usage restricted.

When not present, the resource is fetched without a CORS request (i.e. without sending the `Origin:` HTTP header), preventing its non-tainted usage in `<canvas>` elements. If invalid, it is handled as if the enumerated keyword **anonymous** was used. See CORS settings attributes (en-US) for additional information.

`height`

The height of the image in HTML 5 CSS pixels, or HTML 4 in pixels or as a percentage.

`hspace`
Deprecated

The number of pixels of white space to insert to the left and right of the image.

`ismap`

This Boolean attribute indicates that the image is part of a server-side map. If so, the precise coordinates of a click are sent to the server.

>
> **Note:** **Usage note:** This attribute is allowed only if the `<img>` element is a descendant of an `<a>` element with a valid `href` attribute.
>
>
>

`longdesc`
Deprecated

A link to a more detailed description of the image. Possible values are a URL or an element `id`.

`name`
Deprecated

A name for the element. Use the `id` attribute instead.

`src`

Image URL, this attribute is obligatory for the `<img>` element. On browsers supporting **srcset**, **src** is ignored if this one is provided.

`srcset`

A list of one or more strings separated by commas indicating a set of possible images for the user agent to use. Each string is composed of:

1. one URL to an image,
2. a width descriptor, that is a positive integer directly followed by `'w'`. The default value, if missing, is the infinity.
3. a pixel density descriptor, that is a positive floating number directly followed by `'x'`. The default value, if missing, is `1x`.

 Each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. Among the list, there must be only one string containing the same tuple of width descriptor and pixel density descriptor.
 The browser chooses the most adequate image to display at a given point of time.

`width`

The width of the image in pixels or percent.

`usemap`

The partial URL (starting with '#') of an image map associated with the element.

>
> **Note:** **Usage note:** You cannot use this attribute if the `<img>` element is a descendant of an `<a>` or `<button>` element.
>
>
>

`vspace`
Deprecated

The number of pixels of white space to insert above and below the image.

Formato de imagens suportadas
-----------------------------

O padrão HTML não fornece uma lista de formatos de imagem que devem ser suportados, portanto, cada agente de usuário oferece suporte a um conjunto diferente de formatos. Gecko suporta:

* JPEG
* GIF, incluindo GIFs animados
* PNG
* APNG
* SVG
* BMP
* BMP ICO
* PNG ICO
Interação com CSS
-----------------

Em relação ao CSS, uma `<img>` é um elemento substituído (en-US). Ele não tem linha de base, ou seja, quando usado em um contexto de formatação em linha (inline) com `vertical-align`: baseline, a base inferior da imagem será colocada na linha de base do contêiner.

Depending of its type, an *image* may have an intrinsic dimension, but this is not a necessary condition: a SVG image has no intrinsic dimension, a raster image has one.

Exemplos
--------

### Usando o texto alternativo

O exemplo a seguir insere uma imagem na página e inclui o texto alternativo para acessibilidade, de forma que ele possa ser lido por programas leitores de tela ou exibido caso a imagem não carregue.

```html
<img
 src="https://developer.mozilla.org/static/img/favicon144.png"
 alt="MDN logo" />
```

### Link em imagem

Esse exemplo mostra como transformar uma imagem em um link. Para isso, insira a tag `<img>` dentro da tag do link `<a>`. Nesse caso, é interessante fazer o texto alternativo descrever o site para o qual o link aponta, como se fosse o texto usado dentro da tag `<a>`.

```html
<a href="https://developer.mozilla.org">
  <img
 src="https://developer.mozilla.org/static/img/favicon144.png"
 alt="Visit the MDN site" />
</a>
```

### Usando o atributo `srcset`

Nesse exemplo, o atributo `srcset` inclui uma versão do logotipo com maior resolução, a qual vai ser carregada no lugar de `src` em aparelhos de alta resolução e cujo navegador tenha suporte à `srcset`.

A imagem presente no atributo `src` conta como um candidato `1x` em navegadores com suporte à `srcset`.

As imagens exibidas dependerão do tipo de tela.

**`srcset`** define o conjunto de imagens que nós iremos permitir ao navegador escolher, e qual tamanho cada imagem tem.

```html
<img
 src="mdn-logo-sm.png"
 alt="MD Logo"
 srcset="mdn-logo-HD.png 2x, mdn-logo-small.png 15w, mdn-banner-HD.png 100w 2x" />
```

Antes de cada vírgula nós escrevemos:

1. Um **nome do arquivo da imagem** (`mdn-logo-HD.png`).
2. Um espaço.
3. A **largura da imagem** ou **sua densidade de pixels**.
Acessibilidade
--------------

### Utilizando textos alternativos relevantes

O valor do atributo `alt` deve descrever de maneira clara e concisa o conteúdo da imagem. Evite descrever a própria presença da imagem ou o nome de seu arquivo. Se o atributo `alt` for propositalmente deixado vazio porque a imagem não possui nenhum equivalente em texto, considere métodos alternativos para indicar o que a imagem deseja comunicar.

#### Evite

```html
<img alt="imagem" src="penguin.jpg" />
```

#### Prefira

```html
<img alt="Um pinguim-saltador-da-rocha em pé numa praia." src="penguin.jpg" />
```

Quando o atributo `alt` não estiver presente em uma imagem, alguns programas leitores de tela vão narrar o nome do arquivo da imagem em seu lugar, o que pode ser confuso caso o nome do arquivo não seja representativo do conteúdo da imagem.

* An alt Decision Tree • Images • WAI Web Accessibility Tutorials
* Alt-texts: The Ultimate Guide — Axess Lab
* How to Design Great Alt Text: An Introduction | Deque
* MDN Understanding WCAG, Guideline 1.1 explanations (en-US)
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
### O atributo title

O atributo `title` não é um substituto aceitável para o atributo `alt`. Além disso, evite duplicar o valor do atributo `alt` no atributo `title` para uma mesma imagem. Isso pode fazer com que alguns programas leitores de tela narrem duas vezes a descrição, o que pode criar uma experiência confusa para usuários.

Evite usar o atributo `title` como uma forma suplementar de legenda para a descrição do `alt`. Caso a imagem precise de uma legenda, prefisa os elementos `figure` e `figcaption`.

O valor do atributo `title` é geralmente mostrado ao usuário como uma dica, que aparece após o usuário parar o cursor sobre a imagem. Apesar de *poder* *prover* informações adicionais ao usuário, não se deve assumir todos os usuários vão vê-lo, pois o mesmo pode possuir apenas um teclado ou uma tela de toque (touchscreen). Se você considera a informação particularmente importante para o usuário, prefira o uso de elementos inline.

* Using the HTML title attribute – updated | The Paciello Group
Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-img-element |

Compatibilidade dos navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `<object>` (en-US) and `<embed>` elements


<mark> - HTML: Linguagem de Marcação de Hipertexto

<mark>
======

Sumário
-------

O \*\*Elemento HMTL `<mark>` \*\*representa um trecho de destaque em um texto, por exemplo, uma sequência de texto marcado como referência, devido à sua relevância em um contexto particular. Por Exemplo, pode ser utilizado em uma página que mostra os resultados de uma busca onde todas as instâncias da palavra pesquisadas receberam destaque.

>
> **Note:** *Notas de Uso:*
>
>
> * Em uma citação ou outro tipo de bloco, O texto destacado normalmente marca o texto que é referenciado fora da citação, ou marcado para um analise específica, mesmo que o autor original não considerou importante.
> * No texto principal, o trecho destacado normalmente marca um conteúdo que pode ser de especial relevância para usuário corrente, como resultado de pesquisa.
> * Não use o o elemento `<mark>` para destaque de sintaxe; uso o elemento `<span>` para essa finalidade.
> * Não confunda o elemento `<mark>` com o elemento `<strong>` . O elemento `<strong>` é usado para denotar trechos de importância especial, quando o elemento `<mark>` é utilizado para denotar trechos de relevância especial.
>
>
>

* *Categorias de conteúdo (en-US)* Conteúdo de Fluxo (en-US), phrasing content (en-US), palpable content.
* *Conteúdo Permitido* Phrasing content (en-US).
* *Omissão de Tag* None, both the starting and ending tag are mandatory.
* *Elementos parent permitidos* Qualquer elemento que aceite phrasing content (en-US).
* *DOM interface* `HTMLElement` (en-US)
Atributos
---------

Este elemento inclue apenas atributos Globais (en-US).

Exemplo
-------

```html
<p>
  O elemento <mark> é usado para <mark>destacar</mark> partes do texto
</p>
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-mark-element |

Compatibilidade
---------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja Também
-----------

* Outros text-level semantics elements: `<a>`, `<em>`, `<strong>`, `<cite>`, `<q>`, `<dfn>`, `<abbr>`, `<time>`, `<code>`, `<var>`, `<samp>` (en-US), `<kbd>` (en-US), `<sub>` (en-US), `<sup>` (en-US), `<i>`, `<b>`, `<mark>`, `<ruby>`, `<rp>` (en-US), `<rt>` (en-US), `<bdo>`, `<span>`, `<br>`, `<wbr>`.


audio - HTML: Linguagem de Marcação de Hipertexto

audio
=====

Sumário
-------

O elemento `audio` é utilizado para embutir conteúdo de som em um documento HTML ou XHTML.O elemento `audio` foi adicionado como parte do HTML5.

Você pode utilizar recursos avançados da API de áudio — que são específicas do Gecko — para gerar e manipular diretamente fluxo de áudio a partir do código JavaScript. Veja Introducing the audio API extension para detalhes.

Contexto de Uso
---------------

| Conteúdo permitido | Transparent content (en-US), tanto um atributo `src` quanto um ou mais elementos `<source>`, seguidos por um flow content (en-US) ou phrasing content (en-US), sem`<video>` ou elementos `<audio>`. |
| --- | --- |
| Omissão de tag | Nenhuma, tanto as tags iniciais quanto as finais devem estar presentes. |
| Elementos pai permitidos | Qualquer elemento que aceite flow content (en-US), ou qualquer elemento que aceite phrasing content (en-US). |
| Documento normativo | HTML5, section 4.8.7 |

Atributos
---------

Como todos os elementos HTML, este elemento suporta os global attributes (en-US).

`autoplay`

Um atributo Booleano; se especificado (mesmo se o valor for "false"!), o áudio iniciará automaticamente assim que possível sem parar de carregar os dados.

`autobuffer`

Um atributo Booleano; se especificado, o audio será baixado automaticamente, mesmo se não está configurado para reprodução automática. Isto continua até que o cache de mídia esteja cheio, ou até que o o arquivo de áudio completo tenha sido baixado, o que vier primeiro. Isto deve ser utilizado apenas quando é esperado que o usuário escolherá tocar o áudio; por exemplo, se o usuário navegou para a página utilizando um link "Reproduzir". Este atributo foi removido no Gecko 2.0 em razão do atributo `preload`.

`buffered`

Um atributo que pode ser lido para determinar os intervalos do áudio que já foram carregados. Este atributo contém um objeto `TimeRanges` (en-US).

`controls`

Se esse atributo estiver presente, o navegador oferecerá controles para permitir ao usuário controlar a reprodução do áudio, incluindo volume, navegação, e pausa/continuação da reprodução.

`loop`

Um atributo Booleano; se especificado, ao chegar no fim do áudio, ele voltará automaticamente para o começo.

`mozCurrentSampleOffset`
Non-standard

The offset, specified as the number of samples since the beginning of the audio stream, at which the audio is currently playing.

`muted`

Um atributo Booleano que indica se o áudio será inicializado silenciado.

`played`

Um objeto `TimeRanges` (en-US)indicando que todo o áudio foi reproduzido.

`preload`

Esse atributo enumerado pretende dar uma sugestão ao navegador sobre o que o autor pensa que proporcionará uma melhor experiência do usuário. Ele pode ter os seguintes valores:

* none: indica que o usuário não necessitará consultar o áudio ou que o servidor quer minimizar seu tráfego; em outros termos indica que o áudio não deve ser pré-carregado;
* metadata: indica que embora o usuário não necessitará consultar o áudio, pegar os meta-dados (ex: comprimento) é interessante;
* auto: indica que o usuário necessita ter prioridade; em outros termos isso significa que, se necessário, o áudio inteiro pode ser baixado, mesmo que não seja esperado a execução;
* Uma *string vazia*: é um sinônimo do valor auto.

Se não definido, seu valor padrão será definido pelo navegador (isto é, cada navegador pode escolher seu valor padrão), embora a especificação recomenda que seja definido para o metadata.

>
> **Note:** **Notas de uso:**- O atributo `autoplay` tem precedência sobre o `preload`, pois se é necessário executar o áudio automaticamente, o navegador obviamente o baixará. Definindo ambos `autoplay` e `preload` é permitido pela especificação.
>
>
> * O navegador não é forçado pela especifição a seguir o valor desse atributo; é apenas uma sugestão.
>
>
>

`src`

A URL do áudio a ser incorporado. Isso é sujeito a HTTP access controls (en-US). Isto é opcional; ao invés disso você pode usar o elemento `<source>` dentro do bloco do áudio para especificar o vídeo a ser incorporado .

O tempo de compensação (time offset) entre o áudio e o vídeo está especificado como um valor de ponto flutuante (float) representando o número de segundos da compensação.

**Nota:** A definição de valor de tempo de compensação ainda não foi completada na especificação do HTML 5 e está sujeita a mudança.

Examples
--------

```html
<!-- Reprodução simples de áudio -->
<audio
 src="https://developer.mozilla.org/@api/deki/files/2926/=AudioTest\_(1).ogg"
 autoplay>
  O seu navegador não suporta o elemento <code>audio</code>.
</audio>

<!-- Reprodução de áudio com legendas -->
<audio src="foo.ogg">
  <track kind="captions" src="foo.en.vtt" srclang="en" label="English" />
  <track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska" />
</audio>
```

Reproduz o arquivo de áudio anexado a esse artigo.

Interface do DOM
----------------

* HTMLAudioElement (en-US)
Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Media formats supported by the audio and video elements (en-US)
* Introducing the audio API extension
* `HTMLAudioElement` (en-US)
* `nsIDOMHTMLMediaElement`
* `video`
* Using audio and video (en-US)
* The `audio` element (Especificação HTML5)


<h1>–<h6>: Os elementos HTML de cabeçalho da seção - HTML: Linguagem de Marcação de Hipertexto

<h1>–<h6>: Os elementos HTML de cabeçalho da seção
==================================================

Os **elementos HTML** **`<h1>`–`<h6>`** representam seis níveis de título de seção. `<h1>` é o nível de seção mais alto e `<h6>` é o mais baixo.

Experimente
-----------

Sumário
-------

Elementos de **cabeçalho** são implementados em seis níveis, `<h1>` é o mais importante e `<h6>` é o de menor importância. Um elemento de cabeçalho descreve brevemente o tópico da seção em que ele está. As informações de cabeçalho podem ser usadas por agentes de usuário, por exemplo, para construir uma tabela de conteúdos para um documento automaticamente.

* *Categorias do conteúdo* Conteúdos de fluxo, conteúdos de cabeçalho, conteúdos palpáveis.
* *Conteúdo permitido* Conteúdo com texto.
* *Omissão de tag* Não há, porém, as tags de abertura e fechamento são obrigatórias.
* *Elementos pais permitidos* Qualquer elemento que aceite conteúdos de fluxo; ou como um elemento filho do grupo de elementos de cabeçalho `<hgroup>`
* *Interface DOM* `HTMLHeadingElement` (en-US)
Atributos
---------

Esses elementos incluem os atributos globais.

O atributo **align** está
Deprecated
 no HTML 4 e no HTML 5.

Exemplos
--------

### Todos os cabeçalhos

O seguinte código mostra, em uso, todos os níveis de cabeçalho.

```html
<h1>Cabeçalho nível 1</h1>
<h2>Cabeçalho nível 2</h2>
<h3>Cabeçalho nível 3</h3>
<h4>Cabeçalho nível 4</h4>
<h5>Cabeçalho nível 5</h5>
<h6>Cabeçalho nível 6</h6>
```

Aqui está o resultado deste código:

### Página de exemplo

O código seguinte mostra alguns cabeçalhos com um pouco de conteúdo abaixo deles.

```html
<h1>Elementos de cabeçalho</h1>
<h2>Sumário</h2>
<p>Algum texto aqui...</p>

<h2>Exemplos</h2>
<h3>Exemplo 1</h3>
<p>Algum texto aqui...</p>

<h3>Exemplo 2</h3>
<p>Algum texto aqui...</p>

<h2>Veja também</h2>
<p>Algum texto aqui...</p>
```

Aqui está o resultado deste código:

Notas
-----

**Não** use níveis menores para diminuir o tamanho da fonte do cabeçalho: use a propriedade CSS `font-size` .

Evite pular níveis de cabeçalhos: sempre comece com `<h1>`, depois `<h2>` e assim por diante. Tente, também, ter pelo menos um cabeçalho de primeiro nível em uma página..

Em HTML 5, use o elemento `<section>` para definir o outline de um documento. Cabeçalhos fornecem títulos para secções e subsecções. Você também pode agrupar um cabeçalho e seu conteúdo usando o elemento `<div>` .

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-h1,-h2,-h3,-h4,-h5,-and-h6-elements |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `<p>`
* `<div>`
* `<section>`


<marquee> - HTML: Linguagem de Marcação de Hipertexto

<marquee>
=========

O elemento html <marquee> é usado para inserir uma área de rolagem de texto"scrolling" , similar a um letreiro. Você pode controlar o comportamento do conteúdo fornecendo alguns atributos extras.

Atributos
---------

`behavior`

Define como o texto é rolado dentro da área do letreiro. Os valores possíveis são scroll, slide e alternate. Se nenhum valor for especificado, o valor padrão será scroll.

`bgcolor`

Define a cor do plano de fundo do letreiro através do nome da cor (ex: red, blue) ou de um valor hexadecimal.

`direction`

Define a direção da rolagem do texto dentro do letreiro, os possíveis valores são: left, right, up & down. Se nenhum valor for especificado, o valor padrão será "left".

`height`

Define a altura do letreiro em pixeis ou em um valor percentual.

`hspace`

Aplica a margem horizontal.

`loop`

Define o número de repetições da animação do letreiro. Se nenhum valor for especificado assumirá o valor padrão de -1, que significa que a animação será repetida infinitamente.

`scrollamount`

Define em pixeis o tamanho de rolagem em cada intervalo, o valor padrão é 6.

`scrolldelay`

Define o intervalo de tempo entre cada animação de rolagem em milissegundos. O valor padrão é 85. Qualquer valor menor que 60 será ignorado e o valor 60 será usado, a menos que seja especificado como truespeed.

`truespeed`

Por padrão, valores abaixo de 60 milissegundos são ignorados, a menos que o valor truespeed esteja presente, caso esteja estes valores são aceitos.

`vspace`

Aplica uma margem vertical em pixeis ou em valor percentual.

`width`

Define a largura em pixeis ou em um valor percentual.

Event Handlers
--------------

`onbounce`

Dispara quando o letreiro alcança o final da sua posição de rolagem. Ele apenas dispara quando o comportamento está configurado como `alternate.`

`onfinish`

Dispara quando o letreiro terminar a quantidade de repetições definida pelo atributo loop. Só pode disparar quando o atributo loop estiver definido para algum número maior que 0, obviamente.

`onstart`

Dispara quando o letreiro começa a se mover.

Métodos
-------

`start()`

Começa a mover o letreiro.

`stop()`

Para de mover o letreiro.

Exemplos
--------
```

<marquee>Este texto vai "rolar" da direita para esquerda</marquee>

<marquee direction="up">Este texto vai rolar de baixo para cima.</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
  <marquee behavior="alternate">
    Este texto vai pular
  </marquee>
</marquee>
```


<main> - HTML: Linguagem de Marcação de Hipertexto

<main>
======

Resumo
------

O elemento **`<main>`** define o conteúdo principal dentro do `<body>` em seu documento ou aplicação. Entende-se como conteúdo principal aquele relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação. O mesmo deverá ser único na página, ou seja, dentro do elemento <main> não deverão ser incluidas seções da página que sejam comuns a todo o site ou aplicação, tais como mecanismos de navegação, informações de copyright, logotipo e campos de busca (a não ser, é claro, caso a função principal do documento seja fazer algum tipo de busca).

**Nota:** `<main>` **não pode** ser filho dos elementos `<article>`, `<aside>`, `<footer>`, `<header>`, ou `<nav>`.

Autores **não devem** incluir mais de um elemento main no mesmo documento\*\*.\*\*

* *Categorias de conteúdo (en-US)*Conteúdo de fluxo, conteúdo palpável.
* *Conteúdo permitido* Conteúdo de fluxo.
* *Omissão de tag* Nenhuma; ambas as tags de início e fim são obrigatórios.
* *Elementos pais permitidos* Qualquer elemento que aceite conteúdo de fluxo, mas não pode ser filho dos elementos `<article>`, `<aside>`, `<footer>`, `<header>`, ou `<nav>`.
* *DOM interface* `HTMLElement` (en-US)
Atributos
---------

Este elemento admite apenas os atributos globais.

Exemplo
-------

```html
<!-- outro conteúdo -->

<main>
  <h1>Maçãs</h1>
  <p>A maçã é a fruta pomácea da macieira.</p>

  <article>
    <h2>Vermelho delicioso</h2>
    <p>
      Estas maçãs vermelhas brilhantes são as mais comumente encontradas em
      muitos supermercados.
    </p>
    <p>...</p>
    <p>...</p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>
      Essas suculentas maçãs verdes, são um ótimo recheio para torta de maçã.
    </p>
    <p>...</p>
    <p>...</p>
  </article>
</main>

<!-- outro conteúdo -->
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-main-element |

Navegadores compatíveis
-----------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

O elemento <main> é amplamente suportado (exceto pelo Internet Explorer). Sugere-se que, até que o elemento <main> seja suportado pelo Internet Explorer, adicione a ele o atributo role com o valor "main":

```html
<main role="main">...</main>
```

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

* Elementos estruturais básicos: `<html>`, `<head>`, `<body>`
* Elementos relacionados a seções: `<article>`, `<aside>`, `<footer>`, `<header>`, or `<nav>`


datalist - HTML: Linguagem de Marcação de Hipertexto

datalist
========

Sumário
-------

O elemento HTML *Datalist* (<datalist>) contém um conjunto de elementos `<option>` que representam as opções possíveis para o valor de outros controles.

Contexto de uso
---------------

| Conteúdo permitido | Phrasing content ou qualquer quantidade de elementos `<option>` (ou nenhum) |
| --- | --- |
| Omissão de tags | Nenhuma, ambas as tags inicial e final são obrigatórias |
| Elementos pais permitidos | Qualquer elemento que aceite phrasing content |
| Documento normativo | HTML5, section 4.10.10 |

Atributos
---------

Esse elemento não tem nenhum atributo a não ser os global attributes, comuns para todos os elementos.

Interface do DOM
----------------

Esse elemento implementa a interface `HTMLDataListElement`.

Exemplos
--------

```html
<input list="browsers" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Internet Explorer"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
</datalist>
```

View Live Examples

Esse código HTML é renderizado assim no Firefox 4:

![datalist.png](/pt-BR/docs/Web/HTML/Element/datalist/datalist.png)

Compatibilidade
---------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Polyfill
--------

 Inclua este polyfill para fornecer suporte para navegadores mais antigos e atualmente incompatíveis:
 datalist-polyfill

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

* O elemento `<input>`, especialmente seu atributo `list`;
* O elemento `<option>`.


<tfoot>: Elemento para o rodapé da tabela - HTML: Linguagem de Marcação de Hipertexto

<tfoot>: Elemento para o rodapé da tabela
=========================================

O **`<tfoot>`** é um **elemento HTML** que define um conjunto de linhas as quais farão parte do rodapé de uma tabela HTML

Experimente
-----------

|  |  |
| --- | --- |
| Categorias de conteúdo | Nenhum. |
| Conteúdo permitido | Zero ou mais `<tr>` (en-US) elementos. |
| Omitir Tag |
 Iniciar a tag é obrigatório. O fechamento da tag pode ser omitida caso
 não exista mais conteúdo no elemento pai
 `<table>`.
  |
| Pais permitidos |
 O elemento `<table>`. O
 `<tfoot>` deve aparecer depois de qualquer
 `<caption>`,
 `<colgroup>` (en-US), `<thead>` (en-US),
 `<tbody>` (en-US), ou elementos
 `<tr>` (en-US). Note que isso é requerido no HTML5.O elemento `<tfoot>` não pode ser colocado depois
 de qualquer `<tbody>` (en-US) e o elemento
 `<tr>` (en-US). Note que isso contradiz diretamento com as
 normas do HTML5.
  |
| Papeis de ARIA permitidos | Qualquer um |
| Interface DOM | `HTMLTableSectionElement` (en-US) |

Atributos
---------

Este elemento inclui os atributos globais.

`align`
Deprecated

Estes atributos especificam como será o alinhamento horizontal de cada conteúdo da célula. Os possíveis valores são:

* `left`, alinha o conteúdo do elemento a esquerda da célula
* `center`, centraliza o conteúdo ao centro da célula
* `right`, alinha o conteúdo do elemento a direita da célula
* `justify`, insere espaços ao texto para que o mesmo fique centralizado na célula
* `char`, alinha o texto em um alinhamento especial com um deslocamento mínimo definido pelos atributos `char` (en-US) e `charoff` (en-US) atributos Unimplemented (see Firefox bug 2212).

Se nenhum atributo for definido o valor `left` é passado por padrão

>
> \*\*Note:\*\*Não use esse atributo o mesmo está obsoleto (não suportado) no último padrão.- Para obter os mesmo efeitos `left`, `center`, `right` ou `justify`, use a propriedade `text-align` do CSS.
>
>
> * Para obter o mesmo efeito no CSS3, você pode usar os valores `char` com o valor de `text-align` propriedade Unimplemented.
>
>
>

`bgcolor`
Non-standard

Este atributo define uma cor de fundo para cada célula da coluna. Cada um dos 6 dígitos define um código hexadecimal no sRGB, prefixado pelo '#'. Um desses nomes de cores predefinidos também podem ser usado:

|  | `black` = "#000000" |  | `green` = "#008000" |
| --- | --- | --- | --- |
|  | `silver` = "#C0C0C0" |  | `lime` = "#00FF00" |
|  | `gray` = "#808080" |  | `olive` = "#808000" |
|  | `white` = "#FFFFFF" |  | `yellow` = "#FFFF00" |
|  | `maroon` = "#800000" |  | `navy` = "#000080" |
|  | `red` = "#FF0000" |  | `blue` = "#0000FF" |
|  | `purple` = "#800080" |  | `teal` = "#008080" |
|  | `fuchsia` = "#FF00FF" |  | `aqua` = "#00FFFF" |

>
> **Note:** Não use este atributo, como não é mais padrão ele não foi implementado em algumas versões do Microsoft Internet Explorer: o elemento `<tfoot>` pode ser estilizando com CSS. Para conseguir simular efeitos do atributo **bgcolor** use a propriedade `background-color` do CSS , nos elementos `<td>` (en-US) ou `<th>`.
>
>
>

`char`
Deprecated

O elemento é usado para alinhar as células em uma columa. Valores típicos para isso inclui o periódico (.) quando se alinha valores monetários. Se `align` não é definido para `char`, este atributo é ignorado

**Nota:** Não use esté atributo, ele é obsoleto (e não é mais suportado) desde da última versão padrão. Em vez disso use `char` no CSS3, você pode usar o atributo `char` com a propriedade `text-align`.

`charoff`
Deprecated

O atributo é usado para indicar um número de caracteres para compensar os dados da coluna dos caracteres de alinhamento especificados pelo atributo **char**.

**Nota:** Não use esse atributo o mesmo está obsoleto (e não é mais suportado) na última versão padrão.

`valign`
Deprecated

O atributo específico para o alinhamento do texto dentro de cada linha da célula do cabeçalho de uma tabela. Possíveis valores para esse atributo são:

* `baseline`, coloca o texto o mais próximo possível da parte de baixo da célula, mas o alinha a baseline dos caracteres em vez do **bottom** deles. Caso os caracteres tenham todos os mesmo tamanho, eles terão o mesmo efeito que `bottom`.
* `bottom`, coloca o texto o mais próximo possível da parte de baixo da célula;
* `middle`, centraliza o texto na célula;
* e `top`, coloca o texto o mais próximo possível do topo da célula.

**Nota:** Não use este atributo eles está obsoleto (e não é suportado) no último padrão: em vez disso use a propriedade `vertical-align` do CSS.

Exemplos
--------

Por favor veja a página `<table>` para exemplos sobre `<tfoot>`.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-tfoot-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Outros elemento HTML relacionados a tabela: `<caption>`, `<col>` (en-US), `<colgroup>` (en-US), `<table>`, `<tbody>` (en-US), `<td>` (en-US), `<th>`, `<thead>` (en-US), `<tr>` (en-US);
* Propriedades CSS e pseudo-classes são especialmente úteis para estilizar elementos `<tfoot>`:
    + a pseudo-class `:nth-child` para definir o alinhamento nas células de uma coluna;
    + a propriedade `text-align` para alinar as células do conteúdo que tenham um memso caractere como '.'.


<wbr> - HTML: Linguagem de Marcação de Hipertexto

<wbr>
=====

Resumo
------

O elemento HTML `<wbr>` representa uma posição no texto onde o navegador pode, opcionalmente, quebrar uma linha, embora suas regras de quebra de linha de outra forma não criar uma ruptura naquele local.

Em UTF-8 páginas codificadas, `<wbr>` se comporta como o `U+200B de tamanho zero ESPAÇO` ponto de código. Em particular, ele se comporta como um bidi Unicode BN ponto de código, o que significa que não tem efeito sobre bidi-encomenda: `<div dir=rtl> 123, <wbr> 456 </ div>` exibe, quando não quebrado em duas linhas, `123.456` e Não `456,123` .

Pela mesma razão, o `<wbr>` elemento não introduzir um hífen no ponto de quebra de linha. Para fazer um hífen só aparecem no final de uma linha, use a entidade suave caractere hífen ( `` ) em seu lugar.

Este elemento foi implementado pela primeira vez no Internet Explorer 5.5 e foi oficialmente definido no HTML5.

Contexto de uso
---------------

| Permitida conteúdo | Vazio |
| --- | --- |
| Tag omissão | Este é um elemento vazio; ele deve ter uma marca de início, mas não deve ter uma tag de fechamento. |
| Elementos pai permitidas | Qualquer elemento que aceita conteúdo fraseado (en-US) . |
| Documento normativo | HTML 5, seção 4.6.24 |

Atributos
---------

Este elemento só inclui os atributos globais (en-US).

DOM interface
-------------

Este elemento implementa o HTMLElement (en-US) interface.

Exemplo
-------

O Guia de Estilo Yahoo recomenda quebrar uma URL *antes de* pontuação , para não deixar uma marca de pontuação no final da linha, o que o leitor pode confundir com o fim da URL.

```html
<p>
  https://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>
```

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Output - HTML: Linguagem de Marcação de Hipertexto

Output
======

Sumário
-------

O elemento de saída (<output>) é um elemento no qual um site ou aplicativo pode injetar os resultados de um cálculo ou o resultado de uma ação do usuário.

| Categorias de conteúdo | Flow content, phrasing content, listed, labelable, resettable form-associated element. |
| --- | --- |
| Conteúdo permitido | Phrasing content. |
| Omissão de tag | Precisa ter ambas as tags de início e fim. |
| Documento normativo | HTML5, section 4.10.15 |

Atributos
---------

Como qualquer elemento HTML, este elemento suporta os global attributes.

`for`

Uma lista de IDs de outros elementos, indicando que estes elementos contribuiram com valores de entrada (input) para o cálculo (ou outros afetados).

`form`

O elemento form ao qual este elemento está associado (seu "proprietário do formulário"). O valor do atributo deve ser um ID de um elemento form no mesmo documento. Se este atributo não está especificado, o elemento output deve ser descendente de um elemento form. Este atributo permite que você coloque elementos output em qualquer lugar em um documento, não apenas como descendentes de seus elementos form.

`name`

O nome do elemento.

Interface DOM
-------------

O elemento implementa a interface HTMLOutputElement .

Exemplo
-------
```

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" name="b" value="50" />100 +<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>
```

Compatibilidade
---------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

Outros elementos relacionados ao form: `<form>` (en-US), `<input>`, `<button>`, `<datalist>`, `<legend>`, `<label>`, `<select>`, `<optgroup>`, `<option>`, `<textarea>`, `<fieldset>`, `<progress>` and `<meter>`.


<iframe> - HTML: Linguagem de Marcação de Hipertexto

<iframe>
========

O **elemento** **HTML** **<iframe>** (ou *elemento HTML* *inline frame*) representa um contexto de navegação aninhado, efetivamente incorporando outra página HTML para a página atual. Em HTML 4.01, um documento pode conter uma cabeça e um corpo ou uma cabeça e um conjunto de quadros, mas não tanto um corpo e um conjunto de quadros. No entanto, um <iframe> pode ser usado dentro de um corpo de documento normal. Cada contexto de navegação tem sua própria história de sessão e o documento ativo. O contexto de navegação que contém o conteúdo incorporado é chamado o pai de contexto de navegação. O contexto de navegação de nível superior (que não tem um pai) normalmente é a janela do navegador.

* *Content categories (en-US)* Flow content (en-US), phrasing content (en-US), embedded content, interactive content, palpable content.
* *Permitted content* Special, see prose
* *Tag omission* None, both the starting and ending tag are mandatory.
* *Permitted parent elements* Any element that accepts embedded content.
* *DOM interface* `HTMLIFrameElement` (en-US)
Atributos
---------

Este elemento inclui os atributos globais (en-US).

`align`
Deprecated

O alinhamento deste elemento em relação ao contexto.

`allowfullscreen`

Esse atributo pode ser definido como true se o quadro é permitido para ser colocado em modo de tela cheia, chamando seu método de `element.mozRequestFullScreen()` (en-US). Se isto não estiver definido, o elemento não pode ser colocado em modo de tela cheia.

`frameborder`

O valor 1 (o padrão) pede ao navegador para desenhar uma borda entre este quadro e todos os outros quadros. O valor 0 informa ao navegador para não traçar uma fronteira entre este quadro e outros quadros.

`height`

Indica a altura do quadro HTML 5 em pixels CSS, ou HTML 4 em pixels ou porcentagem.

`longdesc`

Uma URI de uma longa descrição do quadro. Devido à má utilização generalizada, isto não é útil para navegadores não-visuais.

`marginheight`

A quantidade de espaço em pixels entre o conteúdo do quadro e suas margens superior e inferior.

`marginwidth`

A quantidade de espaço em pixels entre o conteúdo dos quadros e suas margens direita e esquerda.

`mozallowfullscreen`
Non-standard

Deprecated

Use **`allowfullscreen`** ao invés. Em Gecko 9.0 or later, this attribute can be set to `true` if the frame is allowed to be placed into full screen mode by calling its `element.mozRequestFullScreen()` (en-US) method. If this isn't set, the element can't be placed into full screen mode.

`webkitallowfullscreen`
Non-standard

Deprecated

Use **`allowfullscreen`** ao invés. No Chrome 17 ou mais novo (e talvez mais antigo), this attribute can be set to `true` if the frame is allowed to be placed into full screen mode by calling its `element.webkitRequestFullScreen()` method. If this isn't set, the element can't be placed into full screen mode.

`mozapp`
Non-standard

For frames hosting an open web app (en-US), this specifies the URL of the app manifest (en-US). This ensures that the app is loaded with the right permissions. See Using the Browser API for details. Available in Gecko 13.0 and later.

`mozbrowser`
Non-standard

Indicates that the frame is to appear like a top-level browser window to the embedded content. This means that `window.top` (en-US), `window.parent` (en-US), `window.frameElement` (en-US), etc. will *not* reflect the frame hierarchy. This allows for a web browser UI to be implemented entirely with web technology, given the right permissions. See Using the Browser API for details. Available in Gecko 13.0 and later.

`name`

A name for the embedded browsing context (or frame). This can be used as the value of the **`target`** attribute of an `<a>` or `<form>` (en-US) element, or the formtarget attribute of an `<input>` or `<button>` element.

`remote`
Non-standard

Carrega a página do *frame* em um processo separado.

`scrolling`

Enumerated attribute indicating when the browser should provide a scroll bar (or other scrolling device) for the frame:

* `auto`: Só quando necessário.
* `yes`: Sempre mostrar uma barra de rolagem.
* `no`: Nunca mostrar uma barra de rolagem.

`sandbox`

If specified as an empty string, this attribute enables extra restrictions on the content that can appear in the inline frame. The value of the attribute can either be an empty string (all the restrictions are applied), or a space-separated list of tokens that lift particular restrictions. Valid tokens are:

* `allow-same-origin`: Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.
* `allow-top-navigation`: Allows the embedded browsing context to navigate (load) content to the top-level browsing context. If this keyword is not used, this operation is not allowed.
* `allow-forms`: Allows the embedded browsing context to submit forms. If this keyword is not used, this operation is not allowed.
* `allow-popups`: Allows popups (like from window.open).
* `allow-scripts`: Allows the embedded browsing context to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.
* `allow-pointer-lock`: Allows the embedded browsing context to use the Pointer Lock API (en-US).

>
> **Note:**
>
>
> * When the embedded document has the same origin as the main page, it is strongly discouraged to use both `allow-scripts` and `allow-same-origin` at the same time, as that allows the embedded document to programmatically remove the `sandbox` attribute. Although it is accepted, this case is no more secure than not using the `sandbox` attribute.
> * Sandboxing in general is only of minimal help if the attacker can arrange for the potentially hostile content to be displayed in the user's browser outside a sandboxed `iframe`. It is recommended that such content should be served from a *separate dedicated domain*, to limit the potential damage.
> * The `sandbox` attribute is not supported in Internet Explorer 9 and earlier versions, or in Opera.
>
>
>

`seamless`

This **Boolean attribute** indicates that the browser should render the inline frame in a way that makes it appear to be part of the containing document, for example by applying CSS styles that apply to the `<iframe>` to the contained document before styles specified in that document, and by opening links in the contained documents in the parent browsing context (unless another setting prevents this). In XHTML, attribute minimization is forbidden, and the seamless attribute must be defined as `<iframe seamless="seamless">`.

`src`

The URL of the page to embed.

`srcdoc`

The content of the page that the embedded context is to contain. This attribute is expected to be used together with the sandbox and seamless attributes. If a browser supports the `srcdoc` attribute, it will override the content specified in the `src` attribute (if present). If a browser does NOT support the `srcdoc` attribute, it will show the file specified in the `src` attribute instead (if present).

`width`

Indicates the width of the frame HTML 5 in CSS pixels, or HTML 4 in pixels or as a percentage.

Scripting
---------

Inline frames, like `<frame>` (en-US) elements, enter the `window.frames` (en-US) pseudo-array.

From the DOM `iframe` element, scripts can get access to the `window` object of the included HTML page via the `contentWindow` property. The `contentDocument` property refers to the document element inside the `iframe` (this is equivalent to `contentWindow.document`), but is not supported by Internet Explorer versions before IE8.

From the inside of a frame, a script can get a reference to the parent window via `window.parent` (en-US).

Scripts trying to access a frame's content are subject to the same-origin policy (en-US), and cannot access most of the properties in the other window object if it was loaded from a different domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved with `window.postMessage` (en-US).

Exemplo 1
---------

```html
<script>
 var iframe = window.getElementsByTagName("iframe")[0];
 alert("Frame title: " + iframe.contentWindow.title);
</script>

<iframe src="page.html" width="300" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>
```

Exemplo 2: Open link inside iframe in another tab
-------------------------------------------------

```html
<base target="\_blank" />
<iframe
 width="400"
 height="215"
 frameborder="0"
 scrolling="no"
 marginheight="0"
 marginwidth="0"
 src="https://maps.google.com/maps?f=q&source=s\_q&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=UTF8&hq=&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed">
</iframe
><br />
<small>
  <a
 href="https://maps.google.com/maps?f=q&source=embed&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=UTF8&hq=&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593"
 style="color:#0000FF;text-align:left">
    See bigger map
  </a>
</small>
```

Resultado
---------

Live example

Notas
-----

>
> **Note:** Starting in Gecko 6.0, rendering of inline frames correctly respects the borders of their containing element when they're rounded using `border-radius` (en-US).
>
>
>

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-iframe-element |

Compatibilidade dos navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


dl - HTML: Linguagem de Marcação de Hipertexto

dl
==

Resumo
------

O elemento HTML *Definition List* (`<dl>`) engloba uma lista de pares de termos e descrições. Um uso comum para este elemento é para implementar um glossário ou exibir metadados(uma lista de pares chave e valor).

Contexto de Uso
---------------

| Conteúdo permitido | Zero ou mais elementos `<dt>`, cada um seguido de um ou mais elementos `<dd>` |
| --- | --- |
| Omissão de Tag | Nenhum, este é um elemento vazio. |
| Permite elementos pai | Qualquer elemento que aceite conteúdo de fluxo. |
| Documentação normativa | HTML5, section 4.5.8; HTML 4.01, section 10.3 |

Atributos
---------

Como todo elemento HTML, ele fornece os attributos globais.

`compact`
Non-standard

Obriga a definição da descrição aparecer na mesma linha que a definição do termo. Funciona apenas no Internet Explorer.

Exemplos
--------

### Termo e definição única

```html
<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- other terms and definitions -->
</dl>
```

Output:

![Image:HTML-dl1.png](/pt-BR/docs/Web/HTML/Element/dl/html-dl1.png)

### Múltiplos termos, definição única

```html
<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- other terms and definitions -->
</dl>
```

Saída:

![Image:HTML-dl2.png](/pt-BR/docs/Web/HTML/Element/dl/html-dl2.png)

### Termo único, múltiplas definições

```html
<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
  </dd>

  <!-- other terms and definitions -->
</dl>
```

Saída:

![Image:HTML-dl3.png](/pt-BR/docs/Web/HTML/Element/dl/html-dl3.png)

### Múltiplos termos e definições

Também é possível definir vários termos com as definições múltiplas correspondentes, combinando com os exemplos acima.

Interface DOM
-------------

* HTMLDListElement
Notas
-----

Não use este elemento, (nor `<ul>` elements), para criar meramente um recuo em uma página. Embora ele funcione, está é uma má prática e obscurece o significado da lista de definição.

Para mudar a indentação de um termo, use a propriedade CSS margin.

Compatibilidade de navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Elemento `<dt>`
* Elemento `<dd>`


source - HTML: Linguagem de Marcação de Hipertexto

source
======

Sumário
-------

O elemento `source` é utilizado para especificar múltiplos recursos de mídia de elementos `<picture>`, `<audio>` ou `<video>` em HTML5. É um elemento vazio. É normalmente usado para disponibilizar multiple formats supported by different browsers.

Contexto de uso
---------------

| Conteúdo permitido | Nenhum; isso é um elemento vazio. |
| --- | --- |
| Omissão de tag | Deve ter uma tag de início, mas não deve ter uma tag de fim. |
| Elementos pais permitidos | `<picture>`, `<audio>`, `<video>` |
| Documento normativo | HTML5, section 4.8.8 |

Atributos
---------

Como todos os outros elementos de HTML, esse elemento suporta os global attributes.

`src`

Requerido, endereço do arquivo de mídia.

`type`

O tipo MIME do arquivo, opcionalmente com um parametro de `codecs`. Veja o RFC 4281 para informações sobre como especificar codec.

`media`

Definição do tipo de mídia (Media query) pretendido.

Se o atributo **type** não está especificado, o tipo da mídia é obtido no servidor e é verificado se o Gecko consegue reproduzi-lo; se não for possível reproduzi-lo, o próximo **source** é verificado. Se o atributo **type** está definido, ele é comparado aos tipos que o Gecko consegue reproduzir, e se não for reconhecido, o servido não é solicitado; ao invés disso, o próximo elemento **source** é verificado.

Interface do DOM
----------------

Esse elemento implementa a interface `HTMLSourceElement`.

Exemplos
--------

Esse exemplo demonstra como oferecer um vídeo no formato Ogg para usuários em que os navegadores suporta o formato Ogg, e um formato QuickTime para os usuários que o suporta. Se os elementos `audio` ou `video` não forem suportados pelo navegador, um aviso será mostrado. Se o navegador suportar o elemento, mas não suportar nenhum dos formatos especificados, um evento de `error` será lançado e os controles padrões de mídia (se ativados) indicarão o erro. Veja também a lista de media formats supported by the audio and video elements em vários navegadores.

```html
<video controls>
  <source src="foo.ogg" type="video/ogg" />
  <!-- Escolhido pelo Firefox -->
  <source src="foo.mov" type="video/quicktime" />
  <!-- Escolhido pelo Safari -->
  Desculpa; seu navegador não é compatível com vídeo em HTML5.
</video>
```

Para mais exemplos, veja Using audio and video in Firefox.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<html> - HTML: Linguagem de Marcação de Hipertexto

<html>
======

Sumário
-------

O elemento \*\*HTML <html> \*\*(ou *HTML root element*) representa a raiz de um HTML ou XHTML documento. Todos os outros elementos devem ser descendentes desse elemento.

* *Categorias de conteúdo (en-US)* Nenhuma.
* *Conteúdo permitido* Um elemento `<head>`, seguido por um elemento `<body>`.
* *Omissão de tag* A tag inicial pode ser omitida se a primeira coisa dentro do elemento `<html>` não for um comentário.
 A tag final pode ser omitida se o elemento `<html>` não for imediatamente seguido por um comentário, e conter um elemento `<body>` ou que não está vazio, ou cuja tag inicial está presente.
* *Elementos pais permitidos* Como o elemento raiz do documento, ou qualquer fragmento de subdocumento é permitido em um documento composto.
* *DOM interface* `HTMLhtmlElement` (en-US)
Atributos
---------

Esse elemento inclui os atributos globais (en-US).

`manifest`
Deprecated

Non-standard

Especifica a URI de um recurso manifest indicando os recursos que devem ser carregados na memória local. Veja Recursos offline em Firefox para detalhes.

`version`
Deprecated

Especifica a versão da definição de tipo de documento HTML que governa o documento atual. Esse atributo não é necessário, porque é redundante com a informação de versão na declaração de tipo de documento.

Exemplo
-------

O DOCTYPE usado no exemplo seguinte indica HTML5.

```html
<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>
```

Notas
-----

Desde que o elemento `<html>` seja o primeiro em documento outro que comenta, esse é chamado o elemento raiz. Embora essa tag possa ser implícita, ou não requerida, com HTML, essa é requerida para ser aberta e fechada em XHTML.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-html-element |

Compatibilidade dos navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Elemento de alto nível MathML: `<math> (en-US)`
* Elemento de alto nível SVG: `<svg>`


<figure>: O elemento Figure com Caption opcional - HTML: Linguagem de Marcação de Hipertexto

<figure>: O elemento Figure com Caption opcional
================================================

O elemento **`<figure>`** HTML representa conteúdo autocontido, potencialmente com uma legenda opcional, que é especificada usando o `<figcaption>` elemento. A figura, sua legenda e seu conteúdo são referenciados como uma única unidade.

Experimente
-----------

|  |  |
| --- | --- |
| Categorias de conteúdo | Conteudo de fluxo,
 conteúdo palpável.
  |
| Conteúdo permitido |
 Um elemento `<figcaption>`, seguido por
 conteúdo de fluxo; ou conteúdo de fluxo seguido por um
 `<figcaption>` elemento; ou conteúdo de fluxo.
  |
| Omissão de tag | None, both the starting and ending tag are mandatory. |
| Pais permitidos |
 Qualquer elemento que aceite
 Contúdo de fluxo.
  |
| Função ARIA implícita | figure (en-US) |
| Funções ARIA permitidas |
 Com nenhum
 figcaption descendente:
 qualquer,
 caso contrário, não há papéis permitidos
  |
| interface DOM | `HTMLElement` (en-US) |

Atributos
---------

Este elemento inclui apenas os atributos globais.

Notas de uso
------------

* Normalmente uma `<figure>` é uma imagem, ilustração, diagrama, trecho de código, etc., que é referenciado no fluxo principal de um documento, mas que pode ser movido para outra parte do documento ou para um apêndice sem afetar o fluxo principal.
* Uma legenda pode ser associada ao elemento `<figure>` inserindo um `<figcaption>` dentro dele (como o primeiro ou o último filho). O primeiro elemento `<figcaption>` encontrado na figura é apresentado como legenda da figura.
Exemplos
--------

### Imagens

```html
<!-- Apenas uma imagem -->
<figure>
  <img src="favicon-192x192.png" alt="O lindo logotipo do MDN." />
</figure>

<!-- Imagem com legenda -->
<figure>
  <img src="favicon-192x192.png" alt="O lindo logotipo do MDN." />
  <figcaption>Logotipo MDN</figcaption>
</figure>
```

### Trechos de codigo

```html
<figure>
  <figcaption>
    Obtenha detalhes do navegador usando o <code>navigator</code>.
  </figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Nome do código do navegador: " + navigator.appCodeName + "; ";
  txt+= "Nome do navegador: " + navigator.appName + "; ";
  txt+= "Versão do navegador: " + navigator.appVersion + "; ";
  txt+= "Cookies habilitados: " + navigator.cookieEnabled + "; ";
  txt+= "Plataforma: " + navigator.platform + "; ";
  txt+= "Cabeçalho do agente do usuário: " + navigator.userAgent + "; ";
  console.log("Exemplo de Navegador", txt);
}
  </pre>
</figure>
```

### Citações

```html
<figure>
  <figcaption><b>Edsger Dijkstra:</b></figcaption>
  <blockquote>
    Se a depuração é o processo de remoção de bugs de software, então a
    programação deve ser o processo de colocá-los.
  </blockquote>
</figure>
```

### Poemas

```html
<figure>
  <p style="white-space:pre">
    Ofereça-me um discurso, encantarei seu ouvido, Ou como uma viagem de fadas
    sobre o verde, Ou, como uma ninfa, com longos cabelos desgrenhados, Dança na
    areia, e mas nenhum fundamento visto: O amor é um espírito todo compacto de
    fogo, Não grosseiro para afundar, mas leve, e vai aspirar.
  </p>
  <figcaption><cite>Vênus e Adônis</cite>, de William Shakespeare</figcaption>
</figure>
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-figure-element |

Compatibilidade do navegador
----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* O elemento `<figcaption>`.