Igor Escobar // Blog

Este projeto tem como objetivo, dar um “empurrãozinho”, para aquelas pessoas que não tem o hábito de ir em busca dos valores semânticos das tags que utilizam, a grande maioria dos designers e programadores sabem que devem usar a tag div por exemplo, mas não fazem idéia do por que realmente ela foi criada ou qual o verdadeiro uso prático desta tag.

Tag <base>

Definição

A tag <base> tem por objetivo, definir o caminho BASE para todos os links no documento.

Diferenças no HTML e XHTML

No HTML a tag <base> não precisa ser fechada.

No XHTML a tag <base /> precisa ser própriamente fechada.

Dicas e Observações

Nota 1: A tag <base> precisa ser definida entre a tag head quando utilizada.

Exemplo

Para inserirmos uma imagem no documento poderiamos colocar a seguinte URL:

Agora vamos inserir a tag <base> para especificar a url base de todos os links da pagina:

Agora todas as imagens que inserirmos no documento deverá ser relativo a url base especificada entre a tag head do documento:

Atributos Requeridos

DTD indica em cada DTD o atributo é permitido. S=Strict, T=Transitional, e F=Frameset.

Atributos Opcionais

Eventos e Atributos padrões

Nenhum

Este projeto tem como objetivo, dar um “empurrãozinho”, para aquelas pessoas que não tem o hábito de ir em busca dos valores semânticos das tags que utilizam, a grande maioria dos designers e programadores sabem que devem usar a tag div por exemplo, mas não fazem idéia do por que realmente ela foi criada ou qual o verdadeiro uso prático desta tag.

Tag <address>

Definição

A tag <address> define as informações de contato para um documento ou seção.

Diferenças no HTML e XHTML

Nenhuma.

Dicas e Observações

Nota 1: A tag <address> não deve ser usada para descrever o endereço do portal, somente deve ser usado se o mesmo fizer parte das informações de contato do documento ou seção.

Nota 2: O endereço usualmente é renderizado em italic. A maioria dos brownsers vão adicionar uma quebra de linha antes e depois do elemento address, mas as quebras de linha dentro do elemento deverá ser adicionada por você.

Exemplo

Saída:

Atributos suportados

id, class, title, style, dir, lang, xml:lang

Eventos suportados

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Olá pessoal, hoje eu começo com a falar sobre a primeira tag da campanha que eu havia falado no post anterior, peço desculpas a todos pela demora, devido a um problema no trabalho, fiquei uma semana práticamente sem acesso o que dificultava muito a possíbilidade de postar aqui, tendo em vista o fato de que ao chegar em casa eu tinha que fazer em poucas horinhas, tudo o que eu poderia ter feito com calma durante o dia, ficava muito corrido.

Este projeto tem como objetivo, dar um “empurrãozinho”, para aquelas pessoas que não tem o hábito de ir em busca dos valores semânticos das tags que utilizam, a grande maioria dos designers e programadores sabem que devem usar a tag div por exemplo, mas não fazem idéia do por que realmente ela foi criada ou qual o verdadeiro uso prático desta tag.

Tag <acronym>

Definição

A tag <acronym> tem como objetivo indicar o início de um acrônimo, como por exemplo o acrônimo WWW, com esta tag você consegue enviar informações úteis para os browsers, spiders de busca, corretores ortográficos, sistemas de tradução etc.

Diferenças no HTML e XHTML

Nenhuma.

Dicas e Observações

Em alguns browsers o atributo title pode ser usado para ser exibido a versão completa da expressão quando você segura o mouse em cima do acrônimo.

Exemplo

Saída: WWW

Atributos suportados

id, class, title, style, dir, lang, xml:lang

Eventos suportados

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Olá pessoal, hoje darei início a um projeto meu, tive esta idéia a alguns dias e agora que ela esta amadurecida e fortalecida, resolvi coloca-la em prática.

Muita gente sabe que semântica é importante, porém, poucos tem o hábito de pesquisar e procurar saber mais sobre as tags que utilizam no dia-a-dia e descobrir novas tags para deixar o seu código cada vez mais semântico.

