<strong> oder font-weight: bold;

[rapid10]

Gute Nacht,

ich habe eine Frage, bezüglich der Semantik in (X)HTML. Und zwar stehe ich vor einem Problem:
Ich habe immer öfter Schwierigkeiten zu entscheiden, ob ich den <strong>-Tag verwenden soll, oder das Wort/den Text mittels CSS formatieren soll.
Gibt es dafür eine Regel nach der ich vorgehen kann, um schnell zu einem semantischen Code zu kommen?

Ich meine z.B. diese Seite: JB Technology - Impressum
Soll ich die Wörter, die ich jetzt mit CSS formatiert habe, besser mit dem <strong>-Tag fett anzeigen lassen?

Vielen Dank für eure Hilfe!

Liebe Grüße aus Wien
Jakob

 

[_Thor_]

Die Frage lässt sich sehr einfach beantworten, wenn man sich bewusst macht, wofür HTML vorgesehen ist, und wofür CSS.

Wenn du einem Text eine besondere Bedeutung geben möchtest, verwendest du <strong>, damit zählt es als besonders wichtig, das ist der HTML Teil.

Wenn du den Text auch optisch hervorheben möchtest, was man bei sehr wichtigem Text machen sollte, formatierst du das Tag per CSS.

 

[francesco]

Das kommt ganz darauf an, was du mit deinem Inhalt aussagen willst.

Wenn das betroffene Wort oder die betroffenen Wörter eine starke Gewichtung haben oder eine besondere Betonung aufweisen, dann ist das strong-Element die 1. Wahl. Beispiel:

Ab hier bitte Vorsicht: Das kann gefährlich werden.

font-weight: bold; ist beim strong-Element übrigens auch mit von der Partie. HTML hat mit dem Aussehen deiner Website nichts am Hut.

 

[rapid10]

Hmm ... das ist immer noch ein bisschen unverständlich für mich. Ich durchschaue das noch nicht.

Das heißt, am Anfang formatiert man das Wort/den Text mit <strong>.
Wenn es sehr wichtig ist, formatiert man es zusätzlich mit CSS.

Ist das richtig? Wie macht man es dann z.B. beim Menü. Wenn man ein <li>Impressum</li> hat ist es ja theoretisch einfacher, wenn man es über CSS fett macht. Man könnte aber auch <li><strong>Impressu</li> coden.
Was davon ist jetzt richtig?

Danke für die bisherige Erklärung!

P.S.: Wie würde es dann konkret für die oben angegebene Adresse lauten? Das <span> weg und stattdessen <strong>?

font-weight: bold; ist beim strong-Element übrigens auch mit von der Partie. HTML hat mit dem Aussehen deiner Website nichts am Hut.

Das heißt, es ist besser alles mit CSS zu machen? Oder wäre das auch falsch?

 

[_Thor_]

Das heißt, am Anfang formatiert man das Wort/den Text mit <strong>.
Wenn es sehr wichtig ist, formatiert man es zusätzlich mit CSS.

Mit HTML Formatiert man keinen Text, HTML ist nur eine Auszeichnungssprache, da geht es nur um die Semantik.

Wie macht man es dann z.B. beim Menü. Wenn man ein <li>Impressum</li> hat ist es ja theoretisch einfacher, wenn man es über CSS fett macht. Man könnte aber auch <li><strong>Impressu</li> coden.
Was davon ist jetzt richtig?

Du musst unterscheiden zwischen Semantik und Optik, das ist eigentlich alles. Der Rest ergibt sich dann fast von selbst.

HTML => Semantik
CSS => Layout

 

[disconnect]

Um die HTML-Tags "schön/er" aussehen zu lassen,
formatierst du diese mit CSS - wie von Thor schon gesagt.

<strong> wird nicht von allen Browsern als "fett" angezeigt.
Daher ist

strong 
{ 
   font-weight: bold; 
}

eine Sicherheitsmaßnahme zur korrekten Darstellung von <strong>.
Falls ich mich irre, im Vorraus sorry ^^

 

[rapid10]

Du musst unterscheiden zwischen Semantik und Optik, das ist eigentlich alles. Der Rest ergibt sich dann fast von selbst.

HTML => Semantik
CSS => Layout

Etwas fett anzeigen zu lassen ist ja optisch. Daher verstehe ich die Semantik nicht. Auch wenn man etwas kursiv auszeichnen lässt, ist dies optisch. Warum sollte man also HTML dazu verwenden?

