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

<input>
=======

O **elemento HTML `<input>`** é usado para criar controles interativos para formulários baseados na web para receber dados do usuário. A semântica de um `<input>` varia consideravelmente dependendo do valor de seu atributo `type`.

* *Categorias de conteúdo* Conteúdo de fluxo, listado, enviável, resetável, elemento associado a formulário, conteúdo fraseado.
 Se o atributo `type` não tiver o valor `hidden`, elemento rotulável, conteúdo palpável.
* *Conteúdo permitido* Nenhum, este é um elemento vazio.
* *Omissão de tags* Deve ter uma tag de abertura e não deve ter uma tag de fechamento.
* *Elementos pais permitidos* Qualquer elemento que aceite conteúdo fraseado.
* *Interface do DOM* `HTMLInputElement`
Atributos
---------

Este elemento inclui os atributos globais.

`type`

O tipo de controle a ser exibido. O tipo padrão é **text**, se este atributo não for especificado. Os valores possíveis são:

* `button`: Um botão sem comportamento padrão.
* `checkbox`: Uma caixa de marcação. Você deve usar o atributo **value** para definir o valor enviado por este item. Use o atributo **checked** para indicar se o item está selecionado por padrão. Você também pode usar o atributo **indeterminate** para indicar que a caixa de marcação está em um estado indeterminado (na maioria das plataformas, isso desenha uma linha horizontal cortando a caixa).
* `color`: Um controle para especificar cores. A interface de um seletor de cores não tem nenhuma funcionalidade obrigatória a não ser aceitar cores simples em texto (mais informações — em inglês).
* `date`: Um controle para inserir uma data (ano, mês e dia, sem horário).
* `datetime`: Um controle para inserir data e horário (hora, minuto, segundo e fração de segundo) baseado no fuso horário UTC.
* `datetime-local`: Um controle para inserir data e horário, sem fuso horário.
* `email`: Um campo para editar um endereço de e-mail. O valor do campo é validado para estar vazio ou ter um único endereço de e-mail válido antes de ser enviado. As pseudoclasses CSS `:valid` e `:invalid` são aplicadas apropriadamente.
* `file`: Um controle que permite ao usuário selecionar um arquivo. Use o atributo**accept** para definir os tipos de arquivo que o controle pode selecionar.
* `hidden`: Um controle que não é exibido mas cujo valor é enviado ao servidor.
* `image`: Um botão gráfico para enviar o formulário. Você deve usar o atributo **src** para definir a fonte da imagem e o atributo **alt** para definir um texto alternativo. Você pode usar os atributos **height** e **width** para definir o tamanho da imagem em pixels.
* `month`: Um controle para inserir mês e ano, sem fuso horário.
* `number`: Um controle para inserir um número de ponto flutuante.
* `password`: Um campo de texto com uma só linha cujo valor é obscurecido. Use o atributo **maxlength** para especificar o comprimento máximo do valor que pode ser inserido.
* `radio`: Um botão de escolha. Você deve usar o atributo **value** para definir o valor a ser enviado por este item. Use o atributo **checked** para indicar se este item deve estar selecionado por padrão. Botões de escolha que têm o mesmo valor para o atributo **name** estão no mesmo "grupo de botões de escolha"; apenas um botão de escolha no grupo pode estar selecionado de cada vez..
* `range`: Um controle para inserir um número cujo valor exato não é importante. Este tipo de controle usa os seguintes valores padrão se os atributos correspondentes não forem especificados:
    + `min`: 0
    + `max`: 100
    + `value`: `min` + (`max`-`min`)/2, ou `min` se `max` for menos que `min`
    + `step`: 1
* `reset`: Um botão que faz o conteúdo do formulário voltar a ter seus valores padrão.
* `search`: Um campo de texto com uma só linha para digitar termos de busca; quebras de linha são automaticamente removidas do valor entrado.
* `submit`: Um botão que envia o formulário.
* `tel`: Um controle para inserir um número de telefone; quebras de linha são automaticamente removidas do valor entrado, mas nenhuma outra sintaxe é imposta. Você pode usar atributos como **pattern** e **maxlength** para restringir os valores inseridos no controle. As pseudoclasses CSS `:valid` e `:invalid` são aplicadas apropriadamente.
* `text`: Um campo de texto com uma só linha; quebras de linha são automaticamente removidas do valor entrado.
* `time`: Um controle para inserir um horário sem fuso horário.
* `url`: Um campo para editar uma URL. O valor inserido é validado para ser vazio ou uma URL absoluta válida antes de ser enviado. Quebras de linha e espaços em branco antes e após o valor inserido são automaticamente removidos. Você pode usar atributos como **pattern** e **maxlength** para restringir os valores inseridos no controle. As pseudoclasses CSS `:valid` e `:invalid` são aplicadas apropriadamente.
* `week`: Um controle para inserir uma data consistindo de ano da semana e número da semana sem fuso horário.

`accept`

Se o valor do atributo **type** for `file`, este atributo indica quais tipos de arquivo o servidor aceita; caso contrário, este atributo é ignorado. O valor deve ser uma lista de especificadores de tipo únicos separados por vírgula:

* Uma extensão de arquivo começando com o caractere STOP (U+002E). (Exemplo: ".jpg,.png,.doc")
* Um tipo MIME válido sem extensões
* `audio/*` representando arquivos de som
* `video/*` representando arquivos de vídeo
* `image/*` representando arquivos de imagem

`mozactionhint`
Non-standard

Especifica uma "dica de ação" usada para determinar como rotular a tecla Enter em dispositivos móveis com teclados virtuais. Os valores suportados são `go`, `done`, `next`, `search` e `send`; estes valores são automaticamente mapeados para o texto apropriado (maiúsculas e minúsculas não são diferenciadas).

`autocapitalize`
Non-standard

Este é um atributo não padronizado usado pelo iOS Safari Mobile que controla se e como o texto deveria ser automaticamente capitalizado conforme o usuário insere/edita. Os valores não obsoletos estão disponíveis no iOS 5 e posteriores. Os valores possíveis são:

* `none`: Desabilitar completamente a capitalização automática.
* `sentences`: Capitalizar automaticamente a primeira letra das frases.
* `words`: Capitalizar automaticamente a primeira letra das palavras.
* `characters`: Capitalizar automaticamente todas as letras.
* `on`:
Deprecated
 Obsoleto desde o iOS 5.
* `off`:
Deprecated
 Obsoleto desde o iOS 5.

`autocomplete`

Este atributo indica se o valor do controle pode ser completado automaticamente pelo navegador. Este atributo é ignorado se o valor do atributo **type** é `hidden`, `password`, `checkbox`, `radio`, `file` ou um tipo de botão (`button`, `submit`, `reset`, `image`). Os valores possíveis são:

* `off`: O usuário deve inserir explicitamente um valor neste campo a cada uso, ou o documento implementa seu próprio método de autocompletar; o navegador não completa a entrada automaticamente.
* `on`: O navegador pode completar automaticamente o valor baseado em valores que o usuário inseriu no passado.

Se o atributo **autocomplete** não está especificado num elemento `<input>`, o navegador usa o valor do atributo **autocomplete** do formulário dono do `<input>`. O formulário dono deste `<input>` é o elemento `<form>` que contém este `<input>` ou o elemento `<form>` cujo **id** é referenciado pelo atributo **form** do elemento `<input>`. Para mais informações, veja o atributo `autocomplete` (en-US) no elemento `<form>` (en-US).

O atributo **autocomplete** também controla se o Firefox vai, ao contrário de outros navegadores, persistir o estado dinâmico de desabilitado e marcado (se aplicável) de um `<input>` entre carregamentos de página. A funcionalidade de persistir é habilitada por padrão. Definir o valor do atributo **autocomplete** para `off` desabilita esta funcionalidade; isto funciona mesmo quando o atributo **autocomplete** não se aplica ao `<input>` por causa de seu **type**. Veja Erro do Firefox 654072.

`autocorrect`
Non-standard

Este é um atributo não padronizado suportado pelo Safari que é usado para controle se a correção automática deveria ser habilitada quando o usuário entra/edita o texto do `<input>`. Os valores possíveis são:

* `on`: Habilita correção automática
* `off`: Desabilita correção automática

`autofocus`

Este atributo booleano permite que você especifique que um controle de formulário deve ter o foco de entrada de dados assim que a página carrega, a não ser que o usuário sobrescreva este comportamento digitando em um controle diferente, por exemplo. Apenas um elemento de formulário em um documento pode ter o atributo **autofocus**, que é booleano. Este atributo não pode ser aplicado se o atributo **type** estiver definido como `hidden` (isto é, você não pode colocar automaticamente o foco em um controle escondido).

`autosave`

Este atributo deve ser definido com um valor único. Se o valor do atributo **type** for `search`, termos de busca anteriores serão persistidos no menu entre carregamentos de página.

`checked`

Quando o valor do atributo **type** é `radio` ou `checkbox`, a presença deste atributo booleano indica que o controle é selecionado por padrão; caso contrário, este atributo é ignorado.

O Firefox vai, por padrão, ao contrário de outros navegadores, persistir o estado dinâmico de marcado de um `<input>` entre carregamentos de página. Use o atributo `autocomplete` para controlar esta funcionalidade.

`disabled`

Este atributo booleano indica que o controle de formulário não está disponível para interação. Em particular o evento `click` não será disparado em controles desabilitados. Além disso, o valor de um controle desabilitado não é enviado com o formulário.

O Firefox vai, por padrão, ao contrário de outros navegadores, persistir o estado dinâmico de desabilitado de um `<input>` entre carregamentos de página. Use o atributo `autocomplete` para controlar esta funcionalidade.

`form`

O elemento `<form>` ao qual o elemento `<input>` está associado (seu *formulário dono*). O valor do atributo deve ser um **id** de um elemento `<form>` (en-US). Este atributo permite que você coloque elementos `<input>` em qualquer lugar num documento, não apenas como descendentes de seus elementos `<form>`. Um `<input>` só pode estar associado a um único formulário.

`formaction`

A URI de um programa que processa a informação enviada pelo elemento, se ele for um botão ou uma imagem de envio de formulário. Se especificado, ele sobrescreve o atributo `action` (en-US) do formulário dono do elemento.

`formenctype`

Se o elemento for um botão ou uma imagem de envio de formulário, este atributo especifica o tipo de conteúdo que deve ser usado para enviar o formulário para o servidor. Os valores possíveis são:

* `application/x-www-form-urlencoded`: O valor padrão se o atributo não for especificado.
* `multipart/form-data`: Use este valor se você estiver usando um elemento `<input>` com o atributo `type` definido como `file`.
* `text/plain`