Sabendo disso, este projeto tem como objetivo, dar um "empurrãozinho", para aquelas pessoas que não tem o hábito de ir em busca dos valores semânticos das tags que utilizam, a grande maioria dos designers e programadores sabem que devem usar a tag div por exemplo, mas não fazem idéia do por que realmente ela foi criada ou qual o verdadeiro uso prático desta tag.

Espero que gostem, aguardem as especificações diárias.

Igor.

Quando queremos estudar sobre qualquer assunto, é muito importante pesquisar não só o assunto em si, mais também, grande parte dos assuntos que o cercam, este é um grande diferencial que se levado a sério pode se tornar uma grande característica.

Por quê devo estudar a semântica das tags?

Quando falamos de semântica não falamos de uma só coisa, existem várias técnicas de codificação e formatação de hiper-textos que só podem ser concluída com êxito se levado o conhecimento semântico das suas tags e propriedades a sério como o tableless por ex.

Imagine como seria a criação de um layout tableless, se existissem somente 15-20 tags HTML, sim! aquelas principais que é mais comum de se encontrar nos layouts.

Imagine quantos ids e classes diferentes teríamos que criar, para definir todo o padrão visual de um site, se todas as tags se resumissem em 10 ou 20 tags de marcação que muitos estão acostumados a utilizar.

Então...qual a importância de conhecer o valor semântico das tags? ou melhor, não só das tags que você conhece , mas procurar conhecer novas tags sua história de uso e aplicação.

Quem trabalha com a criação de sites à muito tempo, pode ver na prática a diferença quando se conhece um numero limitado de tags e um numero mais abrangente, são dois lados da moeda, levando em conta que o estudo semântico das tags, não era levado muito a sério pelos desenvolvedores na época em que tudo se resumia em tabelas.

A codificação do seu documento html/xhtml fica muito mais rápida e menos "melosa", quem não acha um saco ter que ficar toda hora lembrando o nome "daquela" classe ou "aquele" id definido no css para que uma tag assuma uma característica visual?

Quando conhecemos um numero maior de tags, podemos deixar o nosso código muito mais ramificado/desmembrado e independente de outros recursos, sem falar na hora da manipulação do documento utilizando DOM, tudo fica muito mais fácil e prático, por que eu só preciso simplesmente, criar o conteúdo, formata-lo, livre de classes e ids e com um código CSS bem escrito, toda a sua formatação e forma é automaticamente assumida.

Para tudo existe uma razão!

Enfie insto na cabeça, para tudo existe uma razão, todas as tag que conhecemos, foram criadas por um motivo, para atender uma demanda, por isso devemos estuda-las para utilizarmos somente para o que ela for pré-destinada.

Aonde posso aprender mais sobre semântica?

Separei alguns links interessantes para você que se interessa sobre o assunto e ainda tem "aquela" preguiça de pesquisar mais sobre o assunto, é muito complicado colocar no papel todos os benefícios de se aderir esta "característica" que comentei no começo do texto, somente utilizando na prática para poder saber o quão transformador pode ser este habito.

Web Semântica é uma extensão da Web tradicional
http://www.bax.com.br/news/News_Item.2004-04-29.8261853316

As premissas da Web Semântica
http://outrolado.com.br/Artigos/as_premissas_da_web_semantica__

A Semântica é que manda
http://www.tableless.com.br/a-semantica-e-que-manda

Introdução à semântica web
http://revolucao.etc.br/archives/introducao-a-semantica-web/

Web Semântica
http://www.encontros-bibli.ufsc.br/Edicao_18/2_Web_Semantica.pdf

Semântica Web
http://revolucao.etc.br/archives/category/semantica-web/

A web Semântica
http://www.tableless.com.br/a-web-semantica

Podcast - Microformatos e Semântica
http://brunotorres.net/blogbits-podcast-8-microformatos-e-semantica

Site recomendado - Semântico
http://www.semantico.com.br/

Introdução à web semâtica
http://www.acordapraweb.com/acorda-uma-introducao-a-web-semantica/

Espero ter contribuído!
[]'s