Atributos

Os atributos foram discutidos brevemente em Visão geral do HTML. é hora de mergulhar fundo.

Os atributos são o que tornam 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 e a funcionalidade do 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, enquanto outros são específicos do elemento. são relevantes apenas para um único elemento. 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, o valor precisará estar entre aspas. Por isso, e para melhorar a legibilidade, é sempre recomendável usar citações.

Embora o HTML não diferencia maiúsculas de minúsculas, alguns valores de atributos fazem isso. Os valores que fazem parte da especificação HTML são indiferentes a maiúsculas. Os valores de string definidos, como nomes de classe e ID, diferenciam maiúsculas de minúsculas. Se um valor de atributo diferencia maiúsculas de minúsculas em HTML, diferencia maiúsculas de minúsculas quando 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 estiver presente, significa que o elemento está desativado, obrigatório, somente leitura etc. Se ausente, não está.

Os valores booleanos podem ser omitidos, definidos como uma string vazia ou ser o nome do atributo. mas o valor não precisa ser definido como a string true. Todos os valores, incluindo true, false e 😀, enquanto forem inválidos, serão considerados 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, 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 considerados verdadeiros. No entanto, como os atributos enumerados inválidos não necessariamente resultam no mesmo valor que os valores ausentes, é mais fácil entrar no 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, inclusive os booleanos.

Atributos enumerados

Às vezes, os atributos enumerados 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 terão um valor padrão se o atributo estiver presente, mas o valor estiver ausente. Por exemplo, se você incluir <style contenteditable>, o padrão é <style contenteditable="true">.

No entanto, ao contrário dos atributos booleanos, omitir o atributo não significa que ele seja falso. um atributo atual com um valor ausente não é necessariamente verdadeira. e 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 será 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 automaticamente "true" se estiver presente. Se você incluem <style contenteditable="false">, esse elemento não é editável. Se o valor for inválido, como <style contenteditable="😀">, ou <style contenteditable="contenteditable">, surpreendentemente, será inválido e usará inherit como padrão.

Na maioria dos casos com atributos enumerados, os valores ausentes e inválidos são os mesmos. Por exemplo, se o atributo type em uma <input> estiver ausente, presente mas sem um valor ou tiver um valor inválido, o padrão será text. Embora esse comportamento seja comum, não é uma regra. Por isso, é importante saber quais atributos são booleanos ou enumerados. omita os valores, se possível, para não cometer erros, e procure 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 todos eles possam, em teoria, ser adicionados a qualquer elemento HTML, alguns atributos globais não têm efeito quando definido em alguns elementos, Por exemplo, a definição de hidden em um <meta> porque o metaconteúdo não é mostrado.

id

O atributo global id é usado para definir um identificador exclusivo para um elemento. Ele serve a muitos propósitos, incluindo: - O destino do identificador de fragmento de um link. - Identificar um elemento para scripting. - Associando um elemento do formulário ao seu rótulo. - Fornecer um rótulo 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 tiver um espaço, o documento não será corrompido, mas você terá que 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ê atual e futuro, transforme o primeiro caractere da id em uma letra. e use apenas letras ASCII, dígitos, _ e -. É recomendável criar e seguir a convenção de nomenclatura id, já que os valores id diferenciam maiúsculas de minúsculas.

O id precisa ser exclusivo para o documento. O layout da sua página provavelmente não será corrompido se uma id for usada mais de uma vez. mas as interações de elementos, links e JavaScript podem não funcionar conforme o esperado.

Identificador de fragmento do link

