CSS / HTML: Was ist der richtige Weg, um Text kursiv zu machen?

202

Was ist der richtige Weg, um Text kursiv zu machen? Ich habe die folgenden vier Ansätze gesehen:

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>

<i>

Dies ist der "alte Weg". <i>hat keine semantische Bedeutung und vermittelt nur den Präsentationseffekt, den Text kursiv zu machen. Soweit ich sehen kann, ist dies eindeutig falsch, da dies nicht semantisch ist.


<em>

Dies verwendet semantisches Markup für rein präsentative Zwecke. Es kommt nur vor, dass <em>Text standardmäßig kursiv dargestellt wird und daher häufig von Personen verwendet wird, die wissen, dass <i>dies vermieden werden sollte, sich aber seiner semantischen Bedeutung nicht bewusst sind. Nicht jeder kursive Text ist kursiv, weil er hervorgehoben wird. Manchmal kann es genau das Gegenteil sein, wie eine Randnotiz oder ein Flüstern.


<span class="italic">

Dies verwendet eine CSS-Klasse, um eine Präsentation zu platzieren. Dies wird oft als der richtige Weg angepriesen, aber auch dies scheint mir falsch zu sein. Dies scheint keine semantische Bedeutung mehr zu vermitteln <i>. Aber, seine Befürworter weinen, es ist viel einfacher, Ihren gesamten kursiven Text später zu ändern, wenn Sie ihn beispielsweise fett haben wollten. Dies ist jedoch nicht der Fall, da mir dann eine Klasse namens "kursiv" übrig bleibt, die den Text fett macht. Darüber hinaus ist nicht klar, warum ich jemals den gesamten kursiven Text auf meiner Website ändern möchte, oder wir können uns zumindest Fälle vorstellen, in denen dies nicht wünschenswert oder notwendig wäre.


<span class="footnote">

Dies verwendet eine CSS-Klasse für die Semantik. Bisher scheint dies der beste Weg zu sein, aber es gibt tatsächlich zwei Probleme.

  1. Nicht jeder Text hat eine ausreichende Bedeutung, um ein semantisches Markup zu rechtfertigen. Ist beispielsweise kursiver Text am Ende der Seite wirklich eine Fußnote? Oder ist es eine Seite? Oder etwas ganz anderes. Vielleicht hat es keine besondere Bedeutung und muss nur kursiv dargestellt werden, um es präsentativ vom vorhergehenden Text zu trennen.

  2. Die semantische Bedeutung kann sich ändern, wenn sie nicht in ausreichender Stärke vorhanden ist. Nehmen wir an, ich habe "Fußnote" mitgemacht, basierend auf nichts anderem als dem Text am Ende der Seite. Was passiert, wenn ich einige Monate später unten mehr Text hinzufügen möchte? Es ist keine Fußnote mehr. Wie können wir eine semantische Klasse wählen, die weniger allgemein ist als <em>diese Probleme vermeidet?


Zusammenfassung

Es scheint, dass das Erfordernis der Semantik in vielen Fällen übermäßig belastend zu sein scheint, in denen der Wunsch, etwas kursiv zu machen, keine semantische Bedeutung haben soll.

Darüber hinaus hat der Wunsch, Stil von Struktur zu trennen, dazu geführt, dass CSS als Ersatz für Fälle angepriesen wird, <i>in denen dies tatsächlich weniger nützlich wäre. Das lässt mich mit dem bescheidenen <i>Tag zurück und frage mich, ob dieser Gedankengang der Grund ist, warum er in der HTML5-Spezifikation verbleibt?

Gibt es auch gute Blog-Beiträge oder Artikel zu diesem Thema? Vielleicht von denjenigen, die an der Entscheidung beteiligt sind, das <i>Tag beizubehalten / zu erstellen ?

Rupert Madden-Abbott
quelle
4
Das <i> -Tag ist in HTML5, da HTML5 (teilweise) ein Versuch ist, zu standardisieren, wie vorhandene Browser HTML verarbeiten
Gareth
3
Ich bekomme eine 404 für diesen ähnlichen / verwandten Beitrag.
Martin Hansen Lennox
@MartinHansenLennox Sie können diese Linkrots jederzeit markieren, damit sie abgewählt werden und verschwinden. Ich habe schon abgestimmt.
Nilon
Flagge für Aufmerksamkeit? Ich dachte, das wäre nur für beleidigende / spammige Sachen. Aber ok, ja, fertig
Martin Hansen Lennox

