Seja semanticamente correto
Autor: Guto Xavier | Publicado: 2009-05-15T11:25:00-07:00

<!--[if gte mso 9]>     Normal   0   21         false   false   false                             MicrosoftInternetExplorer4   <![endif]--><!--[if gte mso 9]>     <![endif]--> <!--  /* Style Definitions */  p.MsoNormal, li.MsoNormal, div.MsoNormal 	{mso-style-parent:""; 	margin:0cm; 	margin-bottom:.0001pt; 	mso-pagination:widow-orphan; 	font-size:12.0pt; 	font-family:"Times New Roman"; 	mso-fareast-font-family:"Times New Roman";} @page Section1 	{size:612.0pt 792.0pt; 	margin:70.85pt 3.0cm 70.85pt 3.0cm; 	mso-header-margin:36.0pt; 	mso-footer-margin:36.0pt; 	mso-paper-source:0;} div.Section1 	{page:Section1;} --> <!--[if gte mso 10]>   /* Style Definitions */  table.MsoNormalTable 	{mso-style-name:"Tabela normal"; 	mso-tstyle-rowband-size:0; 	mso-tstyle-colband-size:0; 	mso-style-noshow:yes; 	mso-style-parent:""; 	mso-padding-alt:0cm 5.4pt 0cm 5.4pt; 	mso-para-margin:0cm; 	mso-para-margin-bottom:.0001pt; 	mso-pagination:widow-orphan; 	font-size:10.0pt; 	font-family:"Times New Roman"; 	mso-ansi-language:#0400; 	mso-fareast-language:#0400; 	mso-bidi-language:#0400;}  <![endif]--><!--[if gte mso 9]>     Normal   0   21         false   false   false                             MicrosoftInternetExplorer4   <![endif]--><!--[if gte mso 9]>     <![endif]--> <!--  /* Style Definitions */  p.MsoNormal, li.MsoNormal, div.MsoNormal 	{mso-style-parent:""; 	margin:0cm; 	margin-bottom:.0001pt; 	mso-pagination:widow-orphan; 	font-size:12.0pt; 	font-family:"Times New Roman"; 	mso-fareast-font-family:"Times New Roman";} @page Section1 	{size:612.0pt 792.0pt; 	margin:70.85pt 3.0cm 70.85pt 3.0cm; 	mso-header-margin:36.0pt; 	mso-footer-margin:36.0pt; 	mso-paper-source:0;} div.Section1 	{page:Section1;} --> <!--[if gte mso 10]>   /* Style Definitions */  table.MsoNormalTable 	{mso-style-name:"Tabela normal"; 	mso-tstyle-rowband-size:0; 	mso-tstyle-colband-size:0; 	mso-style-noshow:yes; 	mso-style-parent:""; 	mso-padding-alt:0cm 5.4pt 0cm 5.4pt; 	mso-para-margin:0cm; 	mso-para-margin-bottom:.0001pt; 	mso-pagination:widow-orphan; 	font-size:10.0pt; 	font-family:"Times New Roman"; 	mso-ansi-language:#0400; 	mso-fareast-language:#0400; 	mso-bidi-language:#0400;}  <![endif]-->  Todos que desenvolvem para web já ouviram ou leram sobre escrever um código semanticamente correto. Por exemplo, escrever HTML semanticamente correto. Mas o que é semântica e o que seria semanticamente correto?  A definição de semântica segundo o dicionário Aurélio é: “Semântica: E. Ling. Estudo das mudanças ou translações sofridas, no tempo e no espaço, pela significação das palavras; semasiologia, sematologia, semiótica. 2. E. Ling. O estudo da relação de significação nos signos [ v. signo (4 e 5)] e da representação do sentido dos enunciados. 3. E. Ling. P. us. V. semasiologia (1).”  Para nós, desenvolvedores e designers, semântica significa escrever da maneira correta e não apenas de uma maneira que possa ser entendida. conversa via messenger entendível, mas não correta<!--[if gte mso 9]>     Normal   0   21         false   false   false                             MicrosoftInternetExplorer4   <![endif]--><!--[if gte mso 9]>     <![endif]--> <!--  /* Style Definitions */  p.MsoNormal, li.MsoNormal, div.MsoNormal 	{mso-style-parent:""; 	margin:0cm; 	margin-bottom:.0001pt; 	mso-pagination:widow-orphan; 	font-size:12.0pt; 	font-family:"Times New Roman"; 	mso-fareast-font-family:"Times New Roman";} @page Section1 	{size:612.0pt 792.0pt; 	margin:70.85pt 3.0cm 70.85pt 3.0cm; 	mso-header-margin:36.0pt; 	mso-footer-margin:36.0pt; 	mso-paper-source:0;} div.Section1 	{page:Section1;} --> <!--[if gte mso 10]>   /* Style Definitions */  table.MsoNormalTable 	{mso-style-name:"Tabela normal"; 	mso-tstyle-rowband-size:0; 	mso-tstyle-colband-size:0; 	mso-style-noshow:yes; 	mso-style-parent:""; 	mso-padding-alt:0cm 5.4pt 0cm 5.4pt; 	mso-para-margin:0cm; 	mso-para-margin-bottom:.0001pt; 	mso-pagination:widow-orphan; 	font-size:10.0pt; 	font-family:"Times New Roman"; 	mso-ansi-language:#0400; 	mso-fareast-language:#0400; 	mso-bidi-language:#0400;}  <![endif]-->  Por exemplo: se eu escrever ocê, todos entenderam que significa você, assim como na internet, em um chat ou messenger se eu escrever vc as pessoas entenderam que significa você. Escrever ocê ou vc é o correto?Não. Mas é entendível? Sim. É a mesma coisa com o nosso HTML, você às vezes escreve o comando de uma maneira incorreta, mas entendível. Observe o trecho de código abaixo:código html semanticamente incorretoSe você digitar o código acima em um editor de texto e salvar com a extensão .html vai funcionar normalmente, porém não é o semanticamente correto. O mesmo código semanticamente correto deveria ter as tag’s fechadas corretamente e em ordem, não deveria ter tag’s escritas em maiúscula, de uma olhada no código abaixo:código html semanticamente correto            O código acima foi escrito semanticamente correto. Durante a execução de sua página, esteticamente você não perceberá diferença por dois motivos: por se tratar de um código pequeno e por serem tag’s simples sem a utilização de outras tecnologias como javascript ou css. Ai vem à pergunta, qual a vantagem de se escrever semanticamente correto se o resultado final é aparentemente o mesmo? A vantagem é que as técnicas, ou boas práticas, de SEO (otimização para sistemas de busca [Google, Yahoo!, etc]) indicam que escrevendo o código semanticamente correto ajuda a indexação de sua página pelo sistemas de busca, não estou aqui dizendo que isso garantirá seu site em primeiro lugar no Google, mas ajuda, e toda a ajuda é bem nesta área.  <!--[if gte mso 9]>     Normal   0   21         false   false   false                             MicrosoftInternetExplorer4   <![endif]--><!--[if gte mso 9]>     <![endif]--> <!--  /* Style Definitions */  p.MsoNormal, li.MsoNormal, div.MsoNormal 	{mso-style-parent:""; 	margin:0cm; 	margin-bottom:.0001pt; 	mso-pagination:widow-orphan; 	font-size:12.0pt; 	font-family:"Times New Roman"; 	mso-fareast-font-family:"Times New Roman";} @page Section1 	{size:612.0pt 792.0pt; 	margin:70.85pt 3.0cm 70.85pt 3.0cm; 	mso-header-margin:36.0pt; 	mso-footer-margin:36.0pt; 	mso-paper-source:0;} div.Section1 	{page:Section1;} --> <!--[if gte mso 10]>   /* Style Definitions */  table.MsoNormalTable 	{mso-style-name:"Tabela normal"; 	mso-tstyle-rowband-size:0; 	mso-tstyle-colband-size:0; 	mso-style-noshow:yes; 	mso-style-parent:""; 	mso-padding-alt:0cm 5.4pt 0cm 5.4pt; 	mso-para-margin:0cm; 	mso-para-margin-bottom:.0001pt; 	mso-pagination:widow-orphan; 	font-size:10.0pt; 	font-family:"Times New Roman"; 	mso-ansi-language:#0400; 	mso-fareast-language:#0400; 	mso-bidi-language:#0400;}  <![endif]-->  Com isso inicio uma série de artigos que serão publicados todas as sextas-feiras. O primeiro conteúdo abordado nesses artigos será o desenvolvimento com XHTML, onde será demonstrado a utilização correta dessa tecnologia para desenvolvimento de páginas web.   Dúvidas, críticas ou sugestões podem ser postados nos comentários do post.     Let’s Go