<input type="time"> - HTML: Linguagem de Marcação de Hipertexto

<input type="time">
===================

Elementos `<input>` do tipo **`time`** (hora) criam campos de inserção que permitem que o usuário digite horários facilmente (horas e minutos e, opcionalmente, segundos).

A interface de usuário deste tipo de campo varia de navegador para navegador. A maioria dos navegadores modernos é compatível com ele exceto pelo Safari, o único grande navegador que ainda não o implementou; no Safari (e em qualquer outro navegador que ainda não suporte `<time>`), ele regride para `<input type="text">` (en-US).

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

Aparência
---------

### Chrome e Opera

No Chrome/Opera, o campo de `time` é simples, com espaços onde o usuário pode inserir horas e minutos (no formato 24 horas), além de setas para cima e para baixo que servem para, respectivamente, incrementar e decrementar o componente atualmente selecionado. Um botão "X" também é apresentado para limpar o conteúdo do campo.

![](/pt-BR/docs/Web/HTML/Element/input/time/chrome-time.png)

### Firefox

O campo de `time` do Firefox é bem parecido com o do Chrome, exceto pela ausência das setas para cima e para baixo e por estar no formato 12 horas (com um espaço adicional para inserir AM ou PM).

![](/pt-BR/docs/Web/HTML/Element/input/time/firefox-time.png)

### Edge

O campo de `time` do Edge é melhor elaborado, abrindo um seletor de hora e minuto com rolagem infinita. Assim como o Chrome, ele também adota o formato 24 horas:

![](/pt-BR/docs/Web/HTML/Element/input/time/edge-time.png)

|  |  |
| --- | --- |
| **Value** | Uma `DOMString` representando um horário, ou vazia. |
| **Eventos** | `change (en-US)` e `input (en-US)`. |
| **Atributos comuns suportados** | `autocomplete`,
 `list`,
 `readonly` e
 `step`.
  |
| **Atributos IDL** | `value`, `valueAsDate`,
 `valueAsNumber` e `list`.
  |
| **Métodos** | `select()`,
 `stepDown()` (en-US)
 e `stepUp()` (en-US).
  |

Valor
-----

Uma `DOMString` contendo o valor do horário inserido no campo. Você pode definir um valor padrão para o campo incluindo um horário válido no atributo `value` ao criar o elemento `<input>`, tipo assim:

```html
<label for="hora-cons">Escolha o horário da consulta: </label>
<input id="hora-cons" type="time" name="hora-cons" value="13:30" />
```

Você também pode obter e definir o valor do campo via JavaScript usando a propriedade `HTMLInputElement.value`, por exemplo:

```js
var campoHora = document.querySelector('input[type="time"]');
campoHora.value = "15:30";
```

### Formato do valor do horário

O `value` do campo de `time` está sempre no formato 24 horas: `"hh:mm"`, não importa o formato usado na inserção. Esse formato muitas vezes é escolhido baseado no idioma/local do usuário (ou mesmo pelo agente de usuário). Se o horário incluir segundos (veja Usando o atributo step), o formato sempre é `"hh:mm:ss"`.

No próximo exemplo, você pode ver o modo como o valor do campo de horário varia entre o que foi digitado e o que ele retorna.

Mas antes, vamos dar uma conferida no HTML. Ele é bem simpless, contando com label (rótulo) e input (campo) do jeito que já vimos antes, com a adição de um elemento `<p>` com um `<span>` que mostra o valor do campo de `time`:

```html
<form>
  <label for="horaInicio">Hora de início: </label>
  <input type="time" id="horaInicio" />
  <p>
    Valor do campo <code>time</code>:
    <code> "<span id="value">n/a</span>"</code>.
  </p>
</form>
```

No código JavaScript, chamamos um método que monitora o evento `input (en-US)`, que é disparado sempre que o conteúdo de um elemento `<input>` muda. Toda vez que ele dispara, o conteúdo do `<span>` é substituído pelo novo valor do campo de horário.

```js
var horaInicio = document.getElementById("horaInicio");
var valueSpan = document.getElementById("value");

startTime.addEventListener(
  "input",
  function () {
    valueSpan.innerText = startTime.value;
  },
  false,
);
```

Quando um formulário que inclui um campo de `time` é enviado, o valor é codificado antes de ser incluído nos dados do formulário. Nesse caso, o valor correspondente ao campo de horário sempre estará no formato `"name=hh%3Amm"`, ou `"name=hh%3Amm%3ass"` caso ele conte com segundos (veja Usando o atributo step).

Usando campos de horário
------------------------

Apesar de que, entre os campos dos tipos data e horário, o de horário tenha a maior presença entre os navegadores, ele ainda não tem presença universal. Logo, é provável que você vá precisar fornecer uma maneira alternativa de se inserir data e hora, para que os usuários do Safari (e de outros navegadores sem suporte) ainda consigam inserir horários facilmente.

A seguir, vamos conferir casos de uso básicos e complexos do `<input type="time">`, além de dar conselhos sobre como contornar a questão dos navegadores na seção (see Lidando com navegadores sem suporte).

### Usos básicos de horário

O caso de uso mais simples do `<input type="time">` envolve uma combinação básica dos elementos `<input>` e `<label>` como vemos abaixo:

```html
<form>
  <label for="hora-cons">Escolha o horário da consulta: </label>
  <input id="hora-cons" type="time" name="hora-cons" />
</form>
```

### Controlando o tamanho do campo

O elemento `<input type="time">` não é compatível com atributos de dimensionamento de formulários tais como `size`, já que horários quase sempre tem o mesmo número de caracteres. Você terá que recorrer ao CSS para ajustar tamanhos.

### Usando o atributo step

Você pode usar o atributo `step` para variar a quantidade de tempo pulada sempre que o horário for incrementado/decrementado (por exemplo, para fazer com que o horário avançe ou volte em 10 minutos ao clicar nas setinhas ao lado do campo).

>
> **Note:** Esta propriedade pode se comportar de maneira inesperada em alguns navegadores. Por isso, ela não é 100% confiável.
>
>
>

O atributo recebe um valor igual ao número de segundos que você quer que o valor seja incrementado - o valor padrão é 60 segundos, ou 1 minuto. Se você especificar um valor menor que 60 segundos (1 minuto), o campo `time` vai mostrar uma área de inserção de segundos junto com as de hora e minuto:

```html
<form>
  <label for="hora-cons">Escolha o horário da consulta: </label>
  <input id="hora-cons" type="time" name="hora-cons" step="2" />
</form>
```

No Chrome e no Opera, que são os únicos navegadores que mostram botões de setas para aumentar/diminuir o valor, clicar nas setinhas muda o valor em dois segundos, mas não afeta as horas e minutos. Para poder usar essa funcionalidade com minutos e horas, você precisa especificar o número de minutos (ou horas) em segundos (por exemplo, 120 para 2 minutos, ou 7200 para 2 horas).

No Firefox, não são mostrados botões de setas; logo, o valor de `step` não é usado. No entanto, adicionar esse atributo *por si só* já adiciona a área de inserção de segundos ao lado da de minutos.

O valor de `step` parece não ter efeito no Edge.

>
> **Note:** Ao que parece, usar o atributo `step` faz com que a validação não funcione adequadamente (como podemos ver na seção seguinte).
>
>
>

Validação
---------

Por padrão, `<input type="time">` não aplica nenhum tipo de validação nos valores inseridos (fora o próprio agente de usuário impedir que sejam inseridos valores diferentes de horários). Isso é útil (considerando que o agente de usuário seja completamente compatível com campos do tipo `time`), mas nem sempre devemos esperar que o valor desse campo seja realmente um horário, já que ele pode ser uma string vazia (`""`), o que é permitido. Também é possível que o valor se pareça com um horário válido, mas que esteja incorreto, como `"25:05"`.

### Definindo horários mínimo e máximo

Você pode usar os atributos `min` e `max` para restringir a faixa de horário válida que o usuário pode escolher. No seguinte exemplo, definimos `12:00` como o horário mínimo e `18:00` como o horário máximo:

```html
<form>
  <label for="hora-cons"
 >Escolha o horário da consulta (aberto das 12:00 às 18:00):
  </label>
  <input id="hora-cons" type="time" name="hora-cons" min="12:00" max="18:00" />
  <span class="validacao"></span>
</form>
```

Aqui está o CSS usado no exemplo acima. Nele, fazemos uso das propriedades CSS `:valid` e `:invalid` para estilizar o campo com base na validade ou não do conteúdo atual dele. Tivemos que colocar os ícones em um `<span>` ao lado do campo, e não no campo em si, porque no Chrome o conteúdo gerado é colocado denteo do campo do formulário e não pode ser efetivamente mostrado ou estilizado.

```css
div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span:after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

O resultado disso é que:

* Apenas horários entre 12:00 e 18:00 serão vistos como válidos; horários fora dessa faixa serão tratados como inválidos.
* Dependendo do navegador usado, você pode perceber que os horários fora da faixa especificada não podem nem mesmo ser selecionados pelo seletor de hora (ex.: Edge).
### Tornando campos de horário obrigatórios

Além do mais, você pode usar o atributo `required` para tornar obrigatória a inserção de um horário. Como resultado, os navegadores compatíves irão mostrar um erro se você tentar enviar um horário fora da proporção adequada ou que esteja em branco.

Vamos ver um exemplo. Nele, colocamos um horário mínimo e um máximo, além de tornarmos o campo obrigatório.

```html
<form>
  <div>
    <label for="hora-cons"
 >Escolha o horário da consulta (aberto das 12:00 às 18:00):
    </label>
    <input
 id="hora-cons"
 type="time"
 name="hora-cons"
 min="12:00"
 max="18:00"
 required />
    <span class="validacao"></span>
  </div>
  <div>
    <input type="submit" value="Enviar formulário" />
  </div>
</form>
```

Se você tentar enviar o formulário com um horário incompleto (ou com um horário fora da faixa válida), o navegador vai mostrar um erro. Experimente brincar com esse exemplo agora:

Here's a screenshot for those of you who aren't using a browser that supports `time` inputs:

![](/pt-BR/docs/Web/HTML/Element/input/time/firefox-validation-message.png)

>
> **Warning:** **Important**: HTML form validation is *not* a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).
>
>
>

Handling browser support
------------------------

As mentioned above, Safari and a few other, less common, browsers don't yet support time inputs natively. In general, otherwise, support is good — especially on mobile platforms, which tend to have very nice user interfaces for specifying a time value. For example, the `time` picker on Chrome for Android looks like this:

![](/pt-BR/docs/Web/HTML/Element/input/time/chrome-android-time.png)

Browsers that don't support time inputs gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

The second problem is the more serious; as mentioned previously, `time` inputs' values are always normalized to the format `hh:mm` or `hh:mm:ss`. With a text input, on the other hand, by default the browser has no idea of what format the time should be in, and there multiple ways in which people write times, such as:

* `3.00 pm`
* `3:00pm`
* `15:00`
* `3 o'clock in the afternoon`
* etc.

One way around this is to put a `pattern` attribute on your `time` input. Even though the `time` input doesn't use it, the `text` input fallback will. For example, try viewing the following demo in a browser that doesn't support time inputs:

```html
<form>
  <div>
    <label for="appt-time"
 >Choose an appointment time (opening hours 12:00 to 18:00):
    </label>
    <input
 id="appt-time"
 type="time"
 name="appt-time"
 min="12:00"
 max="18:00"
 required
 pattern="[0-9]{2}:[0-9]{2}" />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>
```