Antworten:

210

Sie sollten verschiedene Methoden für verschiedene Anwendungsfälle verwenden:

  1. Wenn Sie eine Phrase hervorheben möchten, verwenden Sie <em>.
  2. Das <i>Tag hat in HTML5 eine neue Bedeutung , die "eine Textspanne mit einer anderen Stimme oder Stimmung" darstellt. Sie sollten dieses Tag also für Dinge wie Gedanken / Nebenbemerkungen oder Redewendungen verwenden. Die Spezifikation schlägt auch Schiffsnamen vor (schlägt jedoch keine Buch- / Lied- / Filmnamen mehr vor; verwenden Sie <cite>stattdessen dafür).
  3. Wenn der kursiv geschriebene Text Teil eines größeren Kontexts ist, z. B. eines einleitenden Absatzes, sollten Sie den CSS-Stil an das größere Element anhängen, d. H. p.intro { font-style: italic; }
DisgruntledGoat
quelle
2
+1, scheint mir ein guter Rat zu sein. Ich denke, Punkt 3 ist ein gutes Beispiel für die Änderung des Textstils aus rein ästhetischen Gründen ohne wirkliche semantische Absicht.
GrahamS
1
Fall 2 entspricht nicht dem, was HTML5-Entwürfe tatsächlich sagen - was dunkel ist und je nach Version variiert, aber keine Version schlägt vor, ifür Buch-, Song-, Album- oder Filmnamen zu verwenden (was zweifellos Kandidaten für die Verwendung wären cite).
Jukka K. Korpela
@ Jukka Ich bin sicher, es war irgendwann da drin. Trotzdem ist es jetzt nicht da, also habe ich meine Antwort aktualisiert.
DisgruntledGoat
Wie in: w3.org/TR/html5/text-level-semantics.html#the-em-element erwähnt Wenn Sie ein Element verwenden möchten, um Ihren Text kursiv zu machen, sollten Sie <i> verwenden. Das em-Element ist kein generisches "kursives" Element. Manchmal soll sich der Text vom Rest des Absatzes abheben, als ob er eine andere Stimmung oder Stimme hätte. Hierfür ist das i-Element besser geeignet.
Dimitris Zorbas
21

<i>ist nicht falsch, weil es nicht semantisch ist. Es ist (normalerweise) falsch, weil es präsentativ ist. Die Trennung von Bedenken bedeutet, dass Informationen zur Präsentation mit CSS übermittelt werden sollten.

Das Benennen im Allgemeinen kann schwierig sein, und Klassennamen sind keine Ausnahme, aber es ist trotzdem das, was Sie tun müssen. Wenn Sie Kursivschrift verwenden, um einen Block vom Haupttext abzuheben, ist möglicherweise ein Klassenname mit der Bezeichnung "Flow-Unterscheidungskraft" angebracht. Denken Sie an die Wiederverwendung: Klassennamen dienen der Kategorisierung - wo sonst möchten Sie dasselbe tun? Das sollte Ihnen helfen, einen geeigneten Namen zu finden.

<i>ist in HTML5 enthalten, erhält jedoch eine bestimmte Semantik. Wenn der Grund, warum Sie etwas als kursiv markieren, einer der in der Spezifikation angegebenen Semantiken entspricht, ist die Verwendung angemessen <i>. Sonst nicht.

Alohci
quelle
10

Ich bin kein Experte, aber ich würde sagen, wenn Sie wirklich semantisch sein wollen, sollten Sie Vokabulare (RDFa) verwenden.

Dies sollte zu so etwas führen:

<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

emwird für die Präsentation verwendet (Menschen werden es kursiv sehen) und die Attribute propertyund hrefverknüpfen mit einer Definition dessen, was kursiv ist (für Maschinen).

Sie sollten überprüfen, ob es ein Vokabular für solche Dinge gibt, möglicherweise sind bereits Eigenschaften vorhanden.