Oh nein, ich glaube ich werde das nie verstehen. :(

 

[francesco]

Das heißt, am Anfang formatiert man das Wort/den Text mit <strong>.
Wenn es sehr wichtig ist, formatiert man es zusätzlich mit CSS.

Nein. Sehr wichtig ist es dann schon. Per CSS sagst du dem strong nur, wie es aussehen soll. Da du dem Wort auf der semantischen Ebene (HTML) schon enorme Gewichtung gegeben hast, bietet es sich natürlich an, es auch visuell hervorzuheben (CSS).

Wie macht man es dann z.B. beim Menü. Wenn man ein <li>Impressum</li> hat ist es ja theoretisch einfacher, wenn man es über CSS fett macht. Man könnte aber auch <li><strong>Impressu</li> coden.
Was davon ist jetzt richtig?

Aaalso, du scheinst nicht zu verstehen, für was HTML da ist und für was CSS da ist, deswegen eine kleine Erklärung:

Du machst ein Wort, das du mit strong auszeichnest, nicht fett, sondern du gibst diesem Wort eine besondere Gewichtung. Dass es bei dir im Browser fett erscheint liegt daran: Bei der mitgelieferten CSS-Datei des Browsers steht das so drinnen.

Das bedeutet: Wenn du einen Text lediglich fett auszeichnen willst um des "fett-Aussehens"-Willens, dann benutze z. B. das span-Element und weiße dem font-weight: bold; zu.

Wenn du einen Text eine besondere Gewichtung geben willst im Sinne von: "Hey, dieses Wort hat eine besondere Betonung und ich will das dieses Wort auch so betont verstanden werden soll" (z. B. für Screenreader-Benutzer), dann benutzt du strong.

Etwas fett anzeigen zu lassen ist ja optisch. Daher verstehe ich die Semantik nicht.

Das ist auch kein Wunder, weil die Optik hat mit der Semantik ja nichts zu tun.

Semantik = Die Bedeutung. Z. B.: Dieses Wort hat eine große Bedeutung, deswegen zeichne ich es mit strong aus. Wie du strong dann mittels CSS aussehen lässt bleibt dir überlassen, das kann fett sein oder rosa-kursiv mit gepunktetem grünen Rand (nicht zu empfehlen).

Optik = Das Aussehen. Z. B.: Dieses Wort soll fett aussehen, obwohl es keine besondere Betonung oder dergleichen hat, deswegen nehme ich NICHT strong.

 

[_Thor_]

Etwas fett anzeigen zu lassen ist ja optisch. Daher verstehe ich die Semantik nicht. Auch wenn man etwas kursiv auszeichnen lässt, ist dies optisch. Warum sollte man also HTML dazu verwenden?

Weil es auch Besucher deiner Seite gibt, die sich am Quellcode orientieren und nicht an der Ausgabe auf dem Bildschirm. Suchmaschinen zum Beispiel oder Screenreader in Verbindung mit einer Braillezeile für Sehbehinderte. Die sind auf die Semantik angewiesen.

Oh nein, ich glaube ich werde das nie verstehen. :(

Doch, wirst du. So schwer ist das nicht.

Als erstes machst du dir bewusst, welche Bedeutung dein Text haben soll und zeichnest ihn dem entsprechend aus. Wie das im Browser aussieht ist erstmal egal, da geht es nur um die Semantik für Suchmaschinen und Screenreader.
Wenn du das hast, kannst du per CSS das Layout gestalten.

 

[rapid10]

Danke euch beiden! Jetzt verstehe ich es schon fast. An was es noch hapert ist, dass ich kein wirkliches Gespür dafür habe, ob etwas wichtig ist und was nicht.

Ich möchte das, was ihr mir jetzt erklärt habt, noch einmal zusammenfassen, um sicher zugehen, ob ich wirklich alles richtig verstanden habe.
__________
Wenn ich mit dem Coden eines HTML-Dokuments anfange, kümmere ich mich derweil NUR um den Quellcode (Semantik). Erscheint mir darin etwas wichtig, zeichne ich es mit <strong> aus. Sonst zeichne ich es mit einem anderen inline-Tag aus (span, cite, ..) oder aber auch mit z.B. dem <p>-Tag.
Nachdem ich den Quellcode fertig habe, kann ich mich an das Aussehen der Website machen. Und zwar mit Hilfe von CSS. Ich muss aber auch dem <strong>-Tag font-weight: bold; zuweisen.

Stimmt das so?

Darf man mit dem <strong>- oder <em>-Tag auch Absätze auszeichnen, oder besser nur Worte?

Vielen, vielen Dank für eure Hilfe!

 

[francesco]

An was es noch hapert ist, dass ich kein wirkliches Gespür dafür habe, ob etwas wichtig ist und was nicht.

Dieses Gespür kommt mit der Zeit.

Stimmt das so?

Das klingt alles recht vernünftig! :-)

Darf man mit dem <strong>- oder <em>-Tag auch Absätze auszeichnen, oder besser nur Worte?

Ich würde sagen, besser nur Worte, denn strong und em sind inline-Elemente. Und inline-Elemente müssen innerhalb von block-Elementen (p, ...) stehen. Seh ich das richtig?

 

[_Thor_]

Danke euch beiden! Jetzt verstehe ich es schon fast. An was es noch hapert ist, dass ich kein wirkliches Gespür dafür habe, ob etwas wichtig ist und was nicht.

Das kommt mit der Zeit, keine Sorge.

Wenn ich mit dem Coden eines HTML-Dokuments anfange, kümmere ich mich derweil NUR um den Quellcode (Semantik). Erscheint mir darin etwas wichtig, zeichne ich es mit <strong> aus.

Soweit richtig, allerdings bedeutet <strong> sehr wichtig oder stark betont, <em> ist die etwas schwächere Variante, also wichtig oder leicht betont.

Sonst zeichne ich es mit einem anderen inline-Tag aus (span, cite, ..) oder aber auch mit z.B. dem <p>-Tag.

Text allgemein zeichnet man als <p> aus, darin können Inline-Elemente wie <em>, <strong> oder <cite> enthalten sein.

Nachdem ich den Quellcode fertig habe, kann ich mich an das Aussehen der Website machen. Und zwar mit Hilfe von CSS.

Das ist richtig.

Ich muss aber auch dem <strong>-Tag font-weight: bold; zuweisen.

Das musst du nicht, du kannst es auch in roter Schrift oder mit einem bunten Rahmen versehen, es sollte sich nur von dem übrigen Text unterscheiden, denn sonst wäre es ja nicht besonders wichtig und müsste keine zusätzliche Aufmerksamkeit bekommen.

Darf man mit dem <strong>- oder <em>-Tag auch Absätze auszeichnen, oder besser nur Worte?

Du kannst damit auch ganze Absätze als wichtig auszeichnen, allerdings sollte der Absatz trotzdem noch als <p> ausgezeichnet werden.

Ich würde sagen, besser nur Worte, denn strong und em sind inline-Elemente. Und inline-Elemente müssen innerhalb von block-Elementen (p, ...) stehen. Seh ich das richtig?

In der Strict-Variante von XHTML 1.0 ist das richtig, in der Transitional-Variante dürfen Inline-Elemente auch ohne umgebendes Blockelement vorkommen.

 

[rapid10]

Vielen Dank nochmals für eure Hilfe. Ich hoffe ich bekomme das jetzt hin.

Liebe Grüße Jakob

 

[Efchen]

Danke euch beiden! Jetzt verstehe ich es schon fast. An was es noch hapert ist, dass ich kein wirkliches Gespür dafür habe, ob etwas wichtig ist und was nicht.

Nun, aber das ist doch etwas, was von Dir kommen muss. Du hast einen Inhalt. Und Du willst, dass der Inhalt richtig verstanden wird. Also musst Du entscheiden und auch wissen, wo z.B. eine Überschrift hingehört. Du musst wissen, was ein Textabsatz ist. Und so musst Du doch auch relativ einfach entscheiden können, wann ein Textbereich wichtig ist.

Was Dir vielleicht ganz gut hilft, ist wenn Du Dir Deinen Text laut vorliest. Da steckt nämlich auch sehr viel Semantik drin!

Nimm folgenden Satz: "Ich habe nicht nur drei Autos zu Schrott gefahren, sondern vier.".

<p>Ich habe nicht nur drei Autos zu Schrott gefahren, sondern vier.</p>

So, wie in diesem Code geschrieben, würde das kein Mensch vorlesen!

Du würdest es sicher so vorlesen:

<p>Ich habe nicht nur drei Autos zu Schrott gefahren, sondern <em>vier</em>.</p>

Richtig?

Man kann es auch so vorlesen:

<p>Ich habe nicht nur <em>drei</em> Autos zu Schrott gefahren, sondern <strong>vier</strong>!</p>

Siehst Du den Unterschied?

<strong> kann man auch hier sehr gut anwenden:

<p>Layout macht man <strong>nicht</strong> mit HTML, sondern <strong>nur mit CSS</strong>!</p>

Wenn Du das so semantisch vorliest, dann kannst Du Dir sicher jemanden dabei vorstellen, der immer noch glaubt, man mache Layout mit HTML und dass derjenige, der diesen Satz sagt, ihm das jetzt schon zum zwanzigsten Mal sagt: "<strong>nicht</strong>" - dabei treten seine Adern am Hals hervor, das Gesicht färbt sich langsam dunkelrot und die Hände verkrampfen sich.

Alles klar? :-)

