O termo "Web semântica" é hoje em dia usado de forma quase inflacionária. Muitas pessoas nem sequer têm consciência do que essa semântica tão aclamada realmente significa. Na verdade, é bastante simples: graças à semântica, as informações necessárias/desejadas podem ser extraídas de enormes volumes de dados.
Um exemplo prático deve demonstrar a importância da semântica. As fotografias digitais são uma coisa maravilhosa. Logo após serem tiradas, podem ser compartilhadas pela Internet com o mundo inteiro. O que vale no âmbito privado há muito tempo também foi estabelecido no contexto profissional. Agências de imagens, museus, bibliotecas e fotógrafos oferecem fotos, pinturas ou versões digitais de valiosos textos através de bancos de dados de imagens profissionais. Esses websites possuem máscaras de pesquisa pelas quais a plataforma pode ser pesquisada. O exemplo mais popular de um mecanismo de pesquisa de imagens na web 2.0 é certamente o Flickr.
Quem já usou esses mecanismos de pesquisa de imagens conhece seus limites: ao inserir, por exemplo, o termo Kohl, são exibidas fotos de várias áreas distintas. Assim, a pesquisa de imagens do Yahoo! apresenta fotos de um pica-pau, de um jogador de tênis chamado Kohl e do ex-chanceler Helmut Kohl.
Neste ponto, um dos desvantagens da WWW clássica fica clara: atualmente, as informações disponibilizadas podem ser compreendidas por seres humanos, mas não podem ser interpretadas corretamente por máquinas - no exemplo apresentado, pelos mecanismos de pesquisa.
Máquinas só podem extrair informações se estas estiverem realmente presentes. E é aqui que a semântica entra em jogo.
Documentos estruturados
Nas versões anteriores do HTML, simplesmente não havia uma maneira de estruturar documentos semanticamente. Se quiséssemos estruturar um website, tínhamos apenas títulos e parágrafos à disposição. Aqui está um exemplo típico da estrutura de um website clássico.
Para a estruturação de um documento, o HTML oferece os elementos article, aside, dialog, figure, footer, header, nav e section.
Esses elementos estão sendo apresentados neste tutorial. No entanto, antes disso, um aviso: não espere maravilhas visuais desses elementos. Para que os websites baseados em elementos semânticos tenham uma aparência atraente, o CSS deve ser utilizado. Falaremos sobre isso mais tarde.
Alguns elementos semânticos vocês já conhecem, mesmo que à primeira vista talvez não pareçam relacionados à semântica. Aqui está um exemplo desse tipo de elemento.
Com um esforço mínimo, esse elemento torna evidente que pode-se criar conteúdo que pode ser facilmente associado a um contexto específico. Para um software, é imediatamente reconhecível que se trata de uma barra de progresso. Já no caso de soluções baseadas em JavaScript para a geração de uma barra de progresso, isso não é tão claro.
Estruturas de elementos semânticos
Em documentos HTML "normais", a estruturação do conteúdo normalmente é feita com elementos div. Para formatação através de CSS, atribuem-se classes ou IDs a esses elementos. Este princípio também é aproveitado no HTML5. De fato, uma pesquisa realizada pelo Google mostrou que em muitos documentos são usadas sempre as mesmas classes.
Muitos desenvolvedores, por exemplo, usam nav para incluir a navegação dentro deste elemento div. No entanto, no HTML5, esse trecho se parece com:
Usando o elemento nav, fica claro que não se trata apenas de uma lista de links. Na realidade, esse elemento descreve um bloco de conteúdo no qual informações sobre a navegação do website estão contidas dentro de um contexto específico.
Estruturação moderna
Como é tipicamente a estrutura de um documento HTML? Basicamente, ela se assemelha, independentemente do conteúdo final da página. Geralmente, as seguintes áreas estão presentes:
- Cabeçalho
- Menu principal
- Área de conteúdo
- Rodapé
Um website que utiliza elementos div para a estruturação pode se parecer com:
<body>
<div id="header">
<div id="logo">Logotipo</div>
<div id="search">Pesquisa</div>
<div id="nav">Menu principal</div>
</div>
<div id="content">
<h1>Este é o conteúdo</h1>
<div class="section">
<h2>Subtítulo</h2>
<h3>Seção</h3>
<!-- Aqui está o conteúdo -->
</div>
<div class="section">
<h2>Subtítulo</h2>
<!-- Aqui está o conteúdo -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Submenu</div>
</div>
<div id="footer">Rodapé</div>
</body>
Vocês talvez já conheçam essas construções de divs. Para que a estrutura seja lógica para os desenvolvedores, são atribuídas classes ou IDs a essas áreas de div com nomes "falantes". Assim, para os desenvolvedores é claro, por exemplo, que no div com o ID footer, estão os conteúdos que pertencem ao rodapé da página. O problema é que os nomes podem sugerir a estrutura do site, mas semanticamente, o site ainda não está estruturado. É exatamente aí que entram os novos elementos HTML. Pois esses permitem pela primeira vez uma verdadeira estruturação de documentos ou páginas da web.
Para um melhor entendimento, vejam o seguinte documento HTML5:
<body>
<header>
<div id="logo">Logotipo</div>
<div id="search">Pesquisa</div>
<nav>Menu principal</nav>
</header>
<article>
<h1>Este é o conteúdo</h1>
<section>
<h2>Subtítulo</h2>
<h3>Seção</h3>
<!-- Aqui está o conteúdo -->
</section>
<section>
<h2>Subtítulo</h2>
<!-- Aqui está o conteúdo -->
</section>
</article>
<aside>
<nav>Submenu</nav>
</aside>
<footer>Rodapé</footer>
</body>
Nos próximos tutoriais, irei abordar os elementos utilizados aqui. Contudo, apenas olhando este exemplo, já é possível ver onde estão as vantagens dos elementos utilizados. Agora é possível finalmente marcar as áreas das páginas com elementos específicos para elas. Tudo que pertence ao cabeçalho da página pode ser incluído em um elemento header.
Além disso, agora estão disponíveis os elementos section e article, que permitem uma estruturação muito melhor dos conteúdos reais das páginas. Como podem ver, vale a pena dar uma olhada detalhada nas possibilidades que o HTML5 oferece em termos de estrutura semântica de documentos.
