Ultimamente tenho ouvido muito falarem sobre Semântica no HTML, ouvi opiniões variadas e muitas vezes divergentes, fui fazer uma pesquisa sobre o assunto e me assustei com algumas coisas que vi na internet, por isso vou usar esse post para a sua real função, expressar livremente o que eu penso sobre o assunto.
Antes de começarmos é importante saber o significado de duas palavras fundamentais para melhor compreensão do texto, Semântica e Sintaxe:
Semântica: Estudo do sentido das palavras, que explica a origem e as variações da significação vocabular.
Sintaxe: Parte da gramática que trata da disposição das palavras na proposição; a relação das frases entre si e a construção gramatical.
Dicionário Silveira Bueno.
Semâtica no HTML, Web Standart, XHTML, CSS e Tableless estão tão interligadas que muitas vezes li na internet textos que tratavam tudo como uma coisa só, não é bem assim que a coisa acontece, e também isso é assunto para outro post.
Marcação de texto não é coisa nova, e muito menos invenção da web, isso é uma pratica comum que veio das gráficas, para facilitar na edição de um livro as gráficas montavam estruturas semânticas de marcação de texto para não ter retrabalho, por exemplo, um texto solto em letras grandes no inicio de uma página é um cabeçalho, logo abaixo tem um texto com letras em tamanho menor, é um parágrafo, no meio do parágrafo existe uma palavra que precisa ser destacada.
Segue o exemplo:
Lorem ipsum dolor sit amet
consectetur adipiscing elit. Sed egestas pharetra lorem. Curabitur vestibulum nibh sit amet erat. Maecenas accumsan, quam ut sodales vehicula, ódio.
A Marcação correta para esse texto seria:
<h1>Lorem ipsum dolor sit amet</h1> <p>consectetur adipiscing elit. Sed egestas <strong> pharetra lorem.</strong> Curabitur vestibulum nibh sit amet erat. Maecenas accumsan, quam ut sodales vehicula, ódio.</p>
Você já deve ter encontrado marcações na internet dessa forma:
<big>Lorem ipsum dolor sit amet</big> <span>consectetur adipiscing elit. Sed egestas <h5>pharetra lorem.</h5> Curabitur vestibulum nibh sit amet erat. Maecenas accumsan, quam ut sodales vehicula, ódio.</span>
O resultado visual é quase o mesmo, porém, a semântica estaria destruída, ao construir seu código atente-se em olhar para o layout como um livro e interpretar cada elemento da página em sua real sintaxe, <h1> à <h6> para títulos, <p> para parágrafos e <strong> para textos em destaque dentro de parágrafos.
Nesse exemplo existe um elemento de bloco (<h5>) dentro de um elemento de linha (<span>), esse tipo de código nunca seria validado pelo w3c, mais isso é assunto para o próximo post.
Fazer marcação semântica é organizar a estrutura do conteúdo, imaginando que quando todos os estilos forem retirados da página ela deve ficar organizada como um livro, para ter uma leitura mais amigável.
Deixa sua opinião sobre esse texto, para que eu possa aperfeiçoar os próximos
Embora seja essa a idéia , não muito o que acontece nas empresas de desenvolvimento.
Eu sempre digo, que , é tag para agregar lista, os caras continuam usando para blocos em layout, onde deveria estar unsando DIV. é revoltando ver um cara que se diz fazer XHTML, CSS nos padroes web, e me fazer isso em todos os sites que recorta…
praticamente não entendo do assunto ..
mas já que foi falado de semântica, não entendi a contrariedade do Anderson na utilização de listas (ul, li) no layout. A palavra não pode adotar vários sentidos a depender do contexto que é utilizado ? isso não é semântica ?
Outra coisa, lendo alguns artigos mais avançados sobre web semântica, discordo do sentido dado a expressão, fazendo referência a linguagens de marcação, como se fosse o uso correto do XHTML. Web Semântica não é análise sintática de código XHTML.
Pelo que li web semântica vai muito além disso, significa adicionar significado a tag. Um exemplo ultra simplificado: , que hipoteticamente daria a tag um significado, ser parte do design. Claro que o uso não é esse, o objetivo é tornar o XHTML um banco de dados, compativel com outros modelos tipo Oracle, MySQL, etc, permitindo que se extraia valor do código, recurso muito útil para sistemas de busca como o Google.
Fica aí minha infima colaboração.
o código html foi interpretado
simplificado: , que
ul mean=”ElementDesign”
o sinal de maior e menor é retirado .. conserta isso .. o código HTML pode muito bem ser interpretado como texto comum