Wenn ich mit dem Coden eines HTML-Dokuments anfange, kümmere ich mich derweil NUR um den Quellcode (Semantik). Erscheint mir darin etwas wichtig, zeichne ich es mit <strong> aus.

Wichtig = <em>
Sehr wichtig = <strong>

Sonst zeichne ich es mit einem anderen inline-Tag aus (span, cite, ..) oder aber auch mit z.B. dem <p>-Tag.

Je nach der Bedeutung. Kann ja auch eine <address> sein, z.B. im Impressum.
<span> ist das allgemeine Inline-Element. Das wirst Du bei der Festlegung der Semantik genauso wenig brauchen, wie das allgemeine BLock-Element <div>.

Nachdem ich den Quellcode fertig habe, kann ich mich an das Aussehen der Website machen. Und zwar mit Hilfe von CSS. Ich muss aber auch dem <strong>-Tag font-weight: bold; zuweisen.

Ja, die Trennung ist richtig.
Aber Du musst das strong-Tag nicht bold darstellen. Du kannst es auch kursiv darstellen, unterstreichen oder rot färben. Oder Du stellst es genauso dar, wie normalen Text auch. Dann sieht man das nicht mehr im Browser (was nicht besonders sinnvoll wäre), aber das mit strong ausgezeichnete Wort bleibt trotzdem mit der Bedeutung "sehr wichtig".

Stimmt das so?

IGuG ja.

Darf man mit dem <strong>- oder <em>-Tag auch Absätze auszeichnen, oder besser nur Worte?

Da nimmst Du Dir einen Absatz und versuchst den mal semantisch korrekt vorzulesen.

<p><strong>HTML ist keine Programmiersprache!</strong></p>

Durchaus machbar, aber die meisten würden es eher so vorlesen:

<p>HTML ist <strong>keine</strong> Programmiersprache!</p>

Oder?

Selbst ein bockiges Kind wrde nicht sagen:

<p><strong>Ich will nicht in die Schule!</strong></p>

Sondern ich würde es eher so erwarten:

<p>Ich <strong>will nicht</strong> in die Schule!</p>

Vielen, vielen Dank für eure Hilfe!

<p><em>Gern</em> geschehen. Ich <em>hoffe</em>, das mit dem laut Vorlesen ist Dir eine <strong>echte</strong>Hilfe!</p>

-Efchen :-)

 

[rapid10]

Danke Efchen, auch für deine ausführliche Erklärung. Jetzt kenne ich mich super aus. :)

Zwei Fragen habe ich noch:

Gibt es eigentlich nur 2 Tags, die man zur Betonung verwenden kann? Also "nur" <em> und <strong>? Ich hoffe!

Die letzte Frage ist noch, ob es "unprofessionell" oder nicht intelligent ist, wenn man den <em>-Tag mit CSS so auszeichnet, dass er nicht kursiv gezeigt wird, sondern fett?!

Als ich das jetzt geschrieben habe, versteh ich nicht, wann ich nur mit CSS auszeichen soll. Z.b. wenn ich einen Text habe der wichtig ist, ich aber nur einzele Wörter semantisch betone, und dann mit CSS den restlichen Text fett anzeigen lasse?

 

[Efchen]

Für wichtige und sehr wichtige Textpassagen gibt es nur diese beiden Tags.

Und wie Du Dein <em> am Bildschirm darstellst, bleibt Dir überlassen. Denke einfach daran, wie das jemand lesen würde, wenn Du das fett machst - richtig, er interpretiert es als *wichtig*. Wenn Du strong auch fett machst, nimmst Du Dir halt die Möglichkeit, visuellen Clients einen Unterschied zwischen wichtig und sehr wichtig aufzuzeigen. Der HTML-Code und somit Clients, die nur diesen auslesen, kennen natürlich weiterhin beide Bedeutungen.

Mit CSS setzt Du nur fest, wie Deine Elemente aussehen sollen. Mit HTML legst Du die Bedeutung fest. Wenn ich was *wichtig* haben will, benutze ich <em>, einen Grund, eine Textpassage fett darzustellen, ohne ihr eine bestimmte semantische Bedeutung zu geben, kenne ich nicht. Denn etwas fett darzustellen, hat eigentlich auch immer einen semantischen Hintergrund.

Warum wrdest Du etwas fett auszeichnen? In der Regel doch nur, weil man damit etwas betonen will, also wichtiges auszeichnen will. Also muss zuerst das entsprechende HTML-Tag her.

Wenn Du natürlich Deinen ganzen Text fett haben willst, weil Dir die Schrift dann besser gefällt, dann machst Du halt Deinen Text komplett fett. Das assoziiert dann auch kein Sehender mehr mit "wichtig".

 

[rapid10]

Wenn ich aber zum Beispiel die Menüpunkte oder Links, die ich fett darstellen will, mit dem Hovereffekt normal darstellen will, ist das rein semantisch nicht von Bedeutung, oder? Also NUR mit CSS auszeichnen?!

Ein zweiter Fall, der mir dazu eingefallen ist, ist wenn ich z.B. einen Absatz zur Hervorhebung fett darstellen lassen will, ich aber nur wichtige Worte mit dem <strong>- oder <em>-Tag kennzeichne, den restlichen Absatz fettdarstellen will. Ist das semantisch unkorrekt? Mir klingt das jetzt ein wenig widersprüchlich. Denn wenn etwas wichtig ist, sollte ich es auch semantisch kennzeichnen. Ist das korrekt?

Und wie Du Dein <em> am Bildschirm darstellst, bleibt Dir überlassen. Denke einfach daran, wie das jemand lesen würde, wenn Du das fett machst - richtig, er interpretiert es als *wichtig*. Wenn Du strong auch fett machst, nimmst Du Dir halt die Möglichkeit, visuellen Clients einen Unterschied zwischen wichtig und sehr wichtig aufzuzeigen. Der HTML-Code und somit Clients, die nur diesen auslesen, kennen natürlich weiterhin beide Bedeutungen.

Ich könnte aber <strong> mit kursiver Schrift UND fett auszeichnen lassen. Und <em> NUR mit fetter Schrift auszeichen lassen.
Wäre das wieder logisch?

Vielen Dank für deine sehr tollen und netten Erklärungen!

 

[Efchen]

Wenn ich aber zum Beispiel die Menüpunkte oder Links, die ich fett darstellen will, mit dem Hovereffekt normal darstellen will, ist das rein semantisch nicht von Bedeutung, oder? Also NUR mit CSS auszeichnen?!

Warum sind die fett? Sicher nicht, weil sie besonders wichtig wären. In diesem Fall willst Du sie fett haben, weil Dir das eben optisch besser gefällt. Also hat das nichts mit Semantik zu tun, sondern ist rein CSS. Richtig!

Ein zweiter Fall, der mir dazu eingefallen ist, ist wenn ich z.B. einen Absatz zur Hervorhebung fett darstellen lassen will, ich aber nur wichtige Worte mit dem <strong>- oder <em>-Tag kennzeichne, den restlichen Absatz fettdarstellen will. Ist das semantisch unkorrekt? Mir klingt das jetzt ein wenig widersprüchlich.

Mir auch. Warum solltest Du die Worte, die nicht wichtig sind, auch fett darstellen wollen?

Denn wenn etwas wichtig ist, sollte ich es auch semantisch kennzeichnen. Ist das korrekt?

Ja, weil "Wichtigkeit" Semantik ist.

Ich könnte aber <strong> mit kursiver Schrift UND fett auszeichnen lassen. Und <em> NUR mit fetter Schrift auszeichen lassen.
Wäre das wieder logisch?

Das bleibt Dir und Deinem Design überlassen.

Vielen Dank für deine sehr tollen und netten Erklärungen!

Freut mich, wenn ich dazu beitragen konnte, dass Du es verstanden hast. Wenn es erstmal *klick* gemacht hat, dann wird es wirklich einfach. :-)

 

[francesco]

Warum wrdest Du etwas fett auszeichnen? In der Regel doch nur, weil man damit etwas betonen will, also wichtiges auszeichnen will. Also muss zuerst das entsprechende HTML-Tag her.

Es gibt doch sicher auch Szenarien, wo man etwas ohne zusätzliche semantische Bedeutung optisch hervorheben möchte (siehe diesen Kommentar).

 

[Efchen]

Wie die Schiffsnamen? Ja, das könnte ich mir vorstellen.