Weitere Informationen zu RDFa finden Sie hier: http://www.alistapart.com/articles/introduction-to-rdfa/

Guillaume Flandre
quelle
2
+1, um darauf hinzuweisen, dass es einen Unterschied zwischen impliziter oder vererbter Semantik (die billige und einfache, aber schwache Form) und expliziter Sementik gibt, bei der der Entwickler zusätzliche Anstrengungen unternehmen muss, um seinen Inhalten einen Mehrwert zu verleihen (teuer und arbeitsintensiv, kann aber nachgeben gute Qualität Inhalt).
Abmelden
7

TLDR

Der richtige Weg, um Text kursiv zu machen, besteht darin, das Problem zu ignorieren, bis Sie zum CSS gelangen, und es dann gemäß der Präsentationssemantik zu formatieren. Die ersten beiden von Ihnen angegebenen Optionen können je nach den Umständen richtig sein. Die letzten beiden sind falsch.

Längere Erklärung

Sorgen Sie sich beim Schreiben des Markups nicht um die Präsentation. Denken Sie nicht kursiv. Denken Sie in Semantik. Wenn es Stressbetonung erfordert, dann ist es eine em. Wenn es tangential zum Hauptinhalt ist, dann ist es ein aside. Vielleicht ist es fett, vielleicht kursiv, vielleicht fluoreszierend grün. Es spielt keine Rolle, wann Sie Markup schreiben.

Wenn Sie zum CSS gelangen, verfügen Sie möglicherweise bereits über ein semantisches Element, das sinnvoll ist, um alle Vorkommen in Ihrer Site kursiv zu schreiben. emist ein gutes Beispiel. Aber vielleicht möchten Sie alles aside > ul > liauf Ihrer Website in Kursivschrift. Sie müssen das Denken über das Markup vom Denken über die Präsentation trennen.

Wie von DisgruntledGoat erwähnt , iist es in HTML5 semantisch. Die Semantik scheint mir allerdings etwas eng zu sein. Verwendung wird wahrscheinlich selten sein.

Die Semantik von emhat sich in HTML5 geändert, um die Betonung zu betonen. strongkann auch verwendet werden, um Wichtigkeit zu zeigen. strongkann eher kursiv als fett sein, wenn Sie es so stylen möchten. Lassen Sie sich vom Stylesheet des Browsers nicht einschränken. Sie können sogar ein Reset-Stylesheet verwenden , um nicht mehr an die Standardeinstellungen zu denken. (Obwohl es einige Einschränkungen gibt .)

class="italic"ist schlecht. Benutze es nicht. Es ist nicht semantisch und überhaupt nicht flexibel. Die Präsentation hat immer noch eine Semantik, nur eine andere Art als das Markup.

class="footnote"emuliert die Markup-Semantik und ist ebenfalls falsch. Ihr CSS für die Fußnote sollte nicht vollständig für Ihre Fußnote eindeutig sein. Ihre Website sieht zu chaotisch aus, wenn jedes Teil anders gestaltet ist. Auf Ihren Seiten sollten einige visuelle Muster verteilt sein, die Sie in CSS-Klassen umwandeln können. Wenn Ihr Stil für Ihre Fußnoten und Ihre Blockzitate sehr ähnlich ist, sollten Sie die Ähnlichkeiten in eine Klasse einteilen, anstatt sich immer wieder zu wiederholen. Sie könnten in Betracht ziehen, die Praktiken von OOCSS zu übernehmen (Links unten).

Die Trennung von Bedenken und Semantik ist in HTML5 groß. Menschen erkennen oft nicht, dass das Markup nicht der einzige Ort ist, an dem Semantik wichtig ist. Es gibt auch Inhaltssemantik (HTML), aber auch Präsentationssemantik (CSS) und Verhaltenssemantik (JavaScript). Sie alle haben ihre eigene Semantik, die wichtig ist, um die Wartbarkeit zu gewährleisten und trocken zu bleiben.

OOCSS-Ressourcen

Eva
quelle
5

Vielleicht hat es keine besondere Bedeutung und muss nur kursiv dargestellt werden, um es präsentativ vom vorhergehenden Text zu trennen.

