01/02/2012 ♦ Desenvolvimento web

ModularHTML: um guia de estilo para código HTML semântico e padronizado

Marcação dos módulos em uma página de wireframe
www.modularhtml.com.br

Um código HTML bem feito precisa ser semântico. Isso quer dizer que você deve marcar um parágrafo com a tag P, uma lista com a tag UL e uma tabela com a tag TABLE. Mas cada desenvolvedor escreve o código semântico do seu jeito. Alguns gostam de envolver tudo com uma tag DIV, outros usam muitas listas (UL/LI) e tem ainda aqueles que não economizam na tag SPAN.

Na maioria dos casos não existe certo ou errado, mas sem uma regra você nunca terá um código padronizado. A padronização permite a reutilização, agiliza a montagem HTML e cria um estilo único entre todos os desenvolvedores de uma equipe, incluindo designers e programadores.

Existem guias de estilo para Jornalismo (Manual de Redação), Design Gráfico (Manual de Identidade Visual) e mesmo para Programação (Padrão de Codificação). Inspirados por um artigo de Anna Debenham na 24ways, resolvemos criar o ModularHTML, um guia de estilo para código HTML semântico e padronizado.

Logotipo do ModularHTML

O ModularHTML é formado por uma lista de módulos, pedaços de código HTML que compõem uma página web. Você vai encontrar módulos simples como breadcrumbs e mais complexos como um slideshow de imagens. Ao montar uma página HTML, abra o ModularHTML no browser e copie os pedaços de código para sua página.

Inicialmente seria uma ferramenta de uso interno, mas resolvemos torná-la pública para que outros desenvolvedores possam usar, testar e contribuir. Todo conteúdo do ModularHTML está sob licença MIT e seu código disponível no Github. Acesse a página de demonstração e participe do projeto.