Cómo añadir una h-card a tu blog
Esto significa que vamos a exponer una serie de clases en nuestras etiquetas HTML para dar
un significado semántico a estas, es decir que por ejemplo con la clase u-photo vamos a indicar
que la etiqueta <img> es nuestra foto de avatar o que un elemento con la clase p-name es nuestro nombre.
Si añadimos además la url a nuestra web, que recordemos es el centro de todo, con la clase u-url,
tendremos una h-card bastante básica, para indicarlo tendremos que agrupar toda esta información en un elemento
con la clase h-card.
<section class="h-card">
<a href="https://cyborgspaces.com" class="u-url u-uid">
<img class="u-photo" src="/static/profile-pic-12bcfbe329a284dc3926679a6df2e286.png" alt="Profile picture">
</a>
<div>
<p class="bio-name p-name">Carlos Sanmartín Bustos</p>
</div>
</section>Además en esta h-card podemos añadir perfiles en otras webs para indicar que son nuestros. Podemos hacer esto con nuestro perfil de Mastodon, lo que nos permitirá verificar nuestra web en Mastodon. Y también podemos añadir nuestro perfil de Github, lo que nos va a permitir más adelante identificarnos el los servicios de la IndieWeb.
<section class="h-card">
<a href="https://cyborgspaces.com" class="u-url u-uid">
<img class="bio-avatar u-photo" src="/static/profile-pic-12bcfbe329a284dc3926679a6df2e286.png" alt="Profile picture">
</a>
<div>
<p class="bio-name p-name">Carlos Sanmartín Bustos</p>
<ul>
<li>
<a rel="me" aria-label="Perfil de Mastodon" href="https://mastodon.social/@litox" class="u-url">
Mastodon
</a>
</li>
<li>
<a rel="me" aria-label="Perfil de Github" href="https://github.com/carsanbu/" class="u-url">
Github
</a>
</li>
</ul>
</div>
</section>Esta es una versión simplificada de la h-card que puedes ver al final de esta entrada.
Podemos validar nuestro HTML con este parser bien sea copiando y pegando el código o pegando una URL de la web en cuestión.
Para más información este post de Random Geekery está muy bien explicado.
Foto de Giorgio Trovato en Unsplash