Wenn es keine besondere Bedeutung hat, warum muss es präsentativ vom vorhergehenden Text getrennt werden? Dieser Textlauf sieht etwas seltsam aus , weil ich ihn ohne Grund kursiv geschrieben habe.

Ich verstehe Ihren Standpunkt jedoch. Es ist nicht ungewöhnlich, dass Designer Designs produzieren, die sich visuell unterscheiden, ohne sich signifikant zu ändern. Ich habe dies am häufigsten bei Boxen gesehen: Designer geben uns Designs, einschließlich Boxen mit verschiedenen Kombinationen von Farben, Ecken, Verläufen und Schlagschatten, ohne Beziehung zwischen den Stilen und der Bedeutung des Inhalts.

Da diese recht komplexe Stile (mit zugehörigen Themen Internet Explorer) wiederverwendet werden an verschiedenen Orten, schaffen wir Klassen wie box-1, box-2, so dass wir die Stile wiederverwenden können.

Das konkrete Beispiel für die Kursivschrift von Text ist jedoch zu trivial, um sich Sorgen zu machen. Lassen Sie die Semantic Nutters am besten so kleinlich streiten.

Paul D. Waite
quelle
1
Ich neige dazu, zuzustimmen. Wenn Sie keine Rechtfertigung dafür finden können, dass bestimmte Markups anders dargestellt werden, denken Sie nicht richtig darüber nach. Wenn Sie nicht erklären können, warum [dieser Text] kursiv sein sollte, wie würden Sie erkennen, wenn [anderer Text] auch auf einer anderen Seite / einem anderen Teil der Seite kursiv sein sollte? Und in ähnlicher Weise, wenn Sie tun , warum sollen Sie in der Lage sein , aus diesem Grunde mit einem sinnvollen Namen zu kommen
Gareth
1
Absolut. Manchmal gibt es keine Möglichkeit, CSS zu verwenden, um rein semantisches Markup in das zu verwandeln, was ein Designer möchte (X-Browser) - Sie müssen flexibel sein.
Skilldrick
1
Es gibt ästhetische Gründe, Text zu stylen. Zum Beispiel gibt es eine (rein ästhetische) Konvention, um die ersten paar Wörter jedes Absatzes in Kapitälchen zu formulieren. Es hat keine semantische Bedeutung. In HTML muss es möglich sein, Text aus nicht-semantischen Gründen zu markieren.
3

Kursiver HTML-Text zeigt den Text in Kursivschrift an.

<i>HTML italic text example</i>

Die Betonung und die starken Elemente können beide verwendet werden, um die Wichtigkeit bestimmter Wörter oder Sätze zu erhöhen.

<p>This is <em>emphasized </em> text format <em>example</em></p>

Das Hervorhebungs-Tag sollte verwendet werden, wenn Sie einen Punkt in Ihrem Text hervorheben möchten, und nicht unbedingt, wenn Sie diesen Text kursiv schreiben möchten.

Weitere Informationen finden Sie in diesem Handbuch: HTML-Textformatierung

Prabhakar Undurthi
quelle
2

Das iElement ist nicht semantisch, daher sollte es für Bildschirmleser, Googlebot usw. transparent sein (genau wie spanoder divElemente). Für den Entwickler ist dies jedoch keine gute Wahl, da es die Präsentationsschicht mit der Strukturschicht verbindet - und das ist eine schlechte Praxis.

emElement ( strongauch) sollte immer in einem semantischen Kontext verwendet werden, nicht in einem Präsentationskontext. Es muss immer dann verwendet werden, wenn ein Wort oder ein Satz wichtig ist. Nur für ein Beispiel im vorherigen Satz sollte ich emden Teil "sollte immer verwendet werden" stärker hervorheben. Browser bieten einige Standard-CSS-Eigenschaften für diese Elemente. Sie können jedoch die Standardwerte überschreiben, wenn Ihr Entwurf dies erfordert, um die korrekte semantische Bedeutung dieser Elemente beizubehalten.

