Können wir ein <span> innerhalb des H1-Tags hinzufügen?

96

Ist es eine geeignete Methode, das span-Tag innerhalb des H1-Tags zu verwenden?

<h1>
    <span class="boardit">Portfolio</span>
</h1>

Erweitern Sie das Snippet

Ich weiß, dass wir es auf diese Weise schreiben können ... und folge auch der folgenden Syntax auf meiner eigenen Website.

<h1 class="boardit">
  <span>Portfolio</span>
</h1>

Erweitern Sie das Snippet

Ich wollte jedoch nur die sauberere Form von HTML kennen.

html

— Codeobsession
quelle

3

@fireeyed Ich denke, er möchte folgen, was richtig ist, Semantik des Tags, das ich meine.

— dpp

2

Vergessen Sie nicht, die Antwort als erledigt zu markieren, wenn Sie die Informationen erhalten haben, die Sie

— möchten

Das Einfügen von Spannen in Überschriften führt zu Problemen beim Umbrechen von Wörtern. Hat das noch jemand beobachtet?

— Rafael

1

Haben Sie jemals versucht, Text in einer Zeitspanne zu verpacken? Und wie wäre es mit Text in einem Blockelement? @ Rafael

— Daniel Springer

180

Ja, du kannst.

HTML4 hat folgendes zu sagen :

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
  There are six levels of headings from H1 (the most important)
  to H6 (the least important).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- heading -->

Und %inline;ist:

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

Und %special;beinhaltet <span>.

Der aktuelle HTML hat folgendes zu sagen :

Inhalt Inhalt
Inhalt Phrasierung

Und Phrasierungsinhalte enthalten <span>.

— mu ist zu kurz
quelle

1

Der Link von "HTML5 hat dies zu sagen" ist defekt :(

— mehulkar

@mehulkar Danke, dass du mich informiert hast, sollte jetzt behoben werden.

— Mu ist zu kurz

29

Ja, du kannst. Es kann verwendet werden, um einen Teil eines h1-Blocks zu formatieren:

<h1>Page <span class="highlight">Title</span></h1>

Wenn der Stil für den gesamten h1-Block gilt, mache ich Folgendes:

<h1 class="highlight">Page Title</h1>

— mnsr
quelle

1

@dpp warum sollte man die Verwendung von Präsentationsnamen vermeiden?

— Nu Everest

3

Ja, es ist normalerweise in Ordnung, ein spanInneres eines zu verwenden h1. spanist ein Inline-Element, daher ist es normalerweise in Ordnung, es in irgendetwas zu verwenden (das Elemente darin erlaubt!)

Und manchmal gibt es keinen saubereren Weg, dies zu tun, wenn Sie nur einen Teil des Stils stylen möchten h1.

Auf der anderen Seite ... tu es nicht, wenn es nicht nötig ist, da es ein bisschen hässlich ist :)

— Dave
quelle

2

Ja, das ist in Ordnung, aber warum nicht

   <h1 class="boardit">
      Portfolio
   </h1>

Wenn das alles ist, was du tust?

— Simon Sarris
quelle

1

Es ist nicht alles. Die Anforderung besteht darin, nur einen Teil der Überschrift zu formatieren.

— Daniel Springer

1

Ja, du kannst. Die Spanne wird inline angezeigt, daher sollte dies keinen Einfluss auf das Design des H1 haben.

— geetfun
quelle

0

Ja, wir können das span-Tag mit den Header-Tags verwenden, und daran ist nichts auszusetzen. In der Tat wird dies häufig zum Stylen von Header-Tags verwendet, insbesondere zum Färben eines bestimmten Wortes oder Buchstabens.

— Touhid Rahman
quelle

0

Ja, wir können das span-Tag mit den Header-Tags verwenden, und daran ist nichts auszusetzen. In der Tat wird dies häufig zum Stylen von Header-Tags verwendet, insbesondere zum Färben eines bestimmten Wortes oder Buchstabens.

— Touhid Rahman
quelle

-2

<h1 style="display:inline;">Bold text goes here</h1> 
<span style="display:inline;">normal text goes here</span>

Denken Sie in die obigen Zeilen - Hat für mich funktioniert - verwenden Sie display: inline prop

— Takrishna
quelle

Was hat das mit der Frage zu tun?

— Quentin

3

@ Quentin Ich glaube, er wollte vorschlagen, die Überschrift als Inline-Element zu erzwingen. Eine gute Idee, wenn es machbar ist.

— Daniel Springer

2

Diese Antwort sollte nicht abgelehnt werden, da sie das Problem löst, obwohl es nicht das ist, was direkt gefragt wird. +1 für die Lösung.

— Achala Dissanayake