Spannweite innerhalb des Ankers oder Anker innerhalb der Spannweite oder spielt das keine Rolle?

109

Ich möchte nisten spanund amarkieren. Sollte ich

  1. Ins Haus <span>legen<a>
  2. Ins Haus <a>legen<span>
  3. Es ist egal?
html css semantic-markup Salman A.
quelle

Antworten:

110

3 - Es spielt keine Rolle.

ABER ich neige dazu, nur ein <span>Inside zu verwenden, <a>wenn es nur für einen Teil des Inhalts des Tags ist, dh

<a href="#">some <span class="red">text</span></a>

Eher, als:

<a href="#"><span class="red">some text</span></a>

Welches sollte natürlich nur sein:

<a href="#" class="red">some text</a>
Jon Hadley
quelle
1
Ich bin kürzlich auf ein Leerzeichenproblem mit Textüberlauf gestoßen: Auslassungspunkte und Überlauf: Ausgeblendet, das durch Hinzufügen eines Inline-Block-Elements zu meiner Navigationsschaltfläche behoben werden konnte. Am Ende hatte ich <a> <span> Text </ span> </a>. Ich denke (oder hoffe;)), dass es in Ordnung ist, dies zu tun, wenn Sie es wirklich brauchen.
CunningFatalist
Ich werde mich für Option 2 entscheiden, weil es wichtig ist. Der Anker sollte nur zum Verankern und nicht zum Enthalten von Elementen dienen (Best Practice). Stellen Sie sich eine Situation vor, in der Sie eine anklickbare Kachel erstellen und der Anker das übergeordnete Element der Kachelkomponente ist und innerhalb der Komponente die Links für Bilder und weitere Bilder sind. Google Crawler wird verrückt und irgendwann wird das nicht gut für Ihre Website sein.
Imam Bux
33

Es ist absolut gültig (zumindest nach HTML 4.01- und XHTML 1.0-Standards), entweder ein <span>innerhalb eines <a>oder eines <a>innerhalb eines zu verschachteln <span>.

Um es sich selbst zu beweisen, können Sie es jederzeit beim W3C MarkUp Validation Service überprüfen

Ich habe versucht zu validieren:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
      <title>Title</title>
    </head>
    <body>
       <p>
         <a href="http://www.google.com/"><span>Google</span></a>
       </p>
    </body>
  </html>

Und auch das gleiche wie oben, aber mit der <a>Innenseite der<span>

dh

<span><a href="http://www.google.com">Google</a></span>

mit beiden HTML 4.01- und XHTML 1.0-Doctypes, und beide haben die Validierung erfolgreich bestanden!

Beachten Sie lediglich, dass Sie die Tags in der richtigen Reihenfolge schließen. Wenn Sie also mit einem <span>Dann beginnen <a>, stellen Sie sicher, dass Sie das <a>Tag zuerst schließen, bevor Sie das schließen, <span>und umgekehrt.

CraigTP
quelle
20

Es spielt keine Rolle - beide sind ineinander erlaubt.

Greg
quelle
<a> ist jedoch eine Blockebene und <span> ist ein Inline-Level-Element, und das Block-Level-Element kann nicht in das Inline-Element aufgenommen werden. Ich denke, es war in der w3c-Validierung
Jitendra Vyas
26
Nein, beide sind inline
Greg
16

Das hängt davon ab, was Sie markieren möchten.

  • wenn Sie einen Link innerhalb einer Spanne wollen, setzen <a>innen <span>.
  • wenn man etwas in einem Link Markup wollen, setzen <span>in<a>
stricken
quelle
16

SPAN ist ein GENERIC Inline Container. Es spielt keine Rolle, ob ein ainnen spanoder spaninnen ist, ada beide Inline-Elemente sind. Fühlen Sie sich frei, alles zu tun, was Ihnen logisch korrekt erscheint.

Salman A.
quelle
2

Es hängt davon ab, wofür die Spanne ist. Wenn es sich auf den Text des Links bezieht und nicht auf die Tatsache, dass es sich um einen Link handelt, wählen Sie # 1. Wenn sich die Spanne auf den gesamten Link bezieht, wählen Sie # 2. Wenn Sie nicht erklären, was die Spanne darstellt, gibt es kaum eine bessere Antwort. Sie sind beide Inline-Elemente und können in beliebiger Reihenfolge syntaktisch verschachtelt werden.

Sykora
quelle
Richtig, beide sind Inline-Elemente.
Chris
2

Es kann wichtig sein, ob Sie beispielsweise eine Sortiersymbolschrift verwenden. Ich hatte das gerade mit:

<span class="fa fa-print fa-3x"><a href="some_link"></a></span>

Normalerweise würde ich die Spanne in das A setzen, aber das Styling wurde erst wirksam, wenn es vertauscht wurde.

user1368737
quelle
1

Persönlich habe ich als Webentwickler immer nur dann eine Spanne in ein Ankertag eingefügt, wenn ich versuche, einen Abschnitt des Linktextes hervorzuheben, z. B. einen Hintergrund auf einen Abschnitt anzuwenden.

Xopa
quelle
0

Es wird beides funktionieren, aber ich persönlich würde Option 2 bevorzugen, damit die Spanne "um" den Link liegt.

Alte Schule
quelle
0

Semantisch denke ich, dass es sinnvoller ist, einen Container für ein einzelnes Element zu erstellen. Wenn Sie sie verschachteln müssen, deutet dies darauf hin, dass sich mehr als ein Element innerhalb des äußeren Elements befindet.

Toby
quelle