Tags XHTML

[willwalker 2]

Hoje eu estava escrevendo um HTML, e sem querer escrevi dic em vez de div, fechei a tag e tambem estilizei chamando ela de dic. Funcionou perfeitamente, mas depois eu vi o erro.

 

Hoje o HTML tem vários outros tipos de Tags identificadas pelo navegador, mas a minha pergunta é:

 

Posso criar tags para meu entendimento do código e estilizar? Ficaria MUITO mais facil usar essas tags. Mas não ficaria bem para o navegador, sendo que ele entende h1 como titulo, e outras tags se são boas para SEO.

 

O que me dizem?

 

Abraços Walker

[William Bruno 1501]

não, você não pode "inventar tags" em html.

 

você "conseguiu" e "aparentemente deu certo", pela caracteristica de XML que o xHTML carrega.

Mas em HTML não é válido inventar, além de que é meio dificil prever como os diversos browsers vão entender essas suas invenções.

 

 

basta ser semântico, tanto com as tags existentes, qnto com os atributos. Isso já resolve, não acha ?

[Henrique Barcelos 290]

Se fosser assim, qual o intuito de existir a W3C que regulamenta esse tipo de coisa? Cada um criaria seu padrão e pronto. No mínimo surreal.

Posso criar tags para meu entendimento do código e estilizar? Ficaria MUITO mais facil usar essas tags.

Certeza? Sua cabeça hoje não é a mesma amanhã. Você pode criar uma tag chamada "descricao", mas depois achar que o tamanho é grande demais e começar a usar "desc" e aí?

[willwalker 2]

Eu sabia que era uma dúvida sem noção hehe...

 

Outra coisa, as vezes preciso usar um display table, mas como vocês sabem display table na maioria das vezes não funciona em versões do IE. Então eu uso o jquery para setar isso, e ele se vira com o Cross Browser, para ser mais rapido. Em vez de ter que criar arquivos separados de CSS para algo tão simples de se resolver com Jquery. Isso pode ser uma boa prática, ou seria melhor criar os arquivos separados para cada versão de IE?

[William Bruno 1501]

? cara.. o crossbrowser q o jQuery "tenta fazer", não tem nada a ver com as propriedades css(não com todas).

 

Se um display: table; dá problemas em algum browser, não vai ser setar isso com jQuery que vai resolver... calma lá.. cuidado com isso.

Por exemplo, se eu quiser usar um border-radius, não vai ser o jQuery sozinho que vai fazer isso ser compativel com ie !

 

 

Eu crio apenas um único css para todos os browsers, e todas as versões do IE.

Na minha opinião, qnto menos hacks você tiver que fazer, melhor você é. Existem poucos bugs. O problema é que a galera faz algo errado, e sai atribuindo culpa ao navegador.

 

Ou então faz algo, que não faz o menor sentido, e por sorte dá certo em tal lugar.. e de novo, culpam o navegador, em vez de culpar a si mesmas.

Se você fizer correto, te garanto que os problemas que você pode ter são mínimos.

 

 

Reflita:

http://wbruno.com.br/blog/2011/08/05/devemos-saber-desenvolver-para-internet-explorer-ie/

[willwalker 2]

Você tem razão, mas para não acontecer isso, eu estruturo muito bem o código html, quando abro uma tag imediatamente a fecho, e uso css reset.

 

Veja esse meu css:

 

<style type="text/css">
#transpromo { width: 870px; margin: auto; }
#transpromo h1 { display: block; text-align: center; color: #576369; font-size: 90px; font-family: 'AllerLightItalic'; padding-top: 36px; padding-bottom: 36px; }
#transpromo h2 { display: block; text-align: center; color: #576369; font-size: 24px; font-family: 'AllerLightItalic'; padding-top: 36px; padding-bottom: 36px; }
#transpromo h2 b { color: #FF2E01; }
#transpromo .faturas { display: block; float: left; width: 661px; height: 468px; }
#transpromo .link { display: block; width: 178px; float: left; font-family: 'AllerLightRegular'; color: #C5C9CB; font-size: 13px; padding-left: 26px; background-image: url(../imagens/seta-lado.png); background-position: left top; background-repeat: no-repeat; text-decoration: none; margin-bottom: 20px; line-height: 15px; }
#transpromo .link:hover { color: #576369; }
#transpromo .navegacao { display: block; clear: left; margin-bottom: 40px; height: 13px; }
#transpromo .navegacao li { float: left; }
#transpromo .navegacao .transacional { display: block; font-family: 'AllerLightItalic'; color: #576369; font-size: 13px; text-decoration: none; padding-left: 26px; background-image: url(../imagens/seta-volta.png); background-position: left center; background-repeat: no-repeat; margin-right: 4px; }
#transpromo .navegacao .transpromo { display: block; font-family: 'AllerLightItalic'; color: #576369; font-size: 13px; text-decoration: none; padding-right: 26px; background-image: url(../imagens/seta-lado.png); background-position: right center; background-repeat: no-repeat; margin-left: 4px; }
#transpromo .navegacao .transpromo:hover, #transpromo .navegacao .transacional:hover { text-decoration: underline; }
#transpromo .navegacao .num { width: 13px; height: 13px; background-color: #BCC1C3; text-align: center; color: #FFF; font-family: 'AllerLightRegular'; font-size: 9px; margin: 0px 4px 0px 4px; line-height: 13px; }
#transpromo .menu { display: block; width: 313px; float: left; margin-top: 40px; }
#transpromo .menu h3 { display: block; color: #F6421A; font-size: 16px; font-family: 'AllerLightItalic'; margin-top: 24px; margin-bottom: 12px; }
#transpromo .menu a { display: block; text-decoration: none; font-family: 'AllerLightItalic'; font-size: 14px; color: #576369; margin-bottom: 12px; }
#transpromo .menu .transpromo_link { height: 35px; background-image: url(../imagens/in-icn.png); background-position: left center; background-repeat: no-repeat; padding-left: 54px; padding-top: 9px; margin-top: 28px; margin-bottom: 40px; }
#transpromo .link_azul:hover { background-image: url(../imagens/seta-lado.png); background-position: right center; background-repeat: no-repeat; color: #369AF9; }
#transpromo .link_cinza:hover { text-decoration: underline; }
#transpromo .textos { display: none; width: 547px; margin-top: 38px; padding-left: 10px; padding-bottom: 20px; float: left; color: #586369; font-size: 13px; font-family: 'AllerLightRegular'; }
#transpromo .textos p { display: block; margin-bottom: 20px; line-height: 18px; clear: left; }
#transpromo .textos h4 { display: block; float: left; margin-right: 75px; margin-bottom: 20px; color: #188CF8; font-size: 15px; font-family: 'AllerLightItalic'; }
#transpromo .textos q { font-size: 9px; }
#transpromo .textos small { display: block; font-size: 9px; }
#transpromo .textos big { float: left; display: block; width: 144px; height: 56px; }
#transpromo .textos a { display: block; color: #188CF8; font-family: 'AllerLightItalic'; font-size: 14px; margin-bottom: 20px; }
</style>

 

 

O que acha?