Os atributos foram brevemente discutidos em Visão geral do HTML. Agora é hora de se aprofundar.
Os atributos são o que torna o HTML tão poderoso. Os atributos são nomes separados por espaços e pares de nome/valor que aparecem na tag de abertura, fornecendo informações e funcionalidade para o elemento.
Os atributos definem o comportamento, as vinculações e a funcionalidade dos elementos. Alguns atributos são globais, ou seja, podem aparecer na tag de abertura de qualquer elemento. Outros atributos se aplicam a vários elementos, mas não a todos. Outros são específicos de elementos, relevantes apenas para um único elemento. No HTML, todos os atributos, exceto os booleanos e, em certa medida, os atributos 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 recomendamos o uso de aspas.
Embora o HTML não diferencie maiúsculas de minúsculas, alguns valores de atributo fazem isso. Os valores que fazem parte da especificação HTML não diferenciam maiúsculas de minúsculas. Os valores de strings definidos, como nomes de classe e ID, diferenciam maiúsculas de minúsculas. Se um valor de atributo for sensível a maiúsculas e minúsculas no HTML, ele será sensível a maiúsculas e minúsculas quando usado como parte de um seletor de atributo no CSS e no JavaScript. Caso contrário, ele não será.
<!-- 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 estiverem presentes, o elemento não será.
Os valores booleanos podem ser omitidos, definidos como uma string vazia ou como o nome do atributo. No entanto, 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.
Estas 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, mas não forneça um valor.
Por exemplo, required="required" não é um valor válido em HTML, mas, como required é booleano, os 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 adquirir o hábito de omitir valores do que lembrar quais atributos são booleanos em vez de enumerados e potencialmente fornecer um valor inválido.
Ao alternar entre "verdadeiro" e "falso", adicione e remova o atributo com o 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
Às vezes, os atributos enumerados são confundidos com os booleanos. Eles 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 está presente, mas o valor está 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 seja falso. Um atributo presente com um valor ausente
não é necessariamente verdadeiro. Além disso, o padrão para valores inválidos não é necessariamente o mesmo que uma string nula. Continuando o exemplo,
contenteditable será definido como inherit se estiver ausente ou inválido e poderá 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 se estiverem 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">, o valor 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 um valor ou tiver um valor inválido, ele será padrão text. Embora esse comportamento seja comum, não é uma regra.
Por isso, é importante saber quais atributos são booleanos e quais são enumerados. Se possível, omita os valores para não errar e pesquise o valor conforme necessário.
Atributos globais
Atributos globais são atributos que podem ser definidos em qualquer elemento HTML, incluindo elementos no <head>. Há mais de
30 atributos globais. Embora, em teoria, 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>, já que o metaconteúdo não é mostrado.
id
O atributo global id é usado para definir um identificador exclusivo para um elemento. Ele serve para muitas finalidades, incluindo:
- O destino do identificador de fragmento de um link.
- Identificar um elemento para programação.
- Associar um elemento de formulário ao rótulo dele.
- Fornecer um rótulo ou uma descrição para tecnologias adaptativas.
- Segmentar estilos com (especificidade alta ou como seletores de atributos) no CSS.
O valor id é uma string sem espaços. Se ele tiver um espaço, o documento não será quebrado, mas você vai precisar segmentar o
id com caracteres de escape no HTML, CSS e JS. Todos os outros caracteres são válidos. Um valor id pode ser 😀 ou .class,
mas não é uma boa ideia. Para facilitar a programação para você e para o futuro, defina o primeiro caractere de id como uma letra
e use apenas letras ASCII, dígitos, _ e -. É recomendável criar uma convenção de nomenclatura id e seguir essa convenção,
já que os valores id diferenciam maiúsculas de minúsculas.
Oid precisa ser exclusivo para o documento. O layout da página provavelmente não será interrompido se um id for usado mais de uma vez,
mas o JavaScript, os links e as interações de elementos podem não funcionar como esperado.
Identificador do fragmento do link
A barra de navegação inclui quatro links. Vamos abordar o elemento de link mais tarde, mas, por enquanto, saiba que os links não são restritos a URLs baseados em HTTP. Eles podem ser identificadores de fragmentos 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 o qual o usuário é direcionado ao ativar o link. Quando um URL inclui um caractere de hash (#)
seguido por uma string de caracteres, essa string é um identificador de fragmento. Se a string corresponder a um id de um elemento na
página da Web, o fragmento será uma âncora ou um favorito para esse elemento. O navegador vai rolar até o ponto em que a âncora está 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, o elemento vinculado pelo identificador de fragmento, o elemento que contém o ID correspondente
menos o #, rola para aparecer.
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 rola para aparecer. A marcação é semelhante a esta:
<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>
Ao comparar os identificadores de fragmentos nos links <nav>, você vai notar que cada um corresponde ao id de um <section> em <main>.
O navegador oferece um link sem custo financeiro "topo da página". Definir href="#top", sem distinção entre maiúsculas e minúsculas, ou simplesmente href="#", vai rolar
o usuário até o topo da página.
O separador de marcação de hash no 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 menos especificidade, um seletor de atributo sensível a maiúsculas, [id="feedback"].
Roteiro
No MLW.com, há um ovo de Páscoa apenas para usuários de mouse. Clicar no interruptor acende e apaga a página.
A marcação da 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 o parâmetro do 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 função JavaScript usa essa capacidade para 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 <label> HTML tem um atributo for que usa como valor o id do controle de formulário com que ele está associado.
Criar um rótulo explícito incluindo um id em cada controle de formulário e associar cada um ao atributo for do rótulo garante
que cada controle de formulário tenha um rótulo associado.
Embora cada rótulo possa ser associado a exatamente um controle de formulário, 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 necessários: isso é chamado de rótulo "implícito". Os rótulos informam a todos os usuários a finalidade de 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 em um rótulo dá foco ao elemento associado, estendendo a área de clique do controle. Isso não é útil apenas
para pessoas com problemas de destreza que tornam o mouse menos preciso. Ele também ajuda todos os usuários de dispositivos móveis com dedos mais largos que um botão
de rádio.
Neste exemplo de código, a quinta pergunta falsa de um teste falso é uma pergunta de múltipla escolha com uma única opção. Cada controle de formulário tem um rótulo
explícito, com um id exclusivo para cada um. Para evitar a duplicação acidental de um ID, o valor do ID é uma combinação do número da pergunta e do valor.
Ao incluir botões de opção, como os rótulos descrevem o valor deles, incluímos todos os botões com o mesmo nome em um <fieldset>,
com o <legend> sendo o rótulo ou a pergunta de todo o conjunto.
Outros usos de acessibilidade
O uso de id em acessibilidade e usabilidade não se limita a rótulos. Na introdução ao texto, um <section>
foi convertido em marco de região ao referenciar 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>
Há mais de 50 estados e propriedades aria-* que podem ser usados para garantir a acessibilidade. aria-labelledby, aria-describedby,
aria-details e aria-owns usam como valor uma lista de referência id separada por espaços. aria-activedescendant, que
identifica o elemento filho em foco, usa como valor uma única referência id: a do único elemento
que tem foco (apenas um elemento pode estar em foco por vez).
class
O atributo class oferece uma maneira adicional de segmentar elementos com CSS (e JavaScript), mas não tem outra finalidade
no HTML (embora frameworks e bibliotecas de componentes possam usá-los). O atributo de classe usa como valor uma lista separada por espaços
das classes que diferenciam maiúsculas de minúsculas para o elemento.
Criar uma estrutura semântica sólida permite segmentar elementos com base na posição e na função deles. A estrutura de som permite o uso de seletores de elementos descendentes, seletores relacionais e seletores de atributos. Ao aprender sobre atributos ao longo desta seção, considere como os elementos com os mesmos atributos ou valores de atributos podem receber estilo. Não é que você não deva usar o atributo de classe, mas a maioria dos desenvolvedores não percebe que muitas vezes não precisa.
Até agora, o MLW não usou nenhuma turma. Um site pode ser iniciado sem um nome de classe? Vamos ver.
style
O atributo style permite aplicar estilos inline, que são estilos aplicados ao elemento único em que o atributo está definido.
O atributo style usa como valor pares de valor de propriedade CSS, com a sintaxe do valor sendo igual ao conteúdo de um
bloco de estilo CSS: as propriedades são seguidas por dois-pontos, assim como no CSS, e os pontos-e-vírgulas encerram cada declaração, vindos depois do valor.
Os estilos só são aplicados ao elemento em que o atributo está definido, com descendentes herdando valores de propriedade herdados, 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 equivalente do conteúdo
de um único bloco de estilo aplicado apenas a esse elemento, ele não pode ser usado para conteúdo gerado, para criar animações de keyframe ou para aplicar qualquer
outra regra de at.
Embora style seja um atributo global, não é recomendável usá-lo. Em vez disso, defina estilos em um ou mais arquivos separados.
No entanto, o atributo style pode ser útil durante o desenvolvimento para permitir um estilo rápido, como para fins de teste. Em seguida, use o
estilo "solução" no arquivo CSS vinculado.
tabindex
O atributo tabindex pode ser adicionado a qualquer elemento para que ele receba o foco. O valor tabindex define se ele
será adicionado à ordem de tabulação e, opcionalmente, a uma ordem de tabulação não padrão.
O atributo tabindex usa um número inteiro como valor. Um valor negativo (a convenção é usar -1) faz com que um elemento seja capaz
de receber foco, como por JavaScript, mas não adiciona o elemento à sequência de tabulação. Um valor tabindex de 0 torna
o elemento selecionável e acessível por tabulação, adicionando-o à ordem de guia padrão da página no 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 que usa um elemento personalizado <share-action> que atua como um <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 de leitores 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, bem como o processamento de pressionamentos de tecla Enter e Space.
Controles de formulário, links, botões e elementos editáveis de conteúdo podem receber foco. Quando um usuário do teclado pressiona a tecla Tab, o foco se move para o próximo elemento com foco, como se ele tivesse definido tabindex="0". Outros elementos não são focalizáveis por padrão. Adicionar o atributo tabindex
a esses elementos permite que eles recebam o foco quando não o fariam.
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ê notará no codepen,
a tabulação começa em uma sequência separada, na ordem do menor para o maior valor, antes de passar por aqueles na sequência normal na ordem da fonte.
Alterar a ordem de tabulação pode criar uma experiência do usuário muito ruim. Isso dificulta o uso de tecnologias adaptativas, como teclados e leitores de tela, para navegar no conteúdo. Também é difícil para os desenvolvedores gerenciar e manter. O foco é importante. Há um módulo inteiro que discute o foco e a ordem de foco.
role
O atributo role faz parte da especificação ARIA,
e não da especificação HTML 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 a interação esperada de um objeto.
Há alguns widgets de interface comuns, como comboboxes,
barras de menus, listas de guias
e grades de árvores, que não têm equivalente nativo em HTML.
Por exemplo, ao criar um padrão de design com guias, as funções tab, tablist e
tabpanel podem ser usadas. Alguém que pode ver fisicamente
a interface do usuário aprendeu por experiência como navegar pelo widget e tornar diferentes painéis visíveis clicando nas guias associadas.
Incluir o 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> que atualmente tem o foco 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 altera as interações do teclado ou do dispositivo de ponteiro. Adicionar role="button" a um <span>
não o transforma em um <button>. Por isso, é recomendável 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 a função de um elemento semântico.
contenteditable
Um elemento com o atributo contenteditable definido como true é editável, pode ser focado e é adicionado à ordem de guias como se
tabindex="0" fosse 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 será editável (a menos que seja editável por padrão, como um <textarea>).
Se o valor for inválido, como <style contenteditable="😀"> ou <style contenteditable="contenteditable">, o valor padrão será inherit.
Para alternar entre os estados, consulte o valor da propriedade de leitura somente 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 <style>. É possível usar atributos e um pouco de CSS para criar um editor de CSS em tempo real.
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
Mude 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, ou o bloco de estilo vai desaparecer.
Atributos personalizados
Nós apenas tocamos na superfície dos atributos globais do HTML. Há ainda mais atributos que se aplicam a apenas um ou um conjunto limitado de elementos. Mesmo com centenas de atributos definidos, talvez você precise de um atributo que não esteja na especificação. O HTML pode ajudar.
Você pode criar qualquer atributo personalizado adicionando o prefixo data-. Você pode nomear seu atributo com qualquer coisa que comece com data-
seguida de qualquer série de caracteres em letras minúsculas que não comece com xml e não contenha dois-pontos (:).
Embora o HTML seja tolerante e não seja interrompido se você criar atributos sem suporte que não começam com data ou mesmo se você iniciar
seu atributo personalizado com xml ou incluir um :, há benefícios em criar 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 específico com prefixo data-, há uma API de conjunto de dados integrada
para iterar seus atributos personalizados. As propriedades personalizadas são uma excelente maneira de comunicar informações específicas do aplicativo
por JavaScript. Adicione atributos personalizados a elementos no formato 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 mais simples dataset.
el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop
A propriedade dataset retorna um objeto DOMStringMap dos atributos data- de cada elemento. Há 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 os valores deles:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
Os atributos neste artigo são globais, ou seja, podem ser aplicados a qualquer elemento HTML, embora nem todos tenham impacto
nesses elementos. A seguir, vamos analisar os dois atributos da imagem introdutória que não abordamos (target e href) e
vários outros atributos específicos de elementos, enquanto analisamos os links em mais detalhes.
Teste seu conhecimento
Teste seus conhecimentos sobre atributos.
Um id precisa ser exclusivo no documento.
Selecione o atributo personalizado formado corretamente.
data-birthdaybirthdaydata:birthday