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

Question

Was ist der richtig Möglichkeit, 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 schließt lediglich die Präsentations-Effekt, den Text kursiv zu machen. Soweit ich sehen kann, ist dies eindeutig falsch, weil diese nicht-semantische ist.

<em>

verwendet Diese semantische Markierung für rein Darstellbarkeit auf. Es passiert einfach, dass <em> von Standard-Text in kursiv macht und so ist es oft von denen benutzt wird, die sich bewusst sind, dass <i> sollte vermieden werden, aber die sind nicht bewusst seine semantische Bedeutung. Nicht all kursiver Text ist kursiv, weil es betont wird. Manchmal kann es das genaue Gegenteil der Fall sein, wie eine Randnotiz oder ein Flüstern.

<span class="italic">

Diese nutzt eine CSS-Klasse auf Platz Präsentation. Dies wird oft als die richtige Art und Weise propagiert aber wieder, das scheint falsch zu mir. Dies scheint nicht mehr semantische Bedeutung, dass <i> zu vermitteln. Aber seine Befürworter weinen, es ist viel einfacher, alle Ihre kursiver Text später zu ändern, wenn Sie, sagen wir, es fett wollte. Doch dies ist nicht der Fall, weil dann würde ich mit einer „kursiv“ genannt Klasse gelassen werde, dass der Text fett gemacht. Darüber hinaus ist es nicht klar ist, warum sollte ich jemals all kursiven Text auf meiner Website oder zumindest ändern will, können wir denken, von Fällen, in denen dies nicht wünschenswert oder notwendig sein.

<span class="footnote">

Diese nutzt eine CSS-Klasse für Semantik. Bisher scheint dies der beste Weg zu sein, aber es hat eigentlich zwei Probleme.

1. Nicht alle Text hat eine ausreichende Bedeutung semantisches Markup zu rechtfertigen. Zum Beispiel ist kursiver Text am unteren Rande der Seite wirklich eine Fußnote? Oder ist es ein beiseite? Oder etwas ganz anderes. Vielleicht hat es keine besondere Bedeutung und muss nur in Kursivschrift wiedergegeben werden, um es aus dem Text, um ihn vorhergehenden presentationally zu trennen.

2. semantische Bedeutung kann sich ändern, wenn es nicht in ausreichender Stärke. Lets sagen, dass ich mit „Fußnote“ ging entlang basiert auf nichts anderes als der Text am unteren Rand der Seite zu sein. Was passiert, wenn ein paar Monate später will ich mehr Text unten hinzufügen? Es ist nicht mehr eine Fußnote. Wie können wir eine semantische Klasse wählen, die weniger als <em> generisch ist, aber vermeidet diese Probleme?

Zusammenfassung

Es scheint, dass das Erfordernis der Semantik übermäßige Belastung in vielen Fällen scheint zu sein, wo der Wunsch, etwas zu machen, kursiv nicht tragen semantische Bedeutung gemeint ist.

Darüber hinaus hat der Wunsch nach getrenntem Stil von Struktur führt CSS als Ersatz für <i> wird angekündigt, wenn es Gelegenheiten, bei denen dies tatsächlich weniger nützlich wäre. Also diese Blätter zurück, um mich mit dem bescheidenen <i> Tag und fragen, ob dieser Gedankengang ist der Grund, warum es in der HTML5-Spezifikation?

bleibt

Gibt es gute Blog-Beiträge oder Artikel zu diesem Thema auch? Vielleicht durch die in der Entscheidung beteiligt zu erhalten / schaffen die <i> Tag?

Answer 1

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

1. Wenn Sie einen Begriff betonen, verwenden <em>.
2. Der <i>-Tag hat eine neue Bedeutung in HTML5 „eine Spanne von Text in einer anderen Sprache oder mood“ repräsentiert. So sollten Sie diesen Tag für Dinge wie Gedanken / asides oder idiomatische Ausdrücke verwenden. Die Spezifikation legt auch nahe, Schiffsnamen (aber nicht mehr schlägt Buch / Lied / Filmnamen, die Nutzung <cite> für diese Stelle).
3. Wenn der kursive Text Teil eines größeren Kontext, sagt ein einleitender Absatz, sollten Sie den CSS-Stil auf das größere Element befestigen, das heißt p.intro { font-style: italic; }