If you try submitting it, you'll see that non-supporting browsers now display an error message (and highlight the input as invalid) if your entry doesn't match the pattern `nn:nn`, where `n` is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates that follow the pattern.

Then there's the problem of the user having no idea exactly what format the time is expected to be in.
```

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span:after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

The best way to deal with times in forms in a cross-browser way, for the time being, is to get the user to enter the hours and minutes (and seconds if required) in separate controls (`<select>` elements are popular; see below for an example), or use JavaScript libraries such as the jQuery timepicker plugin.

Examples
--------

In this example, we create two sets of interface elements for choosing times: a native picker created with `<input type="time">`, and a set of two `<select>` elements for choosing hours/minutes in older browsers that don't support the native input.

The HTML looks like so:

```html
<form>
  <div class="nativeTimePicker">
    <label for="appt-time"
 >Choose an appointment time (opening hours 12:00 to 18:00):
    </label>
    <input
 id="appt-time"
 type="time"
 name="appt-time"
 min="12:00"
 max="18:00"
 required />
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">
    Choose an appointment time (opening hours 12:00 to 18:00):
  </p>
  <div class="fallbackTimePicker">
    <div>
      <span>
        <label for="hour">Hour:</label>
        <select id="hour" name="hour"></select>
      </span>
      <span>
        <label for="minute">Minute:</label>
        <select id="minute" name="minute"></select>
      </span>
    </div>
  </div>
</form>
```

The hour and minutes values for their `<select>` elements are dynamically generated.
```

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span:after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports `<input type="time">`, we create a new `<input>` element, set its `type` to `time`, then immediately check what its type is set to — non-supporting browsers will return `text`, because the `time` type falls back to type `text`. If `<input type="time">` is not supported, we hide the native picker and show the fallback picker UI (`<select>`s) instead.

```js
// define variables
var nativePicker = document.querySelector(".nativeTimePicker");
var fallbackPicker = document.querySelector(".fallbackTimePicker");
var fallbackLabel = document.querySelector(".fallbackLabel");

var hourSelect = document.querySelector("#hour");
var minuteSelect = document.querySelector("#minute");

// hide fallback initially
fallbackPicker.style.display = "none";
fallbackLabel.style.display = "none";

// test whether a new date input falls back to a text input or not
var test = document.createElement("input");
test.type = "time";
// if it does, run the code inside the if() {} block
if (test.type === "text") {
  // hide the native picker and show the fallback
  nativePicker.style.display = "none";
  fallbackPicker.style.display = "block";
  fallbackLabel.style.display = "block";

  // populate the hours and minutes dynamically
  populateHours();
  populateMinutes();
}

function populateHours() {
  // populate the hours <select> with the 6 open hours of the day
  for (var i = 12; i <= 18; i++) {
    var option = document.createElement("option");
    option.textContent = i;
    hourSelect.appendChild(option);
  }
}

function populateMinutes() {
  // populate the minutes <select> with the 60 hours of each minute
  for (var i = 0; i <= 59; i++) {
    var option = document.createElement("option");
    option.textContent = i < 10 ? "0" + i : i;
    minuteSelect.appendChild(option);
  }
}

// make it so that if the hour is 18, the minutes value is set to 00
// — you can't select times past 18:00
function setMinutesToZero() {
  if (hourSelect.value === "18") {
    minuteSelect.value = "00";
  }
}

hourSelect.onchange = setMinutesToZero;
minuteSelect.onchange = setMinutesToZero;
```

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

| Specification |
| --- |
| HTML Standard # time-state-(type=time) |

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

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

See also
--------

* The generic `<input>` element and the interface used to manipulate it, `HTMLInputElement`
* Date and Time picker tutorial (en-US)
* `<input type="datetime-local">` (en-US), `<input type="date">`, `<input type="week">` (en-US), and `<input type="month">` (en-US)


<input type="range"> - HTML: Linguagem de Marcação de Hipertexto

<input type="range">
====================

`<input>` elementos do tipo **`"range"`** deixam o usuário especificar um valor numérico que não deve ser inferior a um determinado valor, e não mais do que um valor máximo especificado. O valor preciso, no entanto, não é considerado importante. Este geralmente é representado por um controle deslizante ou o mesmo tipo de controle de "number" input. Como este tipo de elemento é impreciso, não deve ser usado a menos que o valor exato do controle não seja importante.

```html
<input type="range" />
```

Se o navegador do usuário não suportar o tipo `"range"`, este será tratado como um input do tipo `"text"` (en-US).

|  |  |
| --- | --- |
| **Value** |
 Uma `DOMString` contendo a a string que representa
 o valor numérico escolhido; use
 `valueAsNumber`
 para pegar o valor como um `Number`.
  |
| **Events** | `change (en-US)` e `input (en-US)` |
| **Supported Common Attributes** | `autocomplete`,
 `list`,
 `max`,
 `min`, e
 `step` |
| **IDL attributes** | `list`, `value`, e `valueAsNumber` |
| **Methods** | `stepDown()` (en-US)
 e `stepUp()` (en-US) |

Value
-----

O atributo `value` contém uma `DOMString` que conte uma representação dos números selecionados em string. O valor nunca é uma string vazia (`""`). O valor padrão está entre o mínimo e o máximo especificados, a menos que o valor máximo seja menor que o mínimo, caso em que o padrão é definido como o atributo de valor mínimo. O algoritmo que determina o valor padrão é:

```js
defaultValue =
  rangeElem.max < rangeElem.min
    ? rangeElem.min
    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;
```

Se for feito uma tentativa para definir como máximo um valor inferior ao mínimo, então este é definido como mínimo. Da mesma forma, uma tentativa de definir um valor maior do que o máximo sendo configurado então para o máximo.

Usando range inputs
-------------------

Equanto o tipo `"number"` permite aos usuários inserir um número com restrições opcionais forçando-o a digitar um valor entre o valor mínimo e máximo, ele requer que digitem um valor específico. A input de tipo permite ao usuário que coloque um valor sem que preocupe ou precise saber o valor numério específico.

Alguns exemplos de situações que este tipo são comumente usados são:

* Controle de audio como volume, equilíbrio e ou controle de filtros.
* Controle de configuração de cores como canais de cores, transparência, brilho, etc.
* Controle de configuração de jogos, como dificuldade, distância de visibilidade, tamanho do mundo, entre outros.
* Comprimento de senha gerada por gerenciadores de senha.

Como regra geral, se o usuário tiver maior probabilidade de se interessar por porcentagens entre distâncias mínimas e máximas do que por um número real, este tipo de input é um forte candidato. Por exemplo, no caso de um controle de volume estéreo, "colocar o controlador no meio" em vez de "definir o volume como 0.5".

### Especificando o mínimo e o máximo

Por padrão, o mínimo é 0 e o máximo é 100. Se não é o que você precisa, voce pode facilmente especificar limites diferentes alterando os valores dos atributos `min` e/ou `max`. Este pode ser um valor inteiro.

Por exemplo, para pedir ao usuário um valor entre -10 e 10, você pode usar:

```html
<input type="range" min="-10" max="10" />
```

### Definindo a escala entre valores

Por padrão, a escala entre o mínimo e o máximo é 1, significando que este sempre é um valor inteiro. você pode alterar o atributo `step` para controlar esta escala. Por exemplo, se você precisa de um valor de duas casas decimais entre os valores 5 e 10, voce deve definir o valor de `step` para 0.01:

```html
<input type="range" min="5" max="10" step="0.01" />
```

Se você deseja aceitar um valor independente das casas decimais, voce pode especificar o valor `"any"` para o atributo `step`:

```html
<input type="range" min="0" max="3.14" step="any" />
```

Este exemplo permite ao usuário selecionar qualquer valor entre 0 e π sem qualquer restrição na parte fracionada do valor selecionado.

### Adicionando marcas de mapeamento e etiquetas

As especificações do HTML oferece aos navegadores uma certa flexibilidade sobre como apresentar o controle deslizante. Em parte alguma esta flexibilidade é mais aparente do que no mapeamento de marcas e, menos ainda, na etiqueta. A especificação descreve como adicionar pontos personalizados ao controle usando o atributo `list` e o elemento `<datalist>` , mas não tem requisitos nem padronizações para marcações ou mesmo pontos ao longo do controle deslizante.

#### Modelo de controle do range

Uma vez que os navegadores têm essa flexibilidade e, até à data, nenhum suporte a todos os recursos que o HTML define para controles de alcance, aqui estão alguns modelos para mostrar o que você pode obter no MacOS em um navegador que os suporta.

##### Um controle sem o atributo

Isto é o que você obtem se não especificar o atributo `list` , ou se o navegador não oferece suporte.

| HTML | Screenshot |
| --- | --- |
|
```html
<input type="range">
```
 | Screenshot of a plain slider control on macOS |

##### Um controle com o Atributo

Este controle está usando um atributo `list` especificando o ID de uma `<datalist>` que define uma serie de marcações no controle. Há 11 deles, de modo que há um 0% bem como a adição de 10% em cada próximo. Cada ponto representa usando um elemento `<option>` com propriedade `value` definido para o valor do intervalo no qual uma marca deve ser desenhada.

| HTML | Screenshot |
| --- | --- |
|
```html
<input type="range" list="tickmarks">
<datalist id="tickmarks">
<option value="0">
<option value="10">
<option value="20">
<option value="30">
<option value="40">
<option value="50">
<option value="60">
<option value="70">
<option value="80">
<option value="90">
<option value="100">
</datalist>
```

 | Screenshot of a plain slider control on macOS |

##### Um controle deslizante com marcas e rótulos

Você pode adicionar rótulos para seu controle usando o atributo `label` para o elemento `<option>` correspondente às marcas de marcação para as quais você deseja ter rótulos.

| HTML | Screenshot |
| --- | --- |
|
```html
<input type="range" list="tickmarks">
<datalist id="tickmarks">
<option value="0" label="0%">
<option value="10">
<option value="20">
<option value="30">
<option value="40">
<option value="50" label="50%">
<option value="60">
<option value="70">
<option value="80">
<option value="90">
<option value="100" label="100%">
</datalist>
```

 | Screenshot of a plain slider control on macOS |

**Nota:** Atualmente nenhum navegador suporta estes recursos totalmente. Firefox não suporta pontos e rótulos, por exemplo, enquanto o Chrome suporta as marcações de pontos, porém não suporta as etiquetas.

### Change the orientation

Considerando este controle:

```html
<input type="range" id="volume" min="0" max="11" value="7" step="1" />
```

| Screenshot | Live sample |
| --- | --- |
|  |  |

Esse controle é horizontal (pelo menos na maioria, senão em todos os principais navegadores, outros podem variar). Fazê-lo vertical é tão simples como adicionar CSS para alterar as dimensões do controle para que ele seja mais alto que o largo, como este:

#### CSS

```css
#volume {
  height: 150px;
  width: 50px;
}
```

#### HTML

```html
<input type="range" id="volume" min="0" max="11" value="7" step="1" />
```

#### Resultado

| Screenshot | Live sample |
| --- | --- |
|  |  |

**Atualmente, nenhum dos principais navegadores suporta a criação de entradas de alcance vertical usando o CSS desta maneira, mesmo que seja a maneira como a especificação recomenda que eles o façam.**