Se este atributo for especificado, ele sobrescreve o atributo `enctype` (en-US) do formulário dono do elemento.

`formmethod`

Se o elemento for um botão ou uma imagem de envio de formulário, este atributo especifica o método HTTP que o navegador deve usar para enviar o formulário. Os valores possíveis são:

* `post`: Os dados do formulário são incluídos no corpo do formulário e enviados para o servidor.
* `get`: Os dados do formulário são acrescentados ao URI do atributo **form**, com um '?' como separador, e o URI resultante é enviado ao servidor. Use este método quando o formulário não tem efeitos colaterais e contém somente caracteres ASCII.

Se especificado, este atributo sobrescreve o atributo `method` (en-US) do formulário dono do elemento.

`formnovalidate`

Se o elemento for um botão ou uma imagem de envio de formulário, este atributo booleano especifica que o formulário não deve ser validado quando enviado. Se especificado, este atributo sobrescreve o atributo `novalidate` (en-US) do formulário dono do elemento.

`formtarget`

Se o elemento for um botão ou uma imagem de envio de formulário, este atributo é um nome ou palavra-chave indicando onde mostrar a resposta recebida após a submissão do formulário. Este é o nome de, ou palavra-chave para, um *contexto de navegação* (por exemplo aba, janela ou frame inline). Se especificado, este atributo sobrescreve o atributo `target` (en-US) do formulário dono do elemento. As seguintes palavras-chave têm significado especial:

* `_self`: Carrega a resposta nom mesmo contexto de navegação que o atual. Este é o valor padrão se o atributo não for especificado.
* `_blank`: Carrega a resposta num novo contexto de navegação anônimo.
* `_parent`: Carrega a resposta no contexto de navegação pai do atual. Se não houver pai, esta opção tem o mesmo comportamento de `_self`.
* `_top`: Carrega a resposta no contexto de navegação raiz (isto é, o contexto de navegação que é ancestral do atual e não tem pai). Se não houver pai, esta opção tem o mesmo comportamento de `_self`.

`height`

Se o valor do atributo **type** for `image`, este atributo define a altura da imagem mostrada para o botão.

`incremental`
Non-standard

Este é um atributo não padronizado suportado pelo Safari que é aplicado somente quando o **type** é `search`. Se o atributo estiver presente, independentemente do valor que ele tiver, o `<input>` dispara eventos `search` (en-US) conforme o usuário edita o texto do campo. Este evento somente é disparado um tempo após a última tecla ter sido pressionada; este tempo é definido pela implementação e novas digitações zeram o contador de tempo. Em outras palavras, o disparo do evento é filtrado (*debounced*). Se o atributo não estiver presente, o evento `search` (en-US) só é disparado quando o usuário iniciar explicitamente uma busca (por exemplo, pressionando a tecla Enter enquanto estiver no campo).

`inputmode`

Uma dica para o navegador de qual teclado deve ser mostrado. Este atributo se aplica quando o valor do atributo **type** é `text`, `password`, `email` ou `url`. Os valores possíveis são:

* `verbatim`: Conteúdo alfanumérico que não seja prosa, como nomes de usuário e senhas.
* `latin`: Conteúdo no alfabeto latino na língua preferida do usuário, com auxílios de entrada como predição de texto habilitados. Para interações humano-computador como caixas de busca.
* `latin-name`: Como *latin*, mas para nomes humanos.
* `latin-prose`: Como *latin*, mas com auxílios de entrada mais agressivos. Para comunicações entre humanos como mensagens instantâneas ou email.
* `full-width-latin`: Como *latin-prose*, mas para as línguas secundárias do usuário.
* `kana`: Entrada em kana ou romaji, tipicamente hiragana, usando caracteres de largura total, com suporte à conversão para kanji. Para entrada de texto em língua japonesa.
* `katakana`: Entrada em katakana, usando caracteres de largura total, com suporte à conversão para kanji. Para entrada de texto em língua japonesa.
* `numeric`: Entrada numérica, incluindo teclas para os dígitos de 0 a 9, o caractere separador de milhar preferido pelo usuário e o caractere para indicar números negativos. Para códigos numéricos como números de cartão de crédito. Para números de verdade, prefira usar `<input type="number">`
* `tel`: Entrada de números de telefone, incluindo as teclas asterisco e cerquilha. Use `<input type="tel">` se possível em vez disso.
* `email`: Entrada de email. Use `<input type="email">` se possível em vez disso.
* `url`: Entrada de URLs. Use `<input type="url">` se possível em vez disso.

`list`

Identifica uma lista de opções pré-definidas de sugestões para o usuário. O valor deve ser o **id** de um elemento `<datalist>` no mesmo documento. O navegador mostrará apenas opções que são valores válidos para este elemento. Este atributo é ignorado quando o valor do atributo **type** é `hidden`, `checkbox`, `radio`, `file` ou um tipo de botão.

`max`

O valor máximo (numérico ou data) para este item, que não deve ser menor que seu valor mínimo (atributo **min**).

`maxlength`

Se o valor do atributo **type** for `text`, `email`, `search`, `password`, `tel` ou `url`, este atributo especifica o número máximo de caracteres (em pontos de código Unicode) que o usuário pode inserir; para outros tipos de controle, este atributo é ignorado. Seu valor pode exceder o do atributo **size**. Se não for especificado, o usuário pode inserir uma quantidade ilimitada de caracteres. Especificar um valor negativo resulta no comportamento padrão, isto é, o usuário vai poder inserir um número ilimitado de caracteres. Esta regra só é validada quando o valor do atributo é modificado.

`min`

O valor mínimo (númerico ou data) para este item, que não deve ser maior do que seu máximo (atributo **max**).

`minlength`

Se o valor do atributo **type** for `text`, `email`, `search`, `password`, `tel` ou `url`, este atributo especifica o número mínimo de caracteres (em pontos de código Unicode) que o usuário pode inserir; para outros tipos de controle, este atributo é ignorado.

`multiple`

Este atributo booleano indica se o usuário pode inserir mais de um valor. Ele é aplicado quando o atributo **type** está definido como `email` ou `file`; em outros casos, é ignorado.

`name`

O nome do controle, que é enviado junto com os dados do formulário.

`pattern`

Uma expressão regular usada para validar o valor do controle. O padrão deve casar com o valor completo da entrada, não apenas uma parte. Use o atributo **title** para descrever o padrão para ajudar o usuário. Este atributo é aplicado quando o valor do atributo **type** é `text`, `search`, `tel`, `url` ou `email`; caso contrário ele é ignorado. A linguagem da expressão regular é a mesma do JavaScript. O padrão não deve estar entre barras.

`placeholder`

Uma dica para o usuário do que ele pode inserir no controle. O texto do atributo não deve conter quebras de linha. Este atributo é aplicado quando o valor do atributo **type** é `text`, `search`, `tel`, `url` ou `email`; caso contrário, ele é ignorado.

**Nota:** Não use o atributo `placeholder` no lugar de um elemento `<label>`. Os propósitos de cada um são diferentes: o atributo `<label>` descreve o papel o elemento do formulário, isto é, ele indica que tipo de informação é esperada. Já o atributo `placeholder` é uma dica sobre o formato que o conteúdo deveria ter. Há casos em que o atributo `placeholder` nunca é exibido para o usuário, portanto o formulário deve ser inteligível sem ele.

`readonly`

Este atributo booleano indica que o usuário não pode modificar o valor do controle.

Este atributo é ignorado se o valor do atributo **type** for `hidden`, `range`, `color`, `checkbox`, `radio`, `file` ou um tipo de botão.

`required`

Este atributo especifica que o usuário deve preencher o campo com um valor antes de enviar o formulário. Ele não pode ser usado quando o atributo **type** está definido como `hidden`, `image` ou um tipo de botão (`submit`, `reset` ou `button`). As pseudoclasses CSS `:optional` e `:required` serão aplicadas ao campo como for apropriado.

`selectionDirection`

A direção na qual a seleção ocorreu. Vale `forward` se a seleção foi feita no mesmo sentido da escrita do idioma usado ou `backward` se a seleção foi feita na direção oposta. Pode ainda ser `none` se a direção da seleção não for conhecida.

`size`

O tamanho inicial do controle. Este valor é em pixels a não ser que o valor do atributo **type** seja `text` ou `password`. Neste caso, este valor é um número inteiro de caracteres. A partir do HTML5, este atributo é aplicado apenas quando o atributo **type** está definido como `text`, `search`, `tel`, `url`, `email` ou `password`; caso contrário, ele é ignorado. Além disso, o tamanho deve ser maior que zero. Se você não especificar um tamanho, o valor padrão 20 é usado.

`spellcheck`

Definir o valor deste atributo como `true` indica que o elemento deve passar por um corretor ortográfico e gramatical. O valor `default` indica que o elemento deve agir de acordo com seu comportamento padrão, possivelmente baseado no valor do atributo `spellcheck` de seu elemento pai. O valor `false` indica que o elemento não deve ser verificado.

`src`

Se o valor do atributo **type** for `image`, este atributo especifica uma URI para a localização de uma imagem a ser exibida no botão gráfico; caso contrário, este atributo é ignorado.

`step`

Trabalha junto com os atributos **min** e **max** para limitar os incrementos em que valores numéricos ou datas podem ser alterados. Seu valor pode ser `any` ou um número de ponto flutuante positivo. Se o valor não for `any`, o controle aceita somente valores múltiplos valor do incremento maiores que o mínimo.

`tabindex`

A posição do elemento na ordem de navegação pela tecla Tab no documento atual.

`value`

 O valor inicial do controle. Este atributo é opcional exceto quando o valor do atributo **type** for `radio` ou `checkbox`.
 Note que, quando a página é recarregada, Gecko and IE ignorarão o valor especificado no código HTML se o valor tiver sido alterado antes do recarregamento.

`width`

Se o valor do atributo **type** for `image`, este atributo define a largura da imagem exibida para o botão.

`x-moz-errormessage`
Non-standard

Essa extensão da Mozilla permite que você especifique a mensagem de erro a ser exibida quando um campo não valida com sucesso.

Notas
-----

### Entradas de arquivo

**Nota:** a partir do Gecko 2.0, chamar o método `click()` num elemento `<input>` do tipo `file` abre o seletor de arquivos e permite que o usuário selecione arquivos. Veja Usando arquivos a partir de aplicações web para um exemplo e mais detalhes.

Você não pode definir o valor de um seletor de arquivos a partir de um script; fazer algo como o seguinte não tem efeito:

```js
var e = getElementById("algumaEntradaDeArquivo");
e.value = "foo";
```