Answer 2

<i> ist nicht falsch, weil es nicht-semantisches ist. Es ist falsch, (in der Regel), weil es Präsentations ist. Die Trennung von Sorge bedeutet, dass presentional Informationen sollten mit CSS gefördert werden.

im allgemeinen Naming kann tückisch sein Recht zu bekommen, und Klassennamen sind keine Ausnahme, aber dennoch ist es, was Sie zu tun haben. Wenn Sie Kursivschrift verwenden steht einen Block zu machen aus dem Textkörper aus, dann vielleicht ein Klassenname von „flow-distinctive“ würde in Ordnung sein. Denken Sie über die Wiederverwendung: Klassennamen sind für die Kategorisierung - wo sonst würden Sie die gleiche Sache zu tun? Das sollte Ihnen helfen, einen geeigneten Namen zu identifizieren.

<i> ist in HTML5 enthalten, aber es ist spezifische Semantik gegeben. Wenn der Grund, warum Sie etwas Markierung nach oben als kursiv einen der identifizierten Semantik in der Spezifikation erfüllen, wäre es angebracht, <i> zu verwenden. Sonst nicht.

Answer 3

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

Das in so etwas führen soll:

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

em wird für die Darstellung verwendet (Mensch wird es in kursiv sehen) und die property und href Attribute zur Definition von verknüpfen, was kursiv ist (für Maschinen).

Sie sollten überprüfen, ob es ein Vokabular für diese Art der Sache, vielleicht Eigenschaften bereits vorhanden sein.

Weitere Informationen über RDFa hier: http://www.alistapart.com/articles / Einführung zu rdfa /

Answer 4

TLDR

Der richtige Weg, um Text ist kursiv das Problem zu ignorieren, bis Sie die CSS bekommen, dann Stil nach Präsentations-Semantik. Die ersten beiden Optionen Ihnen zur Verfügung gestellten könnte richtig sein je nach den Umständen. Die letzten beiden sind falsch.

Längere Erläuterung

Kümmere dich nicht um Präsentation, wenn das Markup zu schreiben. Denken Sie nicht, in Bezug auf die Kursivschrift. Denken Sie in Bezug auf die Semantik. Wenn es Stress hervorgehoben werden muß, dann ist es ein em. Wenn es auf den Hauptinhalt tangential ist, dann ist es ein aside. Vielleicht fett sein, es wird, vielleicht wird es kursiv sein, vielleicht wird es grün fluoreszierend sein. Es spielt keine Rolle, wenn Sie schreiben Markup.

Wenn Sie zu CSS erhalten Sie, könnten Sie bereits ein semantisches Element, das Gefühl Kursivschrift für alle seine Vorkommen auf Ihrer Seite stellen macht. em ist ein gutes Beispiel. Aber vielleicht möchten Sie alle aside > ul > li auf Ihrer Website in Kursivschrift. Sie müssen getrenntes Denken über das Markup von Gedanken über die Präsentation.

Wie bereits erwähnt von DisgruntledGoat , i ist semantisch in HTML5. Die Semantik scheinen Art von engen mir, though. Die Nutzung wird wahrscheinlich selten sein.

Die Semantik em hat in HTML5 zu betonen Betonung geändert. strong kann auch zu zeigen, wie wichtig verwendet werden. strong kann kursiv und nicht als fett, wenn das ist, wie Sie mit Stil wollen es. Sie nicht den Browser des Sheet Grenze Sie lassen. Sie können sogar eine Reset Sheet Hilfe verwenden stoppen Sie denken innerhalb die Standardwerte. (Obwohl gibt es einige Einschränkungen .)

class="italic" ist schlecht. Verwenden Sie es nicht. Es ist nicht semantisches und ist überhaupt nicht flexibel. Präsentation noch hat Semantik, nur eine andere Art von Markup.

class="footnote" emuliert Markup Semantik und ist ebenso falsch. Ihre CSS für die Fußnote sollte nicht ganz eindeutig Ihre Fußnote. Ihre Website wird aussehen zu chaotisch, wenn jeder Teil anders gestylt. Sie sollten einige visuelle Muster durch Ihre Seiten verstreut haben, dass Sie in CSS-Klassen machen kann. Wenn Ihr Stil für Ihre Fußnoten und Ihre Blockzitaten sehr ähnlich sind, dann sollten Sie die Ähnlichkeiten in eine Klasse setzen, anstatt wiederholen sich immer und immer wieder. Sie betrachten könnten die Praktiken der OOCSS (Links unten) anzunehmen.