<span class="italic">Italic Text</span>ist der falscheste Weg. Erstens ist es unpraktisch in der Verwendung. Zweitens wird vorgeschlagen, dass der Text kursiv sein sollte. Und die Strukturschicht (HTML, XML usw.) sollte dies niemals tun. Die Präsentation sollte immer von der Struktur getrennt gehalten werden.

<span class="footnote">Italic Text</span>scheint der beste Weg für eine Fußnote zu sein. Es schlägt keine Präsentation vor und beschreibt nur das Markup. Sie können nicht vorhersagen, was in der Funktion passieren wird. Wenn eine Fußnote in der Funktion auftaucht, müssen Sie möglicherweise den Klassennamen ändern (um eine gewisse Logik in Ihrem Code beizubehalten).

Wenn Sie also einen wichtigen Text haben, verwenden Sie ihn emoder strongbetonen Sie ihn. Denken Sie jedoch daran, dass diese Elemente Inline-Elemente sind und nicht zum Hervorheben großer Textblöcke verwendet werden sollten.

Verwenden Sie CSS, wenn Sie sich nur dafür interessieren, wie etwas aussieht, und versuchen Sie immer, zusätzliche Markups zu vermeiden.

Crozin
quelle
1

Ich denke, die Antwort ist zu verwenden, <em>wenn Sie Betonung beabsichtigen .

Wenn Sie beim Lesen des Textes feststellen, dass Sie eine etwas andere Stimme verwenden, um einen Punkt hervorzuheben , sollte dies verwendet werden, <em>da Sie möchten, dass ein Bildschirmleser dasselbe tut.

Wenn es sich lediglich um eine Stilsache handelt, z. B. wenn Ihr Designer entschieden hat, dass alle Ihre <h2>Überschriften in kursivem Garamond besser aussehen, gibt es keinen semantischen Grund, sie in den HTML-Code aufzunehmen, und Sie sollten nur das CSS für die entsprechenden Elemente ändern.

Ich kann keinen Grund für die Verwendung erkennen <i>, es sei denn, Sie müssen speziell einen älteren Browser ohne CSS unterstützen.

GrahamS
quelle
Wie in den Kommentaren erwähnt, haben sie anscheinend die Absicht in HTML5 leicht geändert und das Problem verwirrt. Wenn Sie also bereits HTML5 verwenden, <i>ist dies jetzt auch semantisch nützlich.
GrahamS
0

Ich würde verwenden <em>, um Inline-Elemente hervorzuheben. Verwenden Sie eine Klasse für Blockelemente wie Textblöcke. CSS oder nicht, der Text muss noch markiert werden. Ob für die Semantik oder für die visuelle Hilfe, ich gehe davon aus, dass Sie es für etwas Sinnvolles verwenden würden ...

Wenn Sie Text aus irgendeinem Grund hervorheben, können Sie <em>eine Klasse verwenden, die Ihren Text kursiv schreibt.

Es ist in Ordnung, manchmal gegen die Regeln zu verstoßen !

tahdhaze09
quelle
0

OK, das erste, was zu beachten ist, ist das <i> wurde veraltet und sollte nicht verwendet werden <i>wurde nicht veraltet, aber ich empfehle immer noch nicht, es zu verwenden - siehe die Kommentare für Details. Dies liegt daran, dass es völlig gegen die Beibehaltung der Präsentation in der Präsentationsebene ist, auf die Sie hingewiesen haben. Ebenso <span class="italic">scheint auch die Form zu brechen.

Jetzt haben wir also zwei Möglichkeiten, Dinge zu tun: <em>und <span class="footnote">. Denken Sie daran, das emsteht für Betonung . Wenn Sie ein Wort, eine Phrase oder einen Satz hervorheben <em>möchten , kleben Sie es in Tags, unabhängig davon, ob Sie Kursivschrift wünschen oder nicht. Wenn Sie das Styling auf andere Weise ändern möchten, verwenden Sie CSS : em { font-weight: bold; font-style: normal; }. Natürlich können Sie auch eine Klasse auf das <em>Tag anwenden : Wenn Sie möchten, dass bestimmte hervorgehobene Phrasen rot angezeigt werden, geben Sie ihnen eine Klasse und fügen Sie sie dem CSS hinzu:

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