### Mensagens de erro

Se você quiser que o Firefox mostre uma mensagem de erro personalizada quando a validação de um campo falha, você pode usar o atributo `x-moz-errormessage` para isso:

```html
<input
 type="email"
 x-moz-errormessage="Por favor, especifique um endereço de e-mail." />
```

Note, no entanto, que isso não é padronizado e não terá efeito em outros navegadores.

Exemplos
--------

### Uma caixa de entrada simples

```html
<!-- Um campo básico -->
<input type="text" name="input" value="Digite aqui" />
```

### Um caso de uso comum

```html
<!-- Um formulário comum que inclui tags input -->
<form action="getform.php" method="get">
  Nome: <input type="text" name="nome" /><br />
  Sobrenome: <input type="text" name="sobrenome" /><br />
  E-mail: <input type="email" name="email\_usuario" /><br />
  <input type="submit" value="Enviar" />
</form>
```

### Usando o mozactionhint no Firefox mobile

Você pode usar o atributo `mozactionhint` para especificar o texto para o rótulo da tecla Enter no teclado virtual quando seu formulário é exibido no Firefox mobile. Por exemplo, para ter um rótulo "Próximo", você pode fazer o seguinte:

```html
<input type="text" mozactionhint="next" name="sometext" />
```

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

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

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

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

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

* Outros elementos relacionados a formulários: `<form>` (en-US), `<button>`, `<datalist>`, `<legend>`, `<label>`, `<select>`, `<optgroup>`, `<option>`, `<textarea>`, `<fieldset>`, `<output>`, `<progress>` e `<meter>`.
* Cross-browser HTML5 placeholder text


footer (rodapé) - HTML: Linguagem de Marcação de Hipertexto

footer (rodapé)
===============

### Resumo

O elemento HTML de Rodapé (<footer>) representa um rodapé para o seu sectioning content (conteúdo de seção) mais próximo ou sectioning root elemento (ou seja, seu parente mais próximo `<article>`, `<aside>`, `<nav>`, `<section>`, `<blockquote>`, `<body>`, `<details>`, `<fieldset>`, `<figure>`, `<td>` (en-US)). Normalmente um rodapé contém informações sobre o autor da seção de dados, direitos autorais ou links para documentos relacionados.

>
> **Note:** **Notas de Uso:**
>
>
> * Coloque informações sobre o autor em um elemento `<address>` que pode ser incluído no elemento `<footer>`.
> * O elemento `<footer>` não é sectioning content portanto, não introduz uma nova seção no outline.
>
>
>

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

| Conteúdo permitido | Flow content (en-US), mas não o `<footer>` ou `<header>` descendentes. |
| --- | --- |
| Omissão de tag | Nenhuma, ambas as tags de início e fim são obrigatórias. |
| Parent Elements permitidos | Qualquer elemento que aceite flow content (en-US). Note-se que um elemento <footer> não deve ser um descendente de um `<address>`, `<header>` ou outro elemento `<footer>`. |
| Documento normativo | HTML5, section 4.4.9 |

Atributos
---------

Este elemento não tem outros atributos que os global attributes (en-US), comuns a todos os elementos.

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

Este elemento implementa a interface `HTMLElement` (en-US).

Exemplos
--------

```html
<footer>
  Algumas informações de copyright ou talvez alguma informação do autor de um <article>?
</footer>
```

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ção relacionados `<body>`, `<nav>`, `<article>`, `<aside>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<header>`, `<section>`, `<address>`;
* Sections and outlines of an HTML5 document.


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

<textarea>
==========

O **elemento** HTML `<textarea>` representa um controle de edição para uma caixa de texto, útil quando você quer permitir ao usuário informar um texto extenso em formato livre, como um comentário ou formulário de retorno.

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

Os exemplos acima demonstram vários recursos do `<textarea>`. O primeiro exemplo mostra o uso mais simples, com apenas um `id` atributo para permitir que o`<textarea>` estar associado a um `<label>` elemento para fins de acessibilidade e um `name` atributo para definir o nome do ponto de dados associado enviado ao servidor quando o formulário é enviado.

O segundo exemplo mostra alguns recursos mais complexos:

* O `rows` e `cols` atributos permitem especificar um tamanho exato para o `<textarea>` pegar. Definir isso é uma boa idéia para manter a consistência, pois os padrões do navegador podem ser diferentes.
* `maxlength` especifica um número máximo de caracteres que o `<textarea>` tem permissão para conter. Você também pode definir um comprimento mínimo considerado válido usando o `minlength` atributo e especifique que o `<textarea>` não enviará (e é inválido) se estiver vazio, usando o`required` atributo. Isso fornece o `<textarea>` com validação simples, que é mais básica que os outros elementos do formulário (por exemplo, você não pode fornecer regexs específicas para validar o valor usando o método `pattern` atributo, como você pode com o `<input>` elemento).
* `wrap` especifica o comportamento de quebra automática do texto quando ele atinge a borda do `<textarea>`.
* Se você deseja conteúdo padrão para o seu `<textarea>`, você o insere entre as tags de abertura e fechamento. `<textarea>` não suporta o `value` atributo.

O `<textarea>` O elemento também aceita vários atributos comuns para formar `<input>`s, tal como`autocomplete`, `autofocus`, `disabled`, `placeholder`, `readonly`, e `required`.

Atributos
---------

Este elemento inclui os atributos globais.

`autocapitalize`
Non-standard

Este é um atributo não padrão suportado pelo WebKit no iOS (portanto, quase todos os navegadores executados no iOS, incluindo Safari, Firefox e Chrome), que controla se e como o valor do texto deve ser automaticamente capitalizado quando é inserido / editado pelo do utilizador. Os valores não preteridos estão disponíveis no iOS 5 e posterior. Os valores possíveis são:

* `none`: Desativa completamente a capitalização automática.
* `sentences`: Coloque automaticamente em maiúscula a primeira letra das frases.
* `words`: Coloque em maiúscula automaticamente a primeira letra das palavras.
* `characters`: Colocar em maiúscula automaticamente todos os caracteres.
* `on`:
Deprecated
 Descontinuado desde o iOS 5.
* `off`:
Deprecated
 Descontinuado desde o iOS 5.

`autocomplete`

Este atributo indica se o valor do controle pode ser preenchido automaticamente pelo navegador. Os valores possíveis são:

* `off`: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.
* `on`: O navegador pode concluir automaticamente o valor com base nos valores inseridos pelo usuário durante os usos anteriores.

Se o `autocomplete` atributo não está especificado em um `<textarea>` elemento, o navegador usa o elemento `autocomplete` valor do atributo `<textarea>` proprietário do formulário do elemento. O proprietário do formulário é o `<form>` (en-US) elemento que este`<textarea>` elemento é um descendente ou o elemento de formulário cuja `id` é especificado pelo `form` atributo do elemento de entrada. Para mais informações, consulte o `autocomplete` (en-US) atribuno no `<form>` (en-US).

`autofocus`

Esse atributo booleano permite especificar que um controle de formulário tenha foco de entrada quando a página for carregada. Somente um elemento associado ao formulário em um documento pode ter esse atributo especificado.

`cols`

A largura visível do controle de texto, em larguras médias de caracteres. Se for especificado, deve ser um número inteiro positivo. Se não for especificado, o valor padrão é 20.

`disabled`

Esse atributo booleano indica que o usuário não pode interagir com o controle. Se esse atributo não for especificado, o controle herdará sua configuração do elemento que contém, por exemplo `<fieldset>`; se não houver elemento contendo quando o `disabled` atributo estiver definido, o controle está ativado.

`form`

O elemento do formulário que o `<textarea>` elemento está associado (seu "proprietário do formulário"). O valor do atributo deve ser o `id` de um elemento de formulário no mesmo documento. Se este atributo não for especificado, o atributo `<textarea>` O elemento deve ser um descendente de um elemento do formulário. Este atributo permite que você coloque`<textarea>` elementos em qualquer lugar do documento, não apenas como descendentes de elementos do formulário.

`maxlength`

O número máximo de caracteres (pontos de código unicode) que o usuário pode inserir. Se esse valor não for especificado, o usuário poderá inserir um número ilimitado de caracteres.

`minlength`

O número mínimo de caracteres (pontos de código unicode) exigidos pelo usuário.

`name`

O nome do controle.

`placeholder`

Uma dica para o usuário sobre o que pode ser inserido no controle. Retornos de carro ou feeds de linha no texto do espaço reservado devem ser tratados como quebras de linha ao renderizar a dica.

>
> **Note:** **Nota: Os espaços reservados devem ser usados apenas para mostrar um exemplo do tipo de dados que deve ser inserido em um formulário; eles não substituem uma adequada** `<label>` elemento vinculado à entrada. Veja Labels e placeholders para uma explicação completa.
>
>
>

`readonly`

Esse atributo booleano indica que o usuário não pode modificar o valor do controle. Ao contrário do `disabled` atributo, o`readonly` O atributo não impede o usuário de clicar ou selecionar no controle. O valor de um controle somente leitura ainda é enviado com o formulário.

`required`

Este atributo especifica que o usuário deve preencher um valor antes de enviar um formulário.

`rows`

O número de linhas de texto visíveis para o controle.

`spellcheck`

Especifica se o `<textarea>`está sujeito a verificação ortográfica pelo navegador / SO subjacente. o valor pode ser:

* `true`: Indica que o elemento precisa ter sua ortografia e gramática verificadas.
* `default` :Indica que o elemento deve agir de acordo com um comportamento padrão, possivelmente com base no próprio elemento pai `spellcheck` valor.
* `false` : Indica que o elemento não deve ter verificação ortográfica.

`wrap`

Indica como o controle quebra o texto. Os valores possíveis são:

* `hard`: O navegador insere automaticamente quebras de linha (CR + LF) para que cada linha não tenha mais que a largura do controle; a `cols` O atributo também deve ser especificado para que isso entre em vigor.
* `soft`: O navegador garante que todas as quebras de linha no valor consistam em um par CR + LF, mas não insira nenhuma quebra de linha adicional.
* `off`
Non-standard
: Como `soft` mas muda a aparência para `white-space: pre` segmentos de linha que excedam `cols` não estão embrulhados e os `<textarea>` torna-se rolável horizontalmente.

Se este atributo não for especificado, `soft` é o seu valor padrão.

Estilo com CSS
--------------

`<textarea>` é um elemento substituído - possui dimensões intrínsecas, como uma imagem rasterizada. Por padrão, sua`display` o valor é bloco. Em comparação com outros elementos de formulário, é relativamente fácil de estilizar, com seu modelo de caixa, fontes, esquema de cores etc. sendo facilmente manipuláveis usando CSS comum.