Die Trennung von Bedenken und Semantik ist groß in HTML5. Die Menschen erkennen oft nicht, dass das Markup nicht der einzige Ort ist, wo Semantik wichtig ist. Es ist Inhalt Semantik (HTML), aber es gibt auch Präsentations-Semantik (CSS) und Verhalten Semantik (JavaScript) als auch. Sie alle haben ihre eigene separate Semantik, das zu achten wichtig ist für die Wartbarkeit und trocken bleiben.

OOCSS Ressourcen

• Object Oriented CSS
• An Introduction To Object Oriented CSS (OOCSS)
• Wie Object Oriented CSS schreiben
• Erste Schritte mit Objekt gestartet -orientiertes CSS (OOCSS)
• Object- Oriented CSS: Was, Wie und Warum
• Diving in CSS Object Oriented

Answer 5

  

Vielleicht hat es keine besondere Bedeutung und muss nur in Kursivschrift wiedergegeben werden, um es aus dem Text presentationally trennen vorhergehenden es.

Wenn es keine besondere Bedeutung hat, warum braucht es es vorhergehende presentationally vom Text getrennt werden? Dieser Textverlauf ein bisschen komisch aussieht , weil ich es für keinen Grund, kursiv gedruckt haben.

Ich nehme Ihren Punkt though. Es ist nicht ungewöhnlich für Designer-Designs zu erzeugen, die optisch unterschiedlich sein, ohne wesentlich verändert wird. Ich habe mit Boxen dies am häufigsten gesehen. Designern werden wir Designs einschließlich Box mit verschiedenen Kombinationen von Farben, Ecken, Steigungen und Drop-Schatten, ohne Beziehung zwischen den Arten und der Bedeutung des Inhalts

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

Das spezifische Beispiel einen Text zu machen ist kursiv zu trivial, um Sorgen über though. Beste Urlaub Minutien wie das für den semantischen Nutters zu streiten.

Answer 6

Das i Element ist nicht-semantisches, also für die Screen-Reader, Googlebot, usw., sollte es eine Art durchsichtig (wie span oder div Elemente). Aber es ist nicht eine gute Wahl für den Entwickler, weil es die Präsentationsschicht mit der Strukturschicht schließt sich -. Und das ist eine schlechte Praxis

em Element (strong auch) sollte immer in einem semantischen Kontext verwendet wird, nicht eine Präsentation ein. Es muss verwendet werden, wenn einige Wort oder einen Satz von Bedeutung ist. Nur ein Beispiel im vorhergehenden Satz, soll ich em verwenden, um mehr Wert auf dem ‚sollte immer verwendet werden‘ Teil zu setzen. Browser bietet einige Standard-CSS-Eigenschaften für diese Elemente, aber Sie können und Sie sollten die Standardwerte außer Kraft zu setzen, wenn Ihr Design dies die richtige semantische Bedeutung dieser Elemente zu halten erfordert.

<span class="italic">Italic Text</span> ist der falsche Weg. Zunächst einmal ist es unbequem im Gebrauch. Zweitens deutet darauf hin, dass der Text kursiv sein sollte. Und die Strukturschicht (HTML, XML, etc.) nicht es jemals tun. Präsentation sollte immer gehalten von der Struktur getrennt werden.

<span class="footnote">Italic Text</span> scheint der beste Weg für eine Fußnote zu sein. Es macht keine Präsentation vorschlagen und beschreibt nur das Markup. Sie können nicht vorhersagen, was in der Funktion passieren wird. Wenn eine Fußnote in der Funktion aufwachsen, werden Sie möglicherweise gezwungen, seine Klassennamen zu ändern (eine gewisse Logik in Ihrem Code zu halten).

Also, wenn Sie haben einig wichtigen Text, Verwendung em oder strong zu Betonung es. Aber denken Sie daran, dass diese Elemente Inline-Elemente sind und nicht zu Betonung große Textblöcke verwendet werden.

