Qual é a diferença entre Landmarks e Web Semântica?

Primeiro, é importante entender o que cada termo significa e o que eles implicam. “Marcos” em HTML refere-se a elementos semânticos usados ​​para identificar áreas ou seções importantes de uma página da web.

Os pontos de referência ajudam os usuários a navegar na página da Web e encontrar rapidamente as informações que procuram. Alguns exemplos de pontos de referência em HTML incluem “cabeçalho”, “rodapé”, “navegação”, “principal”, “artigo”, “aparte”, “seção”, “figura” e “formulário”.

O uso de marcos em HTML é importante para a acessibilidade na web, pois permite que usuários com deficiência visual ou cognitiva naveguem facilmente na página usando um leitor de tela. Os marcos também são úteis para melhorar a usabilidade da página da web em geral, pois permitem que os usuários se concentrem em conteúdos importantes e evitem informações desnecessárias.

Por outro lado, a web semântica é um conjunto de padrões e tecnologias usadas para descrever e organizar informações na web de forma estruturada e significativa. A web semântica usa metadados e ontologias para descrever o conteúdo de uma página da web, permitindo que agentes de software (como mecanismos de busca) entendam melhor as informações e as apresentem de forma mais relevante aos usuários.

Embora os marcos e a web semântica estejam relacionados entre si, eles não são os mesmos. Os marcos são usados ​​principalmente para identificar as seções importantes de uma página da Web, como cabeçalho, navegação, conteúdo principal e rodapé, com o objetivo de melhorar a acessibilidade e a navegação da página. Por outro lado, a web semântica é usada para descrever as informações em uma página da web de maneira estruturada e significativa, com o objetivo de tornar as informações mais facilmente compreensíveis para os agentes de software (como os mecanismos de busca ) .

Os pontos de referência são implementados no código HTML de uma página da Web usando elementos semânticos específicos, como “cabeçalho”, “nav”, “principal”, “à parte”, “rodapé” etc. A Web semântica é implementada usando padrões e tecnologias específicos, como como HTML5, RDF, OWL, etc.

Em termos de aplicação, os marcos são importantes principalmente para melhorar a acessibilidade e navegação das páginas da web, especialmente para pessoas com deficiência visual ou de mobilidade. A web semântica, por outro lado, é importante para melhorar a descrição e organização da informação na web em geral, e para facilitar a interligação e troca de dados entre diferentes sistemas e aplicações. Para ilustrar isso, um exemplo de implementação de marcos poderia ser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example of landmarks in HTML</title>
</head>
<body>
  <!-- Page header -->
  <header>
    <h1>Page Header</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <!-- Main content of the page -->
  <main>
    <h2>Main Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor ipsum eget nibh rhoncus, vitae faucibus velit blandit. Phasellus tincidunt diam vel erat blandit, non lobortis nulla convallis. Nunc dictum felis id risus sollicitudin, a iaculis mauris sagittis. Nullam condimentum enim eget elit ultricies suscipit. Praesent a sagittis enim. Sed venenatis eget nunc in ullamcorper. Proin sit amet libero sed mauris tincidunt aliquet a a tellus.</p>
  </main>
  <!-- Page sidebar -->
  <aside>
    <h2>Page Sidebar</h2>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </aside>
  <!-- Page footer -->
  <footer>
    <p>© 2021 Example of landmarks in HTML. All rights reserved.</p>
  </footer>
</body>
</html>

Written by: Vladimir Draguicevic M. 
Head of dev and Design in ForSend
Content creator in BrandWarm.cl
Teacher at Duoc UC Design School.
Adobe Certified XD Essentials
Connect on Linkedin :).