O estilo de formulários HTML fornece algumas dicas úteis sobre estilo (en-US)`<textarea>`s.

### Inconsistência da linha de base

A especificação HTML não define onde a linha de base de um `<textarea>` ou seja, navegadores diferentes o definem em posições diferentes. Para Gecko, o `<textarea>` linha de base é definida na linha de base da primeira linha da primeira linha da área de texto, em outro navegador pode ser definida na parte inferior da `<textarea>`caixa. Não use `vertical-align``: baseline` nele; o comportamento é imprevisível

### Controlando se uma área de texto é redimensionável

Na maioria dos navegadores, `<textarea>`s são redimensionáveis - você notará a alça de arrasto no canto direito, que pode ser usada para alterar o tamanho do elemento na página. Isso é controlado pelo `resize` (en-US) Propriedade CSS - o redimensionamento está ativado por padrão, mas você pode desativá-lo explicitamente usando um`resize` valor de`none`:

```css
textarea {
  resize: none;
}
```

### Estilo de valores válidos e inválidos

Valores válidos e inválidos de um `<textarea>` elemento (por exemplo, dentro e fora dos limites definidos por`minlength`, `maxlength`, ou`required`) pode ser destacado usando o `:valid` e`:invalid` pseudo-classes. Por exemplo, para atribuir à sua área de texto uma borda diferente, dependendo se é válida ou inválida:

```css
textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}
```

Exemplo
-------

### Exemplo básico

O exemplo a seguir mostra uma área de texto muito simples, com um número definido de linhas e colunas e algum conteúdo padrão.

```html
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
```

### Comprimento mínimo e máximo

Este exemplo tem um número mínimo e máximo de caracteres - de 10 e 20, respectivamente. Experimente e veja.

```html
<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">
Write something here</textarea
>
```

Observe que `minlength` não impede o usuário de remover caracteres para que o número digitado ultrapasse o mínimo, mas faz com que o valor digitado no `<textarea>` invalide.Observe também que, mesmo se você tiver um `minlength` conjunto de valores (3, por exemplo), um campo vazio `<textarea>` ainda é considerado válido, a menos que você também tenha o `required` conjunto de atributos.

### Placeholder

Este exemplo tem um espaço reservado definido. Observe como ele desaparece quando você começa a digitar na caixa.

```html
<textarea
 name="textarea"
 rows="5"
 cols="30"
 placeholder="Comment text."></textarea>
```

>
> **Note:** **Nota: Os espaços reservados devem ser usados apenas para mostrar um exemplo do tipo de dados que deve ser inserido em um formulário; eles não substituem uma adequada**`<label>` elemento vinculado à entrada. Veja Labels e placeholders para uma explicação completa.
>
>
>

### Desativado e somente leitura

Este exemplo mostra dois `<textarea>`s — um dos quais é `disabled`, e o outro é `readonly`.Brinque com os dois e verá a diferença de comportamento - O `disabled` elemento não é selecionável de forma alguma (e seu valor não é enviado), enquanto o elemento `readonly` é selecionável e seu conteúdo copiável (e seu valor é enviado); você simplesmente não pode editar o conteúdo.

```html
<textarea name="textarea" rows="5" cols="30" disabled>
I am a disabled textarea</textarea
>
<textarea name="textarea" rows="5" cols="30" readonly>
I am a readonly textarea</textarea
>
```

Resumo técnico
--------------

|  |  |
| --- | --- |
| Categorias de conteúdo (en-US) | Elemento associado ao formulário de conteúdo de fluxo, conteúdo de
frases, conteúdo interativo, listado, rotulável, redefinível e
submetível a envio. (en-US) |
| Conteúdo permitido | Text |
| Omissão de tag | **Parents permitido** |
| Funções ARIA permitidas | None |
| DOM interface | `HTMLTextAreaElement` (en-US) |

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

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

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

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

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

Outros elementos relacionados ao formulário:

* `<form>` (en-US)
* `<button>`
* `<datalist>`
* `<legend>`
* `<label>`
* `<select>`
* `<optgroup>`
* `<option>`
* `<input>`
* `<fieldset>`
* `<output>`
* `<progress>`
* `<meter>`


<dd>: elemento Detalhes da Descrição - HTML: Linguagem de Marcação de Hipertexto

<dd>: elemento Detalhes da Descrição
====================================

O **elemento HTML <dd>** fornece detalhes ou uma definição mais completa do termo precedente (definido por `<dt>`) numa lista de descrições (`<dl>`).

|  |  |
| --- | --- |
| Categorias de conteúdo | Nenhuma. |
| Conteúdo permitido | Conteúdo de fluxo. |
| Omissão de Tag |
 A Tag inicial (`<dd>`) é obrigatória.A Tag
 final (</dd>) pode ser omitida se seguida imediatamente por outro
 elemento `<dd>`, ou se o elemento pai não tiver
 mais conteúdo.
  |
| Ancestrais permitidos | `<dl>` ou (em
 WHATWG HTML) uma
 `<div>` que está dentro de uma
 `<dl>`.
  |
| Tags irmãs | `<dt>` ou outro elemento
 `<dd>` .
  |
| Papeis ARIA permitidos | Nenhum. |
| Tipo de elemento DOM | `HTMLElement` (en-US) |

Atributos
---------

Este elemento inclui os atributos globais como seus.

`nowrap`
Non-standard

Se o valor deste atributo for `yes`, o texto de definição não será envolvido. O valor padrão é `no`.

Exemplo
-------

Para exemplos, veja os exemplos de <dl>.

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

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

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

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

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

* `<dl>`
* `<dt>`


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

<track>
=======

O \*\*elemento HTML `<track>` \*\*é usado como filho dos elementos de mídia`<audio>` e `<video>`. Ele permite que você especifique faixas de texto temporizadas (ou dados baseados em tempo), por exemplo, para lidar automaticamente com legendas. As faixas são formatadas em WebVTT format (en-US) (arquivos `.vtt`) — Web Video Text Tracks or Timed Text Markup Language (TTML).

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

|  |  |
| --- | --- |
| Categorias de conteúdo | Nenhuma |
| Conteúdo permitido | Nenhum, é um empty element (en-US). |
| Omissão de tag |
 Como é um elemento vazio, a tag inicial deve estar presente e a tag
 final não deve estar presente.
  |
| Permite Parentes |
 Um elemento de mídia, antes de qualquer
 conteúdo de fluxo (en-US).
  |
| Funções ARIA permitidas | Nenhum |
| Interface DOM | `HTMLTrackElement` (en-US) |

Atributos
---------

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

`default`

This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. This may only be used on one `track` element per media element.

`kind`

How the text track is meant to be used. If omitted the default kind is `subtitles`. If the attribute is not present, it will use the `subtitles`. If the attribute contains an invalid value, it will use `metadata`. (Versions of Chrome earlier than 52 treated an invalid value as `subtitles`.) The following keywords are allowed:

* `subtitles`
    + Subtitles provide translation of content that cannot be understood by the viewer. For example dialogue or text that is not English in an English language film.
    + Subtitles may contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene.
* `captions`
    + Closed captions provide a transcription and possibly a translation of audio.
    + It may include important non-verbal information such as music cues or sound effects. It may indicate the cue's source (e.g. music, text, character).
    + Suitable for users who are deaf or when the sound is muted.
* `descriptions`
    + Textual description of the video content.
    + Suitable for users who are blind or where the video cannot be seen.
* `chapters`
    + Chapter titles are intended to be used when the user is navigating the media resource.
* `metadata`
    + Tracks used by scripts. Not visible to the user.

`label`

A user-readable title of the text track which is used by the browser when listing available text tracks.

`src`

Address of the track (`.vtt` file). Must be a valid URL. This attribute must be specified and its URL value must have the same origin as the document — unless the `<audio>` or `<video>` parent element of the `track` element has a `crossorigin` (en-US) attribute.

`srclang`

Language of the track text data. It must be a valid BCP 47 language tag. If the `kind` attribute is set to `subtitles`, then `srclang` must be defined.

Usage notes
-----------

The type of data that `track` adds to the media is set in the `kind` attribute, which can take values of `subtitles`, `captions`, `descriptions`, `chapters` or `metadata`. The element points to a source file containing timed text that the browser exposes when the user requests additional data.

A `media` element cannot have more than one `track` with the same `kind`, `srclang`, and `label`.

Examples
--------

```html
<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en" />
  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_de.vtt" srclang="de" />
  <track kind="subtitles" src="sampleSubtitles\_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_ja.vtt" srclang="ja" />
  <track kind="subtitles" src="sampleSubtitles\_oz.vtt" srclang="oz" />
  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
  <!-- Fallback -->
  ...
</video>
```

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

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

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

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

See also
--------

* WebVTT text track format (en-US)


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

<span>
======

Resumo
------

O elemento **HTML `<span>` é um conteiner generico em linha para conteúdo fraseado** , que não representa nada por natureza. Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos `class` ou `id` ), ou para compartilhar valores de atributos como `lang`. Ele deve ser usado somente quando nenhum outro elemento semântico for apropriado. `<span>` é muito parecido com o elemento `<div>` , entretando `<div>` é um elemento de nível de bloco enquanto `<span>` é um elemento em linha.

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

| Categorias de conteúdo | Flow content (en-US), phrasing content (en-US) |
| --- | --- |
| Conteúdo permitido | Phrasing content (en-US) |
| Omissão de Tag | Nenhum, deve ter tanto tag de início quanto tag final. |
| Elementos pai permitidos | Qualquer elemento que aceite phrasing content (en-US), ou flow content (en-US). |
| Padrões de documento | HTML5, section 4.6.24; HTML 4.01, section 7.5.4 |

Atributos
---------

Esse elemento inclui apenas os a (en-US)tributos globais (en-US).

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

Este elemento implementa a interface `HTMLSpanElement` (en-US).

Exemplos
--------

```html
<p><span>Some text</span></p>
```

### Resultado

Some text

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

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

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

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

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

* Elemento HTML `<div>`


<title>: O titulo do documento. - HTML: Linguagem de Marcação de Hipertexto

<title>: O titulo do documento.
===============================

O **elemento HTML** `<title>` (*Elemento HTML Título*) define o título do documento, mostrado na barra de título de um navegador ou na aba da página. Pode conter somente texto e quaisquer marcações contidas no texto não são interpretadas.