Verwenden Sie CSS, wenn Sie kümmern sich nur um, wie etwas aussieht und immer versuchen, alle zusätzlichen Markup zu vermeiden.

Answer 7

HTML kursiver Text zeigt den Text in kursiv-Format.

<i>HTML italic text example</i>

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

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

Der Schwerpunkt Tag verwendet werden soll, wenn Sie einen Punkt in Ihrem Text hervorheben mögen und nicht unbedingt, wenn Sie wollen kursiv Text.

Sehen Sie diese Anleitung für mehr: HTML-Text-Formatierung

Answer 8

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

Wenn, wenn der Text selbst zu lesen, finden Sie, dass Sie verwenden, um eine leicht andere Stimme zu betont ein Punkt, dann sollte es <em> verwenden, weil Sie einen Bildschirm wünschen würden Leser, das gleiche zu tun.

Wenn es rein um einen Stil Sache ist, wie Sie Ihre Designer, dass alle Überschriften Ihrer <h2> entschieden haben, würden besser aussehen in kursiv Garamond, dann gibt es keinen semantischen Grund, warum es in dem HTML-Code enthalten und Sie sollten nur die CSS für das ändern entsprechende Elemente.

Ich kann keinen Grund zur Verwendung <i> sehen, wenn Sie speziell etwas älteren Browser ohne CSS unterstützen müssen.

Answer 9

würde ich Verwendung <em> sagen Inline-Elemente zu betonen. Verwenden, um eine Klasse für die Blockelemente wie Textblöcke. CSS oder nicht, hat der Text noch markiert werden. Ob seine für Semantik oder für visuelle Hilfe, ich nehme an, Sie es für etwas Sinnvolles ...

würde mit

Wenn Sie Text aus IRGENDEINEM Grund sind betont, Sie <em> oder eine Klasse verwenden könnte, die Ihren Text kursiv.

Es ist OK zu bricht die Regeln manchmal!

Answer 10

OK, das erste, was zu beachten ist, dass <i> ist veraltet und sollte nicht verwendet werden <i> wurde nicht veraltet, aber ich empfehle immer noch nicht mit den Kommentaren für Details-it sehen . Dies liegt daran, es vollständig gegen halte Präsentation in der Präsentationsschicht geht, die Sie darauf hingewiesen haben. In ähnlicher Weise <span class="italic"> scheint auch die Form zu brechen.

So, jetzt haben wir zwei echte Möglichkeiten, Dinge zu tun: <em> und <span class="footnote">. Denken Sie daran, dass em steht für Schwerpunkt . Wenn Sie Wert auf ein Wort, eine Phrase oder Satz anwenden wollen, kleben Sie es in <em> Tags, unabhängig davon, ob Sie kursiv wollen 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 sich entscheiden, Sie bestimmte betonte Sätze in rot zeigen wollen, was ihnen eine Klasse geben und sie dem CSS hinzufügen:

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 Grunde mich bewerben, mit dem anderen Verfahren gehen und dem Abschnitt eine Klasse geben. Auf diese Weise können Sie das Styling ändern, wann immer Sie wollen, ohne die HTML-Einstellung. In Ihrem Beispiel sollten Fußnoten nicht betont werden-in der Tat, sollen sie de betont werden, wie der Punkt einer Fußnote ist unwichtig, aber interessante oder nützliche Informationen zu zeigen. In diesem Fall sind Sie viel besser dran, eine Klasse zu dem Fußnote Anwendung und es aussehen wie ein in der Präsentationsschicht-CSS zu machen.

Answer 11

Mit , wenn Sie brauchen ein paar Wörter / Zeichen in Kursivschrift in Inhalt ohne andere Stile. Es hilft auch, Inhalte semantisch zu machen.

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

Answer 12

DO

1. Geben Sie das Klassenattribut Wert die Art der Daten, die (das heißt class="footnote" ist gut)

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

3. Definieren Sie einen CSS-Stil, das die Klasse angebracht ist, dass Sie mit dem Elemente zuweisen

   .footnote { font-style:italic; }

NICHT

1. Do not <i> oder <em> Elemente verwenden -. Sie sind nicht unterstützt und Bindungen, die Daten und die Präsentation zu schließen
2. der Klasse einen Wert geben, der die Präsentation Regeln gibt (das heißt nicht class="italic" verwenden).