diff options
Diffstat (limited to 'files/pt-br/web/html/global_attributes')
12 files changed, 2064 insertions, 0 deletions
diff --git a/files/pt-br/web/html/global_attributes/accesskey/index.html b/files/pt-br/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..255522852e --- /dev/null +++ b/files/pt-br/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,141 @@ +--- +title: accesskey +slug: Web/HTML/Global_attributes/accesskey +tags: + - Atributos globais + - Referências +translation_of: Web/HTML/Global_attributes/accesskey +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>O <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <code><strong>accesskey</strong></code> 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).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div> + +<div class="hidden">O código fonte desse exemplo interativo está armazenado em um repositório no GitHub. Se você deseja contribuir com o projeto de exemplos interativos, por favor clone o repositório: <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie uma solicitação de recebimento.</div> + +<div class="note"> +<p><strong>Nota</strong>: 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.</p> +</div> + +<p>A maneira de ativar a tecla de acesso depende do navegador e de sua plataforma:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th></th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td>No Firefox 57 ou mais recente: <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> or <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + No Firefox 14 ou mais recente: <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + No Firefox 13 ou mais antigo: <kbd>Control</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Edge</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2" rowspan="1">N/A</td> + </tr> + <tr> + <th>Internet Explorer</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2" rowspan="1">N/A</td> + </tr> + <tr> + <th>Google Chrome</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Safari</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td>N/A</td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 15+</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 12</th> + <td colspan="3" rowspan="1"> + <p><kbd>Shift</kbd> + <kbd>Esc</kbd> abre uma lista de conteúdos acessíveis pela tecla de acesso e, em seguida, pode escolher um item pressionando <kbd><em>key</em></kbd></p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Preocupações_com_acessibilidade">Preocupações com acessibilidade</h2> + +<p>Além do baixo suporte ao navegador, existem inúmeras preocupações com o atributo <code>accesskey</code>:</p> + +<ul> + <li>Um valor de <code>accesskey</code> 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.</li> + <li>Certos valores de <code>accesskey</code> 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.</li> + <li>Os valores de <code>accesskey</code> 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.</li> + <li>Informar o usuário que <code>accesskey</code> 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 (<code>accesskeys)</code>.</li> +</ul> + +<p>Devido a esses problemas, geralmente não é aconselhável usar o <code>accesskey</code>s para a maioria dos sites e aplicativos da web.</p> + +<p><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM: Keyboard Accessibility - Accesskey</a></p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>Comportamento mais realista descrito para o que é implementado na realidade.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nenhuma alteração das últimas especificações do W3C {{SpecName('HTML5.1')}} .</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Nenhuma alteração em {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>A partir da {{SpecName('HTML4.01')}}, vários caracteres podem ser definidios como teclas de atalho. Além disso, pode ser definido em qualquer elemento.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Suportado apenas em {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} e {{ HTMLElement("textarea") }}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Browsers">Compatibilidade com Browsers </h2> + +<div class="hidden">A tabela de compatibilidade desta página é gerada de dados estruturados. Se você quiser contribuir com os dados, por favor, verifique em <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie uma solicitação de recebimento.</div> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.global_attributes.accesskey")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("Element.accessKey")}}</li> + <li>{{domxref("HTMLElement.accessKeyLabel")}}</li> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/autocapitalize/index.html b/files/pt-br/web/html/global_attributes/autocapitalize/index.html new file mode 100644 index 0000000000..087bb9b29c --- /dev/null +++ b/files/pt-br/web/html/global_attributes/autocapitalize/index.html @@ -0,0 +1,49 @@ +--- +title: autocapitalize +slug: Web/HTML/Global_attributes/autocapitalize +tags: + - Atributos globais + - Autocapitalize + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><span class="seoSummary">O <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <strong><code>autocapitalize</code></strong> é um atributo enumerado que controla quando e como entradas de texto são automaticamente capitalizadas confome são escritas/editadas pelo usuário.</span> O atributo deve receber um dos seguintes valores:</p> + +<ul> + <li><code>off</code> ou <code>none</code>: Nenhuma capitalização é aplicada (por padrão as letras serão minúsculas)</li> + <li><code>on</code> ou <code>sentences</code>: 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.</li> + <li><code>words</code>: A letra inicial de cada palavra serão por padrão maiúsculas; todas as demais letras serão por padrão minúsculas.</li> + <li><code>characters</code>: Todas as letras deverão ser maiúsculas por padrão.</li> +</ul> + +<p>O atributo <code>autocapitalize</code> 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 <code>autocapitalize</code> permite a autores sobrescreverem esse comportamento por elemento.</p> + +<p>O atributo <code>autocapitalize</code> nunca ativa a autocapitalização para um elemento {{HTMLElement("input")}} com um atributo {{htmlattrxref("type", "input")}} cujo valor seja <code>url</code>, <code>email</code>, ou <code>password</code>.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browsers">Compatibilidade de Browsers</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div> + +<p>{{Compat("html.global_attributes.autocapitalize")}}</p> diff --git a/files/pt-br/web/html/global_attributes/class/index.html b/files/pt-br/web/html/global_attributes/class/index.html new file mode 100644 index 0000000000..fb691e1deb --- /dev/null +++ b/files/pt-br/web/html/global_attributes/class/index.html @@ -0,0 +1,108 @@ +--- +title: class +slug: Web/HTML/Global_attributes/class +tags: + - Atributos globais + - Global attributes + - HTML + - Reference + - Referencia +translation_of: Web/HTML/Global_attributes/class +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>O <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributo global</a> <strong>class</strong> é 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 <a href="/pt-BR/docs/Web/CSS/Class_selectors">seletores de classe</a> ou funções como o método DOM {{domxref("document.getElementsByClassName")}}.</p> + +<p>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. <em>atributo</em> para descrever um atributo em vez de <em>ítalico</em>, mesmo que um elemento desta classe possa ser representado por <em>ítalico)</em>. Nomes baseados em semântica permanecem coerentes mesmo se a representação da página mude.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nenhuma mudança desde o mais recente snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, nenhuma mudança desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}. Apartir de {{SpecName('HTML4.01')}}, <code>class</code> é um atributo global verdadeiro.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Suportado por todos os elementos menos {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, e {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_nos_Navegadores">Compatibilidade nos Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>class</code> é um atributo global verdadeiro desde desde o Firefox 32.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Todos os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/contenteditable/index.html b/files/pt-br/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..6360e4c583 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,77 @@ +--- +title: contenteditable +slug: Web/HTML/Global_attributes/contenteditable +translation_of: Web/HTML/Global_attributes/contenteditable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>O <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes">atributo global</a><span style="color: #3d7e9a;"> </span><strong><code>contenteditable</code></strong> é 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.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}</div> + +<p class="hidden">A fonte para este exemplo interativo está armazenada em um repositório do GitHub. Se você quiser contribuir para o projeto de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> e nos envie um pull request.</p> + +<p>O atributo deve ter um dos seguintes valores:</p> + +<ul> + <li><code>true</code> ou uma <a href="https://developer.mozilla.org/pt-BR/docs/Glossario/String">string</a> vazia, o que indica que o elemento é editável.</li> + <li><code>false</code>, o que indica que o elemento não é editável.</li> +</ul> + +<p>Se o atributo for aplicado sem um valor, como <code><label contenteditable>Rótulo de Exemplo</label></code>, seu valor é tratado como uma <em>string</em> vazia.</p> + +<p>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.</p> + +<p>Observe que, embora seus valores permitidos incluam <em>true</em> e <em>false</em>, este atributo é um enumerado e não um <em><a href="https://developer.mozilla.org/pt-BR/docs/Glossario/Booleano">Booleano</a></em>.</p> + +<p>Você pode definir a cor usada para desenhar a inserção de texto {{Glossary("caret")}} com a propriedade {{cssxref("caret-color")}} do CSS.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Nenhuma mudança na última instância, {{SpecName("HTML5.2")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Instância de {{SpecName("HTML WHATWG")}}, sem mudanças para {{SpecName("HTML5.1")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Instância de {{SpecName("HTML WHATWG")}}, sem mudanças para {{SpecName("HTML5 W3C")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Instância de {{SpecName("HTML WHATWG")}}, definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, por favor, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div> + +<p>{{Compat("html.global_attributes.contenteditable")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Editable_content">Tornando o conteúdo editável</a></li> + <li>Todos os <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a></li> + <li>{{domxref("HTMLElement.contentEditable")}} e {{domxref("HTMLElement.isContentEditable")}}</li> + <li>A propriedade {{cssxref("caret-color")}} do CSS.</li> + <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/Events/input">Evento de <code>input</code> - <code>HTMLElement</code></a></li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/data-_star_/index.html b/files/pt-br/web/html/global_attributes/data-_star_/index.html new file mode 100644 index 0000000000..e1beb73d67 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/data-_star_/index.html @@ -0,0 +1,116 @@ +--- +title: data-* +slug: Web/HTML/Global_attributes/data-* +translation_of: Web/HTML/Global_attributes/data-* +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>Os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a> <strong>data-*</strong> formam uma classe de atributos conhecida como <strong>custom data attributes</strong>, a qual permite que informações proprietárias sejam trocadas via script entre o <a href="/en-US/docs/Web/HTML" title="en/HTML">HTML</a> e sua representação <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> . Todos esses dados personalizados estão disponíveis através da interface {{domxref("HTMLElement")}} do elemento, onde o atributo está definido. A propriedade {{domxref("HTMLElement.dataset")}} concede acesso a estes atributos .<br> + O <code>*</code> pode ser substituído por qualquer nome, desde que siga <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" title="http://www.w3.org/TR/REC-xml/#NT-Name">a regra de criação de nomes xml</a> com as seguintes restrições:</p> + +<ul> + <li>O nome não deve começar com xml, independente da caixa destas letras (Ex: XML, xml, XMl, XmL, ...);</li> + <li>O nome não deve conter ponto e vírgula (<code>U+003A</code>);</li> + <li>O nome não deve conter letras maiúsculas.</li> +</ul> + +<p>Observe que a propriedade {{domxref("HTMLElement.dataset")}} é uma {{domxref("DOMStringMap")}}, e o nome da custom data attribute <em> data-test-value</em> será acessível através do <code>HTMLElement.dataset.testValue </code>( ou<code> HTMLElement.dataset["<em>testValue</em>"] </code>) e todo o traço (<code>U+002D</code>) será substituído pela capitalização(tornar maiúscula) da letra subsequente, deixando o nome no formato camelcase.</p> + +<h3 id="Uso">Uso</h3> + +<p>Para adicionar atributos <strong>data-* </strong>, mesmo os elementos HTML mais comuns podem tornar-se mais complexos e poderosos objetos programáveis. Por exemplo, um "<a href="https://en.wikipedia.org/wiki/Sprite_(computer_graphics)">sprite</a><em>"</em> de uma nave espacial em um jogo pode ser um simples elemento {{HTMLElement("img")}} com um atributo <a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a> e diversos atributos data-*:</p> + +<pre><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> +</pre> + +<p id="Specifications">(Veja mais <em><a href="https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">aqui</a>)</em></p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop(6) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile(6) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> + <li>The {{domxref("HTMLElement.dataset")}} property that allows to access and modify these values.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/hidden/index.html b/files/pt-br/web/html/global_attributes/hidden/index.html new file mode 100644 index 0000000000..47dd314069 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/hidden/index.html @@ -0,0 +1,111 @@ +--- +title: hidden +slug: Web/HTML/Global_attributes/hidden +tags: + - Atributos globais + - HTML + - Referência(2) +translation_of: Web/HTML/Global_attributes/hidden +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary">O <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributo global</a> <strong><code>hidden</code></strong> é um atributo booleano que indica se um elemento é ou não <em>relevante</em>. 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.</span> Os navegadores não renderizarão elementos com o atributo <code>hidden</code> setado.</p> + +<p>O atributo <code>hidden</code> não deve ser utilizado para esconder conteúdo que poderia legitimamente ser mostrado em outra apresentação, por exemplo, não é correto usar <code>hidden</code> 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 <code>hidden</code>, ele está escondido de todas as apresentações incluindo, por exemplo, leitores de tela.</p> + +<p>Elementos com <code>hidden</code> não devem estar ligados a outros elementos sem <code>hidden</code>. Elementos filhos de um elemento com o atributo <code>hidden</code> ainda estão ativos, ou seja, é possível executar a ação <code>submit</code> de um formulário ou uma tag <code>script</code> pode ser executada se em ambos os casos estes elementos forem filhos de um elemento com o atributo <code>hidden</code>.</p> + +<p>Por exemplo, é incorreto o uso do atributo <code>href</code> referenciando a uma sessão marcada com o atributo <code>hidden</code>. Se o conteúdo não é aplicável ou relevante, não faz sentido fazer a referência.</p> + +<p>Pode ser correto, entretanto, usar o atributo ARIA <code>aria-describedby</code>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</p> + +<p>Similarmente, um elemento canvas com atributo <code>hidden</code> 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 <code>form</code> com atributo <code>hidden</code>.</p> + +<div class="note"> +<p><strong>Nota:</strong> Mudar o valor da propriedade {{cssxref("display")}} no CSS de um elemento com o atributo <code>hidden</code> sobrescreve o comportamento. Por exemplo, elementos com o estilo <code>display: flex;</code> serão mostrados independente da presença do atributo <code>hidden</code>.</p> +</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sem mudanças desde o último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><span id="result_box" lang="pt"><span>Define</span> <span>o processamento padrão</span> <span>sugerido d</span><span>o atributo hidden</span> <span>usando </span></span>CSS</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definição inicial do snapshot de {{SpecName('HTML WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_em_navegadores">Compatibilidade em navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>11</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>4</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>11</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Todos os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/id/index.html b/files/pt-br/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..98141f9b80 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/id/index.html @@ -0,0 +1,115 @@ +--- +title: id +slug: Web/HTML/Global_attributes/id +tags: + - Atributos globais + - HTML + - Referência(2) +translation_of: Web/HTML/Global_attributes/id +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div>O <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributo global</a> <strong>id</strong> define um identificador exclusivo (ID) que deve ser único por todo o documento. Seu objetivo é identificar o elemento ao navegar por âncoras<em> </em>(usando um identificador de fragmento), quando utilizar scripts ou estilizando (com CSS).</div> + +<div> </div> + +<p>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.</p> + +<p>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 <strong>class</strong>, que permite múltiplos valores separados por espaço, os elementos podem ter somente um único ID.</p> + +<div class="note"> +<p><strong>Nota:</strong> Utilizar caracteres exceto letras e dígitos ASCII, <code>'_'</code>, <code>'-'</code> e <code>'.'</code> 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.</p> +</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nenhuma mudança desde o mais recente snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, nenhuma mudança desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, passa a aceitar <code>'_'</code>, <code>'-'</code> and <code>'.'</code> se não estiverem no começo do ID. Se torna um atributo global verdadeiro.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Suportado por todos os elementos menos {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_nos_Navegadores">Compatibilidade nos Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>id</code> é um atributo global verdadeiro desde Gecko 32.0 {{geckoRelease("32.0")}}.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Todos os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</li> + <li>{{domxref("Element.id")}} para explorar este atributo.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/index.html b/files/pt-br/web/html/global_attributes/index.html new file mode 100644 index 0000000000..adabaf9186 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/index.html @@ -0,0 +1,479 @@ +--- +title: Atributos Globais +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - Internet + - NeedsBrowserCompatibility + - NeedsTranslation + - PrecisaCompatibilidadeNavegadores + - Reference + - Referencia + - TopicStub + - Web + - atributo +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="summary"> +<p><strong>Atributos Globais</strong> são atributos comuns a todos elementos HTML; eles podem ser usados em todos os elementos, embora os atributos não tenham efeito em alguns elementos.</p> +</div> + +<p>Os atributos globais podem ser especificados em todos os elementos HTML, mesmo aqueles não especificados no padrão. Isso significa que qualquer elemento não padrão ainda deve permitir esses atributos, mesmo que usar esses elementos significa que o documento não é mais compatível com HTML5. Por exemplo, navegadores compatíveis com HTML5 escondem o conteúdo marcado como <code><foo hidden>...<foo>, </code>mesmo que <code><foo></code> não seja um elemento HTML válido.</p> + +<p>Além dos atributos globais HTML básicos, os seguintes atributos globais também existem:</p> + +<ul> + <li><strong><code>xml:lang</code></strong> e <code><strong>xml:base</strong></code> — Estes são herdados das especificações XHTML e obsoletos, mas mantidos para fins de compatibilidade.</li> + <li>Os vários atributos <code><strong><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">aria-*</a></strong></code>, são utilizados para promover a acessibilidade.</li> + <li>Os atributos manipuladores de eventos:: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="Lista_dos_Atributos_Globais">Lista dos Atributos Globais</h2> + +<dl> + <dt id="attr-accesskey"><code><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt> + <dd>Fornece uma dica para gerar um atalho de teclado para o elemento atual. Este atributo consiste em uma lista de caracteres separados por espaços. O navegador deve usar o primeiro que existe no layout do teclado do computador.</dd> + <dt id="attr-class"><code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code></dt> + <dd>É uma lista separada por espaço das classes do elemento. as classes permitem ao CSS e ao JavaScript selecionar e acessar elementos específicos atraves dos seletores de classe ou funciona como um método <br> + {{domxref("Document.getElementsByClassName()")}}.</dd> + <dt id="attr-contenteditable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt> + <dd>É um atributo enumerado que indica se o elemento deve ser editado pelo usuário. Se assim for, o navegador modifica seu widget para permitir a edição. O atributo deve ter um dos seguintes valores: + <ul> + <li><code>true</code> ou uma string vazia, indica que o elemento deve ser editável;</li> + <li><code>false</code>, indica que o elemento não deve ser editável.</li> + </ul> + </dd> + <dt id="attr-contextmenu"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt> + <dd>É o <code><a href="#attr-id"><strong>id</strong></a></code> de um {{HTMLElement("menu")}} para usar como o menu contextual para este elemento.</dd> + <dt id="attr-dataset"><code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt> + <dd>Forma uma classe de atributos, denominado de dados personalizados, que permite troca de informações proprietárias entre o <a href="/en-US/docs/Web/HTML">HTML</a> e a sua representação no <a href="/en-US/docs/Glossary/DOM">DOM</a> pode ser usada por scripts. Todos esses dados personalizados estão disponíveis através da interface do elemento {{domxref("HTMLElement")}} em que o atributo está definido. A propriedade {{domxref("HTMLElement.dataset")}} dá acesso a eles.</dd> + <dt id="attr-dir"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt> + <dd>É um atributo enumerado que indica a direcionalidade do texto do elemento. Pode ter os seguintes valores: + <ul> + <li><code>ltr</code>, significa da esquerda para a direita e deve ser usado para idiomas que são escritos da esquerda para a direita (como o português do Brasil, inglês, espanhol, etc);</li> + <li><code>rtl</code>, significa da direita para a esquerda e deve ser usado para idiomas que são escritos da direita para a esquerda (como o árabe);</li> + <li><code>auto</code>, que permite que o agente do usuário decida. Ele usa um algoritmo básico, pois analisa os caracteres dentro do elemento até encontrar um caractere com uma direcionalidade forte e, em seguida, aplica essa direcionalidade para todo o elemento.</li> + </ul> + </dd> + <dt id="attr-draggable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">draggable</a></code> {{experimental_inline}}</dt> + <dd>É um atributo enumerado que indica se o elemento pode ser arrastado, usando a <a href="/en-us/docs/DragDrop/Drag_and_Drop">API Drag and Drop</a>. Pode ter os seguintes valores: + <ul> + <li><code>true</code>, que indica que o elemento pode ser arrastado</li> + <li><code>false</code>, que indica que o elemento não pode ser arrastado.</li> + </ul> + </dd> + <dt id="attr-dropzone"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt> + <dd>É um atributo enumerado que indica quais tipos de conteúdo podem ser descartados em um elemento, usando a <a href="/en-US/docs/DragDrop/Drag_and_Drop">API Drag and Drop</a>. Pode ter os seguintes valores: + <ul> + <li><code>copy</code>, que indica que o lançamento criará uma cópia do elemento que foi arrastado.</li> + <li><code>move</code>, que indica que o elemento que foi arrastado será movido para esta nova localização.</li> + <li><code>link</code>, irá criar um link para os dados arrastados.</li> + </ul> + </dd> + <dt id="attr-hidden"><code><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt> + <dd>Um atributo booleano indica que o elemento ainda não é relevante ou não é mais relevante. Por exemplo, ele pode ser usado para ocultar elementos da página que não podem ser usados até que o processo de login tenha sido concluído. O navegador não renderizará esses elementos. Este atributo não deve ser usado para ocultar conteúdo que possa ser legível.</dd> + <dt id="attr-id"><code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code></dt> + <dd>Define um identificador exclusivo (ID) que deve ser único em todo o documento. Seu objetivo é identificar o elemento ao vincular (usando um identificador de fragmento), um script ou estilo (com CSS).</dd> +</dl> + +<div class="note"> +<p><strong>Nota: </strong>Os 5 atributos seguintes são partes do <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">Recursos de Microdados WHATWG HTML</a>.</p> +</div> + +<dl> + <dt id="attr-itemid"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt> + <dd>O identificador único e global de um item.</dd> + <dt id="attr-itemprop"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt> + <dd>Usado para adicionar propriedades a um item. Cada elemento HTML pode ter um atributo itemprop especificado, onde um itemprop consiste em um par de nomes e valores.</dd> + <dt id="attr-itemref"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt> + <dd>As propriedades que não são descendentes de um elemento com o atributo <code>itemscope</code> podem ser associadas ao item usando um <strong>itemref</strong>. Itemref fornece uma lista de ids de elementos (não <code>itemid</code>) com propriedades adicionais em outro lugar do documento.</dd> + <dt id="attr-itemscope"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt> + <dd>Este atributo funciona, em geral, com o atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> para especificar o HTML dentro de um bloco é sobre um item particular. <code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a></code> cria o item e define o escopo do <code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> associado a ele. <code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> é uma URL válida de um vocabulário (como o <a class="external external-icon" href="http://schema.org/">schema.org</a>) que descreve o item e o context de seus atributos.</dd> + <dt id="attr-itemtype"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt> + <dd>Especifica a URL do vocabulário que será usado para definir as propriedades do item na estrutura de dados. <code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a></code> é usado para alterar o escopo na estrutura de dados onde o vocabulário definido por <code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> estará ativo.</dd> + <dt id="attr-lang"><code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt> + <dd>Participa da definição do idioma do elemento, o idioma no qual os elementos não-editáveis estão escritos, ou o idioma no qual elementos editáveis devem ser escritos. A Tag contém um único valor no formato definido no documento da IEFT <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">Tags para Identificação de Idiomas (BCP47)</a>. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> tem prioridade mais alta que <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code>.</dd> + <dt id="attr-spellcheck"><code><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt> + <dd>É um atributo enumerado que define se o elemento pode ser verificado por errors de ortografia. Pode ter os seguintes valores: + <ul> + <li><code>true</code>, indica que o elemento deve ser, se possível, verificado por errors ortográficos;</li> + <li><code>false</code>, indica que o elemento não deve ser verificado quanto à ortogratia do texto.</li> + </ul> + </dd> + <dt id="attr-style"><code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code></dt> + <dd>Contém regras de declarações <a href="/pt-BR/docs/">CSS</a> para aplicar no elemento. Note que é recomendado que as regras CSS fiquem num arquivo, ou vários arquivos, separado do HTML. Este atributo e o elemento {{HTMLElement("style")}} tem principalmente o propósito para rápida estilização do elemento, como por exemplo para testes.</dd> + <dt id="attr-tabindex"><code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt> + <dd>É um atributo que recebe valores inteiros e indica se um elemento pode receber o foco de entrada de valores (é focável), se ele deve entrar na sequência da navegação pelo teclado (através da tecla TAB), e qual posição da sequência. Sobre seus valores: + <ul> + <li>um <em>valor negativo</em> indica que o elemento <strong>é focável</strong>, mas <strong>não é alcançável</strong> pela navegação sequencial do teclado (através da tecla TAB);</li> + <li><code>0</code> indica que o elemento <strong>é focável</strong> e <strong>alcançavel</strong> pela navegação sequencial do teclado, mas sua ordem de seleção relativa é definida pela convenção da plataforma (ou do navegador);</li> + <li>um <em>valor positivo</em> indica que o elemento <strong>é focável</strong> e <strong>alcançável</strong> pela navegação sequencial do teclado; sua ordem de seleção relativa é definida pelo valor colocado: a sequência segue em ordem crescente definida no <code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code>. Se vários elementos possuem o mesmo valor de <code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code>, sua ordem relativa é estabelecida pela posição relativa no documento HTML.</li> + </ul> + </dd> + <dt id="attr-title"><code><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code></dt> + <dd>Contém um texto representativo sobre a informação relacionada ao elemento ao qual este atributo pertence. Tal informação pode, mas não necessariamente, ser apresentada através de um <em>tooltip</em>.</dd> + <dt id="attr-translate"><code><a href="/en-US/docs/Web/HTML/Global_attributes/translate">translate</a></code></dt> + <dd>É um atributo enumerado, usado para especificar se um atributo de um elemento e os valores dos seus nós descendentes (filhos) {{domxref("Text")}} serão traduzidos quando a página for localizada, ou se não serão alterados. Pode ter os seguintes valores: + <ul> + <li><code>yes</code> ou string vazia: indicam que o elemento será traduzido;</li> + <li><code>no</code>: indica que o elemento não será traduzido.</li> + </ul> + </dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>From latest snapshot, {{SpecName('HTML5.1')}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, <code>spellcheck</code>, <code>draggable</code>, and <code>dropzone</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br> + <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br> + <code>hidden</code>, <code>data-*</code>, <code>contextmenu</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> + <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br> + <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Atributo</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><code>accesskey</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>class</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(9)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lang</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>style</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>title</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Atributo</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>accesskey</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>class</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lang</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>style</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>title</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("Element")}} e {{domxref("GlobalEventHandlers")}} interfaces que permitem acessar a maioria dos atributos globais.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/itemprop/index.html b/files/pt-br/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..06a11f013d --- /dev/null +++ b/files/pt-br/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,513 @@ +--- +title: itemprop +slug: Web/HTML/Global_attributes/itemprop +tags: + - Atributos + - Atributos globais + - HTML + - Referências + - itemprop +translation_of: Web/HTML/Global_attributes/itemprop +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>O atributo global <code><strong>itemprop</strong></code> é usado para adicionar propriedades para um item. Todo elemento HTML pode ter um atributo <code>itemprop</code> especificado, e um <code>itemprop</code> consiste em um par de nome e valor. Cada par de nome e valor é chamado de <strong>propriedade,</strong> e um grupo de uma ou mais propriedades forma um <strong>item</strong>. Os valores das propriedades são ou um texto ou uma URL e pode ser associada a uma grande variedade de elementos incluindo {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}}, and {{HTMLElement("video")}}.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>The example below shows the source for a set of elements marked up with <code>itemprop</code> attributes, followed by a table showing the resulting structured data.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope itemtype ="http://schema.org/Movie"> + <h1 <strong>itemprop="name"</strong>>Avatar</h1> + <span>Director: + <span <strong>itemprop="director"</strong>>James Cameron</span> + (born August 16, 1954)</span> + <span <strong>itemprop="genre"</strong>>Science fiction</span> + <a href="../movies/avatar-theatrical-trailer.html" + <strong>itemprop="trailer"</strong>>Trailer</a> +</div></pre> + +<h3 id="Structured_data">Structured data</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="2"> </td> + <th colspan="2" rowspan="1"><strong>Item</strong></th> + </tr> + <tr> + <th><strong>itemprop name</strong></th> + <th><strong>itemprop value</strong></th> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genre</td> + <td>Science fiction</td> + </tr> + <tr> + <td>itemprop</td> + <td>trailer</td> + <td>../movies/avatar-theatrical-trailer.html</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<p>Properties have values that are either a string or a URL. When a string value is a URL, it is expressed using the {{HTMLElement("a")}} element and its {{htmlattrxref("href", "a")}} attribute, the {{HTMLElement("img")}} element and its {{htmlattrxref("src", "img")}} attribute, or other elements that link to or embed external resources.</p> + +<h3 id="Three_properties_with_values_that_are_strings">Three properties with values that are strings</h3> + +<pre class="brush: 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></pre> + +<h3 id="One_property_image_whose_value_is_a_URL">One property, "image", whose value is a URL</h3> + +<pre class="brush: html"><div itemscope> + <img itemprop="image" + src="google-logo.png" alt="Google"> +</div></pre> + +<p>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).</p> + +<h3 id="An_item_with_a_property_whose_value_is_a_product_ID">An item with a property whose value is a product ID</h3> + +<p>The ID is not human-friendly, so the product's name is used the human-visible text instead of the ID.</p> + +<pre class="brush: html"><h1 itemscope> + <data itemprop="product-id" + value="9678AOU879">The Instigator 2000</data> +</h1></pre> + +<p>For numeric data, the meter element and its value attribute can be used.</p> + +<h3 id="A_meter_element">A meter element</h3> + +<pre class="brush: 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></pre> + +<p>Similarly, for date- and time-related data, the time element and its datetime attribute can be used.</p> + +<h3 id="An_item_with_one_property_birthday_whose_value_is_a_date">An item with one property, "birthday", whose value is a date</h3> + +<pre class="brush: html"><div itemscope> + I was born on <time + itemprop="birthday" + datetime="2009-05-10">May 10th 2009</time>. +</div></pre> + +<p>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).</p> + +<h3 id="An_outer_item_representing_a_person_and_an_inner_one_representing_a_band">An outer item representing a person, and an inner one representing a band</h3> + +<pre class="brush: 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></pre> + +<p>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.</p> + +<h3 id="All_the_properties_separated_from_their_items">All the properties separated from their items</h3> + +<p>This example is the same as the previous one, but all the properties are separated from their items</p> + +<pre class="brush: 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></pre> + +<p>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".</p> + +<p>An item can have multiple properties with the same name and different values.</p> + +<h3 id="Ice_cream_with_two_flavors">Ice cream with two flavors</h3> + +<pre class="brush: 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></pre> + +<p>This results in an item with two properties, both with the name "flavor" and having the values "Lemon sorbet" and "Apricot sorbet".</p> + +<p>An element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value.</p> + +<h3 id="An_item_with_two_properties_favorite-color_and_favorite-fruit_both_set_to_the_value_orange">An item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange"</h3> + +<pre class="brush: html"><div itemscope> + <span + itemprop="favorite-color + favorite-fruit">orange</span> +</div></pre> + +<div class="note"> +<p>Note: There is no relationship between the microdata and the content of the document where the microdata is marked up.</p> +</div> + +<h3 id="Same_structured_data_marked_up_in_two_different_ways">Same structured data marked up in two different ways</h3> + +<p id="There_is_no_semantic_difference_between_the_following_two_examples">There is no semantic difference between the following two examples</p> + +<pre class="brush: html"><figure> + <img src="castle.jpeg"> + <figcaption><span + itemscope><span + itemprop="name">The Castle</span></span> + (1986)</figcaption> +</figure></pre> + +<pre class="brush: html"><span itemscope><meta + itemprop="name" + content="The Castle"></span> +<figure> + <img src="castle.jpeg"> + <figcaption>The Castle + (1986)</figcaption> +</figure></pre> + +<p>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.</p> + +<h2 id="Names_and_values">Names and values</h2> + +<p>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.</p> + +<h3 id="Names_examples">Names examples</h3> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col"> </th> + <th colspan="2" rowspan="1" scope="col">Item</th> + </tr> + <tr> + <th scope="col">itemprop <strong>name</strong></th> + <th scope="col">itemprop <strong>value</strong></th> + </tr> + </thead> + <tbody> + <tr> + <th>itemprop</th> + <td>country</td> + <td>Ireland</td> + </tr> + <tr> + <th>itemprop</th> + <td>Option</td> + <td>2</td> + </tr> + <tr> + <th>itemprop</th> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + <td>Ring of Kerry</td> + </tr> + <tr> + <th>itemprop</th> + <td>img</td> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + </tr> + <tr> + <th>itemprop</th> + <td>website</td> + <td>flickr</td> + </tr> + <tr> + <th>itemprop</th> + <td>(token)</td> + <td>(token)</td> + </tr> + </tbody> +</table> + +<p><strong>Tokens </strong>are either strings or URL's. An item is called a <strong>typed item</strong> if it is a URL. Otherwise, it is a string. Strings cannot contain a period or a colon (see below).</p> + +<ol> + <li>If the item is a typed item it must be either: + <ol> + <li>A defined property name, or</li> + <li>A valid URL, which refers to the vocabulary definition, or</li> + <li>A valid URL that is used as a proprietary item property name (i.e. one not defined in a public specification), or</li> + </ol> + </li> + <li>If the item is not a typed item it must be: + <ol> + <li>A string that contains no "<strong>.</strong>" (U+002E FULL STOP) characters and no "<strong>:</strong>" characters (U+003A COLON) and is used as a proprietary item property name (again, one not defined in a public specification).</li> + </ol> + </li> +</ol> + +<p class="note"><strong>Note:</strong> 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.</p> + +<h2 id="Values">Values</h2> + +<p>The property value of a name-value pair is as given for the first matching case in the following list:</p> + +<ul> + <li>If the element has an <strong>itemscope </strong>attribute + + <ul> + <li>The value is the <strong>item </strong>created by the element.</li> + </ul> + </li> + <li>If the element is a <strong>meta </strong>element + <ul> + <li>The value is the value of the element's <strong>content </strong>attribute</li> + </ul> + </li> + <li>If the element is an <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>source</strong>, <strong>track</strong>, or <strong>video </strong>element + <ul> + <li>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 <a href="/en-US/docs/Web/API/Microdata_DOM_API">Microdata DOM API</a>) of the element at the time the attribute is set</li> + </ul> + </li> + <li>If the element is an <strong>a</strong>, <strong>area</strong>, or <strong>link </strong>element + <ul> + <li>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</li> + </ul> + </li> + <li>If the element is an <strong>object </strong>element + <ul> + <li>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</li> + </ul> + </li> + <li>If the element is a <strong>data </strong>element + <ul> + <li>The value is the value of the element's value attribute</li> + </ul> + </li> + <li>If the element is a <strong>meter </strong>element + <ul> + <li>The value is the value of the element's <strong>value </strong>attribute</li> + </ul> + </li> + <li>If the element is a <strong>time </strong>element + <ul> + <li>The value is the element's <strong>datetime </strong>value</li> + </ul> + </li> +</ul> + +<p>Otherwise</p> + +<ul> + <li>The value is the element's <strong>textContent</strong>.</li> +</ul> + +<p>If a property's value is a<strong> URL</strong>, the property must be specified using a URL property element. The URL property elements are the <strong>a</strong>, <strong>area</strong>, <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>link</strong>, <strong>object</strong>, <strong>source</strong>, <strong>track</strong>, and <strong>video </strong>elements.</p> + +<h3 id="Name_order">Name order</h3> + +<p>Names are unordered relative to each other, but if a particular name has multiple values, they do have a relative order.</p> + +<h4 id="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">In the following example, the "a" property has the values "1" and "2", <em>in that order</em>, but whether the "a" property comes before the "b" property or not is not important</h4> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="a">2</p> + <p itemprop="b">test</p> +</div></pre> + +<h4 id="The_following_is_equivalent">The following is equivalent</h4> + +<pre class="brush: html"><div itemscope> + <p itemprop="b">test</p> + <p itemprop="a">1</p> + <p itemprop="a">2</p> +</div></pre> + +<h4 id="As_is_the_following">As is the following</h4> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div></pre> + +<h4 id="And_the_following">And the following</h4> + +<pre class="brush: 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> +</pre> + +<h2 id="Other_examples">Other examples</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> + <dt>Title + <dd + itemprop="title">The Reality Dysfunction + <dt>Author + <dd + itemprop="author">Peter F. Hamilton + <dt>Publication date + <dd><time + itemprop="pubdate" + datetime="1996-01-26">26 January 1996</time> +</dl> +</pre> + +<h3 id="Structured_data_2">Structured data</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1">http://vocab.example.net/book: urn:isbn:0-330-34032-8</td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td>Peter F. Hamilton</td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Global_attributes/itemprop')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><code><a href="https://html.spec.whatwg.org/multipage/microdata.html#names:-the-itemprop-attribute:names:-the-itemprop-attribute">itemprop</a></code></td> + <td> </td> + <td>WG Note - No longer being actively developed</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes">Other different global attributes</a></li> + <li>Other, microdata related, global attributes: + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> +</div> +</div> diff --git a/files/pt-br/web/html/global_attributes/lang/index.html b/files/pt-br/web/html/global_attributes/lang/index.html new file mode 100644 index 0000000000..932152774a --- /dev/null +++ b/files/pt-br/web/html/global_attributes/lang/index.html @@ -0,0 +1,89 @@ +--- +title: lang +slug: Web/HTML/Global_attributes/lang +tags: + - Atributos globais + - Referencia + - lang +translation_of: Web/HTML/Global_attributes/lang +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>O <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <strong><code>lang</code></strong> 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 <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags para identificar linguagens(BCP47)</em></a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div> + +<p class="hidden">O código-fonte para este exemplo interativo está armazenado em um repositório do GitHub. Se você gosta de contribuir para projetos de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um pull request.</p> + +<p>Se o valor do atributo é uma <em>string vazia</em> (<code>lang=""</code>), o idioma é definido como <em>unknown (desconhecido)</em>; se a tag de idioma não é válida conforme o BCP47, ela é definida como<em> invalid (invalida)</em>.</p> + +<div class="note"> +<h2 id="Sintaxe_da_tag_de_idioma">Sintaxe da tag de idioma</h2> + +<p>A 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.</p> + +<p>Uma tag de idioma é feita de <em>subtags de idioma </em>separadas por hífen, onde cada subtag indica uma certa propriedade da língua. As três subtags mais comuns são:</p> + +<dl> + <dt>Subtag de idioma</dt> + <dd>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 é <code>en</code> e o código para Português é <code>pt</code>.</dd> + <dt>Subtag de script</dt> + <dd>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 é <code>fr-Brai</code> e <code>ja-Kana</code> é 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.</dd> + <dt>Subtag de região</dt> + <dd>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, <code>es-ES</code> é para espanhol falado na Espanha, e <code>es-013</code> é o espanhol falado na America Central. “Espanhol Internacional” seria <code>es</code>.</dd> +</dl> + +<p>A subtag de script precede a região da subtag quando ambos estão presentes— <code>ru-Cyrl-BY</code> é Russo, escrito no alfabeto Cyrillic, falado em Belarus.</p> + +<p>Para encontrar os códigos corretos para uma subtag de idioma, acesse <a href="https://r12a.github.io/app-subtags/" rel="external">Language Subtag Lookup</a>.</p> +</div> + +<p>Mesmo que o atributo <strong>lang</strong> esteja bem definido ele ainda pode ser ignorado, pois o atributo <a href="/en-US/docs/Web/HTML/Global_attributes/xml:lang"><strong>xml:lang</strong></a> tem prioridade.</p> + +<p>Para as pseudo-classes CSS {{cssxref(":lang")}}, dois nomes de idiomas inválidos são diferentes se seus nomes forem diferentes. Por tanto, enquanto <code>:lang(es)</code> corresponde a ambos <code>lang="es-ES"</code> e <code>lang="es-419"</code>, <code>:lang(xyzzy)</code> não corresponde a <code>lang="xyzzy-Zorp!"</code>.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sem mudança até o último registro, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Registro de {{SpecName('HTML WHATWG')}}, sem mudança para {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Registro de {{SpecName('HTML WHATWG')}}, comportamento com <code>xml:lang</code> e algoritmo de determinação definido. Ele também é um atributo global.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Suportado em todos os elementos, mas {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} e {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada através de dados estruturados. Se você quiser contribuir com dados, por favor, cheque <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div> + +<p>{{Compat("html.global_attributes.lang")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Todos <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/tabindex/index.html b/files/pt-br/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..b4212f9871 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,127 @@ +--- +title: tabindex +slug: Web/HTML/Global_attributes/tabindex +tags: + - Atributos globais + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/tabindex +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p>O <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <strong>tabindex</strong> indica se um elemento pode receber foco de entrada (se ele é <em>focável</em>), se e em qual posição ele deve fazer parte da navegação sequencial do teclado (geralmente com a tecla <kbd>Tab</kbd>, daí seu nome).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div> + +<p class="hidden">O código-fonte desse exemplo interativo está hospedado em um repositório do Github. Se você quiser contribuir para exemplos interativos desse projeto, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>e mande nos mande um pull request.</p> + +<p>Ele aceita valores inteiros, com diferentes resultados dependendo do valor desse inteiro:</p> + +<ul> + <li>um <em>valor negativo</em> (geralmente <code>tabindex="-1"</code>) 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. + + <div class="note"> + <p>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 <code>tabindex</code> negativo utilizando o teclado, porém um script pode o fazer utilizando o <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus">método</a> <code>focus()</code>.</p> + </div> + </li> + <li><code>tabindex="0"</code> 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;</li> + <li>um <em>valor positivo</em> 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, <code>tabindex="4"</code> seria focado antes de <code>tabindex="5"</code>, mas depois de <code>tabindex="3"</code>. Se vários elementos possuírem o mesmo valor positivo de <code>tabindex</code>, a sua posição na ordenação será definida pela sua posição no código-fonte do documento. O valor máximo do <code>tabindex</code> é 32767. Se não especificado, assume o valor padrão 0. + <div class="warning"> + <p>Evite usar valores do <code>tabindex</code> 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.</p> + </div> + </li> +</ul> + +<p>Se o atributo <code>tabindex</code> for definido em um elemento div {{htmlelement("div")}}, seu conteúdo filho (interno) não poderá ser rolado utilizando as teclas direcionais a menos que seja definido <code>tabindex</code> no conteúdo também.<a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/"> Veja este fiddle para entender melhor os efeitos de rolagem do tabindex</a>.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nenhuma mudança desde o mais recente snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, nenhuma mudança desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, o atributo agora é suportado em todos os elementos (atributos globais).</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Suportado apenas em {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_nos_Navegadores">Compatibilidade nos Navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Todos os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</li> + <li>{{domxref("HTMLElement.tabIndex")}} que reflete este atributo.</li> + <li>Problemas de acessibilidade com tabindex: veja <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html" id="id-22" style="font-size: inherit; line-height: inherit;" title="Don’t Use Tabindex Greater than 0 | Adrian Roselli">Don’t Use Tabindex Greater than 0 | Adrian Roselli</a> (em inglês).</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/title/index.html b/files/pt-br/web/html/global_attributes/title/index.html new file mode 100644 index 0000000000..917008a62f --- /dev/null +++ b/files/pt-br/web/html/global_attributes/title/index.html @@ -0,0 +1,139 @@ +--- +title: title +slug: Web/HTML/Global_attributes/title +tags: + - Atributos globais + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/title +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><span class="seoSummary">O <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <strong>title </strong>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:</span></p> + +<ul> + <li>Link: título ou descrição do documento vinculado</li> + <li>Elemento de mídia como uma imagem: descrição ou créditos associados</li> + <li>Parágrafo: nota de rodapé ou um comentário sobre ele</li> + <li>Citação: informação sobre o autor, e assim por diante.</li> +</ul> + +<p>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 <em>string vazia</em>, 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).</p> + +<p>Semânticas adicionais são anexadas aos atributos <strong>title</strong> dos elementos {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("input") }} e {{ HTMLElement("menuitem") }}.</p> + +<p>O atributo <strong>title</strong> pode conter várias linhas. Cada <code>U+000A LINE FEED</code> (<code>LF</code>) inserida representa uma nova linha. Alguns cuidados devem ser tomados, como a seguir:</p> + +<pre class="brush: html"><p>Novas linhas em título devem ser levadas em conta, como este <abbr title="Este é um +título de multiplas linhas">examplo</abbr>.</p> +</pre> + +<p>Este exemplo define um título de duas linhas.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Suporte multi linha</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatGeckoDesktop(12)}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Suporte multi linha</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(12)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Todos os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</li> + <li>{{domxref("HTMLElement.title")}} que reflete este atributo.</li> +</ul> |