[Enhancement] SEO optimization 4/3 - Use `<a>`-tags in a semantical correct way

[nagmat84]

Currently, the Lychee frontend misuses the <a> tag in both directions: it does not use them where <a>-tags should be used and it uses <a>-tags where they should not be used. Moreover the frontend does not set the href attribute correctly. This

1. causes problems for web crawlers such as search engines, and
2. has negative impact on the tabbing behaviour (i.e. which elements the browser jumps to when a user presses the tab key).

<a> tags constitute so-called interactive content (see MDN Docs: Content categories - Interactive Content). Interactive content elements should only be used for something the user can click onto (or interact otherwise with it), not for anything else. Moreover, search engines, e.g. Google, only consider <a> tags and there href attribute when they try to find links to other pages (see Google Dev Docs: Understand the JavaScript SEO basics).

Current situation

Currently, Lychee builds a photo element inside an album listing like that (an album element suffers from comparable issues):

<div class="photo" data-album-id="..." data-id="..." draggable="true">
	<span class="thumbimg">
		<img class="lazyloaded" src="..." data-src="..." data-srcset="...">
	</span>
	<div class="overlay">
		<h1 title="...">Overlay Title</h1>
		<a>Overlay subtext</a>
	</div>
	<div class="badges">
		<a class="badge icn-star"><svg class="iconic"><use xlink:href="..." /></svg></a>
		<a class="badge icn-share"><svg class="iconic"><use xlink:href="..." /></svg></a>
		<a class="badge icn-cover"><svg class="iconic"><use xlink:href="..." /></svg></a>
	</div>
</div>

This code uses <a> in four places where it should not be used at all: for the overlay subtext and for the three badges. None of them should is "interactive" or should be clickable by users. The only reason why we use it here is that we also use <a> for the small icons in the toolbar and we want to apply the same style for the icons in the badge.

On the contrary the whole photo is only a <div>, although this indeed represents a link to the photo page.

Intended situation

The frontend should adhere to the following principles:

• Never use <a> tags for non-interactive content only to inherit a certain style; instead create a proper CSS class, e.g. like icon, if necessary and then apply this style either to an <a> tag, if it is indeed interactive, and use a <span> otherwise
• For action button (like in the toolbar) which don't lead to another page but trigger an action, use <a> tags without a href attribute; these won't be considered by search engines, but are still "tabbalble" and considered by assistive technology as interactive
• For links which lead to another page, use <a> tags and set the href attribute correctly
  • Note, a bound click event handler takes precedence over the browser's default behavior of following the href, hence unintended page reloads are not a concern
  • In order to make the href attribute actually useful, #343 must be fixed, too. A search engine does not consider a URL with the same path but a different fragment to point to a different page, but pointing to another anchor (i.e. scroll position) on the same page.