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

Você está no BLOG do Maujor. IR PARA O SITE

Atributos booleanos

Publicado em: 2011-09-24 — 11.356 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

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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