<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Understanding the HTML rel Attribute</title>
</head>
<body>
<h1>The `rel` Attribute: Defining Relationships in HTML</h1>
<p>The <code>rel</code> attribute specifies the relationship between the current document and the linked resource. It's primarily used with the <code><link></code> and <code><a></code> tags to provide context and meaning to links.</p>
<h2>Common Uses of the `rel` Attribute</h2>
<h3>Stylesheets</h3>
<p>The most common use is linking stylesheets: <code><link rel="stylesheet" href="styles.css"></code>. This clearly indicates the linked file is a stylesheet.</p>
<h3>Alternate Stylesheets</h3>
<p>You can define multiple stylesheets using <code>rel="alternate stylesheet"</code>. However, browser support for easily switching between these is limited. A JavaScript-based solution is often necessary for user selection.</p>
<pre class="brush:php;toolbar:false"><code>
<link href="main.css" media="screen" rel="stylesheet" type="text/css">
<link rel="alternate stylesheet" title="Higher Contrast" href="contrast.css" type="text/css" media="screen">
<link rel="alternate stylesheet" title="Gratuitous CSS" href="hot.css" type="text/css" media="screen">
Beachten Sie die Verwendung des title -attributs. Dieser Text wird im Menü "Style Selection" des Browsers angezeigt (sofern verfügbar).
Das Attribut rel="alternate" wird auch verwendet, um mit alternativen Inhaltsformaten wie RSS oder Atom -Feeds zu verknüpfen:
<code> <link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS 2.0"> <link rel="alternate" type="application/atom+xml" href="/atom.xml" title="Atom 1.0"> </code>
Um ein Favicon (Website -Symbol) anzugeben, verwenden Sie rel="shortcut icon":
<code> <link href="/favicon.ico" rel="shortcut icon"> </code>
für sequentielle Seiten, rel="next" und rel="prev" Definieren Sie die nächsten und vorherigen Seiten in einer Reihe.
Sie können die Lizenz für Seiteninhalte mit rel="license" angeben und einen Link zu den Lizenzdetails bereitstellen.
Während vordefinierte Werte empfohlen werden, können Sie benutzerdefinierte Beziehungen erstellen. Browser verstehen diese benutzerdefinierten Werte jedoch nicht von Natur aus. Sie könnten für die JavaScript-Manipulation oder andere nicht browserspezifische Zwecke nützlich sein.
In diesem Abschnitt werden gemeinsame Fragen zum `rel` -Attribut beantwortet.
Das Attribut rel gibt die Beziehung zwischen dem aktuellen HTML -Dokument und der verknüpften Ressource an.
rel="stylesheet" zeigt an, dass die verknüpfte Ressource ein CSS -Stylesheet ist.
Ja, Werte wie rel="nofollow" und rel="canonical" beeinflussen Suchmaschinenverhalten.
rel="alternate" Gibt alternative Versionen eines Dokuments an (z. B. verschiedene Sprachen).
Ähnlich wie <link> fügt es Hyperlinks semantische Bedeutung hinzu (z. B. rel="nofollow").
Ja, trennen Sie mehrere Werte mit Leerzeichen (z. B. rel="nofollow noopener").
Gibt den Autor eines Dokuments an (obwohl seine Unterstützung begrenzt ist).
Gibt ein Favicon für eine Website an.
Gibt Ressourcen an, die im Voraus geladen werden sollen, um die Website der Website zu verbessern.
Sie definieren die nächsten und vorherigen Seiten in einer Abfolge von paginierten Inhalten.