Wenn Sie Kursivschrift aus einem anderen Grund anwenden, wählen Sie die andere Methode und geben Sie dem Abschnitt eine Klasse. Auf diese Weise können Sie das Design jederzeit ändern, ohne den HTML-Code anzupassen. In Ihrem Beispiel sollten Fußnoten nicht hervorgehoben werden - tatsächlich sollten sie nicht hervorgehoben werden, da der Sinn einer Fußnote darin besteht, unwichtige, aber interessante oder nützliche Informationen anzuzeigen. In diesem Fall ist es viel besser, eine Klasse auf die Fußnote anzuwenden und sie wie eine in der Präsentationsebene aussehen zu lassen - das CSS.

Samir Talwar
quelle
6
<i>wurde nicht veraltet.
Quentin
@ DavidDorward: Richtig, <i>wurde nicht veraltet, aber die HTML4-Spezifikation sagt "Obwohl sie nicht alle veraltet sind, wird von ihrer Verwendung zugunsten von Stylesheets abgeraten"
GrahamS
@Graham: Überprüfen Sie die HTML5-Spezifikation, <i>um "eine Textspanne mit einer anderen Stimme oder Stimmung" darzustellen.
DisgruntledGoat
@DisgruntledGoat: Ich muss zugeben, dass ich die Entwicklung der HTML5-Spezifikation nicht zu genau verfolgt habe, aber Sie haben Recht, es sieht so aus, als hätten sie jetzt versucht, <i>mit einer semantischen Bedeutung nachzurüsten . Persönlich denke ich, dass sie das Thema jetzt durcheinander gebracht haben, aber sie sagen immer noch: "Autoren werden ermutigt zu überlegen, ob andere Elemente besser anwendbar sind als das iElement, zum Beispiel das emElement zum Hervorheben der Betonung von Stress."
GrahamS
1
Entschuldigung - anscheinend habe ich den Teil verpasst, der sich auf HTML5 bezieht. Es scheint mir, dass die Spezifikation unklar ist, wann <i>und wann sie verwendet werden soll <span class="semantic-meaning">. Sie scheinen zu implizieren, dass Sie sie <i>für einen einzelnen speziellen Fall verwenden sollten, in dem die Semantik weiter gewünscht wird, was für mich nicht der Fall ist - Sie fügen immer noch Präsentationscode hinzu die semantische Schicht. Sie haben also Recht: Es ist nicht veraltet, aber basierend auf dem, was ich gelesen habe, kann ich es auch nicht ehrlich empfehlen.
Samir Talwar
-1

Verwenden Sie <em>, wenn Sie kursiv gedruckte Wörter / Zeichen ohne andere Stile benötigen. Es hilft auch, Inhalte semantisch zu machen.

text-style ist besser für mehrere Stile geeignet und keine semantische Notwendigkeit.

arisch
quelle
-3

MACHEN

  1. Geben Sie dem Klassenattribut einen Wert, der die Art der Daten angibt (dh class="footnote"gut ist).

  2. Erstellen Sie ein CSS-Stylesheet für die Seite

  3. Definieren Sie einen CSS-Stil, der an die Klasse angehängt ist, die Sie dem Element zuweisen

    .footnote { font-style:italic; }

UNTERLASSEN SIE

  1. Verwenden Sie keine <i>oder <em>Elemente - sie werden nicht unterstützt und binden die Daten und die Präsentation zu eng zusammen.
  2. Geben Sie der Klasse keinen Wert, der die Präsentationsregeln angibt (dh nicht verwenden class="italic").
Ninju Bohra
quelle
1
Wie in einer anderen Antwort zitiert <i>und <em>in HTML5. Ihre Nummer 2 unter "Nicht tun" ist korrekt, aber Ihre Nummer 1 unter "Nicht tun" ist schief - es ist nicht gut, eine ganze Klasse als "Fußnote" zu kennzeichnen, wenn andere Elemente, die keine Fußnoten sind, ebenfalls kursiv gedruckt werden Klasse, obwohl eine Klasse, die die Art der Daten angibt, gut ist. Ein Klassen- und Stylesheet ist jedoch nicht immer erforderlich, insbesondere wenn nur einige Elemente kursiv gedruckt werden.
Vapcguy