Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Atributos booleanos

Publicado em: 2011-09-24 — 18.996 visualizacoes

Um conceito básico da linguagem HTML desconhecido não só pela maioria dos iniciantes mas também por muitos desenvolvedores reconhecidamente experientes em marcação HTML é aquele que permite identificar e empregar corretamente os atributos booleanos da linguagem.

Em ciência da computação, booleano é um tipo de dado primitivo que possui dois valores, que podem ser considerados como 0 ou 1, verdadeiro ou falso. Ele é usado em operações lógicas como conjunção, disjunção, disjunção exclusiva, equivalência lógica e negação, que correspondem a algumas das operações da álgebra booleana.
http://pt.wikipedia.org/wiki/Booleano

A definição acima, transcrita da Wikipedia, ilustra com exatidão o conceito de booleano que nós, envolvidos com programação, trazemos desde o início de nossas atividades Web. Algo mais ou menos como: “uma propriedade booleana pode assumir os valores true ou false“.
Contudo quando se trata atributos booleanos da marcação HTML o uso deles é definido nas Recomendações do W3C conforme tradução a seguir:

A presença de um atributo booleno em um elemento representa o valor verdadeiro e a ausência o valor falso.

Se o atributo estiver presente seu valor poderá ser uma string vazia ou o nome do atributo em grafia insensível ao tamanho de caixa e sem espaços em branco antes ou depois do valor (quando colocado entre aspas).

Vamos exemplificar o que estabelece o W3C usando os atributo booleanos da HTML5 controls e autoplay para o elemento audio. Observe a marcação a seguir.

...
...
<audio src="BeeGees.mp3" controls="true" autoplay="false">
</audio>
...

Encontra-se marcação como a mostrada acima em matérias e tutoriais publicados em vários blogs e em marcação HTML de vários sites desenvolvidos com uso da HTML5. A especificação não prevê a marcação desta forma e ela não valida, pois valores “true” e “false” não são admitidos para atributos booleanos.
As opções corretas para a marcação mostrada são:

Opção 1

...
...
<audio src="BeeGees.mp3" controls>
</audio>
...

Neste caso, a presença do atributo controls é suficiente para que ele seja verdadeiro e a ausência do atributo autoplay define-o como falso.

Opção 2

...
...
<audio src="BeeGees.mp3" controls="">
</audio>
...

Neste caso, usamos o valor “string vazia” para definir o atributo controls como verdadeiro e a ausência do atributo autoplay define-o como falso.

Opção 3

...
...
<audio src="BeeGees.mp3" controls="controls">
</audio>
...

Neste caso, usamos um valor igual ao nome do atributo para defini-lo como verdadeiro e a ausência do atributo autoplay define-o como falso.

Convém notar que a opção 1 é usada em marcação HTML5 e as opções 2 e 3 em marcação XHTML5 (em acordo com a sintaxe XML).

Atributos booleanos

Os atributos booleanos previstos na HTML5 são: async, autofocus, autoplay, checked, controls, default, defer, disabled, formnovalidate, ismap, loop, multiple, novalidate, open, pubdate, readonly, required, reversed, scoped, seamless, selected.

Os demais atributos da HTML5 são classificados pela especificação como “atributos enumeráveis” que são aqueles que admitem um determinado valor como uma palavra-chave, uma string, um conjunto de caracteres ou um número.

Convém ressaltar que os atributos contenteditable e draggable são do tipo enumerável (não são booleanos) cujos valores possíveis são as palavras-chave “true” e “false”.

Conclusão

Nesta matéria mostrei um conceito básico da HTML que tem sido largamente negligenciado por muitos de nós autores HTML. Espero ter chamado a atenção para o fato e ter contribuido para aumentar o arsenal de conhecimentos dos meus leitores e de todos os que me pestigiam lendo minhas matérias.
Votos de boas marcações e não se esqueça que (por incrível que pareça) é incorreto usar valores “true” e “false” para atributos booleanos da HTML.

Atualização: O conceito de atributos booleanos não foi introduzido pela HTML5, como a matéria pode sugerir. Ele já existia nas versões anteriores da HTML, com a única diferença que para estas o valor “string vazia” não era admitido, este sim, foi criado na HTML5.
Portanto, mesmo em marcação (X)HTML é incorreto usar checked="true", selected="true", etc.

Observe no screenshot a seguir a mensagem que o validador do W3C retornou ao se submeter para validação um documento XHTML 1.0 Transitional contendo o valor “true” para o atributo checked.

Saida do validador - parte

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2011-09-24 (sábado). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2011/09/24/atributos-booleanos/trackback no seu site.

9 comentários na matéria: “Atributos booleanos”

  1. MarlonNo Gravatar disse:

    Excelente dica Maujor, obrigado!

  2. JacsonNo Gravatar disse:

    Obrigado Maujor. Vivendo e aprendendo (descobrindo).

  3. Lucas SandovalNo Gravatar disse:

    hehe o défcit de atenção imperando de novo. Obrigado pela atenção, maujor.

  4. MaujorNo Gravatar disse:

    @Lucas Sandoval,
    Foi dito na matéria:
    “Convém ressaltar que os atributos contenteditable e draggable são do tipo enumerável (não são booleanos) cujos valores possíveis são as palavras-chave “true” e “false”. ”
    Você leu isso: não são booleanos?

  5. Zeno RochaNo Gravatar disse:

    Excelente observação Maujor.

  6. Jakson RochellyNo Gravatar disse:

    Muito interessante saber disso! Obrigado por compartilhar!
    Vamos agora aprender a não usar coisas redundantes na marcação HTML.

  7. Lucas SandovalNo Gravatar disse:

    Maujor, então é incorreto usar “contenteditable=true”? O correto seria usar “contenteditable=”contenteditable””?

  8. Luciano MarquesNo Gravatar disse:

    Muito esclarecedor este post. Excelente!

  9. Jhonata ReisNo Gravatar disse:

    O instintivo é marcar ‘true’ ou ‘false’,é até lógico, mas é meio que uma reeducação,e o HTML5 tá ai pra ajudar né?

    Abração, muito bom o post.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo