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 ?

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; }

<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.

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/

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

• Objektorientiertes CSS
• Eine Einführung in objektorientiertes CSS (OOCSS)
• So schreiben Sie objektorientiertes CSS
• Erste Schritte mit objektorientiertem CSS (OOCSS)
• Objektorientiertes CSS: Was, wie und warum
• Eintauchen in objektorientiertes CSS

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.

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

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.

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.

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 !

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.

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.

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").