Os atributos foram discutidos brevemente na Visão geral do HTML. Agora é hora de nos aprofundarmos.
Os atributos são o que torna o HTML tão eficiente. Os atributos são nomes separados por espaços e pares de nome/valor que aparecem na tag de abertura, fornecendo informações sobre a funcionalidade do elemento.
Os atributos definem o comportamento, as vinculações e a funcionalidade dos elementos. Alguns atributos são globais, o que significa que podem aparecer dentro da tag de abertura de qualquer elemento. Outros atributos se aplicam a vários elementos, mas não a todos. Já outros são específicos de um elemento e relevantes apenas para um. Em HTML, todos os atributos, exceto booleanos e, até certo ponto, os enumerados, exigem um valor.
Se um valor de atributo incluir um espaço ou caracteres especiais, ele precisará estar entre aspas. Por esse motivo, e para melhorar a legibilidade, é sempre recomendável fazer citações.
Embora o HTML não diferencie maiúsculas de minúsculas, alguns valores de atributo são. Os valores que fazem parte da especificação HTML são indiferentes a maiúsculas. Os valores de strings definidos, como nomes de classe e ID, diferenciam maiúsculas de minúsculas. Se um valor de atributo diferenciar maiúsculas de minúsculas em HTML, ele será usado como parte de um seletor de atributos em CSS e JavaScript. Caso contrário, não.
<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">
<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">
Atributos booleanos
Se um atributo booleano estiver presente, ele será sempre verdadeiro. Os atributos booleanos incluem autofocus, inert, checked, disabled,
required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple, e selected.
Se um ou mais desses atributos estiverem presentes, o elemento será desativado, obrigatório, somente leitura etc. Se não estiver presente, ele não está.
Os valores booleanos podem ser omitidos, definidos como uma string vazia ou o nome do atributo, mas o valor não precisa ser definido como a string true. Todos os valores, incluindo true, false e 😀, embora inválidos, serão resolvidos como verdadeiros.
Essas três tags são equivalentes:
<input required>
<input required="">
<input required="required">
Se o valor do atributo for falso, omita o atributo. Se o atributo for verdadeiro, inclua o atributo, mas não forneça um valor.
Por exemplo, required="required" não é um valor válido em HTML, mas como required é booleano, valores inválidos são resolvidos como verdadeiros.
No entanto, como os atributos enumerados inválidos não necessariamente resolvem para o mesmo valor que os valores ausentes, é mais fácil adotar o hábito de omitir valores do que lembrar quais atributos são booleanos ou enumerados e podem fornecer um valor inválido.
Ao alternar entre verdadeiro e falso, adicione e remova o atributo completamente com JavaScript em vez de alternar o valor.
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
Em linguagens XML, como SVG, todos os atributos precisam incluir um valor, incluindo atributos booleanos.
Atributos enumerados
Os atributos enumerados às vezes são confundidos com atributos booleanos. São atributos HTML com um conjunto limitado de valores válidos predefinidos.
Assim como os atributos booleanos, eles têm um valor padrão se o atributo estiver presente, mas o valor estiver ausente. Por exemplo, se você incluir <style contenteditable>, o padrão será <style contenteditable="true">.
No entanto, ao contrário dos atributos booleanos, omitir o atributo não significa que ele é falso. Um atributo presente com um valor ausente
não é necessariamente verdadeiro. O padrão para valores inválidos não é necessariamente o mesmo que uma string nula. Continuando com o exemplo,
o padrão de contenteditable é inherit se ausente ou inválido e pode ser definido explicitamente como false.
O valor padrão depende do atributo. Ao contrário dos valores booleanos, os atributos não são "true" automaticamente quando estão presentes. Se você
incluir <style contenteditable="false">, o elemento não será editável. Se o valor for inválido, como <style contenteditable="😀">,
ou, surpreendentemente, <style contenteditable="contenteditable">, ele será inválido e o padrão será inherit.
Na maioria dos casos com atributos enumerados, os valores ausentes e inválidos são iguais. Por exemplo, se o atributo type em um <input>
estiver ausente, presente, mas sem valor ou tiver um valor inválido, o padrão vai ser text. Embora esse comportamento seja comum, não é uma regra.
Por isso, é importante saber quais atributos são booleanos ou enumerados. Se possível, omita os valores para não errar e procure o valor conforme necessário.
Atributos globais
Os atributos globais são aqueles que podem ser definidos em qualquer elemento HTML, incluindo elementos em <head>. Há mais de
30 atributos globais. Embora, em teoria, todos eles possam ser adicionados a qualquer elemento HTML, alguns atributos globais não têm efeito quando definidos em alguns elementos. Por exemplo, definir hidden em um <meta> como conteúdo meta não é exibido.
id
O atributo global id é usado para definir um identificador exclusivo para um elemento. Ele tem várias finalidades, incluindo:
- O destino do identificador de fragmento de um link.
- Identificar um elemento para script.
- Associar um elemento de formulário ao rótulo.
- Fornecer um marcador ou uma descrição para tecnologias assistivas.
- Estilos de segmentação com (alta especificidade ou como seletores de atributos) no CSS.
O valor id é uma string sem espaços. Se ele contiver um espaço, o documento não vai ser corrompido, mas será necessário segmentar o
id com caracteres de escape no HTML, CSS e JS. Todos os outros caracteres são válidos. Um valor de id pode ser 😀 ou .class,
mas não é uma boa ideia. Para facilitar a programação para você atual e futuro, transforme o primeiro caractere de id em uma letra
e use apenas letras ASCII, dígitos, _ e -. É uma prática recomendada criar uma convenção de nomenclatura id e segui-la,
já que os valores de id diferenciam maiúsculas de minúsculas.
O id precisa ser exclusivo para o documento. O layout da página provavelmente não será corrompido se um id for usado mais de uma vez,
mas as interações do JavaScript, dos links e do elemento podem não funcionar como esperado.
Identificador de fragmento de link
A barra de navegação inclui quatro links. Abordaremos o elemento de link mais tarde, mas, por enquanto, observe que os links não são restritos a URLs baseados em HTTP. Eles podem ser identificadores de fragmento para seções da página no documento atual (ou em outros documentos).
No site do workshop de machine learning, a barra de navegação no cabeçalho da página inclui quatro links:
O atributo href fornece o hiperlink para onde o usuário é direcionado à ativação do link. Quando um URL inclui uma marca de hash (#) seguida por uma string de caracteres, ela é um identificador de fragmento. Se essa string corresponder a um id de um elemento na
página da Web, o fragmento será uma âncora, ou um favorito, desse elemento. O navegador rolará até o ponto em que a âncora for definida.
Esses quatro links apontam para quatro seções da nossa página identificadas pelo atributo id. Quando o usuário clica em qualquer um dos
quatro links na barra de navegação, rola a tela para o elemento vinculado pelo identificador do fragmento, que contém o ID correspondente, menos o #.
O conteúdo <main> do workshop de machine learning tem quatro seções com IDs. Quando o visitante do site clica em um dos
links no <nav>, a seção com esse identificador de fragmento é exibida. A marcação é semelhante a:
<section id="reg">
<h2>Machine Learning Workshop Tickets</h2>
</section>
<section id="about">
<h2>What you'll learn</h2>
</section>
<section id="teachers">
<h2>Your Instructors</h2>
<h3>Hal 9000 <span>&</span> EVE</h3>
</section>
<section id="feedback">
<h2>What it's like to learn good and do other stuff good too</h2>
</section>
Comparando os identificadores de fragmento nos links <nav>, você vai perceber que cada um corresponde ao id de um <section> em <main>.
O navegador nos fornece um link sem custo financeiro "parte superior da página". Se href="#top" não diferencia maiúsculas de minúsculas ou é simplesmente href="#", o usuário é levado até a parte de cima da página.
O separador de marca de hash em href não faz parte do identificador de fragmento. O identificador de fragmento é sempre a última
parte do URL e não é enviado ao servidor.
Seletores de CSS
No CSS, é possível segmentar cada seção usando um seletor de ID, como #feedback, ou, para especificidade menor, um seletor de atributos que diferencia maiúsculas de minúsculas, [id="feedback"].
Criação dos roteiros
No MLW.com, há um easter egg apenas para usuários de mouse. Clicar no interruptor ativa e desativa a página.
A marcação para a imagem do interruptor de luz é:
html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" />
O atributo id pode ser usado como parâmetro para o método getElementById() e, com um prefixo #, como parte de um
parâmetro para os métodos querySelector() e querySelectorAll().
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
Nossa única função JavaScript usa essa capacidade de segmentar elementos pelo atributo id:
<script>
/* switch is a reserved word in js, so we us onoff instead */
const onoff = document.getElementById('switch');
onoff.addEventListener('click', function(){
document.body.classList.toggle('black');
});
</script>
<label>
O elemento HTML <label> tem um atributo for que toma como valor o id do controle de formulário com o qual está associado.
Criar um rótulo explícito incluindo um id em todos os controles de formulário e parear cada um com o atributo for do rótulo garante
que cada controle de formulário tenha um rótulo associado.
Cada rótulo pode ser associado a exatamente um controle de formulário, mas um controle de formulário pode ter mais de um rótulo associado.
Se o controle de formulário estiver aninhado entre as tags de abertura e fechamento <label>, os atributos for e id
não serão obrigatórios: isso é chamado de rótulo "implícito". Os rótulos informam a todos os usuários para que serve cada controle de formulário.
<label>
Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.
A associação entre for e id disponibiliza as informações para os usuários de tecnologias adaptativas. Além disso,
clicar em qualquer lugar de um rótulo focaliza o elemento associado, ampliando a área de clique do controle. Isso não é útil apenas
para pessoas com problemas de destreza, tornando o mouse menos preciso, mas também ajuda todos os usuários de dispositivos móveis com dedos mais largos do que um botão
de opção.
Neste exemplo de código, a quinta pergunta falsa de um teste falso é de múltipla escolha de seleção única. Cada controle de formulário tem um rótulo explícito, com um id exclusivo para cada um. Para não duplicar acidentalmente um ID, o valor do ID é uma combinação do número da pergunta e do valor.
Ao incluir botões de opção, conforme os rótulos descrevem o valor deles, incluímos todos os botões com o mesmo nome em uma <fieldset>,
com <legend> sendo o rótulo ou a pergunta de todo o conjunto.
Outros usos da acessibilidade
O uso de id na acessibilidade e usabilidade não se limita a rótulos. Na introdução ao texto, um <section>
foi convertido em ponto de referência da região, referenciando o id de um <h2> como o valor do aria-labelledby do <section> para fornecer
o nome acessível:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
Mais de 50 estados e propriedades de aria-* podem ser usados para garantir a acessibilidade. aria-labelledby, aria-describedby,
aria-details e aria-owns assumem como valor uma lista de referência id separada por espaços. aria-activedescendant, que
identifica o elemento descendente em foco no momento, tem como valor uma única referência id: a do único elemento
que está em foco (somente um elemento pode ser focado por vez).
class
O atributo class fornece outra maneira de segmentar elementos com CSS (e JavaScript), mas não tem nenhuma outra finalidade
em HTML, embora as bibliotecas e as bibliotecas de componentes possam usá-los. O atributo class usa como valor uma lista separada por espaços
das classes que diferenciam maiúsculas de minúsculas para o elemento.
Construir uma estrutura semântica sólida permite a segmentação de elementos com base no posicionamento e na função deles. A estrutura sonora permite o uso de seletores de elementos descendentes, relacionais e de atributos. À medida que você aprende sobre atributos nesta seção, considere como estilizar elementos com os mesmos atributos ou valores de atributos. Não é que você não deva usar o atributo de classe, só que a maioria dos desenvolvedores não percebe que muitas vezes não precisam fazer isso.
Até agora, o MLW não usou nenhuma classe. Um site pode ser iniciado sem um único nome de classe? O que veremos.
style
O atributo style permite aplicar estilos inline, que são estilos aplicados a um único elemento em que o atributo é definido.
O atributo style usa como valor os pares de valor da propriedade CSS, com a sintaxe do valor igual ao conteúdo de um
bloco de estilo CSS. As propriedades são seguidas por dois pontos, como no CSS, e pontos e vírgulas terminam em cada declaração, depois do valor.
Os estilos são aplicados somente ao elemento em que o atributo é definido, com os descendentes herdam valores de propriedades herdadas se não
forem substituídos por outras declarações de estilo em elementos aninhados ou em blocos <style> ou folhas de estilo. Como o valor compreende o conteúdo
de um único bloco de estilo aplicado somente a esse elemento, ele não pode ser usado para conteúdo gerado, para criar animações de frame-chave ou aplicar
outras regras.
Embora o style seja um atributo global, não é recomendável usá-lo. Em vez disso, defina estilos em arquivos separados.
O atributo style pode ser útil durante o desenvolvimento para permitir um estilo rápido, por exemplo, para testes. Em seguida, cole o estilo "solução" no arquivo CSS vinculado.
tabindex
O atributo tabindex pode ser adicionado a qualquer elemento para que ele receba foco. O valor tabindex define se ele
é adicionado à ordem da tabulação e, opcionalmente, em uma ordem de tabulação não padrão.
O atributo tabindex usa como valor um número inteiro. Um valor negativo (a convenção é usar -1) torna um elemento capaz
de receber foco, como via JavaScript, mas não adiciona o elemento à sequência de tabulação. Um valor tabindex de 0 torna
o elemento focalizável e acessível por meio de tabulação, adicionando-o à ordem de tabulação padrão da página na ordem do código-fonte. Um valor de 1
ou mais coloca o elemento em uma sequência de foco priorizada e não é recomendado.
Nesta página, há uma funcionalidade de compartilhamento usando um elemento personalizado <share-action> que atua como <button>. O tabindex de zero
é incluído para adicionar o elemento personalizado à ordem de tabulação padrão do teclado:
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
O role de button informa aos usuários do leitor de tela que esse elemento precisa se comportar como um botão. O JavaScript é usado para garantir
que a promessa de funcionalidade do botão seja mantida, incluindo o processamento de eventos click e keydown e o gerenciamento de teclas Enter e Espaço.
Controles de formulários, links, botões e elementos de conteúdo editável podem receber foco. Quando um usuário de teclado pressiona a tecla "Tab",
o foco passa para o próximo elemento focalizável, como se ele tivesse tabindex="0" definido. Outros elementos não são focalizáveis por padrão. Adicionar o atributo tabindex
a esses elementos permite que eles recebam foco quando não receberiam de outra forma.
Se um documento incluir elementos com um tabindex de 1 ou mais, eles serão incluídos em uma sequência de guias separada. Como você pode notar no codepen,
a tabulação começa em uma sequência separada, na ordem do valor menor para o maior, antes de passar pelos na sequência regular na ordem de origem.
Alterar a ordem das guias pode criar uma experiência muito ruim para o usuário. Isso dificulta a dependência de tecnologias adaptativas, como teclados e leitores de tela, para navegar pelo conteúdo. Também é difícil para os desenvolvedores gerenciar e manter. O foco é importante, porque há um módulo inteiro discutindo o foco e a ordem do foco.
role
O atributo role faz parte da especificação ARIA,
e não da especificação HMTL WhatWG. O atributo role pode
ser usado para fornecer significado semântico ao conteúdo, permitindo que os leitores de tela informem aos usuários do site sobre a interação esperada do usuário de um objeto.
Há alguns widgets de IU comuns, como comboboxes,
barras de menu, listas de guias
e grades de árvores, que não têm equivalentes em HTML nativo.
Por exemplo, ao criar um padrão de design com guias, os papéis tab, tablist e
tabpanel podem ser usados. Alguém que pode ver fisicamente
a interface do usuário aprendeu por experiência a navegar pelo widget e tornar diferentes painéis visíveis clicando nas guias associadas.
A inclusão do papel tab com <button role="tab"> quando um grupo de botões é usado para mostrar painéis diferentes permite que o usuário do leitor de tela saiba
que o <button> em foco no momento pode alternar um painel relacionado em vez de implementar uma funcionalidade típica de botão.
O atributo role não muda o comportamento do navegador nem as interações do teclado ou do dispositivo ponteiro. Adicionar role="button" a um <span>
não o transforma em um <button>. É por isso que é recomendado usar elementos HTML semânticos para a finalidade pretendida. No entanto, quando não é possível usar
o elemento certo, o atributo role permite informar aos usuários de leitores de tela quando um elemento não semântico foi adaptado
para o papel de um elemento semântico.
contenteditable
Um elemento com o atributo contenteditable definido como true é editável, pode ser focalizado e é adicionado à ordem da tabulação como se tabindex="0" estivesse definido. Contenteditable é um atributo enumerado que aceita os valores true e false, com um valor padrão de inherit
se o atributo não estiver presente ou tiver um valor inválido.
Estas três tags de abertura são equivalentes:
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
Se você incluir <style contenteditable="false">, o elemento não vai ser editável (a menos que seja por padrão, como <textarea>).
Se o valor for inválido, como <style contenteditable="😀"> ou <style contenteditable="contenteditable">, ele vai ser inherit por padrão.
Para alternar entre estados, consulte o valor da propriedade somente leitura HTMLElement.isContentEditable.
const editor = document.getElementById("myElement");
if(editor.contentEditable) {
editor.setAttribute("contenteditable", "false");
} else {
editor.setAttribute("contenteditable", "");
}
Como alternativa, essa propriedade pode ser especificada definindo editor.contentEditable como true, false ou inherit.
Os atributos globais podem ser aplicados a todos os elementos, até mesmo a elementos <style>. Você pode usar atributos e um pouco de CSS para criar um editor de CSS ativo.
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
Tente mudar o color do style para algo diferente de inherit. Em seguida, tente mudar o style para um seletor p.
Não remova a propriedade de exibição. Caso contrário, o bloco de estilo vai desaparecer.
Atributos personalizados
Abordamos somente a superfície dos atributos globais do HTML. Há ainda mais atributos que se aplicam a apenas um elemento ou a um conjunto limitado de elementos. Mesmo com centenas de atributos definidos, você pode precisar de um atributo que não esteja na especificação. O HTML pode ajudar.
É possível criar qualquer atributo personalizado adicionando o prefixo data-. É possível dar ao seu atributo qualquer nome que comece com data-,
seguido de qualquer série em letras minúsculas de caracteres que não comecem com xml e que não contenham dois-pontos (:).
Embora o HTML seja permissivo e não seja corrompido se você criar atributos não compatíveis que não comecem com data ou mesmo se iniciar
seu atributo personalizado com xml ou incluir um :, há benefícios na criação de atributos personalizados válidos que começam com data-.
Com os atributos de dados personalizados, você sabe que não está usando acidentalmente um nome de atributo existente. Os atributos de dados personalizados são preparados para o futuro.
Embora os navegadores não implementem comportamentos padrão para nenhum atributo data- específico prefixado, há uma API de conjunto de dados integrada para iterar seus atributos personalizados. As propriedades personalizadas são uma excelente forma de comunicar informações específicas do aplicativo via JavaScript. Adicione atributos personalizados a elementos na forma de data-name e acesse-os pelo DOM usando dataset[name] no elemento em questão.
<blockquote data-machine-learning="workshop"
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
</blockquote>
Você pode usar getAttribute() com o nome completo do atributo ou aproveitar a propriedade dataset, que é mais simples.
el.dataset[machineLearning]; // workshop
e.dataset.machineLearning; // workshop
A propriedade dataset retorna um objeto DOMStringMap dos atributos data- de cada elemento. Existem vários atributos personalizados
no <blockquote>. A propriedade do conjunto de dados significa que você não precisa saber quais são esses atributos personalizados para acessar os nomes e valores deles:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
Os atributos neste artigo são globais, o que significa que eles podem ser aplicados a qualquer elemento HTML, embora nem todos tenham impacto sobre
esses elementos. A seguir, analisaremos os dois atributos da imagem de introdução que não abordamos (target e href) e
vários outros atributos específicos de elementos à medida que analisamos melhor os links.
Teste seu conhecimento
Teste seu conhecimento sobre atributos.
Um id precisa ser exclusivo no documento.
Selecione o atributo personalizado com a formatação correta.
data-birthdaybirthdaydata:birthday