As especificações HTML recomenda que os navegadores mudem automaticamente para um controle vertical quando a largura for menor que à altura. Infortuniamente nenhum dos principais navegadores atualmente oferece tal suporte. No entanto você pode cria-lo pelo seu lado. A maneira mais fácil para isto é usar o CSS: aplicando um: `transform` para rotacionar o elemento tornando-o vertical. Vamos dar uma olhada:

#### HTML

No HTML o elemento `<input>` precisa ser envolto em uma `<div>` para nos permitir corrigir o layout após a transformação ser executada, (uma vez que as transformações não afetam automaticamente o layout da página):

```html
<div class="slider-wrapper">
  <input type="range" min="0" max="11" value="7" step="1" />
</div>
```

#### CSS

Agora precisamos de algum CSS. Primeiro é o CSS para o próprio wrapper; isso especifica o modo de exibição e o tamanho que queremos para que a página seja definida corretamente; em essência, está reservando uma área da página para que o controle deslizante gire e se encaixe no espaço reservado sem bagunçar outros elementos.

```css
.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}
```

Em seguida, vem a informação de estilo para o elemento `<input>` dentro do espaço reservado:

```css
.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}
```

O tamanho do controle está configurado para ter 150 pixels de comprimento por 20 pixels de altura . As margins estão configuradas como 0 e a `transform-origin` é deslocada para o centro do espaço de giro do controle deslizante; uma vez que o controle deslizante está configurado para ter 150 pixels de largura, gira através de uma caixa que é de 150 pixels em cada lado. Compensando a origem por 75px em cada eixo significa que vamos girar em torno do centro desse espaço. Finalmente, giramos no sentido anti-horário em 90 °. O resultado: uma entrada de intervalo que é girada para que o valor máximo esteja na parte superior e o valor mínimo esteja na parte inferior.

#### Result

| Screenshot | Live sample |
| --- | --- |
|  |  |

Validação
---------

Não há padrões de validação disponível, no entanto, as seguintes formas de validações são realizadas automaticamente:

* Se `value` estiver definido para algo que não possa ser convertido em um número flutuante válido, a validação falhará porque a entrada está sofrendo de uma entrada incorreta.
* O valor não será inferior há `min`. O valor padrão é 0.
* O valor não pode ser maior que `max`. O valor padrão é 100.
* O valor será um multiplo de `step`. O valor padrão é 1.
Exemplos
--------

Além dos exemplos variados acima, você encontrará as entradas de alcance demonstradas nestes artigos:

* Controlling multiple parameters with ConstantSourceNode (en-US)
Specifications
--------------

| Specification |
| --- |
| HTML Standard # range-state-(type=range) |

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

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

See also
--------

* HTML Forms (en-US)
* `<input>` and the `HTMLInputElement` interface it's based upon
* `<input type="number">` (en-US)


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

lang
====

O atributo global **`lang`** ajuda a definir o idioma de um elemento: a língua em que elementos não-editáveis são escritos, ou a língua em que elementos editáveis devem ser escritos pelo usuário. O atributo contém uma uma única "tag de idioma" em um formato definido em *Tags para identificar linguagens(BCP47)*.

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

Se o valor do atributo é uma *string vazia* (`lang=""`), o idioma é definido como *unknown (desconhecido)*; se a tag de idioma não é válida conforme o BCP47, ela é definida como *invalid (invalida)*.

>
> **Note:** ## Sintaxe da tag de idiomaA sintaxe completa do BCP47 é profunda o suficente para caracterizar dialetos de linguagem extremamente expecíficos, mas a maioria dos usos são bem mais simples.Uma tag de idioma é feita de *subtags de idioma* separadas por hífen, onde cada subtag indica uma certa propriedade da língua. As três subtags mais comuns são:- Subtag de idioma - : Necessária. Um código de 2 ou 3 caracteres que define o idioma base, tipicamente escrita em letras minúsculas. Por exemplo, o código para Inglês é `en` e o código para Português é `pt`.
>
>
>
> Subtag de script
>
> Opcional. Essa subtag define o sistema de escrita usado para a linguagem, e sempre tem 4 caracteres, com a primeira letra maiúscula. Por exemplo, Francês em Braile é `fr-Brai` e `ja-Kana` é Japonês escrito no alfabeto Katakana. Se a língua é escrita em uma maneira tipicamente comum, como Inglês no alfabeto Latino, não é necessário o uso da subtag.
>
>
>
> Subtag de região
>
> Opcional. Essa subtag define um dialeto do idioma base em uma localização particular e tem um código de duas letras maiúsculas referentes ao país, ou um código de três números referentes à uma área fora do país. Por exemplo, `es-ES` é para espanhol falado na Espanha, e `es-013` é o espanhol falado na America Central. "Espanhol Internacional" seria `es`.A subtag de script precede a região da subtag quando ambos estão presentes— `ru-Cyrl-BY` é Russo, escrito no alfabeto Cyrillic, falado em Belarus.Para encontrar os códigos corretos para uma subtag de idioma, acesse Language Subtag Lookup.
>
>
>
>
>

Mesmo que o atributo **lang** esteja bem definido ele ainda pode ser ignorado, pois o atributo **xml:lang** tem prioridade.

Para as pseudo-classes CSS `:lang` (en-US), dois nomes de idiomas inválidos são diferentes se seus nomes forem diferentes. Por tanto, enquanto `:lang(es)` corresponde a ambos `lang="es-ES"` e `lang="es-419"`, `:lang(xyzzy)` não corresponde a `lang="xyzzy-Zorp!"`.

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

| Specification |
| --- |
| HTML Standard # attr-lang |

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

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

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

* Todos atributos globais.


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

autocapitalize
==============

O atributo global **`autocapitalize`** é um atributo enumerado que controla quando e como entradas de texto são automaticamente capitalizadas confome são escritas/editadas pelo usuário. O atributo deve receber um dos seguintes valores:

* `off` ou `none`: Nenhuma capitalização é aplicada (por padrão as letras serão minúsculas)
* `on` ou `sentences`: A primeira letra de cada sentença será por padrão uma letra maíuscula; todas as demais letras serão por padrão minúsculas.
* `words`: A letra inicial de cada palavra serão por padrão maiúsculas; todas as demais letras serão por padrão minúsculas.
* `characters`: Todas as letras deverão ser maiúsculas por padrão.

O atributo `autocapitalize` não afeta comportamentos quando digitando em um teclado físico. Ao invés disso, afeta o comportamento de outros mecanismos de entrada, tais quais teclados virtuais em dispositivos móveis e entradas por voz. O comportamento de tais mecanismos é que frequentemente auxiliam usuários aos capitalizar automaticamente a primeira letra de sentenças. O atributo `autocapitalize` permite a autores sobrescreverem esse comportamento por elemento.

O atributo `autocapitalize` nunca ativa a autocapitalização para um elemento `<input>` com um atributo `type` cujo valor seja `url`, `email`, ou `password`.

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

| Specification |
| --- |
| HTML Standard # attr-autocapitalize |

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

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


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

id
==

O atributo global **id** define um identificador exclusivo (ID) que deve ser único por todo o documento. Seu objetivo é identificar o elemento ao navegar por âncoras (usando um identificador de fragmento), quando utilizar scripts ou estilizando (com CSS).
O valor deste atributo é uma string opaca: isso significa que os desenvolvedores não devem utilizá-lo para transmitir nenhuma informação. Significados específicos como, por exemplo, significado semântico não devem ser provenientes desta string.

O valor deste atributo não deve conter lacunas (espaços, tabulações etc.). Navegadores tratam IDs inadequadas que contenham lacunas como se as lacunas fossem parte do ID. Em contraste com o atributo **class**, que permite múltiplos valores separados por espaço, os elementos podem ter somente um único ID.

**Nota:** Utilizar caracteres exceto letras e dígitos ASCII, `'_'`, `'-'` e `'.'` pode causar problemas de compatibilidade, já que eles não eram permitidos no HTML 4. Embora esta restrição fora suspensa no HTML 5, um ID deve iniciar com uma letra para fins de compatibilidade.

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

| Specification |
| --- |
| HTML Standard # global-attributes:the-id-attribute-2 |

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

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

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

* Todos os atributos globais.
* `Element.id` para explorar este atributo.


data-* - HTML: Linguagem de Marcação de Hipertexto

data-\*
=======

>
> **Note:**
>
>
>

 Os atributos globais **data-\*** formam uma classe de atributos conhecida como **custom data attributes**, a qual permite que informações proprietárias sejam trocadas via script entre o HTML e sua representação DOM (en-US) . Todos esses dados personalizados estão disponíveis através da interface `HTMLElement` (en-US) do elemento, onde o atributo está definido. A propriedade `HTMLElement.dataset` (en-US) concede acesso a estes atributos .
 O `*` pode ser substituído por qualquer nome, desde que siga a regra de criação de nomes xml com as seguintes restrições:

* O nome não deve começar com xml, independente da caixa destas letras (Ex: XML, xml, XMl, XmL, ...);
* O nome não deve conter ponto e vírgula (`U+003A`);
* O nome não deve conter letras maiúsculas.

Observe que a propriedade `HTMLElement.dataset` (en-US) é uma `DOMStringMap`, e o nome da custom data attribute *data-test-value* será acessível através do `HTMLElement.dataset.testValue` ( ou `HTMLElement.dataset["testValue"]` ) e todo o traço (`U+002D`) será substituído pela capitalização(tornar maiúscula) da letra subsequente, deixando o nome no formato camelcase.

### Uso

Para adicionar atributos **data-\*** , mesmo os elementos HTML mais comuns podem tornar-se mais complexos e poderosos objetos programáveis. Por exemplo, um "sprite*"* de uma nave espacial em um jogo pode ser um simples elemento `<img>` com um atributo class e diversos atributos data-\*:
```

<img class="spaceship cruiserX3" src="shipX3.png"
  data-navio-id="324"   data-armas="laserI laserII"   data-escudos="72%"
  data-x="414354" data-y="85160" data-z="31940"
  onclick="navesespaciais[this.dataset.shipId].explodida()"
</img>
```

(Veja mais *aqui)*

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

| Specification |
| --- |
| HTML Standard # attr-data-\* |

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

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

See also
--------

* All global attributes.
* The `HTMLElement.dataset` (en-US) property that allows to access and modify these values.


Controlando a verificação ortográfica em formulários HTML - HTML: Linguagem de Marcação de Hipertexto

Controlando a verificação ortográfica em formulários HTML
=========================================================

Firefox 2 introduz suporte à verificação ortográfica para áreas de texto e campos de texto em formulários web. O usuário pode especificar usando a interface about:config se a verificação ortográfica é ou não habilitada e se checará áreas de texto e campos de texto ou somente áreas de texto.

Por padrão, áreas de texto e documentos `designMode` tem ortografia verificada e caixas de texto de uma única linha não tem. Isto é assim porque os usuários do Firefox podem se distrair ou se incomodar se o Firefox marcar coisas como IDs de usuários ou endereços de e-mail como erros de ortografia.

Porém, podem haver situações nas quais este comportamento não é necessariamente apropriado. Por exemplo, se uma área de texto tem o objetivo de ser usada para editar HTML ou servir de entrada para outro tipo de texto que não seja semântico, a verificação ortográfica seria um entrave em vez de uma ajuda. Da mesma forma, podem haver casos nos quais um site faça uma recomendação de que o Firefox habilite a verificação ortográfica para um campo de texto específico, como campos de busca ou assunto/título de e-mail, mesmo estes sendo geralmente campos de texto de uma única linha.