* *Categorias de conteúdo (en-US)* Conteúdo de metadados.
* *Conteúdo permitido* Texto que não seja whitespace entre elementos.
* *Omissão de marcação* Todas as marcações são necessárias. Perceba que suprimir `</title>` fará o navegador ignorar o resto da página.
* *Elementos pais permitidos* Um elemento `<head>` que não contenha outro elemento `<title>`.
* *Funções ARIA permitidas* Nenhuma.
* *Interface DOM* `HTMLTitleElement` (en-US)
Atributos
---------

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

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

O elemento `<title>` é sempre usado dentro da `<head>` da página.

Exemplo
-------

```html
<title>Título incrível</title>
```

Preocupações de acessibilidade
------------------------------

É importante informar um valor para o `title` que descreva o propósito da página.

Uma técnica comum de navegação para usuários de tecnologias assistivas é ler o título da página a fim de deduzir o que ela contém. Isso ocorre porque navegar pela página para determinar o conteúdo dela pode ser confuso e consumir muito tempo.

#### Exemplo

```html
<title>
  Menu - Casa Azul Comida Chinesa - FoodYum: Faça seu pedido online!
</title>
```

Para ajudar o usuário, atualize o valor do `title` para refletir mudanças significativas no estado da página (como problemas de validação em formulários).

#### Exemplo
```

<title>2 erros - Seu pedido - Casa Azul Comida Chinesa - FoodYum: Faça seu pedido online!</title>
```

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

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

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

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


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

<embed>
=======

Sumário
-------

O **elemento HTML `<embed>`** incorpora conteúdo externo no ponto especificado no documento. Este conteúdo é fornecido por um aplicativo externo ou outra fonte de conteúdo interativo, como um plug-in de navegador.

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

**Nota:** Este tópico documenta apenas o elemento definido como parte do HTML5. Ele não trata da implementação anterior e não padronizada do elemento.

Lembre-se de que a maioria dos navegadores modernos descontinuou e removeu o suporte para plug-ins de navegador. Portanto, confiar no `<embed>` geralmente não é aconselhável se você deseja que seu site funcione no navegador do usuário comum.

* *Categoria de conteúdo (en-US)* Flow content (en-US), phrasing content (en-US), embedded content, interactive content, palpable content.
* *Conteúdo permitido* Nenhum, é um empty element (en-US).
* *Omissão de Tag* Deve iniciar com uma tag de início, mas não deve ter uma tag de fechamento.
* *Elementos pai (ancestral) permitidos* Qualquer elemento que aceita incorporação de conteúdo.
* *Interface DOM* `HTMLEmbedElement` (en-US)
Atributos
---------

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

`height`

A altura apresentada do recurso, em CSS pixels. Este deve ser um valor absoluto; porcentagens *não* são permitidas.

`src`

A URL do recurso que está sendo incorporado.

`type`

O tipo MIME (en-US) a ser usado para a seleção do *plug-in* de instanciação.

`width`

A largura apresentada do recurso, em CSS pixels. Este deve ser um valor absoluto; porcentagens *não* são permitidas.

Exemplo
-------

```html
<embed type="video/quicktime" src="movie.mov" width="640" height="480" />
```

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

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

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

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

**Nota:** Atualmente existe uma diferença na implementação pelos navegadores. Enquanto carrega, no Chrome e no Opera, aparece o conteúdo do recurso em HTML, no Firefox, mostra uma mensagem genérica falando que o conteúdo precisa de um *plug-in* (veja o Erro do Firefox 730768). É recomendado que se use os elementos `<object>` (en-US) ou `<iframe>`.

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

* Outros elementos usados para incorporar conteúdo de vários tipos, incluem: `<audio>`, `<canvas>`, `<iframe>`, `<img>`, `<math> (en-US)`, `<object>` (en-US), `<svg>`, and `<video>`.
* Posicionamento e dimensionamento de conteúdos incorporados dentro da janela de exibição: `object-position` (en-US) and `object-fit`


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

<bdi>
=====

Resumo
------

O HTML <bdi>elemento (ou elemento de isolamento de Bi-direcional) isola um trechode texto que pode ser formatado em uma direção diferente de outro texto fora dela.

Este elemento é útil ao incorporar o texto com uma direção desconhecida, de um banco de dados por exemplo, no interior do texto com uma direção fixa.

Apesar do mesmo efeito visual pode ser alcançado usando a regra de CSS`unicode-bidi` (en-US): isolar um `<span>` ou outro elemento de formatação de texto, o significado semântico só é transportado pelo elemento de<bdi>. Especialmente, os navegadores podem ignorar estilos CSS. Nesse caso, o texto seria ainda corretamente exibido usando o elemento HTML, mas se tornará lixo quando usando o estilo CSS para transmitir semântica.

