{"id":125149,"date":"2025-03-03T09:16:52","date_gmt":"2025-03-03T07:16:52","guid":{"rendered":"https:\/\/elementor.com\/blog\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/"},"modified":"2025-12-15T17:42:47","modified_gmt":"2025-12-15T15:42:47","slug":"html-links-hyperlinks-syntax-code-attribute-und-beispiele","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/","title":{"rendered":"HTML-Links: Hyperlinks, Syntax, Code, Attribute und Beispiele"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"125149\" class=\"elementor elementor-125149 elementor-1477\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-278f6cd e-flex e-con-boxed e-con e-parent\" data-id=\"278f6cd\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1b4328 elementor-widget elementor-widget-text-editor\" data-id=\"d1b4328\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In diesem umfassenden Leitfaden werden wir die Geheimnisse von HTML-Links entschl\u00fcsseln. Ob Sie ein Anf\u00e4nger sind, der gerade mit der Webentwicklung beginnt, oder Ihre F\u00e4higkeiten verbessern m\u00f6chten, Sie werden alles Notwendige erlernen, um Links zu erstellen, die sowohl funktional als auch benutzerfreundlich sind. Und bedenken Sie, eine gut gestaltete Website mit nahtloser Navigation erfreut nicht nur Ihre Besucher; sie kann sich auch positiv auf Ihr Suchmaschinenranking auswirken.   Lassen Sie uns eintauchen!<\/span><\/p>\n<h2><b>Die essentielle Anatomie eines HTML-Links<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Im Zentrum jedes HTML-Links steht das &lt;a&gt;-Tag. Dieses Tag, kurz f\u00fcr &#8222;Anker&#8220;, ist wie ein magisches Portal zu anderen Destinationen im Web. Innerhalb des \u00f6ffnenden &lt;a&gt;-Tags befindet sich sein Komplize, das href-Attribut (kurz f\u00fcr &#8222;hypertext reference&#8220;). Das href-Attribut ist der Ort, an dem Sie die Adresse der Seite oder Ressource spezifizieren, zu der Sie verlinken m\u00f6chten.   <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lassen Sie uns die grundlegenden Komponenten aufschl\u00fcsseln:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;a&gt;:<\/b><span style=\"font-weight: 400;\"> Dies ist die Er\u00f6ffnung des Anker-Tags, die den Beginn Ihres Links signalisiert.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>href-Attribut:<\/b><span style=\"font-weight: 400;\"> Dieser Teil enth\u00e4lt die Ziel-URL, die Adresse, zu der der Link den Benutzer bei Anklicken f\u00fchren wird.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ankertext:<\/b><span style=\"font-weight: 400;\">  Dies ist der sichtbare Teil des Links, auf den die Benutzer klicken werden. Es ist der Text, der auf der Webseite erscheint. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Schlie\u00dfendes Tag:<\/b><span style=\"font-weight: 400;\"> Ein schlie\u00dfendes &lt;\/a&gt;-Tag markiert das Ende Ihres Links.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Es ist wichtig, deskriptiven Ankertext zu verwenden. Dies hilft sowohl Benutzern als auch Suchmaschinen, den Kontext dessen zu verstehen, worauf sie klicken. Vermeiden Sie generische Phrasen wie &#8222;hier klicken&#8220; oder &#8222;mehr lesen&#8220;. Streben Sie stattdessen nach Text, der den Inhalt, zu dem der Link f\u00fchrt, pr\u00e4zise widerspiegelt.   <\/span><\/p>\n<h3><b>Arten von HTML-Links<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">HTML-Links sind nicht einheitlich. Sie kommen in verschiedenen Varianten vor, jede mit ihrem eigenen Zweck und Verhalten. Lassen Sie uns die g\u00e4ngigsten Typen erkunden:  <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Absolute URLs<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">Absolute URLs spezifizieren die vollst\u00e4ndige Adresse einer Webseite, einschlie\u00dflich des Protokolls (\u00fcblicherweise https:\/\/), des Domainnamens und des spezifischen Pfads zur Ressource. Sie eignen sich perfekt f\u00fcr die Verlinkung zu externen Websites, da sie den vollst\u00e4ndigen Weg zum Ziel angeben. <\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">Zum Beispiel verweist dieser Link auf die Homepage der Beispiel-Website:<\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">https:\/\/www.example.com<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Relative URLs<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">Relative URLs sind wie Abk\u00fcrzungen innerhalb Ihrer Website. Anstelle der vollst\u00e4ndigen Adresse geben sie einen Standort relativ zur aktuellen Seite an, was sie \u00e4u\u00dferst praktisch f\u00fcr die Verlinkung zwischen Seiten innerhalb Ihrer Website macht. <\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">Wenn Sie beispielsweise auf eine &#8222;contact.html&#8220;-Seite verlinken m\u00f6chten, die sich im selben Verzeichnis wie Ihre aktuelle Seite befindet, w\u00fcrde Ihr Link so aussehen:<\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">contact.html<\/span><span style=\"font-weight: 400;\"><br \/><\/span><b>Zus\u00e4tzlicher Tipp:<\/b><span style=\"font-weight: 400;\">  Relative URLs k\u00f6nnen Ihre Website-Aktualisierungen vereinfachen. Wenn Sie Ihre gesamte Site auf eine neue Domain umziehen, funktionieren relative Links weiterhin ohne Anpassungen. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Bild-Links<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">M\u00f6chten Sie ein Bild in einen anklickbaren Link verwandeln? Es ist simpel! Sie umschlie\u00dfen ein Bild-Tag &lt;img&gt; mit Ihrem Anker-Tag &lt;a&gt;. Stellen Sie sicher, <a href=\"https:\/\/elementor.com\/blog\/de\/was-ist-ein-alt-tag-definition-beispiele-barrierefreiheit-seo\/\" data-wpil-monitor-id=\"7849\">das &#8218;alt&#8216;-Attribut innerhalb Ihres Bild-Tags einzuf\u00fcgen<\/a>. Dies liefert den beschreibenden Text f\u00fcr Barrierefreiheit (Screenreader) und erscheint, falls das Bild nicht geladen werden kann.    <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>E-Mail-Links (mailto:)<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">F\u00fcr email-Links verwenden Sie das spezielle mailto-Protokoll. Bei Anklicken \u00f6ffnen diese das Standard-email-Programm des Benutzers mit einer vorausgef\u00fcllten &#8218;An&#8216;-Adresse. Sie k\u00f6nnen sogar die Betreffzeile oder den Textk\u00f6rper der email vorab ausf\u00fcllen. Zum Beispiel:   <\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">mailto:info@example.com?subject=Website Inquiry<\/span><\/li>\n<\/ul>\n<h3><b>Steuerung des Link-Verhaltens: das &#8218;target&#8216;-Attribut<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Das target-Attribut fungiert wie ein Verkehrsleiter f\u00fcr Ihre Links. Es erm\u00f6glicht Ihnen zu entscheiden, ob eine verlinkte Seite im selben Browser-Tab, einem neuen Tab oder sogar innerhalb eines spezifischen Frames Ihrer Website (falls Sie Frames verwenden) ge\u00f6ffnet werden soll. Hier ist eine Aufschl\u00fcsselung der g\u00e4ngigsten Werte:  <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>_blank:<\/b><span style=\"font-weight: 400;\">  Dies ist die bevorzugte Option, wenn Sie m\u00f6chten, dass die verlinkte Seite in einem brandneuen Browser-Tab oder -Fenster ge\u00f6ffnet wird. Es h\u00e4lt Ihre aktuelle Website ge\u00f6ffnet und erm\u00f6glicht Benutzern, einfach zu ihr zur\u00fcckzukehren. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>_self:<\/b><span style=\"font-weight: 400;\">  Dies ist das Standardverhalten. Es weist den Browser an, die verlinkte Seite innerhalb desselben Tabs oder Fensters zu \u00f6ffnen und ersetzt dabei die aktuelle Seite, auf der sich der Benutzer befindet. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>_parent:<\/b><span style=\"font-weight: 400;\"> Sofern Ihre Website Frames verwendet, weist dieser Wert die verlinkte Seite an, sich im \u00fcbergeordneten Frame zu \u00f6ffnen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>_top:<\/b><span style=\"font-weight: 400;\"> Dieser Wert \u00e4hnelt _parent, \u00f6ffnet jedoch die verlinkte Seite im gesamten Browserfenster und bricht aus jeglichen Framesets aus.<\/span><\/li>\n<\/ul>\n<p><b>Wann welche Option zu verwenden ist:<\/b><span style=\"font-weight: 400;\">  Die optimale Wahl f\u00fcr das Zielattribut h\u00e4ngt vom Kontext Ihres Links ab.<br \/>\nHier eine allgemeine Faustregel: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">F\u00fcr Links zu externen Websites verwenden Sie _blank, um eine vollst\u00e4ndige Umleitung des Nutzers von Ihrer Website zu vermeiden.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">F\u00fcr Links innerhalb Ihrer Website ist in der Regel _self die beste Wahl, um die Navigation innerhalb desselben Tabs fl\u00fcssig zu halten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Vermeiden Sie die Verwendung von _parent und _top, es sei denn, Ihre Website verwendet spezifisch Framesets, da diese die Benutzererfahrung beeintr\u00e4chtigen k\u00f6nnen.<\/span><\/li>\n<\/ul>\n<h3><b>Links f\u00fcr die Navigation<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Betrachten Sie Links als die Pfade durch Ihre Website.<br \/>\nEin gut strukturiertes Navigationssystem mit eindeutigen Links fungiert wie eine Stra\u00dfenkarte, die Ihre Besucher zu den ben\u00f6tigten Informationen f\u00fchrt.<br \/>\nWebsite-Men\u00fcs bestehen oft vollst\u00e4ndig aus Links!<br \/>\nLassen Sie uns untersuchen, wie man HTML verwendet, um grundlegende Navigationsstrukturen zu erstellen:   <\/span><\/p>\n<h4><b>Ungeordnete Listen (f\u00fcr einfache Navigation):<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">Ungeordnete Listen, gekennzeichnet durch das &lt;ul&gt; Tag, eignen sich hervorragend f\u00fcr einfache Navigationsmen\u00fcs.<br \/>\nJedes Listenelement &lt;li&gt; kann einen Link enthalten: <\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f3365b elementor-widget elementor-widget-code-highlight\" data-id=\"2f3365b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<ul>\r\n    <li><a href=\"\/\">Home<\/a><\/li>\r\n    <li><a href=\"\/about\">About Us<\/a><\/li>\r\n    <li><a href=\"\/contact\">Contact<\/a><\/li>\r\n<\/ul>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e89a7d elementor-widget elementor-widget-text-editor\" data-id=\"3e89a7d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Geordnete Listen (f\u00fcr nummerierte Men\u00fcs):<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">Geordnete Listen (&lt;ol&gt;) funktionieren \u00e4hnlich wie <a href=\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/\" data-wpil-monitor-id=\"7850\">ungeordnete Listen<\/a>, zeigen jedoch Zahlen neben jedem Element an. Sie eignen sich hervorragend f\u00fcr Schritt-f\u00fcr-Schritt-Anleitungen oder Ranglisten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verschachtelte Listen (f\u00fcr Untermen\u00fcs):<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">F\u00fcr komplexere Navigation k\u00f6nnen Sie Dropdown-Men\u00fcs oder mehrstufige Men\u00fcs erstellen, indem Sie Listen ineinander verschachteln.<\/span><\/li>\n<\/ul>\n<p><b>Elementor Tipp:<\/b><span style=\"font-weight: 400;\">  Wenn Sie Elementor verwenden, bietet Ihnen die leistungsstarke Theme Builder-Funktion immense visuelle Kontrolle \u00fcber die Men\u00fcerstellung und -gestaltung.<br \/>\nSie k\u00f6nnen benutzerdefinierte Men\u00fcs mit Leichtigkeit gestalten, was Ihnen Zeit und komplexe Codierung erspart. <\/span><\/p>\n<p><b>Profi-Tipp<\/b><span style=\"font-weight: 400;\">: Halten Sie Ihre Navigationsmen\u00fcs pr\u00e4gnant und fokussiert.<br \/>\nZu viele Links k\u00f6nnen Benutzer \u00fcberfordern.<br \/>\nPriorisieren Sie die wichtigsten Seiten und stellen Sie sicher, dass Ihre Men\u00fcstruktur logisch und leicht zu verstehen ist.  <\/span><\/p>\n<h3><b>Stilisierung von Links mit CSS<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Einfache HTML-Links sind funktional, k\u00f6nnen aber etwas schlicht wirken.<br \/>\nCSS (Cascading Style Sheets) ist wie Ihr Zauberstab zur Verwandlung von Links in auff\u00e4llige, interaktive Elemente.<br \/>\nHier einige wesentliche <a href=\"https:\/\/elementor.com\/blog\/de\/wie-kann-man-text-in-css-unterstreichen-css-text-decoration-eigenschaft\/\" data-wpil-monitor-id=\"7851\">CSS-Eigenschaften<\/a>, um Sie in Gang zu bringen:  <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>color:<\/b><span style=\"font-weight: 400;\"> Dies ist die einfachste Methode, um <a href=\"https:\/\/elementor.com\/blog\/de\/wie-man-linkfarben-in-wordpress-aendert5-methoden\/\" data-wpil-monitor-id=\"7852\">die Farbe Ihres Link<\/a>-Textes zu \u00e4ndern.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>text-decoration:<\/b><span style=\"font-weight: 400;\">  Steuern Sie Unterstreichungen mit dieser Eigenschaft.<br \/>\nDer h\u00e4ufigste Wert ist none, um die Standardunterstreichung zu entfernen, w\u00e4hrend underline sie wieder hinzuf\u00fcgt. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-weight<\/b><span style=\"font-weight: 400;\">: Lassen Sie Ihre Links hervorstechen, indem Sie fett verwenden, oder experimentieren Sie mit verschiedenen Schriftst\u00e4rken f\u00fcr visuelle Hierarchie.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-size:<\/b><span style=\"font-weight: 400;\"> Passen Sie die Gr\u00f6\u00dfe Ihres Link-Textes f\u00fcr Lesbarkeit und Betonung an.<\/span><\/li>\n<\/ul>\n<h3><b>Auf die n\u00e4chste Ebene: Pseudo-Klassen<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Pseudo-Klassen verleihen Ihnen Superkr\u00e4fte, um Links basierend auf ihrem Zustand zu gestalten.<br \/>\nHier sind die Grundlagen: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>:hover:  <\/b><span style=\"font-weight: 400;\">Dies macht Ihre Links interaktiv!<br \/>\n\u00c4nderungen des Stils, die Sie mit :hover anwenden, erscheinen, wenn der Mauszeiger des Benutzers \u00fcber dem Link schwebt.<br \/>\nEs ist eine hervorragende Methode, um visuelles Feedback zu geben.  <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>:visited :  <\/b><span style=\"font-weight: 400;\">  Verwenden Sie dies, um das Erscheinungsbild von Links zu \u00e4ndern, die der Benutzer bereits angeklickt hat.<br \/>\nDies kann ein hilfreicher visueller Hinweis f\u00fcr die Navigation sein. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>:active : <\/b><span style=\"font-weight: 400;\"> Dies gestaltet den Moment, in dem ein Link angeklickt wird, und bietet dem Benutzer eine sofortige Best\u00e4tigung, dass sein Klick registriert wurde.<\/span><\/li>\n<\/ul>\n<p><b>Beispiel:<\/b><span style=\"font-weight: 400;\"> Lassen Sie uns Links bei Hover rot f\u00e4rben und eine Unterstreichung hinzuf\u00fcgen:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-043e812 elementor-widget elementor-widget-code-highlight\" data-id=\"043e812\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\na:hover { \r\n    color: red; \r\n    text-decoration: underline; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38455db elementor-widget elementor-widget-text-editor\" data-id=\"38455db\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Elementor-Tipp:<\/b><span style=\"font-weight: 400;\"> Mit Elementor k\u00f6nnen Sie Ihre Links visuell mit zahlreichen Optionen gestalten, einschlie\u00dflich Hover-Effekten, ohne CSS-Code manuell schreiben zu m\u00fcssen.<\/span><\/p>\n<h3><b>Sprunglinks: Navigation innerhalb einer Seite<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Manchmal sind lange Webseiten mit Inhalten gef\u00fcllt.<br \/>\nSprunglinks, auch bekannt als Ankerlinks, erm\u00f6glichen es Benutzern, schnell zu bestimmten Abschnitten auf derselben Seite zu &#8222;springen&#8220;, was die Benutzererfahrung verbessert.<br \/>\nSie sind besonders n\u00fctzlich f\u00fcr lange Artikel, FAQs oder Seiten mit einem <a href=\"https:\/\/elementor.com\/blog\/table-of-contents\/\" data-wpil-monitor-id=\"7844\">Inhaltsverzeichnis<\/a>.  <\/span><\/p>\n<p><span style=\"font-weight: 400;\">So funktioniert es:<\/span><\/p>\n<p><b>Erstellen Sie einen Anker:<\/b><span style=\"font-weight: 400;\"> Geben Sie dem Abschnitt, zu dem Sie verlinken <\/span><i><span style=\"font-weight: 400;\">m\u00f6chten<\/span><\/i><span style=\"font-weight: 400;\">  eine eindeutige ID mit dem id-Attribut. Zum Beispiel:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba83295 elementor-widget elementor-widget-code-highlight\" data-id=\"ba83295\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<h2 id=\"tips\">Additional Tips<\/h2>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90fac18 elementor-widget elementor-widget-text-editor\" data-id=\"90fac18\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>  Erstellen Sie den Sprunglink:<\/b><span style=\"font-weight: 400;\"> Verwenden Sie ein Anker-Tag, um auf die soeben erstellte ID zu verweisen.<br \/>\nSetzen Sie der ID ein Rautenzeichen (#) voran.<br \/>\nBeispielsweise:  <\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44a9373 elementor-widget elementor-widget-code-highlight\" data-id=\"44a9373\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<a href=\"#tips\">Jump to Tips<\/a>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0165abb elementor-widget elementor-widget-text-editor\" data-id=\"0165abb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Wenn nun jemand auf den Link &#8222;Zu den Tipps springen&#8220; klickt, wird der Browser sanft zu dem Abschnitt mit der ID &#8222;tips&#8220; scrollen.<\/span><\/p>\n<p><b>Profi-Tipp:<\/b><span style=\"font-weight: 400;\"> Stellen Sie sicher, dass Ihre IDs deskriptiv und innerhalb der Seite einzigartig sind.<br \/>\nDies gew\u00e4hrleistet die korrekte Funktionsweise Ihrer Sprunglinks und vermeidet Verwirrung. <\/span><\/p>\n<h3><b>Barrierefreiheitsaspekte <\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Barrierefreiheit im Web bedeutet, Websites zu erstellen, die von Menschen mit Behinderungen genutzt werden k\u00f6nnen.<br \/>\nBei Links gibt es einige entscheidende Punkte zu beachten: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Deskriptiver Ankertext:<\/b><span style=\"font-weight: 400;\"> Vermeiden Sie vage Formulierungen wie &#8222;hier klicken&#8220; oder &#8222;mehr erfahren&#8220;.<br \/>\nNutzer, die auf Screenreader angewiesen sind (assistive Technologie, die Websites vorliest), ben\u00f6tigen Kontext, um zu verstehen, wohin ein Link f\u00fchrt.<br \/>\nFormulieren Sie Ihren Ankertext als klare Beschreibung der Zielseite oder -ressource.  <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Das &#8218;title&#8216;-Attribut:<\/b><span style=\"font-weight: 400;\"> Obwohl nicht immer visuell angezeigt, liefert das title-Attribut zus\u00e4tzliche Informationen f\u00fcr Screenreader.<br \/>\nVerwenden Sie es zur Erg\u00e4nzung Ihres Ankertextes, insbesondere wenn das Linkziel weiterer Erl\u00e4uterung bedarf. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fokusindikatoren:<\/b><span style=\"font-weight: 400;\"> Nutzer, die mit der Tastatur navigieren (anstatt mit der Maus), ben\u00f6tigen visuelle Hinweise darauf, welcher Link aktuell ausgew\u00e4hlt ist.<br \/>\nStellen Sie sicher, dass Ihr <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"19690\">CSS<\/a> deutliche Fokus-Stile bereitstellt, oft mit einem kontrastierenden Umriss oder einer Farb\u00e4nderung. <\/span><\/li>\n<\/ul>\n<p><b>Elementor Tipp:<\/b><span style=\"font-weight: 400;\"> Elementor verf\u00fcgt \u00fcber mehrere integrierte Barrierefreiheitsfunktionen und h\u00e4lt sich an Best Practices f\u00fcr Barrierefreiheit.<br \/>\nErw\u00e4gen Sie dessen Verwendung, um Ihre Bem\u00fchungen um eine inklusive Website zu optimieren. <\/span><\/p>\n<p><b>Wichtiger Hinweis:<\/b><span style=\"font-weight: 400;\"> Barrierefreiheit dient nicht nur Menschen mit Behinderungen.<br \/>\nKlare Linktexte und gut gestaltete Fokus-Stile verbessern das Erlebnis f\u00fcr  <\/span><i><span style=\"font-weight: 400;\">alle<\/span><\/i><span style=\"font-weight: 400;\"> Nutzer.<\/span><\/p>\n<h2><b>Best Practices f\u00fcr HTML-Links und SEO<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Suchmaschinen wie Google nutzen Links, um das Web zu durchsuchen, neue Seiten zu entdecken und die Beziehungen zwischen Inhalten zu verstehen.<br \/>\nHier erfahren Sie, wie Sie sicherstellen k\u00f6nnen, dass Ihre Links support Ihre <a href=\"https:\/\/elementor.com\/blog\/de\/7-beste-website-baukaesten-fuer-seo-in-year\/\" data-wpil-monitor-id=\"7853\">SEO-Bem\u00fchungen<\/a>: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Semantische Links und Inhaltsorganisation<\/b><span style=\"font-weight: 400;\">: W\u00e4hlen Sie deskriptiven Ankertext, der den Inhalt der verlinkten Seite pr\u00e4zise widerspiegelt.<br \/>\nStellen Sie sicher, dass Ihre Links im Kontext der Gesamtstruktur und des Flusses Ihrer Website sinnvoll sind und die thematische Relevanz verbessern. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Interne Verlinkung:<\/b><span style=\"font-weight: 400;\">  Eine solide interne Verlinkungsstrategie hilft <a href=\"https:\/\/elementor.com\/blog\/best-wordpress-search-plugins\/\" data-wpil-monitor-id=\"7846\">Suchmaschinen, die Hierarchie Ihrer Website zu verstehen<\/a> und Ihre wichtigsten Seiten zu identifizieren. Integrieren Sie relevante Links in Ihre Artikel, um sowohl Benutzer als auch Suchmaschinen-Crawler zu leiten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b><a href=\"https:\/\/elementor.com\/blog\/de\/wie-findet-und-behebt-man-defekte-links5-methoden\/\" data-wpil-monitor-id=\"7854\">Fehlerhafte Links<\/a><\/b><span style=\"font-weight: 400;\">: Seien Sie stets auf der Hut vor fehlerhaften Links (Links, die zu 404-Fehlerseiten f\u00fchren).<br \/>\nSie erzeugen eine frustrierende Benutzererfahrung und k\u00f6nnen die Glaubw\u00fcrdigkeit Ihrer Website bei Suchmaschinen beeintr\u00e4chtigen.<br \/>\n\u00dcberpr\u00fcfen Sie Ihre Links regelm\u00e4\u00dfig mit Tools wie dem W3C Link Checker (  <\/span><a href=\"https:\/\/validator.w3.org\/checklink\"><span style=\"font-weight: 400;\">https:\/\/validator.w3.org\/checklink<\/span><\/a><span style=\"font-weight: 400;\">) oder Browser-Erweiterungen, die f\u00fcr das Auffinden fehlerhafter Links konzipiert sind.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">W\u00e4hrend Links ein bedeutender Faktor f\u00fcr SEO sind, stellen sie nur einen Teil des Puzzles dar.<br \/>\nHochwertige Inhalte, eine gute Website-Struktur und eine positive Benutzererfahrung spielen ebenfalls wesentliche Rollen. <\/span><\/p>\n<h3><b>Fehlerbehebung bei h\u00e4ufigen Link-Problemen<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Selbst die gewissenhaftesten Webentwickler sto\u00dfen gelegentlich auf Link-Probleme.<br \/>\nHier sind einige h\u00e4ufige Probleme und wie man sie behebt: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fehlerhafte URLs:<\/b><span style=\"font-weight: 400;\">  \u00dcberpr\u00fcfen Sie Ihre URLs mehrfach auf Tippfehler.<br \/>\nSchon ein einziger falscher Buchstabe kann einen Link unbrauchbar machen. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>\u00c4nderungen an der Seitenstruktur:<\/b><span style=\"font-weight: 400;\">  Wenn Sie Seiten auf Ihrer Website verschieben oder umbenennen, denken Sie daran, alle darauf verweisenden Links zu aktualisieren.<br \/>\nAndernfalls entstehen fehlerhafte Links. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>\u00c4nderungen an externen Websites:<\/b><span style=\"font-weight: 400;\">  Leider haben Sie keinen Einfluss auf die Stabilit\u00e4t externer Websites.<br \/>\nWenn eine verlinkte Website entfernt wird oder sich ihre <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/url\/\"   title=\"What is a URL? Structure, Syntax &amp; Best Practices\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"29489\">URL<\/a> \u00e4ndert, funktioniert Ihr Link nicht mehr. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Browser-Kompatibilit\u00e4tsprobleme<\/b><span style=\"font-weight: 400;\">: Obwohl bei einfachen Links selten, k\u00f6nnen komplexe Link-Verhaltensweisen in verschiedenen Browsern inkonsistent sein.<br \/>\nTesten Sie Ihre Links stets in den g\u00e4ngigsten Browsern (wie Chrome, Firefox, Safari), um sicherzustellen, dass sie wie erwartet funktionieren. <\/span><\/li>\n<\/ul>\n<p><b>Hilfreiche Tools:<\/b><span style=\"font-weight: 400;\"> Mehrere Tools k\u00f6nnen bei der Erkennung und Behebung von Link-Problemen unterst\u00fctzen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>W3C Link Checker:<\/b> <a href=\"https:\/\/validator.w3.org\/checklink\"><span style=\"font-weight: 400;\">https:\/\/validator.w3.org\/checklink<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Browser-Erweiterungen:<\/b><span style=\"font-weight: 400;\"> Viele Erweiterungen, wie &#8222;Check My Links&#8220; f\u00fcr Chrome, sind speziell darauf ausgelegt, eine Seite zu scannen und fehlerhafte Links hervorzuheben.<\/span><\/li>\n<\/ul>\n<h3><b>Zus\u00e4tzliche Tipps und \u00dcberlegungen<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sicherheit: Seien Sie vorsichtig mit Links aus externen Quellen.<\/b><span style=\"font-weight: 400;\"> Bei der Verlinkung zu anderen Websites sollten Sie deren Vertrauensw\u00fcrdigkeit und Reputation ber\u00fccksichtigen.<br \/>\nLinks zu b\u00f6sartigen Websites k\u00f6nnen dem Ruf Ihrer eigenen Website schaden und Ihre Nutzer m\u00f6glicherweise Sicherheitsrisiken aussetzen. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>HTTPS:<\/b><span style=\"font-weight: 400;\"> Verwenden Sie stets das sichere https:\/\/-Protokoll in Ihren Links, insbesondere f\u00fcr Links, die mit sensiblen Aktionen wie Anmeldungen, Formularen oder Zahlungen in Verbindung stehen.<br \/>\nDies gew\u00e4hrleistet, dass Benutzerdaten <a href=\"https:\/\/elementor.com\/blog\/de\/was-ist-verschluesselung-und-wie-funktioniert-sie\/\" data-wpil-monitor-id=\"7847\">verschl\u00fcsselt<\/a> und gesch\u00fctzt werden. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Das &#8218;download&#8216;-Attribut:<\/b><span style=\"font-weight: 400;\"> Das download-Attribut erleichtert das erzwungene Herunterladen von Dateien.<br \/>\nF\u00fcgen Sie es Ihrem Link hinzu, und der Browser wird den Benutzer auffordern, die Datei herunterzuladen, anstatt zu versuchen, sie online anzuzeigen. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Dynamische Links mit Elementor (optional):<\/b><span style=\"font-weight: 400;\"> Wenn Sie Elementor verwenden, nutzen Sie dessen F\u00e4higkeiten f\u00fcr dynamische Inhalte.<br \/>\nDies erm\u00f6glicht Ihnen, Links zu erstellen, die automatisch mit Daten aus benutzerdefinierten Feldern, Formularen und mehr gef\u00fcllt werden, was Ihnen manuelle Arbeit erspart, insbesondere bei umfangreichen Websites. <\/span><\/li>\n<\/ul>\n<p><b>Ein Hinweis zur Link-Verfolgung:<\/b><span style=\"font-weight: 400;\"> Um tiefere Einblicke dar\u00fcber zu gewinnen, wie Benutzer mit Ihren Links interagieren, erw\u00e4gen Sie die Verwendung von URL-Tracking-Parametern (wie UTM-Codes) in Verbindung mit <a href=\"https:\/\/elementor.com\/blog\/google-analytics-wordpress\/\" data-wpil-monitor-id=\"7845\">Analysetools wie Google Analytics<\/a>.<\/span><\/p>\n<h2><b>Fazit<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Inzwischen haben Sie die Feinheiten von HTML-Links gemeistert.<br \/>\nSie verstehen ihre verschiedenen Formen, wie man ihr Verhalten steuert und wie man sie f\u00fcr Navigation, Barrierefreiheit und eine positive Benutzererfahrung nutzt.<br \/>\nBedenken Sie, dass Links die Bausteine der Vernetzung innerhalb Ihrer Website und \u00fcber die Weiten des Internets hinweg sind.  <\/span><\/p>\n<p><span style=\"font-weight: 400;\">W\u00e4hrend die Grundlagen von HTML-Tags immer wichtig bleiben werden, ist die Kombination dieses Wissens mit einem leistungsstarken <a href=\"https:\/\/elementor.com\/blog\/de\/10-beste-website-hosting-anbieter-von-year\/\" data-wpil-monitor-id=\"7848\">Website-Builder und optimiertem Hosting<\/a> das ultimative Erfolgsrezept. L\u00f6sungen wie Elementor vereinfachen die technischen Aspekte der Webentwicklung und erm\u00f6glichen es Ihnen, sich auf die Erstellung \u00fcberzeugender Inhalte und die Gestaltung einer nahtlosen Benutzererfahrung zu konzentrieren, in der Ihre Links gl\u00e4nzen.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ob Sie nun ein Anf\u00e4nger sind, der seine erste Website erstellt, oder ein erfahrener Entwickler, der seinen Arbeitsablauf verbessern m\u00f6chte, das Verst\u00e4ndnis der Grundlagen von HTML-Links und der Auswirkungen der Infrastruktur Ihrer Website wird Sie auf den Weg zum digitalen Erfolg bringen!<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Links in HTML sind essentiell f\u00fcr die Erstellung gut strukturierter und leicht navigierbarer Websites. Sie leiten Besucher durch die Informationen und k\u00f6nnen sogar email-Entw\u00fcrfe initiieren. Allerdings frustrieren defekte Links die Nutzer und schaden dem Ruf einer Website.  <\/p>\n","protected":false},"author":2024234,"featured_media":116825,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[513],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-125149","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressourcen"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML-Links: Hyperlinks, Syntax, Code, Attribute und Beispiele<\/title>\n<meta name=\"description\" content=\"Links in HTML sind essentiell f\u00fcr die Erstellung gut strukturierter und leicht navigierbarer Websites. Sie leiten Besucher durch die Informationen und k\u00f6nnen sogar email-Entw\u00fcrfe initiieren. Allerdings frustrieren defekte Links die Nutzer und schaden dem Ruf einer Website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML-Links: Hyperlinks, Syntax, Code, Attribute und Beispiele\" \/>\n<meta property=\"og:description\" content=\"Links in HTML sind essentiell f\u00fcr die Erstellung gut strukturierter und leicht navigierbarer Websites. Sie leiten Besucher durch die Informationen und k\u00f6nnen sogar email-Entw\u00fcrfe initiieren. Allerdings frustrieren defekte Links die Nutzer und schaden dem Ruf einer Website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T07:16:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-15T15:42:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"12\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"HTML-Links: Hyperlinks, Syntax, Code, Attribute und Beispiele\",\"datePublished\":\"2025-03-03T07:16:52+00:00\",\"dateModified\":\"2025-12-15T15:42:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/\"},\"wordCount\":2416,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Ressourcen\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/\",\"url\":\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/\",\"name\":\"HTML-Links: Hyperlinks, Syntax, Code, Attribute und Beispiele\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-03T07:16:52+00:00\",\"dateModified\":\"2025-12-15T15:42:47+00:00\",\"description\":\"Links in HTML sind essentiell f\u00fcr die Erstellung gut strukturierter und leicht navigierbarer Websites. Sie leiten Besucher durch die Informationen und k\u00f6nnen sogar email-Entw\u00fcrfe initiieren. Allerdings frustrieren defekte Links die Nutzer und schaden dem Ruf einer Website.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ressourcen\",\"item\":\"https:\/\/elementor.com\/blog\/de\/category\/ressourcen\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML-Links: Hyperlinks, Syntax, Code, Attribute und Beispiele\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/de\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/de\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML-Links: Hyperlinks, Syntax, Code, Attribute und Beispiele","description":"Links in HTML sind essentiell f\u00fcr die Erstellung gut strukturierter und leicht navigierbarer Websites. Sie leiten Besucher durch die Informationen und k\u00f6nnen sogar email-Entw\u00fcrfe initiieren. Allerdings frustrieren defekte Links die Nutzer und schaden dem Ruf einer Website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/","og_locale":"de_DE","og_type":"article","og_title":"HTML-Links: Hyperlinks, Syntax, Code, Attribute und Beispiele","og_description":"Links in HTML sind essentiell f\u00fcr die Erstellung gut strukturierter und leicht navigierbarer Websites. Sie leiten Besucher durch die Informationen und k\u00f6nnen sogar email-Entw\u00fcrfe initiieren. Allerdings frustrieren defekte Links die Nutzer und schaden dem Ruf einer Website.","og_url":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T07:16:52+00:00","article_modified_time":"2025-12-15T15:42:47+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Verfasst von":"Itamar Haim","Gesch\u00e4tzte Lesezeit":"12\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"HTML-Links: Hyperlinks, Syntax, Code, Attribute und Beispiele","datePublished":"2025-03-03T07:16:52+00:00","dateModified":"2025-12-15T15:42:47+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/"},"wordCount":2416,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Ressourcen"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/","url":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/","name":"HTML-Links: Hyperlinks, Syntax, Code, Attribute und Beispiele","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-03T07:16:52+00:00","dateModified":"2025-12-15T15:42:47+00:00","description":"Links in HTML sind essentiell f\u00fcr die Erstellung gut strukturierter und leicht navigierbarer Websites. Sie leiten Besucher durch die Informationen und k\u00f6nnen sogar email-Entw\u00fcrfe initiieren. Allerdings frustrieren defekte Links die Nutzer und schaden dem Ruf einer Website.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/de\/html-links-hyperlinks-syntax-code-attribute-und-beispiele\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/de\/"},{"@type":"ListItem","position":2,"name":"Ressourcen","item":"https:\/\/elementor.com\/blog\/de\/category\/ressourcen\/"},{"@type":"ListItem","position":3,"name":"HTML-Links: Hyperlinks, Syntax, Code, Attribute und Beispiele"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/de\/#website","url":"https:\/\/elementor.com\/blog\/de\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/de\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/de\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/125149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=125149"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/125149\/revisions"}],"predecessor-version":[{"id":147699,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/125149\/revisions\/147699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media\/116825"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=125149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=125149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=125149"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_persona?post=125149"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_intent?post=125149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}