Se um site deseja recomendar o uso ou não de verificação ortográfica para um elemento `<input>` específico, ele pode usar o atributo `spellcheck`, espefcificando o valor `true` para recomendar o uso da verificação ortográfica ou `false` para recomendar o não uso.

Tenha em mente que a recomendação do site pode ser ignorada pelo usuário se o mesmo tiver desativado a verificação ortográfica setando a configuração `layout.spellcheckDefault` para 0. Se a configuração `layout.spellcheckDefault` tiver qualquer outro valor, as recomendações serão consideradas.

Você pode codificar um campo de texto linha-única (elemento HTML `<input>`) habilitando a verificação ortográfica da seguinte forma:
```

<input type="text" size="50" spellcheck="true">
```

Da mesma forma, você pode desabilitar a verificação ortográfica em uma área de texto (elemento `<textarea>`) da seguinte forma:
```

<textarea spellcheck="false"></textarea>
```

Você pode controlar um documento em seu `designMode` (tipicamente usado para implementar edição de texto rica) setando o atributo `spellcheck` no elemento `<body>` de um documento.

Você também pode aplicar o atributo `spellcheck` em outros elementos, tais como os elementos `<span>` e `<div>`, e nesse caso todos os elementos `<input>` dentro dessas tags irão herdar esta configuração; elementos `<input>` que não tem um atributo `spellcheck` setado, irão herdar a configuração de verificação ortográfica de seu elemento pai. Se não houver nenhuma configuração setada na cadeia antecessora de elementos, a configuração padrão será usada.

Por exemplo:

```html
<div spellcheck="true">
  <label>Escreva algo: </label><input type="text" size="50" />
  <br />
  <label>Escreva outra coisa: </label><input type="text" size="50" />
</div>
<br />
<label>Mais alguma coisa: </label><input type="text" size="50" />
```

Neste exemplo HTML acima, os dois primeiros campos de texto terão a verificação ortográfica e o terceiro não terá.

Iniciando no Gecko 9.0, a verificação ortográfica usa o atributo `lang` do elemento `<input>` para determinar o idioma padrão da verificação ortográfica. Se o `<input>` não tiver o atributo `lang` setado, esse atributo é procurado em cada elemento pai superior até chegar ao elemento raiz do documento.

Fazendo assim, se o usuário tem os dicionários de Português e Inglês instalados, e um elemento editável tiver o atributo `lang="en"`, o dicionário inglês será automaticamente usado para este elemento.

Por exemplo:

```html
<html lang="pt-BR">
  <body>
    <textarea></textarea>
    <textarea lang="en"></textarea>
    <div lang="ru">
      <textarea></textarea>
    </div>
  </body>
</html>
```

No exemplo HTML acima, o primeiro `<textarea>` terá ortografia checada em Português, o segundo em Inglês e o terceiro em Russo.

Se um elemento especifica o idioma e o usuário não tem dicionário instalado para este idioma, a verificação ortográfica fica desabilitada por padrão, embora o usuário possa escolher por habilitá-la manualmente.


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

contenteditable
===============

O atributo global **`contenteditable`** é um atributo enumerado indicando se o elemento deve ser editável pelo usuário. Se assim for, o navegador modifica seu widget para permitir a edição.

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

O atributo deve ter um dos seguintes valores:

* `true` ou uma string vazia, o que indica que o elemento é editável.
* `false`, o que indica que o elemento não é editável.

Se o atributo for aplicado sem um valor, como `<label contenteditable>Rótulo de Exemplo</label>`, seu valor é tratado como uma *string* vazia.

Se esse atributo estiver faltando ou seu valor for inválido, seu valor é herdado de seu elemento pai: para que o elemento seja editável se seu pai for editável.

Observe que, embora seus valores permitidos incluam *true* e *false*, este atributo é um enumerado e não um *Booleano*.

Você pode definir a cor usada para desenhar a inserção de texto caret com a propriedade `caret-color` (en-US) do CSS.

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

| Specification |
| --- |
| HTML Standard # attr-contenteditable |

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

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

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

* Tornando o conteúdo editável
* Todos os atributos globais
* `HTMLElement.contentEditable` e `HTMLElement.isContentEditable` (en-US)
* A propriedade `caret-color` (en-US) do CSS.
* Evento de `input` - `HTMLElement`


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

title
=====

O atributo global **title** contém textos representando informações de orientação, relacionados ao elemento a que pertence. Geralmente, mas não obrigatoriamente, esta informação pode ser apresentada ao usuário como uma dica. Alguns usos comuns:

* Link: título ou descrição do documento vinculado
* Elemento de mídia como uma imagem: descrição ou créditos associados
* Parágrafo: nota de rodapé ou um comentário sobre ele
* Citação: informação sobre o autor, e assim por diante.

Se este atributo for omitido, significa que o título do antecessor mais próximo desse elemento ainda é relevante (e poderá ser usado como dica para este elemento). Se este atributo estiver difinido como uma *string vazia*, significa explicitamente que o título do antecessor mais próximo não é relevante (e não deve ser usado como dica para este elemento).

Semânticas adicionais são anexadas aos atributos **title** dos elementos `<link>`, `<abbr>`, `<input>` e `<menuitem>` (en-US).

O atributo **title** pode conter várias linhas. Cada `U+000A LINE FEED` (`LF`) inserida representa uma nova linha. Alguns cuidados devem ser tomados, como a seguir:

```html
<p>
  Novas linhas em título devem ser levadas em conta, como este
  <abbr
 title="Este é um
título de multiplas linhas"
 >exemplo</abbr
 >.
</p>
```

Este exemplo define um título de duas linhas.

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

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

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

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

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

* Todos os atributos globais.
* `HTMLElement.title` (en-US) que reflete este atributo.


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

tabindex
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

* Learn more
* See full compatibility
* Report feedback
O atributo global **tabindex** indica se um elemento pode receber foco de entrada (se ele é *focável*), se e em qual posição ele deve fazer parte da navegação sequencial do teclado (geralmente com a tecla `Tab`, daí seu nome).

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

Ele aceita valores inteiros, com diferentes resultados dependendo do valor desse inteiro:

* um *valor negativo* (geralmente `tabindex="-1"`) significa que o elemento não deve ser localizado pela navegação sequencial do teclado, mas pode ser focável visualmente ou com JavaScript. Isso é mais útil para criar widgets accessíveis com JavaScript.

>
> **Note:** Um valor negativo é útil quando você tem conteúdo fora da tela que aparece com um evento específico. O usuário não poder focar em nenhum elemento com um `tabindex` negativo utilizando o teclado, porém um script pode o fazer utilizando o método (en-US) `focus()`.
>
>
>
* `tabindex="0"` significa que o elemento deve ser focável e que pode ser localizado pela navegação sequencial do teclado, mas a sua posição será definida pela ordem no código-fonte do documento;
* um *valor positivo* significa que o elemento deve ser focável e que pode ser localizado pela navegação sequencial do teclado, e a sua posição definida pelo valor do número. Sendo assim, `tabindex="4"` seria focado antes de `tabindex="5"`, mas depois de `tabindex="3"`. Se vários elementos possuírem o mesmo valor positivo de `tabindex`, a sua posição na ordenação será definida pela sua posição no código-fonte do documento. O valor máximo do `tabindex` é 32767. Se não especificado, assume o valor padrão 0.

>
> **Warning:** Evite usar valores do `tabindex` maiores que 0. Ao fazer isso dificulta para pessoas que dependem de tecnologias assistivas para navegar e operar o conteúdo da página. Ao invés disso, escreva o documento com os elementos em uma sequência lógica.
>
>
>

Se o atributo `tabindex` for definido em um elemento div `<div>`, seu conteúdo filho (interno) não poderá ser rolado utilizando as teclas direcionais a menos que seja definido `tabindex` no conteúdo também. Veja este fiddle para entender melhor os efeitos de rolagem do tabindex.

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

| Specification |
| --- |
| HTML Standard # attr-tabindex |

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

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

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

* Todos os atributos globais.
* `HTMLElement.tabIndex` (en-US) que reflete este atributo.
* Problemas de acessibilidade com tabindex: veja Don't Use Tabindex Greater than 0 | Adrian Roselli (em inglês).


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

hidden
======

O atributo global **`hidden`** é um atributo booleano que indica se um elemento é ou não *relevante*. Por exemplo, ele pode ser usado para esconder elementos de página que não podem ser usados até que o processo de login seja completo. Os navegadores não renderizarão elementos com o atributo `hidden` setado.

O atributo `hidden` não deve ser utilizado para esconder conteúdo que poderia legitimamente ser mostrado em outra apresentação, por exemplo, não é correto usar `hidden` para esconder abas de formulários em paineis, porque interfaces separadas por abas são meramente um tipo de apresentação em fluxo — o que pode ser igualmente mostrado em forma vertical com barra de rolagem. É similarmente incorreto usar este atributo para esconder conteúdo de apenas uma apresentação — se algo está marcado como `hidden`, ele está escondido de todas as apresentações incluindo, por exemplo, leitores de tela.

Elementos com `hidden` não devem estar ligados a outros elementos sem `hidden`. Elementos filhos de um elemento com o atributo `hidden` ainda estão ativos, ou seja, é possível executar a ação `submit` de um formulário ou uma tag `script` pode ser executada se em ambos os casos estes elementos forem filhos de um elemento com o atributo `hidden`.

Por exemplo, é incorreto o uso do atributo `href` referenciando a uma sessão marcada com o atributo `hidden`. Se o conteúdo não é aplicável ou relevante, não faz sentido fazer a referência.

Pode ser correto, entretanto, usar o atributo ARIA `aria-describedby`para referenciar descrições que estejam, elas mesmas, escondidas. Esconder as descrições implica que elas não são úteis por si só. Mas elas podem ser escritas de forma que sejam úteis no contexto específico do elemento que descrevem

Similarmente, um elemento canvas com atributo `hidden` poderia ser usado como buffer por um script de gráficos, e um controle de formulário, usando seu atributo form, poderia referir-se a um elemento `form` com atributo `hidden`.

**Nota:** Mudar o valor da propriedade `display` no CSS de um elemento com o atributo `hidden` sobrescreve o comportamento. Por exemplo, elementos com o estilo `display: flex;` serão mostrados independente da presença do atributo `hidden`.

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

| Specification |
| --- |
| HTML Standard # the-hidden-attribute |

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

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

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

* Todos os atributos globais.


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

itemprop
========

O atributo global **`itemprop`** é usado para adicionar propriedades para um item. Todo elemento HTML pode ter um atributo `itemprop` especificado, e um `itemprop` consiste em um par de nome e valor. Cada par de nome e valor é chamado de **propriedade,** e um grupo de uma ou mais propriedades forma um **item**. Os valores das propriedades são ou um texto ou uma URL e pode ser associada a uma grande variedade de elementos incluindo `<audio>`, `<embed>`, `<iframe>`, `<img>`, `<link>`, `<object>` (en-US), `<source>` , `<track>`, and `<video>`.

Exemplos
--------

The example below shows the source for a set of elements marked up with `itemprop` attributes, followed by a table showing the resulting structured data.

### HTML

```html
<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span
 >Director:
    <span itemprop="director">James Cameron</span>
    (born August 16, 1954)</span
 >
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer"
 >Trailer</a
 >
</div>
```

### Structured data