* *Content categories (en-US)* Flow content (en-US), phrasing content (en-US), palpable content.
* *Permitted content*Phrasing content (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* `HTMLElement` (en-US)
Atributos
---------

Como todos os outros elementos do HTML, este elemento tem os atributos globais, com uma pequena diferença de semântica: o atributo dir não é herdado. Se não definido, o valor padrão é o auto que deixa o navegador decidir a direção com base no conteúdo do elemento.

Exemplo
-------

```html
<p dir="ltr">
  Esta palavra arábica <bdi>ARABIC_PLACEHOLDER</bdi> é automaticamente voltada
  da direita
</p>
```

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

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

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

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

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

* Related HTML element: `<bdo>`
* Related HTML properties: `direction` (en-US), `unicode-bidi` (en-US)


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

<script>
========

O **elemento HTML `<script>`** é usado para incluir ou referenciar um script executável.

|  |  |
| --- | --- |
| Categorias de conteúdo | Conteúdo de metadados,
 Fluxo de conteúdo,
 Conteúdo fraseado.
  |
| Conteúdo Permitido | Script dinâmico, como `text/javascript`. |
| Omissão de tag | None, both the starting and ending tag are mandatory. |
| Pais permitidos |
 Qualquer elemento que aceite
 conteúdo de metadados, ou qualquer elemento que aceite
 conteúdo fraseado.
  |
| Regras ARIA permitidas | Nenhuma |
| Interface DOM | `HTMLScriptElement` (en-US) |

Atributos
---------

Esse elemento inclui os atributos globais.

`async`

Um atributo booleano indicando que o navegador deve, se possível, executar o script assíncronamente.

>
> **Warning:** Esse atributo não deve ser utilizado se o atributo `src` estiver ausente (ex. scripts embutidos). Se incluído, nesse caso, ele não terá nenhum efeito.
>
>
>

Scripts inseridos dinamicamente (usando `document.createElement`) são executados assincronamente por padrão, então para torná-lo uma execução síncrona (ex. executar scripts na ordem que eles foram carregados) atribua `async=false`.

Veja Browser compatibility para notas no suporte do navegador. Veja também Scripts assíncronos para asm.js (en-US).

`crossorigin`

Elementos `script` passam o mínimo de informação para `window.onerror` em scripts que não passem na checagem do CORS (en-US). Para permitir logs de erro para sites que usam domínios diferentes para arquivos estáticos, use esse atributo. Veja CORS settings attributes (en-US) para uma explicação mais detalhada dos argumentos válidos.

`defer`

Esse atributo Boleano é usado para indicar ao navegador que o script deve ser executado depois que o documento tenha sido parseado, mas antes de disparar o evento `DOMContentLoaded (en-US)`

Scripts com o atributo `defer` vão impedir que o evento DOMContentLoaded seja disparado até que o script seja carregado e tenha terminado de ser *avaliado*.

>
> **Warning:** Esse atributo não deve ser usado se o atibuto `src` estiver ausente (ex. scripts inline), nesse caso ele não vai ter efeito.
>
>
>

Para conseguir um efeito similar para scripts inseridos dinamicamente use `async=false`. Scripts com o atributo `defer` vão ser executados na ordem em que aparecem no `document`.

`integrity`

Contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See Subresource Integrity (en-US).

`nomodule`
Experimental

This Boolean attribute is set to indicate that the script should not be executed in browsers that support ES6 modules — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.

`src`

This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document. If a `script` element has a `src` attribute specified, it should not have a script embedded inside its tags.

`text`

Like the `textContent`attribute, this attribute sets the text content of the element. Unlike the `textContent` attribute, however, this attribute is evaluated as executable code after the node is inserted into the DOM.

`type`

Indicates the type of script represented. The value of this attribute will be in one of the following categories:

* **Omitted or a JavaScript MIME type:** For HTML5-complient browsers this indicates the script is JavaScript. HTML5 spec urges authors to omit the attribute rather than provided a redundant MIME type. In earlier browsers, this identified the scripting language of the embedded or imported (via the `src` attribute) code. JavaScript MIME types are listed in the specification.
* **`module`:** For HTML5-complient browsers the code is treated as a JavaScript module. Processing of the script contents are not affected by the `charset` and `defer` attributes. For information on using `module`, see ES6 in Depth: Modules.
Experimental
* **Any other value or MIME type:** Embedded content is treated as a data block which won't be processed by the browser. The `src` attribute will be ignored.

Note that in Firefox you can use advanced features such as let statements and other features in later JS versions, by using `type=application/javascript;version=1.8`
Non-standard
. Beware, however, that as this is a non-standard feature, this will most likely break support for other browsers, in particular Chromium-based browsers.

For how to include *exotic programming languages*, read about Rosetta.

### Atributos obsoletos

`charset`
Deprecated

If present, its value must be an ASCII case-insensitive match for "`utf-8`". Both it's unnecessary to specify the `charset` attribute, because documents must use UTF-8, and the `script` element inherits its character encoding from the document.

`language`
Deprecated

Like the `type` attribute, this attribute identifies the scripting language in use. Unlike the `type` attribute, however, this attribute's possible values were never standardized. The `type` attribute should be used instead.

Notas
-----

Scripts without `async` or `defer` attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.

The script should be served with the `text/javascript` MIME type, but browsers are lenient and only block them if the script is served with an image type (`image/*`), a video type (`video/*`), an audio (`audio/*`) type, or `text/csv`. If the script is blocked, an `error (en-US)` is sent to the element, if not a `success (en-US)` event is sent.

Exemplos
--------

```html
<!-- HTML4 and (x)HTML -->
<script type="text/javascript" src="javascript.js"></script>

<!-- HTML5 -->
<script src="javascript.js"></script>
```

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

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

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

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

See also
--------

* `document.currentScript`
* Ryan Grove's <script> and <link> node event compatibility chart


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

<ruby>
======

Resumo
------

O **elemento** \*\*HTML `<ruby>` \*\*representa uma anotação ruby. Anotações ruby são para mostrar a pronúncia de caracteres do Leste Asiático

* *Categorias de conteúdo* Conteúdo de fluxo, conteúdo fraseado, conteúdo palpável.
* *Conteúdo permitido* Conteúdo fraseado.
* *Omissão de tag* None, both the starting and ending tag are mandatory.
* *Elementos pais permitidos* Ver prosa
* *Interface DOM* `HTMLElement` (en-US)
Atributos
---------

Esse elemento somente inclui os atributos globais.

Exemplos
--------

### Exemplo 1: Caracter

```html
<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
```

### Exemplo 2: Palavra

```html
<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
```

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

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

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

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

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

* `<rt>` (en-US)
* `<rp>` (en-US)


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

<head>
======

O elemento **HTML `<head>` providencia informações gerais** (metadados) sobre o documento, incluindo seu título e links para scripts e folhas de estilos.

|  |  |
| --- | --- |
| Categoria de conteúdo | Nenhuma. |
| Conteúdo permitido | Se o elemento é um `<iframe>`

`srcdoc`, ou se a informação
 do título está sendo avaliada desde um nivel alto do protocolo, zero
 ou mais elementos de conteúdo de metadados.

 Por outro lado, um ou mais elementos de conteúdo de metadados onde
 exatamente um é um `<title>` elemento.
  |
| Omissão de tag |
 A tag inicial pode ser omitida se a primeira coisa dentro do head
 elemento é um elemento.

 A tag final pode ser omitida se a primeira coisa seguindo o elemento
 head não é um caractere espaço ou um comentário.
  |
| Elementos parentes permitidos | Um `<html>` elemento, como primeiro filho. |
| DOM interface | `HTMLHeadElement` (en-US) |

Attributos
----------

Estes elementos incluem os atributos globais.

`profile`

A URIs de um ou mais perfis de metadados , separado por espaço em branco.

Exemplo
-------

```html
<html>
  <head>
    <title>Document title</title>
  </head>
</html>
```

Notas
-----

Moderno, HTML5-compatível browsers automaticamente constrói um elemento `<head>` se as tags forem omitidas na marcação. Este comportamento não pode ser garantido por browsers antigos.

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

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

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

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

See also
--------

* Elementos que podem ser usados dentro de um `<head>` element: `<title>`, `<base>`, `<link>`, `<style>`, `<meta>`, `<script>`, `<noscript>`


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

meter
=====

Sumário
-------

O elemento HTML *meter* (`<meter>`) pode representar um valor escalar dentro de um intervalo conhecido ou um valor fracionário.

>
> **Note:** A não ser que o atributo **value** esteja entre 0 e 1(inclusive), o atributo **min** e o atributo **max** devem definir o intervalo de modo que o valor do atributo **value** esteja dentro dele.
>
>
>

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

| Content categories | flow content, phrasing content, Labelable Form-associated content |
| --- | --- |
| Conteúdo permitido | Phrasing content, mas nenhum elemento `meter` descendente. |
| Tag omission | Nenhuma, ambas as tags iniciais e finais são obrigatórias. |
| Elementos pais permitidos | Qualquer elemento que aceite phrasing content. |
| Documento normativo | HTML5, section 4.10.8 |

Atributos
---------

Como todos os elementos HTML, esse elemento suporta attributes.

`value`

O valor numérico atual. Ele deve estar entre os valores mínimos e máximo (o atributo **min** e o atributo **max**) se eles estiverem especificados. Se não especificado ou mal formatado, o valor é 0. Se especificado, mas fora do intervalo dado pelos atributos **min** e **max**, o valor é igual ao extremo do intervalo mais próximo.

`min`

O limite numérico mínimo do intervalo medido. Deve ser menor que o valor máximo (o atributo **max**), se especificado. Se não especificado, o valor mínimo é 0.

`max`

O limite numérico máximo do intervalo medido. Deve ser maior que o valor mínimo (o atributo **min**), se especificado. Se não especificado, o valor máximo é 1.

`low`

O limite numérico máximo da parte inferior do intervalo medido. Deve ser maior que o valor mínimo (o atibuto **min**), e também ser menor que o valor alto e o valor máximo (os atributos **high** e **max**, respectivamente), se estiver especificado. Se não especificado, ou se for menor que o valor mínimo, o valor de **low** é igual ao valor mínimo.

`high`

O limite numérico mínimo da parte superior do intervalo medido. Deve ser menor que o valor máximo (o atibuto **max**), e também ser maior que o valor baixo e o valor mínimo (os atributos **low** e **min**, respectivamente), se estiver especificado. Se não especificado, ou se for maior que o valor máximo, o valor de **high** é igual ao valor máximo.

`optimum`

Esse atributo indica o valor numérico ótimo. Deve estar dentro do intervalo (definido pelos atributos **min** e **max**). Quando com os atributos **low** e **high**, ele indica a região do intervalo qu é considerada preferível. Por exemplo, se estiver entre os atributos **min** e **low**, então a parte inferior do intervalo é considerada como ótima.

`form`

Esse atributo associa o elemento com um elemento `form` que é dono de um elemento `meter`. Por exemplo, um elemento `meter` pode estar mostrando um intervalo correspondente a um elemento `input` do **type**(tipo) *number*. Esse atributo só é utilizado se o elemento `meter` está sendo utilizado como um elemento associado a um formulário; mesmo assim, ele pode se romitido se o elemento for um descendente de um elemento `form`.

Exemplos
--------

### Exemplo simples

```html
<p>
  Aqueça o forno para <meter min="200" max="500" value="350">350 graus</meter>.
</p>
```

No Google Chrome, o medidor aparece como:

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

### Exemplos de intervalos com High e Low

Note que nesse exemplo o atributo **min** foi omitido; isso é permitido, pois ele irá ser, por padrão, 0.

```html
<p>
  Ele recebeu <meter low="69" high="80" max="100" value="84">B</meter> no exame.
</p>
```

No Google Chrome, o medidor aparece como:

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

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

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

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

* `<progress>`


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

<s>
===

O **elemento HTML `<s>`** renderiza um texto tachado ou uma linha cortando o texto. Use o elemento `<s>` para representar texto que não sejam relevante ou que não estam corretos. Não é apropriado o uso do `<s>` indicar edições no texto; para indicar edições no texto utilize `<del>` e `<ins>` (en-US), que são elementos mais apropriados.

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

|  |  |
| --- | --- |
| Categorias de conteúdo | Conteúdo fraseado
 ou
 conteúdo de fluxo.
  |
| Conteúdo permitido | Conteúdo freaseado. |
| Omissão de Tag | Nenhuma, as tags de abertura e de fechamento são obrigatórias. |
| Pais permitidos |
 Qualquer elemento que aceite
 conteúdo fraseado.
  |
| Funções ARIA permitidas | Todas |
| DOM interface | `HTMLElement` (en-US) |

Atributos
---------

Esse atributo incluí atributos globais.

>
> **Note:** **Notas de implementação:** Até Gecko 1.9.2 inclusive, Firefox implementa `HTMLSpanElement` para a interface deste elemento.
>
>
>

Exemplo
-------

```xml
<s>Hoje é um dia especial: Salmon</s> ESGOTADO<br>
<span style="text-decoration:line-through;">Hoje é um dia especial:
  Salmon</span> ESGOTADO
```

### Resultado

~~Hoje é um dia especial: Salmão~~ ESGOTADO
 ~~Hoje é um dia especial: Salmão~~ ESGOTADO

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

A presença do elemento s não é anunciada pela maioria das tecnologias de leitura de tela em sua configuração padrão. Isso pode ser anunciado usando a propriedade CSS `content`, junto com os pseudoelementos `::before` and `::after`.
```

s::before,
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [início do texto utilizado] ";
}

s::after {
  content: " [fim do texto utilizado] ";
}
```

Algumas pessoas que usam leitores de tela que desativam deliberadamente o anúncio de conteúdo que criados com muita verbosidade. Por esse motivo, é importante não abusar dessa técnica e aplicá-la apenas nas situações em que o desconhecimento do conteúdo foi eliminado e que afetaria negativamente a compreensão.

* Nota curta sobre como deixar sua marca (mais acessível) | O Grupo Paciello
* Ajustando estilos de texto | Adrian Roselli
Especificações
--------------

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

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

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

Veja mais
---------

* O elemento `<strike>` (en-US), é o alter ego de `<s>` é obsoleto e não deve mais ser usado em sites.
* Elemento `<del>` deve ser usado quando o conteúdo for *deletado*.
* O CSS `text-decoration-line` (en-US) propriedade deve ser usada para alcançar o antigo aspecto visual do elemento `<s>`.


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

details
=======

Sumário
-------

O elemento HTML *details* (`<details>`) é usado como uma ferramenta de onde o usuário irá obter informações adicionais.

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

| Conteúdo permitido | Um elemento `<summary>` seguido por flow content |
| --- | --- |
| Omissão de tag | Nenhuma, tanto as tas iniciais quanto as finais são obrigatórias. |
| Elementos pais permitidos | Qualquer elemento que aceite flow content. |
| Documento normativo | HTML5, section 4.11.1 |

Atributos
---------

Como todos os elementos HTML, esse elemento aceita os global attributes.

`open`

Esse atributo Booleano indica se os detalhes serão mostrados para o usuário ao carregar a página. Se omitido os detalhes não serão mostrados.

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

Esse elemento implementa a interface`HTMLDetailsElement`.

Exemplos
--------

```html
<details>
  <summary>Alguns detalhes</summary>
  <p>Mais informações sobre os detalhes.</p>
</details>
```

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

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

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

* `<summary>`


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

<optgroup>
==========

Sumário
-------

Em um Formulário Web, o elemento HTML `<optgroup>` cria um agrupamento de opções dentro do elemento `<select>`.

* *Categorias de conteúdo (en-US)* Nenhuma.
* *Conteúdo permitido* Nenhum ou mais elementos do tipo `<option>`.
* *Omissão da tag* A abertura da tag é obrigatória. O fechamento da tag é opcional se o elemento é imediatamente seguido de de outro elemento <optgroup>, ou se o elemento pai não tiver nenhum conteúdo.
* *Elemento pai permitido* Um elemento `<select>`.
* *Interface DOM* `HTMLOptGroupElement` (en-US)

**Nota:** Elementos do tipo **optgroup** não podem ser aninhados.

Atributos
---------

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

`disabled`

Se este atributo booleano for definido, nenhum dos itens neste **optgroup** poderá ser selecionado. Muitos navegadores marcam como cinza e não permitem que o elemento receba nenhum evento de navegação, como cliques do mouse ou foco.

`label`

É o nome do optgroup, é o que os navegadores irão exibir como rótulo. Este atributo é obrigatório se o elemento for usado.

Exemplo
-------

```html
<select>
  <optgroup label="Grupo 1">
    <option>Opção 1.1</option>
  </optgroup>
  <optgroup label="Grupo 2">
    <option>Opção 2.1</option>
    <option>Opção 2.2</option>
  </optgroup>
  <optgroup label="Grupo 3" disabled>
    <option>Opção 3.1</option>
    <option>Opção 3.2</option>
    <option>Opção 3.3</option>
  </optgroup>
</select>
```

### Resultado

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

| Specification |
| --- |
| HTML Standard # the-optgroup-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 formularios relacionados: `<form>` (en-US), `<legend>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<option>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>` e `<meter>`.


<em>: O elemento de ênfase - HTML: Linguagem de Marcação de Hipertexto

<em>: O elemento de ênfase
==========================

O **elemento** **HTML** **`<em>`** marca o texto que tem ênfase. O elemento <em> pode ser aninhado, com cada nível de aninhamento indicando um grau maior de ênfase.

|  |  |
| --- | --- |
| Categorias de conteúdo | Conteúdo fluído,
 conteúdo de frase, conteúdo palpável
  |
| Conteúdo permitido | Conteúdo de frase. |
| Omissão de tag | None, both the starting and ending tag are mandatory. |
| Pais permitidos |
 Qualquer elemento que aceita
 conteúdo de frase.
  |
| Funções de ARIA permitidas | Qualquer uma |
| Interface DOM | `HTMLElement` (en-US) Até o Gecko 1.9.2 (Firefox 4)
 incluso, o Firefox implementa a
 interface`HTMLSpanElement` para este elemento.
  |

Atributos
---------

Este elemento inclui somente os atributos globais.

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

Este elemento geralmente é mostrado no tipo itálico. Contudo, não deve ser usado simplesmente para aplicar estilo itálico; use o estilo CSS para esse propósito. Use o elemento `<cite>` para marcar o título de um trabalho (book, play, song, etc.); também é geralmente estilizado com tipo itálico, mas possui significado diferente. Use o elemento `<strong>` para marcar o texto que tem importância maior do que o texto que está em volta.

Exemplo
-------

O elemento `<em>` é frequentemente usado para indicar um contraste implícito ou explícito.

```html
<p>
  Em HTML 5, o que anteriormente era chamado de conteúdo
  <em>block-level</em> agora é chamado de conteúdo <em>flow</em> .
</p>
```

### Resultado

Em HTML5, o que anteriormente era chamado de conteúdo block-level (nível de bloco) agora é chamado de *flow* content (conteúdo fluído).

<i> vs <em>
-----------

É frequentemente confuso para novos desenvolvedores porque há vários elementos para expressar a ênfase em algum texto. `<i>` e `<em>` são talvez uns dos mais comuns. Por que usar `<em></em>` vs `<i></i>`? Eles produzem o mesmo resultado, certo?

Não exatamente. O resultado visual é, por padrão, o mesmo - ambas as tags renderizam seu conteúdo em itálicos. Mas o significado semântico é diferente. A tag `<em>` representa ênfase importante de seus conteúdos, enquanto que a tag `<i>` representa o texto que é iniciado de uma prosa, como uma palavra estrangeira, pensamentos de um personagem ficcional, ou quando o texto se refere á definição de uma palavra em vez de representar seu significado semântico. (O título de um trabalho, tal como o nome de um livro ou filme, deve usar `<cite>`.)

Um exemplo para `<em>` poderia ser: "Apenas já faça isso!", ou: "Nós temos que fazer algo acerca disso". Uma pessoa ou software lendo o texto pronunciaria as palavras em itálico com uma ênfase.

Um exemplo para `<i>` poderia ser: "A *Rainha Mary* velejou na noite passada". Aqui, não é adicionada ênfase ou importância na palavra "Rainha Mary". É meramente indicado que o objeto em questão não é uma rainha chamada Mary, mas um navio chamado *Rainha Mary*. Outro exemplo para `<i>` poderia ser: "A palavra *o* é um artigo".

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

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

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

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

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

* `<i>`


<dialog>: O elemento Dialog - HTML: Linguagem de Marcação de Hipertexto

<dialog>: O elemento Dialog
===========================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
O **elemento HTML `<dialog>`** representa uma caixa de diálogo ou outro componente interativo, tal como um inspetor ou janela.

|  |  |
| --- | --- |
| Categorias de conteúdo | Flow content,
 sectioning root |
| Permitted content | Flow content |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Qualquer elemento que aceite
 flow content |
| Permitted ARIA roles | `alertdialog (en-US)` |
| DOM interface | `HTMLDialogElement` (en-US) |

Atributos
---------

Este elemento inclui os atributos globais. O atributo `tabindex` não deve ser utilizado no elemento `<dialog>`.

`open`

Indica que o Dialog está ativo e pronto para uso. Quando o atributo `open` não for definido, ele não deve ser mostrado ao usuário.

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

* Elementos de formulário (`<form>`) podem ser integrados dentro de um elemento `<dialog>`, especificando-os com o atributo `method="dialog"`. Quando esse formulário é submetido, o diálogo é fechado com o seu `returnValue` (en-US) (valor de retorno) configurado para o valor botão `submit` do formulário que foi usado.
* O pseudo-elemento CSS `::backdrop` pode ser usado para estilizar o fundo de um elemento `<dialog>`, como um escurecer um conteúdo inacessível enquanto uma janela `modal` está aberta, por exemplo. O backdrop(pano de fundo) só está disponível quando um diálogo é exibido com `HTMLDialogElement.showModal()` (en-US).
Exemplos
--------

### Exemplo simples

```html
<dialog open>
  <p>Olá para todos!</p>
</dialog>
```

### Exemplo Avançado

Este exemplo abre uma caixa de diálogo contendo um formulário quando o botão "Update details" é clicado.

#### HTML

```html
<!-- Um dialog simples contendo um form -->
<dialog open id="favDialog">
  <form method="dialog">
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>
```

#### JavaScript

```js
(function () {
  var updateButton = document.getElementById("updateDetails");
  var cancelButton = document.getElementById("cancel");
  var favDialog = document.getElementById("favDialog");

  // O botão Update abre uma Dialog
  updateButton.addEventListener("click", function () {
    favDialog.showModal();
  });

  // O botão cancelButtom fecha uma Dialog
  cancelButton.addEventListener("click", function () {
    favDialog.close();
  });
})();
```

### Resultado

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

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

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

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

Polyfills
---------

Inclua este polyfill para suportar browsers antigos.

dialog-polyfill

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

* O `close` evento
* O `cancel` evento
* Guia de formulários HTML.


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

<dt>
====

Sumário
-------

O elemento **HTML `<dt>`** (ou Elemento HTML de Definição de Termo) identifica um termo na lista de definição. Este elemento pode ocorrer somente em um elemento filho de `<dl>`. Geralmente seguido por um elemento `<dd>`; ou multiplos `<dt>` na mesma linha indicam vários termos sendo definidos pelo próximo element `<dd>`.

* *Content categories (en-US)* Vazio.
* *Permitted content*{{todo}} Flow content (en-US), but with no `<header>`, `<footer>`, sectioning content or heading content descendants.
* *Tag omission* Must have a start tag. The end tag may be omitted if this element is immediately followed by another `<dd>` element, or if there is no more content in the parent element.
* *Permitted parent elements* Before a `<dt>` or a `<dd>` element, inside a `<dl>`.
* *DOM interface* `HTMLElement` (en-US) Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
Atributos
---------

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

Exemplo
-------

Para exemplo veja definição de lista.

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

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

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

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

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

* `<dd>`, `<dl>`


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

<b>
===

Resumo
------

O **elemento HTML <b>** representa um intervalo de texto estilísticamente diferente do texto normal, sem transmitir qualquer importância ou relevância. Ele é geralmente usado para destacar palavras-chaves em um resumo, nomes de produtos em um comentário ou outros vãos de texto cuja a apresentação típica seria negrito. Outro exemplo de seu uso é como marcação da frase principal de cada paragrafo de um artigo.

>
> **Note:** **Notas de Uso:**
>
>
> * Não confunda o elemento <b> com os elementos `<strong>` , `<em>` ou `<mark>` . O elemento `<strong>` representa um texto com importância, `<em>` coloca alguma ênfase no texto e o elemento `<mark>` representa o texto relevante. O elemento <b> não transmite essa informação semântica especial. Você deve usá-lo apenas quando os outros elementos citados não se encaixam na situação.
> * Também não é recomendado marcar títulos de cabeçalhos usando o elemento <b>. Para isso, use as tags `<h1>` (en-US) até `<h6>` (en-US). usando essas tags você terá liberdade de mudar o estilo padrão dos elementos e não ficará preso ao negrito do elemento <b>.
> * É uma boa prática usar o atributo de classe <b>, a fim de transmitir informação semântica adicional. Isso facilita o desenvolvimento de várias "stylings" de um documento web, sem a necessidade de alterar o seu código HTML.
> * Historicamente, o elemento <b> foi criado para fazer o texto ficar em negrito. Porém as informações de estilo ficou obsoleta desde o HTML4, de modo que significado da tag <b> foi alterado.
> * Se não a propósito semântico sobre o uso do elemento <b>, usar a propriedade css font-weight (en-US) com algum volume seria uma escolha melhor para fazer o texto ficar em negrito.
>
>
>

* *Content categories (en-US)* Flow content (en-US), phrasing content (en-US), palpable content.
* *Permitted content* Phrasing content (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* `HTMLElement` (en-US) Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the `HTMLSpanElement` interface for
Atributos
---------

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

Exemplo
-------

```html
<p>
  Este artigo descreve vários <b>níveis de texto</b>. Ele explica a utilização
  do elemento em um documento <b>HTML</b>.
</p>
Palavras-chave são exibidas com o estilo padrão do elemento
<b>, provavelmente em negrito.</b>
```

### Resultado

Este artigo descreve vários **níveis de texto**. Ele explica a utilização do elemento em um documento **HTML**.

Palavras-chave são exibidas com o estilo padrão do elemento <b>, provavelmente em negrito.

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

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

Navegadores Compatíveis
-----------------------

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

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

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


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

<cite>
======

O **elemento** **HTML <cite>** representa uma referência a um trabalho artístico. Deve incluir o título do trabalho ou uma URL de referência, que pode ser em uma forma abreviada de acordo com as convenções usadas para a adição dos metadados de citação.

|  |  |
| --- | --- |
| Content categories (en-US) | Flow content (en-US),
 phrasing content (en-US), palpable content.
  |
| Permitted content | Phrasing content (en-US). |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content (en-US).
  |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` (en-US) Up to Gecko 1.9.2 (Firefox 4)
 inclusive, Firefox implements the
 `HTMLSpanElement` interface for this element.
  |

Atributos
---------

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

Notas
-----

* Um trabalho criativo deve conter a citação de um livro,um documento,um ensaio,um poema,um filme,um programa de televisão,um video game,uma escultura,uma pintura,uma produção cinematográfica,um jogo,uma opera,um musical,uma exibição,um relatório de um caso legal,um programa de computador,um website,uma página da web,um post de um blog ou comentário,um post em um forum ou um comentário no mesmo,um tweet,uma obra ou discurso,etc.
* O W3C específica alguns estados para referenciar um trabalho criativo que deve incluir o nome do autor,enquanto a WHATWG declarou que não deve ser incluso o nome do autor sob nenhuma circustância.
* Use o atributo `cite` em um elemento `<blockquote>` ou `<q>` para referenciar uma fonte online.
* Para evitar que o itálico padrão do estilo seja usado pelo elemento <cite> use a propiedade `font-style` (en-US) do CSS.
Exemplo
-------

```html
Mais informações podem ser encontradas em <cite>[ISO-0000]</cite>.
```

A saída do HTML acima:

Mais informações podem ser encontradas em [ISO-0000].

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

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

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

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

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

* O elemento `<blockquote>` é para citações longas.
* O elemento `<q>` é para citações curtas ou na mesma linha.


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

<link>
======

Resumo
------

O **Elemento HTML *<link>*** especifica as relações entre o documento atual e um recurso externo. Possíveis usos para este elemento incluem a definição de uma estrutura relacional para navegação. Este elemento é mais usado para vincular as folhas de estilo.

* *Categorias de conteúdo* Metadata content. If `itemprop` is present: flow content phrasing content
* *Conteúdo permitido* None, it is an empty element (en-US).
* *Omissão de tag* As it is a void element, the start tag must be present and the end tag must not be present
* *Elementos pai permitidos* Any element that accepts metadata elements. If `itemprop` is present: any element that accepts phrasing content.
* *Interface de DOM* `HTMLLinkElement` (en-US)
Atributos
---------

Este elemento inclui os atributos globais.

`as`

Esse atributo é usado apenas quando `rel="preload"` foi enviado no elemento `<link>`. Especifica o tipo de conteúdo carregado pelo `<link>`, que é necessário para a priorização do conteúdo, solicitação de correspondência, aplicação de política de segurança de conteúdo correta, e configuração do cabeçalho de pedido `Accept` correta.

`charset`

Este atributo define a codificação de caracteres do recurso vinculado. O valor é umespaço e/ou lista delimitada por vírgulas de conjuntos de caracteres, conformedefinido na RFC 2045. O valor padrão é ISO-8859-1.

**Nota:** Este atributo é obsoleto em HTML5 e **não deve ser usada por autores**. Para atingir seu efeito, use o cabeçalho HTTP Content-Type sobre o recurso vinculado.

`crossorigin`

Este atributo enumerado indica se a busca da imagem relacionada deve ser feita usando CORS ou não. I-magens de CORS habilitado podem ser reutilizadas no elemento `<canvas>` sem ser conta-minado. Os valores permitidos são:

"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) is 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 used 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.

`disabled`
Non-standard

Este atributo é usado para desativa uma relação com o link. Em conjunto com o script, esse atributo poderia ser usado para ligar e desligar várias relações com stylesheets.

**Nota:** Embora, não haja nenhum atributo desativado no padrão HTML, há um atributo desabilitado no `HTMLLinkElement` DOM object.

The use of `disabled` as an HTML attribute is non-standard and only used by some browsers (W3 #27677). **Do not use it**. To achieve a similar effect, use one of the following techniques:

* If the `disabled` attribute has been added directly to the element on the page, do not include the `<link>` element instead;
* Set the `disabled` **property** of the `StyleSheet` DOM object via scripting.

`href`

Esse atributo especifica a URL do recurso vinculado. Uma URL pode ser absolute or relative.

`hreflang`

Esse atributo indica o idioma do recurso vinculado. É meramente consultivo. Os valores permitidos são determindaos por BCP47 para HTML5 e por RFC1766 para HTML 4. Use esse atributo se apenas os atributos `href` estiverem presentes.

`media`

This attribute specifies the media which the linked resource applies to. Its value must be a media query (en-US). This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on.

**Nota:** In HTML 4, this can only be a simple white-space-separated list of media description literals, i.e., media types and groups (en-US), where defined and allowed as values for this attribute, such as `print`, `screen`, `aural`, `braille`. HTML5 extended this to any kind of media queries (en-US), which are a superset of the allowed values of HTML 4.

* Browsers not supporting the CSS3 Media Queries (en-US) won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.

`methods`
Non-standard

The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the **title** attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. See Methods Property (MSDN).

`rel`

This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the link types values (en-US). The most common use of this attribute is to specify a link to an external style sheet: the **rel** attribute is set to `stylesheet`, and the **href** attribute is set to the URL of an external style sheet to format the page. WebTV also supports the use of the value `next` for **rel** to preload the next page in a document series.

`rev`

The value of this attribute shows the relationship of the current document to the linked document, as defined by the `href` attribute. The attribute thus defines the reverse relationship compared to the value of the **rel** attribute. Link types values (en-US) for the attribute are similar to the possible values for `rel`.

**Nota:** This attribute is obsolete in HTML5. **Do not use it**. To achieve its effect, use the `rel` attribute with the opposite link types values (en-US), e.g. made should be replaced by author. Also this attribute doesn't mean *revision* and must not be used with a version number, which is unfortunately the case on numerous sites.

`sizes`

This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the `rel` contains the icon link types value (en-US). It may have the following values:

* `any`, meaning that the icon can be scaled to any size as it is in a vector format, like `image/svg+xml`.
* a white-space separated list of sizes, each in the format `<width in pixels>x<height in pixels>` or `<width in pixels>X<height in pixels>`. Each of these sizes must be contained in the resource.

**Nota:** Most icon formats are only able to store one single icon; therefore most of the time the `sizes` attribute contains only one entry.
 MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).

`target`
Non-standard

Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.

`type`

This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as **text/html**, **text/css**, and so on. The common use of this attribute is to define the type of style sheet linked and the most common current value is **text/css**, which indicates a Cascading Style Sheet format.

Exemplos
--------

### Incluindo um stylesheet

Para incluir um stylesheet em uma página, use a seguinte syntax:

```html
<link href="style.css" rel="stylesheet" />
```

### Fornecimento de stylesheets alternativas

Você também pode especificar stylesheet alternativas (en-US).

O usuário pode escolher qual stylesheet usar, escolhendo no View>Page Style menu. Isso fornece uma maneira para os usuários verem várias versões de uma página.

```html
<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />
```

### Stylesheet eventos carregados

Você pode determinar quando um stylesheet foi carregado observando um `load` event em ação; Da mesma forma, você pode detectar se ocorreu algum erro ao processar uma stylesheet, observando um `error` event:

```html
<script>
 function sheetLoaded() {
 // Do something interesting; the sheet has been loaded
 }

 function sheetError() {
 alert("An error occurred loading the stylesheet!");
 }
</script>

<link
 rel="stylesheet"
 href="mystylesheet.css"
 onload="sheetLoaded()"
 onerror="sheetError()" />
```

**Nota:** O `load` event é carregado quando a stylesheet e quando todo o conteúdo importado foi carregado e analisado, e imediatamente antes que styles comecem a ser aplicados ao conteúdo.

Notas
-----

* Uma tag `<link>` pode ocorrer apenas no elemento head; No entanto, pode haver várias ocorrências de `<link>`.
* HTML 3.2 define apenas os atributos **href**, **rel**, **rev**, e **title** para o elemento link.
* HTML 2 define os atributos **href**, **methods**, **rel**, **rev**, **title**, e **urn** para o elemento `<link>`. O **methods** e **urn** foram atributos posteriormente removidos das especificações.
* As especificações HTML e XHTML definem manipulações de eventos para o elemento `<link>`, mas não está claro como eles seriam usados.
* Sob XHTML 1.0, elementos vazios como `<link>` requerem uma barra diagonal: `<link />`.
Especificações
--------------

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

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

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

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

* Ryan Grove's <script> and <link> node event compatibility chart


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

<label>
=======

Resumo
------

Um **elemento** \*\*HTML `<label>` \*\*representa uma legenda para um item em uma interface de usuário. Ele pode estar associado com um elemento de controle, colocando este dentro do elemento `label`, ou usando o atributo `for`. Tal controle é chamado o *controle etiquetado* do elemento etiqueta. Um input pode ser associado a diversas etiquetas (<label>s).

* *As categorias de conteúdo* Flow content, phrasing content, interactive content, form-associated element, palpable content.
* *conteúdo permitido* Phrasing content, mas há elementos do rótulo descendente. Nenhum outro do que o controle rotulado elementos labelable são permitidos.
* *Tag omissão* None, both the starting and ending tag are mandatory.
* *Elementos pai permitidas* Qualquer elemento que aceita phrasing content.
* *DOM interface* `HTMLLabelElement` (en-US)
Atributos
---------

A tecla de atalho para acessar este elemento a partir do teclado.

`accesskey`

A tecla de atalho para acessar este elemento a partir do teclado.

`for`

O ID de um elemento de formulário relacionados com labelable no mesmo documento como o elemento label. O primeiro elemento tal no documento com uma ID correspondente ao valor do atributo é o controle marcado for este elemento etiqueta.

**Nota:** Um elemento etiqueta pode ter tanto um for o atributo e um elemento de controlo continham, enquanto os pontos de atributo para o elemento de controlo contido.

`form`

O elemento de forma que o elemento label está associado a (seu proprietário formulário). O valor do atributo deve ser uma identificação de um `<form>` (en-US) elemento no mesmo documento. Se este atributo não for especificado, este elemento <label> deve ser um descendente de uma `<form>` (en-US) elemento. Este atributo permite que você coloque elementos do rótulo em qualquer lugar dentro de um documento, e não apenas como descendentes de seus elementos de formulário.

Exemplo
-------

### Exemplo simples de label

```html
<label>Click me <input type="text" id="User" name="Name" /></label>
```

### Usando o atributo "for"

```html
<label for="User">Click me</label> <input type="text" id="User" name="Name" />
```

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

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

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

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

See also
--------

* Other form-related elements: `<form>` (en-US), `<button>`, `<datalist>`, `<legend>`, `<select>`, `<optgroup>`, `<option>`, `<textarea>`, `<fieldset>`, `<output>`, `<progress>` and `<meter>`.