Spielerei mit den Möglichkeiten Links zu erstellen, Alternativen zum normalen <a> und "Dekorationen".
Der verwendete Code kann auch zum kopieren im Seitenquelltext eingesehen werden.
Nicht das Layout ist mir hier wichtig, sondern die unterschiedlichen Tricks diesen zu beeinfussen.

Normal mit dem <a>-Tag

Einfach:
<a href="was:wo">Beispiel<a href=#einfach></a>
"was" kann fast alle mögliche Weiterleitungen sein. URL, Sprungmarke, E-Mail, Telefon, SMS, JS
Beziehungsweise: href=https:, href=#ID, href=mailto:, href=tel:, href=sms:, href=javascript:

Wo öffnen:
Wenn kein target (Ziel) angegeben wird, dann öffnet sich der Link im aktuellen Fenster und Tab
Das target Attribut kann je nach Browser und seinen Einstellungen oder durch Tastenkombinationen beeinflusst werden.
Sonst: Die 2, die nicht klappen, sind für Links innerhalb von <frames> gedacht und reagieren sonst wie mit _self.

Interessant ist auch das Attribut "download"<a href="Verlinkung.HTML" download >, das die bei "href" angegebene Datei herunterlädt.

Weitere informationen kannst du im Internet (w3 school) finden 😂.

Speziell mit Mouse-Events

Eigentlich kann jedes Element zum Link werden, nur braucht es dafür eine etwas Aufwändigere Programmierung.
Die Mouse-Events machen da gute Dienste. am besten natürlich das "onclick" Event.
Dieses Beispiel ist eine Kombination von CSS (die Verdoppelung des Textes), HTML (die Darstellung und das Event) und JS (der Aufruf einer anderen Testseite. -Hallo.da.bin.ichHallo da bin ich-

Vorgehen:

Um nicht bestehende Tags zu verwenden, die mir unbekannte Funktionen verbergen, benutze ich 2 "Pseudo-Tags" <seo> und <seo1>
CSS: 
<style>
seo1	{position:relative;
	 color:green;}
	  
seo1:hover	{z-index:25;
		 cursor: pointer;}
	  
seo1:hover seo	{display:block; 
	  	 color:red;
		 position:absolute;
		 top:3px;
		 left:3px;
		 width:15em;}
</style>
HTML & JavaScript: 
	
<seo1 onclick="window.open('BoxModel.html','_blank');"><seo>Hallo.da.bin.ich</seo>Hallo da bin ich</seo1>

Geordnet mit <table>

Online E-Mail
G-Mail Outlook Yahoo GMX


Auch hier verwende ich das Hover-Attribut in Style um die überfahrene Zelle hervorzuheben und lösen den Link mit onclick aus
Diese Darstellung geeignet als Menü und mit dem "Trick" von oben, könnte es nur bei Wunsch z.B. am oberen Fensterrand erscheinen

Auffällig mit <input> bezw. <button>

Ich finde, wenn man in einem laufenden Text einen Link einfügen will, ist der <a> Tag ideal. Bei "spielerische" Linkangebote auf der Seite verteilt, ist das Vorgehen mit Text aber auch Bilder und Mouse-Event geeignet. Bei ordentliche Menüs benutze ich die Tabelle. Wenn aber der Link als Steuerung des Navigationsverhalten dienen soll sind und unverzichtbar.
Ich möchte bei dieser Demo auch gleich die unterschiedlichen "Seiten-Lade-Anweisungen" ausprobieren.
location.reload().
location.reload(true).

location='https://sercan.ch'.
location.assign('https://sercan.ch').
[window.]location.href='https://infoseca.ch'.
location.replace('https://infoseca.ch').

window.open('https://infoseca.ch').
window.open('https://infoseca.ch','_self').

.history.back()