|  |  |
| --- | --- |
|  | **Item** |
| **itemprop name** | **itemprop value** |
| itemprop | name | Avatar |
| itemprop | director | James Cameron |
| itemprop | genre | Science fiction |
| itemprop | trailer | ../movies/avatar-theatrical-trailer.html |

Properties
----------

Properties have values that are either a string or a URL. When a string value is a URL, it is expressed using the `<a>` element and its `href` attribute, the `<img>` element and its `src` attribute, or other elements that link to or embed external resources.

### Three properties with values that are strings

```html
<div itemscope>
  <p>My name is <span itemprop="name">Neil</span>.</p>
  <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
  <p>I am <span itemprop="nationality">British</span>.</p>
</div>
```

### One property, "image", whose value is a URL

```html
<div itemscope>
  <img itemprop="image" src="google-logo.png" alt="Google" />
</div>
```

When a string value can't be easily read and understood by a person (e.g., a long string of numbers and letters), it can be displayed using the value attribute of the data element, with the more easily-understood-by-a human-version given in the element's contents (which is not part of the structured data - see example below).

### An item with a property whose value is a product ID

The ID is not human-friendly, so the product's name is used the human-visible text instead of the ID.

```html
<h1 itemscope>
  <data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
</h1>
```

For numeric data, the meter element and its value attribute can be used.

### A meter element

```html
<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Panasonic White 60L Refrigerator</span>
  <img src="panasonic-fridge-60l-white.jpg" alt="" />
  <div
 itemprop="aggregateRating"
 itemscope
 itemtype="http://schema.org/AggregateRating">
    <meter itemprop="ratingValue" min="0" value="3.5" max="5">
      Rated 3.5/5
    </meter>
    (based on <span itemprop="reviewCount">11</span>
    customer reviews)
  </div>
</div>
```

Similarly, for date- and time-related data, the time element and its datetime attribute can be used.

### An item with one property, "birthday", whose value is a date

```html
<div itemscope>
  I was born on
  <time itemprop="birthday" datetime="2009-05-10">May 10th 2009</time>.
</div>
```

Properties can also be groups of name-value pairs, by putting the itemscope attribute on the element that declares the property. Each value is either a string or a group of name-value pairs (i.e. an item).

### An outer item representing a person, and an inner one representing a band

```html
<div itemscope>
  <p>Name: <span itemprop="name">Amanda</span></p>
  <p>
    Band:
    <span itemprop="band" itemscope>
      <span itemprop="name">Jazz Band</span>
      (<span itemprop="size">12</span> players)</span
 >
  </p>
</div>
```

The outer item above has two properties, "name" and "band". The "name" is "Amanda", and the "band" is an item in its own right, with two properties, "name" and "size". The "name" of the band is "Jazz Band", and the "size" is "12". The outer item in this example is a top-level microdata item. Items that are not part of others are called top-level microdata items.

### All the properties separated from their items

This example is the same as the previous one, but all the properties are separated from their items

```html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>
```

This gives the same result as the previous example. The first item has two properties, "name", set to "Amanda", and "band", set to another item. That second item has two further properties, "name", set to "Jazz Band", and "size", set to "12".

An item can have multiple properties with the same name and different values.

### Ice cream with two flavors

```html
<div itemscope>
  <p>Flavors in my favorite ice cream:</p>
  <ul>
    <li itemprop="flavor">Lemon sorbet</li>
    <li itemprop="flavor">Apricot sorbet</li>
  </ul>
</div>
```

This results in an item with two properties, both with the name "flavor" and having the values "Lemon sorbet" and "Apricot sorbet".

An element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value.

### An item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange"

```html
<div itemscope>
  <span
 itemprop="favorite-color
 favorite-fruit"
 >orange</span
 >
</div>
```

>
> **Note:** Note: There is no relationship between the microdata and the content of the document where the microdata is marked up.
>
>
>

### Same structured data marked up in two different ways

There is no semantic difference between the following two examples

```html
<figure>
  <img src="castle.jpeg" />
  <figcaption>
    <span itemscope><span itemprop="name">The Castle</span></span> (1986)
  </figcaption>
</figure>
```

```html
<span itemscope><meta itemprop="name" content="The Castle" /></span>
<figure>
  <img src="castle.jpeg" />
  <figcaption>The Castle (1986)</figcaption>
</figure>
```

Both have a figure with a caption, and both, completely unrelated to the figure, have an item with a name-value pair with the name "name" and the value "The Castle". The only difference is that if the user drags the figcaption out of the document, the item will be included in the drag-and-drop data. The image associated with the item won't be included.

Names and values
----------------

A property is an unordered set of unique tokens that are case-sensitive and represent the name-value pairs. The property value must have at least one token. In the example below, each data cell is a token.

### Names examples

|  | Item |
| --- | --- |
| itemprop **name** | itemprop **value** |
| itemprop | country | Ireland |
| itemprop | Option | 2 |
| itemprop | https://www.flickr.com/photos/nlireland/6992065114/ | Ring of Kerry |
| itemprop | img | https://www.flickr.com/photos/nlireland/6992065114/ |
| itemprop | website | flickr |
| itemprop | (token) | (token) |

**Tokens** are either strings or URL's. An item is called a **typed item** if it is a URL. Otherwise, it is a string. Strings cannot contain a period or a colon (see below).

1. If the item is a typed item it must be either:
    1. A defined property name, or
    2. A valid URL, which refers to the vocabulary definition, or
    3. A valid URL that is used as a proprietary item property name (i.e. one not defined in a public specification), or
2. If the item is not a typed item it must be:
    1. A string that contains no "**.**" (U+002E FULL STOP) characters and no "**:**" characters (U+003A COLON) and is used as a proprietary item property name (again, one not defined in a public specification).

>
> **Note:** the rules above disallow ":" characters in non-URL values because otherwise they could not be distinguished from URLs. Values with "." characters are reserved for future extensions. Space characters are disallowed because otherwise the values would be parsed as multiple tokens.
>
>
>

Values
------

The property value of a name-value pair is as given for the first matching case in the following list:

* If the element has an **itemscope** attribute
    + The value is the **item** created by the element.
* If the element is a **meta** element
    + The value is the value of the element's **content** attribute
* If the element is an **audio**, **embed**, **iframe**, **img**, **source**, **track**, or **video** element
    + The value is the resulting URL string that results from parsing the value of the element's src attribute relative to the node document (part of the Microdata DOM API (en-US)) of the element at the time the attribute is set
* If the element is an **a**, **area**, or **link** element
    + The value is the resulting URL string that results from parsing the value of the element's href attribute relative to the node document of the element at the time the attribute is set
* If the element is an **object** element
    + The value is the resulting URL string that results from parsing the value of the element's data attribute relative to the node document of the element at the time the attribute is set
* If the element is a **data** element
    + The value is the value of the element's value attribute
* If the element is a **meter** element
    + The value is the value of the element's **value** attribute
* If the element is a **time** element
    + The value is the element's **datetime** value

Otherwise

* The value is the element's **textContent**.

If a property's value is a **URL**, the property must be specified using a URL property element. The URL property elements are the **a**, **area**, **audio**, **embed**, **iframe**, **img**, **link**, **object**, **source**, **track**, and **video** elements.

### Name order

Names are unordered relative to each other, but if a particular name has multiple values, they do have a relative order.

#### In the following example, the "a" property has the values "1" and "2", *in that order*, but whether the "a" property comes before the "b" property or not is not important

```html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
  <p itemprop="b">test</p>
</div>
```

#### The following is equivalent

```html
<div itemscope>
  <p itemprop="b">test</p>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
</div>
```

#### As is the following

```html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>
```

#### And the following

```html
<div id="x">
  <p itemprop="a">1</p>
</div>
<div itemscope itemref="x">
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>
```

Other examples
--------------

### HTML

```html
<dl
 itemscope
 itemtype="http://vocab.example.net/book"
 itemid="urn:isbn:0-330-34032-8">
  <dt>Title</dt>
  <dd itemprop="title">The Reality Dysfunction</dd>
  <dt>Author</dt>
  <dd itemprop="author">Peter F. Hamilton</dd>
  <dt>Publication date</dt>
  <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time></dd>
</dl>
```

### Structured data

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype: itemid | http://vocab.example.net/book: urn:isbn:0-330-34032-8 |
| itemprop | title | The Reality Dysfunction |
| itemprop | author | Peter F. Hamilton |
| itemprop | pubdate | 1996-01-26 |

### Result

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

| Specification | Status | Comment |
| --- | --- | --- |
| `itemprop` |  | WG Note - No longer being actively developed |

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

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

See also
--------

* Other different global attributes
* Other, microdata related, global attributes:
    + `itemid`
    + `itemref`
    + `itemscope`
    + `itemtype`


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

accesskey
=========

O atributo global **`accesskey`** fornece uma dica para gerar um atalho de teclado no elemento atual. O valor do atributo deve consistir em um único caracter imprimível (que inclui caracteres acentuados e outros caracteres que podem ser gerados pelo teclado).

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

**Nota:** Na especificação do WHATWG, diz que você pode especificar vários caracteres separados por espaço, e o navegador usará primeiro o que ele suportar. No entanto, isso não funciona na maioria dos browsers. O IE/Edge usa o primeiro que ele suporta sem problemas, desde que não haja conflitos com outros comandos.

A maneira de ativar a tecla de acesso depende do navegador e de sua plataforma:

|  | Windows | Linux | Mac |
| --- | --- | --- | --- |
| Firefox | `Alt` + `Shift` + `*key*` |
 No Firefox 57 ou mais recente: `Control` + `Option` +
 `*key*` or `Control` + `Alt` +
 `*key*`No Firefox 14 ou mais recente: `Control` +
 `Alt` + `*key*`No Firefox 13 ou mais antigo: `Control` +
 `*key*` |
| Edge | `Alt` + `*key*` | N/A |
| Internet Explorer | `Alt` + `*key*` | N/A |
| Google Chrome | `Alt` + `*key*` | `Control` + `Alt` + `*key*` |
| Safari | `Alt` + `*key*` | N/A | `Control` + `Alt` + `*key*` |
| Opera 15+ | `Alt` + `*key*` | `Control` + `Alt` + `*key*` |
| Opera 12 |
`Shift` + `Esc` abre uma lista de conteúdos
 acessíveis pela tecla de acesso e, em seguida, pode escolher um item
 pressionando `*key*`
 |

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

Além do baixo suporte ao navegador, existem inúmeras preocupações com o atributo `accesskey`:

