Sempre acreditei que a web devia ser levada ao seu máximo, com usabilidade, acessibilidade, comunicabilidade e padrões de desenvolvimento, por isso iniciarei falando sobre Padrões Web no meu site, saindo um pouco da tradicional linha Flex e Flash, devido a minha mudança de trabalho e foco absoluto nesta área.
“Semântica é a parte da gramática que estuda o sentido e a aplicação das palavras em um contexto.”
O grande paradigma do desenvolvimento de sites e sistemas acessíveis está no uso correto de cada tag para o seu respectivo conteúdo, como por exemplo, ao pegarmos uma citação e seu autor, como segue abaixo, de que forma devemos implementar a demarcação?
“Somente aquele que administra suas idéias de forma livre é dono de suas idéias, e somente aquele que é dono de suas idéias não é escravizado por elas.”
- Lin Yutang
Que tal desta forma:
<p>“Somente aquele que administra suas idéias de forma livre é dono de suas idéias, e somente aquele que é dono de suas idéias não é escravizado por elas.”</p>
<p>- Lin Yutang</p>
Para muitos, isto será muito familiar, mais está forma não é correta, sendo que temos tags apropriadas como elementos semânticos:
<blockquote>“Somente aquele que administra suas idéias de forma livre é dono de suas idéias, e somente aquele que é dono de suas idéias não é escravizado por elas.”</blockquote>
<cite>- Lin Yutang</cite>
Muios desenvolvedores estão habituados a escrever HTML desta forma e inclinados a desenvolver sites com várias tags <div> no início do desenvolvimento com a metodologia Tableless, claramente espelhandos em layouts estruturados com tabelas. Esta prática é chamada de divite, mas deve ser evitada.
Similarmente, devemos ser cautelosos sobre a divisão de elementos únicos com tags <div>. Isto é frequentemente realizado para propósitos de estilização, mas usualmente isto destrói com a marcação semântica, além de ser totalmente desnecessário.
A tag <div> é usada para criar divisões na página, mas ao mesmo tempo é utilizada para criar grupos de conteúdo. Por exemplo, por que fazer isto:
<div id=”menu”>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>
Quando podemos estruturar a página usando menos código:
<ul id=”menu”>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
A este uso desnecessário da tag <div> damos o nome de “divite”. O mesmo problema pode ocorrer comumente com desenvolvedores web ao utilizar o atributo class, ao que chamaremos de classite.
O atributo class existe para que possamos utilizar a mesma esitilização para vários elementos em comum, mas como a divite, muitos desenvolvedores utilizam o atributo class no lugar da tag apropriada, como no exemplo:
<p class=”address”>
Carlos Tristacci<br />
Rua 13 de Maio, 1535 <br />
Bento Gonçalves - RS
</p>
O correto é usar o elemento (X)HTML address, veja abaixo:
<address>
Carlos Tristacci<br />
Rua 13 de Maio, 1535 <br />
Bento Gonçalves - RS
</address>
Desenvolvedores tem também a tendência de usar o atributo class em diversos elementos que se repetem ao invés de simplificar aplicando a class para o elemento pai, veja o seguinte código:
<ul>
<li class=”tipos-queijo”>Cheddar</li>
<li class=”tipos-queijo”>Mozzarella</li>
<li class=”tipos-queijo”>Parmesan</li>
<li class=”tipos-queijo”>Swiss</li>
</ul>
Aqui uma maneira muito mais simplificada:
<ul class=”tipos-queijos”>
<li>Cheddar</li>
<li>Mozzarella</li>
<li>Parmesan</li>
<li>Swiss</li>
</ul>
Mas, quando temos o cuidado no uso das tag <div>, <p>, <span> juntamente com as demais tags e estudando padrões de desenvolvimento web, iremos utilizar elementos (X) HTML mais apropriados, eliminando a confusão do documento e possibilitando um código mais semântico, fácil de dar manutenção, leve e rápido de ser carregado pelo browser e enfim acessível.
Comentários Recentes