A barra de navegação inclui quatro links. Vamos abordar o elemento do link mais tarde, mas por enquanto os links não são restritos a URLs baseados em HTTP. 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 o qual, ativando o link, direciona o usuário. Quando um URL inclui uma marca de hash (#) seguida por uma string de caracteres, essa string é um identificador de fragmento. Se essa string corresponde a um id de um elemento na página da Web, o fragmento é uma âncora, ou um favorito, desse elemento. O navegador rolará até o ponto em que a âncora está definida.

Esses quatro links direcionam para quatro seções da página identificadas pelo atributo id. Quando o usuário clica em qualquer um quatro links na barra de navegação, o elemento vinculado pelo identificador de fragmento, o elemento que contém o ID correspondente menos #, rola para a visualização.

O conteúdo de <main> do workshop de machine learning tem quatro seções com IDs. Quando o visitante do site clica em uma das no <nav>, a seção com esse identificador de fragmento rola para a visualização. 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>&amp;</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 fragmento nos links <nav>, observe que cada um corresponde ao id de um <section> em <main>. O navegador nos dá um "topo da página" sem custo financeiro . Definir href="#top", que não diferencia maiúsculas de minúsculas ou simplesmente href="#", vai rolar a tela o usuário ao topo da página.

O separador de marca de hash no href não faz parte do identificador de fragmento. O identificador de fragmento é sempre o último parte do URL e não é enviada ao servidor.

Seletores de CSS

No CSS, é possível segmentar cada seção usando um seletor de código, como #feedback ou, para menos especificidade, uma diferenciação entre maiúsculas e minúsculas. seletor de atributos: [id="feedback"].

Criação dos roteiros

No MLW.com, há um easter egg apenas para usuários de ratos. Clique no interruptor para ativar e desativar 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 parâmetro para o método getElementById() e, com um prefixo #, como parte de uma 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 assume como valor o id do controle de formulário ao qual está associado. A criação de um rótulo explícito incluindo um id em cada controle de formulário e o pareamento de cada um com o atributo for do rótulo garante que que cada controle de formulário tem um rótulo associado.

Embora cada marcador possa ser associado a exatamente um controle de formulário, um controle de formulário pode ter mais de um marcador associado.

Se o controle de formulário estiver aninhado entre as tags de abertura e fechamento <label>, os atributos for e id não são obrigatórias: isso é chamado de modelo rótulo. Com os rótulos, todos os usuários sabem 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 usuários de tecnologias adaptativas. Além disso, clicar em qualquer lugar de um marcador dá foco ao elemento associado, estendendo a área de clique do controle. Isso não é apenas útil para pessoas com problemas de coordenação motora, tornando o mouse menos preciso; ele também ajuda todos os usuários de dispositivos móveis com dedos mais largos que um rádio .

Neste exemplo de código, a quinta pergunta falsa de um teste falso é uma pergunta de múltipla escolha com seleção única. Cada controle de formulário tem uma restrição rótulo, com um id exclusivo para cada um. Para garantir que não duplicamos acidentalmente um ID, o valor dele é uma combinação do número da pergunta e do valor.

Ao incluir botões de opção, já que 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 de acessibilidade

O uso de id em acessibilidade e usabilidade não se limita a rótulos. Na introdução a textos, uma <section> foi convertido em um ponto de referência da região, referenciando o id de um <h2> como o valor de 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 de aria-* que podem ser usados para garantir a acessibilidade. aria-labelledby, aria-describedby aria-details e aria-owns tomam como valor uma lista de referência id separada por espaços. aria-activedescendant, que identifica o elemento descendente em foco no momento, toma como valor uma única referência id: a do elemento com foco (apenas um elemento pode ser focado por vez).

class

O atributo class fornece outra forma de segmentar elementos com CSS (e JavaScript), mas não tem outra finalidade. em HTML (embora frameworks e bibliotecas de componentes possam usá-los). O atributo de classe toma como valor uma lista separada por espaços das classes que diferenciam maiúsculas de minúsculas do elemento.

Criar uma estrutura semântica sólida permite a segmentação de elementos com base no posicionamento e na função deles. Estrutura sonora ativa o uso de seletores de elementos descendentes, seletores relacionais e seletores de atributos. Conforme você aprende sobre atributos nesta seção, considere como os elementos com os mesmos atributos ou valores de atributos podem ser estilizados. Não é que você não devem usar o atributo de classe, a maioria dos desenvolvedores não percebe que muitas vezes não precisam.

Até agora, o MLW não usou classes. Um site pode ser lançado sem um único nome de classe? Vamos nos ver.

style

O atributo style permite aplicar estilos inline, que são estilos aplicados ao único elemento em que o atributo é definido. O atributo style assume os pares de valor da propriedade CSS como valor, com a sintaxe do valor 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 terminam cada declaração, logo depois do valor.

Os estilos são aplicados somente ao elemento em que o atributo está definido. Caso contrário, os descendentes herdam valores de propriedade herdados. substituído por outras declarações de estilo em elementos aninhados ou em blocos ou folhas de estilo <style>. Como o valor compreende o equivalente do 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 para aplicar outras regras.

Embora o style seja um atributo global, não é recomendado usá-lo. Em vez disso, defina estilos em arquivos separados. Dito isso, o atributo style pode ser útil durante o desenvolvimento para permitir um estilo rápido, por exemplo, para fins de teste. Depois, pegue "solução" e cole no seu arquivo CSS vinculado.

tabindex

O atributo tabindex pode ser adicionado a qualquer elemento para permitir que ele receba foco. O valor tabindex define se ele é adicionado à ordem de tabulação e, opcionalmente, a uma ordem não padrão.

O valor do atributo tabindex é um número inteiro. Um valor negativo (a convenção é usar -1) torna um elemento capaz de receber foco, como em JavaScript, mas não adiciona o elemento à sequência de tabulação. Um valor tabindex de 0 faz 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 priorizado e não é recomendado.

Nesta página, há uma funcionalidade de compartilhamento usando um elemento personalizado <share-action> que atua como um <button>. O tabindex de zero está incluído para adicionar o elemento personalizado na 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 a promessa da funcionalidade do botão é mantida; incluindo o processamento de eventos de click e keydown, além do uso de teclas Enter e da barra de espaço.

Controles de formulários, links, botões e elementos editáveis de conteúdo podem receber foco. quando um usuário de teclado pressiona a tecla Tab, o foco se move para o próximo elemento focalizável como se tivesse tabindex="0" definido. Outros elementos não são focalizáveis por padrão. Como adicionar o tabindex a esses elementos permite que eles recebam foco quando não receberiam.

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 valor mais baixo para o mais alto, antes de passar pelas que estão na sequência regular na ordem de origem.

Alterar a ordem das guias pode criar uma experiência muito ruim para o usuário. Dificulta o uso de tecnologia assistiva (teclados e leitores de tela) para navegar seu conteúdo. Também é difícil para um desenvolvedor gerenciar e manter. O foco é importante; há um módulo inteiro discutindo foco e ordem de foco.

role

O atributo role faz parte da especificação ARIA (em inglês), em vez da especificação HMTL WhatWG. O atributo role pode ser usado para dar significado semântico ao conteúdo, permitindo que os leitores de tela informem os usuários do site sobre a interação esperada do usuário com um objeto.

Há alguns widgets de interface comuns, como comboboxes, barras de menu, listas de guias, e árvores, que não têm equivalente em HTML nativo. Por exemplo, ao criar um padrão de design com guias, tab, tablist e Os papéis tabpanel podem ser usados. Alguém que possa ver fisicamente a interface do usuário aprendeu a navegar no 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> que está em foco no momento pode ativar a visualização de um painel relacionado em vez de implementar uma funcionalidade típica semelhante a um botão.

O atributo role não muda o comportamento do navegador nem as interações de teclado ou ponteiro do dispositivo. Isso significa 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, ao usar o elemento correto não for possível, o atributo role permitirá informar os usuários de leitores de tela quando um elemento não semântico for adaptado no papel de um elemento semântico.

contenteditable

Um elemento com o atributo contenteditable definido como true é editável, é focalizável e adicionado à ordem da tabulação como se tabindex="0" foram definidos. Contenteditable é um atributo enumerado compatível com 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.

Essas 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 uma <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 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 aos elementos <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>

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, ou o bloco de estilo desaparecerá.

Atributos personalizados

Abordamos apenas os 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 tem a solução.

Você pode criar qualquer atributo personalizado adicionando o prefixo data-. É possível dar ao atributo qualquer nome que comece com data- seguido por qualquer série de letras minúsculas de caracteres que não começam com xml e não contêm dois-pontos (:).

O HTML é permissivo e não será corrompido se você criar atributos incompatíveis que não comecem com data ou mesmo se você começar seu atributo personalizado com xml ou incluir um :, 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 estão preparados para o futuro.

Embora os navegadores não implementem comportamentos padrão para nenhum atributo específico com prefixo data-, existe 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 de aplicativos via JavaScript. Adicione atributos personalizados aos 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 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 os atributos personalizados para acessar os respectivos nomes e valores:

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

Os atributos neste artigo são globais, o que significa que podem ser aplicados a qualquer elemento HTML (embora não tenham impacto sobre desses elementos). A seguir, daremos uma olhada nos dois atributos da imagem de introdução que não abordamos (target e href) e vários outros atributos específicos do elemento à medida que examinamos mais profundamente os links.

Teste seu conhecimento

Teste seus conhecimentos sobre atributos.