* Um valor de `accesskey` pode entrar em conflito com uma tecla de atalho do sistema ou do navegador, ou alguma funcionalidade de tecnologia assistida. O que pode funcionar para uma combinação de sistema operacional, tecnologia assistida e navegador pode não funcionar com outras combinações.
* Certos valores de `accesskey` podem não estar presentes em alguns teclados, especialmente quando a internacionalização é uma preocupação. Portanto, a adaptação a idiomas específicos pode causar problemas adicionais.
* Os valores de `accesskey` que dependem de números podem ser confusos para indivíduos com problemas cognitivos, onde o número não tem uma associação lógica com a funcionalidade que aciona.
* Informar o usuário que `accesskey` estão presentes, para que eles estejam cientes da funcionalidade. Se o sistema não tiver o método de o usuário dessa funcionalidade, ele poderá ativar acidentalmente as teclas de acesso (`accesskeys)`.

Devido a esses problemas, geralmente não é aconselhável usar o `accesskey`s para a maioria dos sites e aplicativos da web.

WebAIM: Keyboard Accessibility - Accesskey

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

| Specification |
| --- |
| HTML Standard # the-accesskey-attribute |

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

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

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

* `Element.accessKey`
* `HTMLElement.accessKeyLabel` (en-US)
* Todos os atributos globais.


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

class
=====

O atributo global **class** é uma lista das classes de um elemento, separada por espaços. Classes permitem a CSS e Javascript selecionar e acessar elementos específicos através dos seletores de classe ou funções como o método DOM `document.getElementsByClassName`.

Apesar da especificação não impor requesitos sobre os nomes de classes, é considerada boa prática usar nomes que descrevam o propósito semântico do elemento, em vez de sua representação (e.g. *atributo* para descrever um atributo em vez de *ítalico*, mesmo que um elemento desta classe possa ser representado por *ítalico)*. Nomes baseados em semântica permanecem coerentes mesmo se a representação da página mude.

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

| Specification |
| --- |
| HTML Standard # global-attributes:classes-2 |

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

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

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

* Todos os atributos globais.


Tutorial SVG - SVG: Gráficos Vetoriais Escaláveis

Tutorial SVG
============

Scalable Vector Graphics (Gráficos vetoriais escaláveis), SVG, é uma linguagem W3C XML para marcação de gráficos. Ela é parcialmente implementada no Firefox, Opera, Navegadores com WebKit , Internet Explorer e outros navegadores.

Este tutorial tem como objetivo explicar as partes internas de SVG acompanhada de detalhes técnicos. Se você quiser usá-la apenas para desenhar belas imagens, você pode encontrar informações mais uteis na Página de documentação do Inkscape. Outra boa introdução ao SVG é fornecida pelo W3C' SVG Primer.

**Nota:** O tutorial está em um estágio inicial de desenvolvimento.Se puder, por favor ajude escrevendo um parágrafo ou dois. Pontos extras para quem escrever uma página inteira!

##### Apresentando SVG com Scratch

* Introdução
* Começando
* Posições
* Formas Básicas
* Caminhos
* Preenchimentos e traços
* Gradientes
* Padrões
* Textos
* Transformações básicas
* Recortes e mascaras
* Outros conteúdos em SVG
* Efeitos de filtro
* Fontes SVG
* SVG e a tag Imagem
* Ferramentas para SVG

Os seguintes tópicos são mais avançados e portanto precisam de tutoriais próprios.

##### Scripting SVG with JavaScript

TBD

##### SVG filters tutorial

TBD

##### Animations with SMIL in SVG

TBD

##### Creating fonts in SVG

TBD


Applying SVG effects to HTML content - SVG: Gráficos Vetoriais Escaláveis

Applying SVG effects to HTML content
====================================

Firefox 3.5 introduziu suporte para uso do SVG como um componente do CSS em ordem para introduzir efeitos SVG no conteúdo HTML.

Você pode embutir o SVG nos estilos dentro do mesmo documento, ou com um *stylesheet* externo.

**Nota:** Referencias para SVG em arquivos externos podem ter mesma origem como as do documento originário.

Usando SVG embutido
-------------------

Para aplicar um efeito SVG usando o estilo CSS, você precisa primeiro criar um estilo CSS que faz referência ao SVG que deseja aplicar.

```html
<style>
 .stylename {
 mask: url(#localstyle);
 }
</style>
```

Dentro do exemplo acima, o novo estilo, identificado como "stylename", é uma máscara SVG referenciada pelo ID "localstyle". Quando isso é estabelecido, a máscara pode ser aplicada a qualquer elemento usando o estilo CSS.

Isso soa mais complicado do que realmente é; Olharemos mais de perto os exemplos para termos uma boa ideia como isso funciona.

Então você pode aplicar três estilos: O uso do `mask`, `clip-path`, ou `filter`.

### Exemplo: Masking

Por exemplo, você pod estabelecer um estilo CSS que provêm uma máscara gradiente para um documento HTML usando código SVG similar ao seguinte:

**Aviso:** **Namespacing não é válido no HTML5**, deixe de lado as tags "svg:" para documentos HTML.

```html
<svg height="0">
  <mask
 id="m1"
 maskUnits="objectBoundingBox"
 maskContentUnits="objectBoundingBox">
    <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="white" offset="0" />
      <stop stop-color="white" stop-opacity="0" offset="1" />
    </linearGradient>
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white" />
    <rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)" />
  </mask>
</svg>
```

```css
.target {
  mask: url(#m1);
}
p {
  width: 300px;
  border: 1px solid #000;
  display: inline-block;
  margin: 1em;
}
```

Preste atenção na linha 1, a máscara é especificada usando um URL para o ID "#m1", que é um ID para a máscara SVG específicada abaixo. Todo o que foi especificado detalha mais sobre a máscara de gradiente.

Na realidade aplicar o efeito SVG para XHTML ou HTML é simplesmente feito atribuindo um estilo `target` definido abaixo do elemento, como esse:

```html
<p class="target" style="background:lime;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>

<p></p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <b class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
 >
  Ut enim ad minim veniam.
</p>
```

O exemplo acima pode rodar com uma máscara aplicadaa ele.

### Exemplo: Clipping

Esse exemplo demonstra como usar SVG to recortar conteúdo HTML. Esse exemplo demonstra como usar SVG para recortar conteúdo HTML. Quando você ver a demonstração, não irá notar que as áreas quentes para links são recortes.

```html
<p class="target" style="background:lime;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>

<p></p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <b class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
 >
  Ut enim ad minim veniam.
</p>
<button onclick="toggleRadius()">Toggle radius</button>
<svg height="0">
  <clipPath id="c1" clipPathUnits="objectBoundingBox">
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" />
    <rect x="0.5" y="0.2" width="0.5" height="0.8" />
  </clipPath>
</svg>
```

```css
.target {
  clip-path: url(#c1);
}
p {
  width: 300px;
  border: 1px solid #000;
  display: inline-block;
  margin: 1em;
}
```

Isso estabelece uma área recortada composta por um círculo e um retângulo, e atribui para ela ID "#c1". Isso é então referenciado por um estilo. Quando o estilo `target` é estabelecido desse modo, `clip-path` pode ser atribuido para qualquer outro elemento.

**Nota:** Também você pode fazer mudanças no SVG em tempo real e ver suas alterações imediatamente afetar a renderização do HTML. Por exemplo, você pode redimensionar o círculo dentro do caminho do recorte estabelecendo o seguinte:

```js
function toggleRadius() {
  var circle = document.getElementById("circle");
  circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;
}
```

O exemplo inclui um botão que você pode clicar para alterar o caminho do recorte *(clip-path)* e ver as alterações tomando efeito.

### Exemplo: Filtering

Esse exemplo demonstra como você pode aplicar o filtro HTML ao conteúdo usado no SVG. Isso estabelece vários filtros, que podem ser aplicados para uso de estilos que cada um dos três elementos dentro dos estados normal e *mouse hover*.

Qualquer filtro SVG pode ser aplicado desse modo. Pode exemplo, para aplicar desfoque Gaussiano, você pode usar:

```xml
<svg:filter id="f1">
  <svg:feGaussianBlur stdDeviation="3"/>
</svg:filter>
```

Você pode também aplicar cor a matriz, como este:

```xml
<svg:filter id="f2">
  <svg:feColorMatrix values="0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0 0 0 1 0"/>
</svg:filter>
```

Esses são só dois dos cinco filtros demonstrados nessa seção. Certifique-se de olhar o conteúdo do código ao final da seção se você quiser ver mais.

Os cinco filtros são aplicados usando o seguinte CSS:

```html
<style>
 p.target {
 filter: url(#f3);
 }
 p.target:hover {
 filter: url(#f5);
 }
 b.target {
 filter: url(#f1);
 }
 b.target:hover {
 filter: url(#f4);
 }
 iframe.target {
 filter: url(#f2);
 }
 iframe.target:hover {
 filter: url(#f3);
 }
</style>
```

### Exemplo: Texto Borrado

Para borrar um texto há um webkit baseado dos navegadores com o (prefixo) filtro CSS chamado blur. Você pode arquivar o mesmo efeito usando filtros SVG.

```html
<p class="blur">Time to clean my glasses</p>
<svg xmlns="https://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="wherearemyglasses" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
  </defs>
</svg>
```

Você pode aplicar o SVG e o filtro CSS na mesma classe:

```css
.blur {
  filter: url(#wherearemyglasses);
  /\* ^ for Firefox \*/
  -webkit-filter: blur(1px);
  /\* ^ Webkit browsers \*/
  filter: blur(1px);
}
```

Borrar é um efeito pesado, então assegure-se de usá-lo com moderação, especialmente quando há uma rolagem ou animação.

Usando referências externas
---------------------------

O elemento SVG vem sendo usado para clipping, masking, e mais pode ser carregado de um arquivo externo, contanto que seu documento venha da mesma origem da qual seu HTML está para fazer efeito.

Por exemplo, se seu CSS está em um arquivo com nome `default.css`, esse pode parecer com isso:

```css
.target {
  clip-path: url(resources.svg#c1);
}
```

O SVG é importado do arquivo com nome `resources.svg`, usando o clip-path com o ID c1.

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

* SVG
* SVG Effects for HTML Content (blog post)
* ([archive.org] Web Tech Blog » Blog Archive » SVG External Document References)


SVG Attribute reference - SVG: Gráficos Vetoriais Escaláveis

SVG Attribute reference
=======================

« SVG / SVG Element reference »

SVG Attributes
--------------

### A

* `accent-height (en-US)`
* `accumulate (en-US)`
* `additive (en-US)`
* `alignment-baseline (en-US)`
* `allowReorder`
* `alphabetic (en-US)`
* `amplitude (en-US)`
* `arabic-form (en-US)`
* `ascent (en-US)`
* `attributeName (en-US)`
* `attributeType (en-US)`
* `autoReverse`
* `azimuth (en-US)`
### B

* `baseFrequency (en-US)`
* `baseline-shift (en-US)`
* `baseProfile (en-US)`
* `bbox (en-US)`
* `begin (en-US)`
* `bias (en-US)`
* `by (en-US)`
### C

* `calcMode (en-US)`
* `cap-height (en-US)`
* `class`
* `clip (en-US)`
* `clipPathUnits (en-US)`
* `clip-path (en-US)`
* `clip-rule (en-US)`
* `color (en-US)`
* `color-interpolation (en-US)`
* `color-interpolation-filters (en-US)`
* `color-profile (en-US)`
* `color-rendering`
* `contentScriptType`
* `contentStyleType`
* `cursor (en-US)`
* `cx (en-US)`
* `cy (en-US)`
### D

* `d (en-US)`
* `decelerate`
* `descent (en-US)`
* `diffuseConstant (en-US)`
* `direction (en-US)`
* `display (en-US)`
* `divisor (en-US)`
* `dominant-baseline (en-US)`
* `dur (en-US)`
* `dx (en-US)`
* `dy (en-US)`
### E

* `edgeMode (en-US)`
* `elevation (en-US)`
* `enable-background (en-US)`
* `end (en-US)`
* `exponent (en-US)`
* `externalResourcesRequired`
### F

* `fill`
* `fill-opacity (en-US)`
* `fill-rule (en-US)`
* `filter (en-US)`
* `filterRes`
* `filterUnits (en-US)`
* `flood-color (en-US)`
* `flood-opacity (en-US)`
* `font-family (en-US)`
* `font-size (en-US)`
* `font-size-adjust (en-US)`
* `font-stretch (en-US)`
* `font-style (en-US)`
* `font-variant (en-US)`
* `font-weight (en-US)`
* `format`
* `from (en-US)`
* `fx (en-US)`
* `fy (en-US)`
### G

* `g1 (en-US)`
* `g2 (en-US)`
* `glyph-name (en-US)`
* `glyph-orientation-horizontal (en-US)`
* `glyph-orientation-vertical (en-US)`
* `glyphRef`
* `gradientTransform (en-US)`
* `gradientUnits (en-US)`
### H

* `hanging (en-US)`
* `height (en-US)`
* `horiz-adv-x (en-US)`
* `horiz-origin-x (en-US)`
### I

* `id (en-US)`
* `ideographic (en-US)`
* `image-rendering (en-US)`
* `in (en-US)`
* `in2 (en-US)`
* `intercept (en-US)`
### K

* `k (en-US)`
* `k1 (en-US)`
* `k2 (en-US)`
* `k3 (en-US)`
* `k4 (en-US)`
* `kernelMatrix (en-US)`
* `kernelUnitLength (en-US)`
* `kerning (en-US)`
* `keyPoints (en-US)`
* `keySplines (en-US)`
* `keyTimes`
### L

* `lang (en-US)`
* `lengthAdjust (en-US)`
* `letter-spacing (en-US)`
* `lighting-color (en-US)`
* `limitingConeAngle (en-US)`
* `local`
### M

* `marker-end (en-US)`
* `marker-mid (en-US)`
* `marker-start (en-US)`
* `markerHeight (en-US)`
* `markerUnits (en-US)`
* `markerWidth (en-US)`
* `mask (en-US)`
* `maskContentUnits (en-US)`
* `maskUnits (en-US)`
* `mathematical (en-US)`
* `max (en-US)`
* `media (en-US)`
* `method (en-US)`
* `min (en-US)`
* `mode (en-US)`
### N

* `name (en-US)`
* `numOctaves (en-US)`
### O

* `offset`
* `onabort`
* `onactivate`
* `onbegin`
* `onclick (en-US)`
* `onend`
* `onerror`
* `onfocusin`
* `onfocusout`
* `onload`
* `onmousedown`
* `onmousemove`
* `onmouseout`
* `onmouseover`
* `onmouseup`
* `onrepeat`
* `onresize`
* `onscroll`
* `onunload`
* `onzoom`
* `opacity (en-US)`
* `operator (en-US)`
* `order (en-US)`
* `orient (en-US)`
* `orientation (en-US)`
* `origin (en-US)`
* `overflow (en-US)`
* `overline-position (en-US)`
* `overline-thickness (en-US)`
### P

* `panose-1 (en-US)`
* `paint-order (en-US)`
* `path (en-US)`
* `pathLength (en-US)`
* `patternContentUnits (en-US)`
* `patternTransform (en-US)`
* `patternUnits (en-US)`
* `pointer-events (en-US)`
* `points (en-US)`
* `pointsAtX (en-US)`
* `pointsAtY (en-US)`
* `pointsAtZ (en-US)`
* `preserveAlpha (en-US)`
* `preserveAspectRatio`
* `primitiveUnits (en-US)`
### R

* `r (en-US)`
* `radius (en-US)`
* `refX (en-US)`
* `refY (en-US)`
* `rendering-intent`
* `repeatCount (en-US)`
* `repeatDur (en-US)`
* `requiredExtensions`
* `requiredFeatures (en-US)`
* `restart (en-US)`
* `result (en-US)`
* `rotate (en-US)`
* `rx (en-US)`
* `ry (en-US)`
### S

* `scale (en-US)`
* `seed (en-US)`
* `shape-rendering (en-US)`
* `slope (en-US)`
* `spacing (en-US)`
* `specularConstant (en-US)`
* `specularExponent (en-US)`
* `speed`
* `spreadMethod (en-US)`
* `startOffset (en-US)`
* `stdDeviation (en-US)`
* `stemh (en-US)`
* `stemv (en-US)`
* `stitchTiles (en-US)`
* `stop-color (en-US)`
* `stop-opacity (en-US)`
* `strikethrough-position (en-US)`
* `strikethrough-thickness (en-US)`
* `string (en-US)`
* `stroke (en-US)`
* `stroke-dasharray (en-US)`
* `stroke-dashoffset`
* `stroke-linecap (en-US)`
* `stroke-linejoin (en-US)`
* `stroke-miterlimit (en-US)`
* `stroke-opacity (en-US)`
* `stroke-width (en-US)`
* `style`
* `surfaceScale (en-US)`
* `systemLanguage (en-US)`
### T

* `tableValues (en-US)`
* `target (en-US)`
* `targetX (en-US)`
* `targetY (en-US)`
* `text-anchor (en-US)`
* `text-decoration (en-US)`
* `text-rendering (en-US)`
* `textLength (en-US)`
* `to (en-US)`
* `transform (en-US)`
* `type (en-US)`
### U

* `u1 (en-US)`
* `u2 (en-US)`
* `underline-position (en-US)`
* `underline-thickness (en-US)`
* `unicode (en-US)`
* `unicode-bidi (en-US)`
* `unicode-range (en-US)`
* `units-per-em (en-US)`
### V

* `v-alphabetic (en-US)`
* `v-hanging (en-US)`
* `v-ideographic (en-US)`
* `v-mathematical (en-US)`
* `values (en-US)`
* `version (en-US)`
* `vert-adv-y (en-US)`
* `vert-origin-x (en-US)`
* `vert-origin-y (en-US)`
* `viewBox (en-US)`
* `viewTarget`
* `visibility (en-US)`
### W

* `width`
* `widths (en-US)`
* `word-spacing (en-US)`
* `writing-mode (en-US)`
### X

* `x (en-US)`
* `x-height (en-US)`
* `x1 (en-US)`
* `x2 (en-US)`
* `xChannelSelector (en-US)`
* `xlink:actuate`
* `xlink:arcrole (en-US)`
* `xlink:href (en-US)`
* `xlink:role`
* `xlink:show (en-US)`
* `xlink:title (en-US)`
* `xlink:type (en-US)`
* `xml:base (en-US)`
* `xml:lang (en-US)`
* `xml:space (en-US)`
### Y

* `y (en-US)`
* `y1 (en-US)`
* `y2 (en-US)`
* `yChannelSelector (en-US)`
### Z

* `z (en-US)`
* `zoomAndPan (en-US)`
Categories
----------

### Animation event attributes

`onbegin`, `onend`, `onload`, `onrepeat`### Animation attribute target attributes

`attributeType (en-US)`, `attributeName (en-US)`### Animation timing attributes

`begin (en-US)`, `dur (en-US)`, `end (en-US)`, `min (en-US)`, `max (en-US)`, `restart (en-US)`, `repeatCount (en-US)`, `repeatDur (en-US)`, `fill`### Animation value attributes

`calcMode (en-US)`, `values (en-US)`, `keyTimes`, `keySplines (en-US)`, `from (en-US)`, `to (en-US)`, `by (en-US)`, `autoReverse`, `accelerate`, `decelerate`### Animation addition attributes

`additive (en-US)`, `accumulate (en-US)`### Conditional processing attributes

`requiredExtensions`, `requiredFeatures (en-US)`, `systemLanguage (en-US)`.

### Core attributes

`id (en-US)`, `xml:base (en-US)`, `xml:lang (en-US)`, `xml:space (en-US)`### Document event attributes

`onabort`, `onerror`, `onresize`, `onscroll`, `onunload`, `onzoom`### Filter primitive attributes

`height (en-US)`, `result (en-US)`, `width`, `x (en-US)`, `y (en-US)`### Graphical event attributes

`onactivate`, `onclick (en-US)`, `onfocusin`, `onfocusout`, `onload`, `onmousedown`, `onmousemove`, `onmouseout`, `onmouseover`, `onmouseup`### Presentation attributes

**Nota:** Note that all SVG presentation attributes can be used as CSS properties.

`alignment-baseline (en-US)`, `baseline-shift (en-US)`, `clip (en-US)`, `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-interpolation-filters (en-US)`, `color-profile (en-US)`, `color-rendering`, `cursor (en-US)`, `direction (en-US)`, `display (en-US)`, `dominant-baseline (en-US)`, `enable-background (en-US)`, `fill`, `fill-opacity (en-US)`, `fill-rule (en-US)`, `filter (en-US)`, `flood-color (en-US)`, `flood-opacity (en-US)`, `font-family (en-US)`, `font-size (en-US)`, `font-size-adjust (en-US)`, `font-stretch (en-US)`, `font-style (en-US)`, `font-variant (en-US)`, `font-weight (en-US)`, `glyph-orientation-horizontal (en-US)`, `glyph-orientation-vertical (en-US)`, `image-rendering (en-US)`, `kerning (en-US)`, `letter-spacing (en-US)`, `lighting-color (en-US)`, `marker-end (en-US)`, `marker-mid (en-US)`, `marker-start (en-US)`, `mask (en-US)`, `opacity (en-US)`, `overflow (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stop-color (en-US)`, `stop-opacity (en-US)`, `stroke (en-US)`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap (en-US)`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `text-anchor (en-US)`, `text-decoration (en-US)`, `text-rendering (en-US)`, `unicode-bidi (en-US)`, `visibility (en-US)`, `word-spacing (en-US)`, `writing-mode (en-US)`### Transfer function attributes

`type (en-US)`, `tableValues (en-US)`, `slope (en-US)`, `intercept (en-US)`, `amplitude (en-US)`, `exponent (en-US)`, `offset`### XLink attributes

`xlink:href (en-US)`, `xlink:type (en-US)`, `xlink:role`, `xlink:arcrole (en-US)`, `xlink:title (en-US)`, `xlink:show (en-US)`, `xlink:actuate`


Intensivo de Namespaces - SVG: Gráficos Vetoriais Escaláveis

Intensivo de Namespaces
=======================

Como um dialeto XML, o SVG tem *namespace*. É importante entender o conceito de *namespaces* e como eles são usados se você planeja criar seu próprio conteúdo em SVG. Versões de visualizadores SVG prévias ao lançamento do Firefox 1.5 infelizmente deu pouca atenção aos *namespaces* mas eles são essenciais para dialetos multi-XML suportando agentes de usuários como navegadores baseados em Gecko que devem ser muito rigorosos. Tome um tempo para entender *namespaces* agora e irá te privar de muita dor de cabeça no futuro.

### Experiência

Tem sido uma longa meta do W3C para fazer possível para diferentes tipos de conteúdo baseado em XML ser misturado no mesmo arquivo XML. Por exemplo, SVG e MathML podem ser incorporados diretamente em um documento cientificamente baseado em XHTML. Ser apto de misturar tipos de conteúdo como este tem muitas vantagens, mas também requeriu problemas reais para serem resolvidos.

Naturalmente, cada dialeto XML define o significado de um nome de tag de marcação descrito em sua especificação. O problema em misturar conteúdo de diferentes dialetos XML em um único documento XML é que as tags definidas por um dialeto podem ter o mesmo nome que as tags definidas por outro. Por exemplo, ambos XHTML e SVG tem uma tag `<title>`. Como o software deveria distinguir entre os dois? Na verdade, como o software conta quando o conteúdo XML é algo que ele conhece sobre, e não somente um arquivo XML sem significado contendo nomes de tags arbitrárias desconhecidas para ele?

Contrário à opinição popular, a resposta para esta pergunta não é "ele pode dizer pela declaração `DOCTYPE`". DTD's não foram feitos com conteúdo misto levado em consideração, e tentativas passadas de criar DTD's de conteúdo misto são hoje consideradas de terem falhado. O XML, e alguns dialetos XML (incluindo SVG), não requerem uma declaração `DOCTYPE`, e SVG 1.2 nem terá um. O fato que declarações `DOCTYPE` (usualmente) combinam o conteúdo em arquivos de tipo de conteúdo únicos é uma mera coincidência. Os DTDs são somente para validação, não para identificação de conteúdo. Softwared que enganam e identificam conteúdo XML usando sua declaração `DOCTYPE` causam dano.

A resposta real para a pergunta é que um conteúdo XML conta para o software qual dialeto os nomes de tag pertencem ao dar "declarações de *namespaces*" para as tags.

### Declarando *namespaces*

O que estas declarações de *namespace* parecem, e onde elas vão? Aqui vai um exemplo curto.
```

<svg xmlns="https://www.w3.org/2000/svg">
  <!-- mais tags aqui -->
</svg>
```

A declaração de *namespace* é fornecida por um atributo `xmlns`. Este atributo diz que a tag `<svg>` e suas tags filhas pertencem a qualquer dialeto XML que tem o nome de *namespace* 'http://www.w3.org/2000/svg' que é, com certeza, SVG. Note a declaração de *namespace* somente precisa ser ser fornecida de uma vez em uma tag raiz. A declaração define o *namespace padrão*, então o software sabe que todas as tags descendentes de tags `<svg>` também pertencem ao mesmo *namespace*. Softwares conferem para ver se eles reconhecem o nome de *namespace* para determinar se eles sabem como lidar com a marcação.

Note que nomes de *namespace* são somente strings, então o fato que o nome de *namespace* SVG também parece com um URI não é importante. URI's são comumente usadas porque eles são únicos, a intenção não é para "linkar" em algum lugar. (Na verdade URI's são usadas tão frequentemente que o termo "URI de *namespace*" é comumente usado ao invés de "nome de namespace".)

#### Redeclarando o *namespace* padrão

Se todos os descendentes da tag raiz também são definidos para estarem presentes no *namespace* padrão, como você mistura conteúdo de outro *namespace*? Fácil. Você apenas redefine o *namespace* padrão. Aqui vai um exemplo simples.
```

<html xmlns="https://www.w3.org/1999/xhtml">
  <body>
    <!-- algumas tags XHTML aqui -->
    <svg xmlns="https://www.w3.org/2000/svg" width="300px" height="200px">
      <!-- algumas tags SVG aqui -->
    </svg>
    <!-- algumas tags XHTML aqui -->
  </body>
</html>
```

Neste exemplo o atributo `xmlns` na tag raíz `<html>` declara o *namespace* padrão para ser XHTML. Como um resultado, ela e todas as tags filhas são interpretadas pelo software como pertencente ao XHTML, exceto para a tag `<svg>`. A tag `<svg>` tem seu próprio atributo `xmlns`, e ao redeclarar o *namespace* padrão, isto conta para o software que a tag `<svg>` e suas descendentes (a menos que elas também redeclarem o *namespace* padrão) pertencem ao SVG.

Viu? *Namespaces* não são tão difíceis.

#### Declarando prefixos de *namespaces*

Dialetos XML não somente definem suas próprias tags, mas também seus próprios atributos. Por padrão, atributos não tem um *namespace*, e são conhecidos somente por ser únicos porque aparecem em um elemento que por si só tem um nome único. No entanto, algumas vezes é necessário definir atributos para que eles possam ser reusados em diferentes elementos e ainda sim serem considerados como sendo do mesmo atributo, independente do elemento com o qual eles são usados. Um exemplo muito bom disto é o atributo `href` definido pela especificação XLink. Este atributo é usado comumente por outros dialetos XML como um meio de conectar a recursos externos. Mas como você conta para o software qual dialeto o atributo pertence, neste caso XLink? Considere o exemplo seguinte.
```

<svg xmlns="https://www.w3.org/2000/svg"
     xmlns:xlink="https://www.w3.org/1999/xlink">
  <script xlink:href="o-script-mais-legal.js" type="text/ecmascript"/>
</svg>
```

Este exemplo tem o atributo de aparência bastante incomum `xmlns:xlink`. Como você pode ter adivinhado da primeira parte 'xmlns', esta é outra declaração de *namespace*. Contudo, ao invés de definir o *namespace* padrão, esta declaração de *namespace* define o namespace para alguma coisa chamada como "prefixo *namespace*". Neste caso, nós escolhemos usar o prefixo `xlink` (a segunda parte) uma vez que o prefixo será usado para contar ao software sobre os atributos que pertencem ao XLink.

Como seus nomes sugerem, prefixos de *namespace* são usados para prefixar nomes de atributos e nomes de tags. Isto é feito colocando o prefixo de *namespace* e dois pontos antes do nomes de atributo como mostrado na tag `<script>` no exemplo acima. Isto conta para o software que aquele atributo particular pertence ao *namespace* atribuído ao prefixo de *namespace* (XLink), e é um atribuído que pode ser usado com o mesmo significado em outras tags.

Note que é um erro de XML usar um prefixo que não foi ligado au um nome de *namespace*. A ligação criada pelo atributo `xmlns:xlink` no exemplo acima é absolutamente essencial se o atributo `xlink:href` não é para para causar um erro. Este atributo XLink é também frequentemente usado no SVG nas tags `<a>`, `<use>` e `<image>`, dentre outros, então é uma boa idéia sempre incluir a declaração XLink em seus documentos.

Aparte, é útil saber que prefixos podem também ser usados para names de tags. Isto conta para o software que aquela tag em particular (não a tag filha) pertence ao *namespace* ligado ao prefixo. Saber disso irá te poupar de confusão se você se deparar com uma marcação como a do exemplo seguinte:
```

<html xmlns="https://www.w3.org/1999/xhtml"
      xmlns:svg="https://www.w3.org/2000/svg">
  <body>
    <h1>SVG incorporado inline no XHTML</h1>
    <svg:svg width="300px" height="200px">
      <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/>
    </svg:svg>
  </body>
</html>
```

Note que pelo prefixo de *namespace* ser usado para a tag `<svg:svg>` e seu filho `<svg:circle>`, não foi necessário redeclarar o *namespace* padrão. Em geral, é melhor redeclarar o *namespace* padrão ao invés de prefixar muitas tags desta forma.

### *Scripting* em XML com *namespaces*

*Namespaces* não afetam somente a marcação, mas também o *scripting*. Se você escreve scripts para XML com *namespace*, como SVG, continue lendo.

A recomendação DOM Level 1 foi criado antes da recomendação *original Namespaces in XML* ser lançada; assim sendo, DOM1 não está ciente de *namespaces*. Isto causa problemas para XML com namespaces, como SVG. Para resolver estes problemas, a recomendação DOM Level 2 Core adicionou equivalentes cientes do *namespace* de todos os métodos aplicáveis do DOM Nível 1. Quando estiver *scripting* em SVG, é *importante usar os métodos cientes de namespace*. A tabela abaixo lista os métodos DOM1 que não devem ser usados em SVG, junto com seus equivalentes em DOM2 que devem ser usados ao invés.

| DOM1 (não use) | DOM2 (use estes!) |
| --- | --- |
| createAttribute | createAttributeNS |
| createElement | createElementNS |
| getAttributeNode | getAttributeNodeNS |
| getAttribute | getAttributeNS |
| getElementsByTagName | getElementsByTagNameNS (também added to Element) |
| getNamedItem | getNamedItemNS |
| hasAttribute | hasAttributeNS |
| removeAttribute | removeAttributeNS |
| removeNamedItem | removeNamedItemNS |
| setAttribute | setAttributeNS |
| setAttributeNode | setAttributeNodeNS |
| setNamedItem | setNamedItemNS |

O primeiro argumento para todos os métodos cientes de *namespace* em DOM2 devem ser nomes de *namespace* (também conhecidos como *namespace* URI) do elemento ou atributo em questão. Para **elementos** SVG isto é 'http://www.w3.org/2000/svg'. Contudo, note cuidadosamente: as recomendações *Namespaces in XML 1.1* declara que o nome de *namespace* para atributos sem um prefixo não tem um valor. Em outras palavras, states that the *namespace* name for attributes without a prefix does not have a value. In other words, embora os atributos pertencem ao namespace da tag, você não usa o nome de namespace da tag. Em vez disso, **você deve usar nulo como nome de *namespace* para atributos não qualificados(sem prefixos)**. Então, para criar um *elemento* SVG `rect` usando `document.createElementNS()`, você deve escrever:

```javascript
document.createElementNS("https://www.w3.org/2000/svg", "rect");
```

Mas para recuperar o valor de atributo `x` em um elemento SVG `rect`, você deve escrever:

```javascript
rect.getAttributeNS(null, "x");
```

Note que isto não é o caso para atributos *com* um prefixo de *namespace* (atributos que não pertencem ao mesmo dialeto XML como a tag). Atributos como o `xlink:href` requerem o nome de *namespace* que foi designado para aquele prefixo (`https://www.w3.org/1999/xlink` para XLink). Consequentemente para pegar o valor do atributo `xlink:href` de um elemento `<a>` em SVG você deveria escrever:

```javascript
elt.getAttributeNS("https://www.w3.org/1999/xlink", "href");
```

Para definir atributos que tem um *namespace*, é recomendado (mas não requerido) que você também inclua seus prefixos no segundo argumento para que o DOM possa, depois, ser facilmente convertido depois para XML (se, por exemplo você quer enviá-los de volta para o servidor). Por exemplo:

```javascript
elt.setAttributeNS(
  "https://www.w3.org/1999/xlink",
  "xlink:href",
  "otherdoc.svg",
);
```

Como um exemplo final, aqui está a demonstração de como você deveria criar um elemento `<image>` dinamicamente usando script:

```javascript
var SVG\_NS = "https://www.w3.org/2000/svg";
var XLink_NS = "https://www.w3.org/1999/xlink";
var image = document.createElementNS(SVG\_NS, "image");
image.setAttributeNS(null, "width", "100");
image.setAttributeNS(null, "height", "100");
image.setAttributeNS(XLink_NS, "xlink:href", "flower.png");
```

### Conclusão

Tenha certeza que você sempre declara os *namespaces* que você usa em seus arquivos XML. Se você não usar, softwares como Firefox não reconhecerão seus conteúdos e irão simplesmente mostrar a marcação XML ou informar o usuário que há um erro no XML. É uma boa idéia usar um template que inclui todas as declarações de *namespace* comumente usadas ao criar novos arquivos SVG. Se você não tem um ainda, faça um começando com o seguinte código:
```

<svg xmlns="https://www.w3.org/2000/svg"
     xmlns:xlink="https://www.w3.org/1999/xlink">
</svg>
```

Mesmo que você não use todos aqueles *namespaces* em um documento, não há dano ao incluir declarações de *namespace*. Isto pode te privar de alguns erros irritantes se você acabar adicionando conteúdo de um dos *namespaces* não usados em datas posteriores.

### Um exemplo completo

Para um exemplo completo, veja *SVG: Namespaces Crash Course: Example (en-US)*.