Gerhard: Trennung von Inhalt und Design

0 46

Trennung von Inhalt und Design

Gerhard
  • css
  • design/layout
  1. 0
    Gunnar Bittersmann
    1. 0
      Gerhard
      1. 0
        Rolf B
      2. 0
        Gunnar Bittersmann
        1. 0
          Gerhard
          1. 0
            Der Martin
            1. 0
              Gerhard
              1. 0
                Felix Riesterer
              2. 0
                Der Martin
                1. 0
                  vapita
                  • css
                  • design/layout
                  • html
                  1. 0
                    Gunnar Bittersmann
                    • begriff
                    • css
                    • html
                  2. 0
                    Der Martin
                  3. 0
                    MudGuard
                    • menschelei
                    1. 0
                      JürgenB
                      1. 0
                        Tabellenkalk
                        1. 0
                          MudGuard
  2. 0
    Matthias Scharwies
    1. 0
      Gerhard
      1. 0
        Matthias Apsel
        1. 0
          Der Martin
          1. 0
            Matthias Apsel
            1. 0
              Der Martin
        2. 0
          Frenzi
          1. 0
            Rolf B
  3. 0
    Felix Riesterer
    1. 0
      JürgenB
    2. 0

      +1, + Ergänzung

      Raketensicherheitsbeauftragter
  4. 0
    JürgenB
    1. 0
      MudGuard
      1. 0
        JürgenB
        1. 0
          Rolf B
          1. 0
            Gerhard
            1. 0
              Rolf B
              1. 0
                Gerhard
                1. 0
                  Rolf B
                2. 0
                  Gunnar Bittersmann
                  • css
                  • html
                  • ux
                  1. 0
                    Gerhard
                    1. 0
                      Matthias Apsel
                    2. 2
                      jensp
                      1. 0
                        Gunnar Bittersmann
                        • html
                        • internationalisierung
                        1. 0
                          Gerhard
                          1. 0
                            Auge
                          2. 0
                            Gunnar Bittersmann
                          3. 0
                            Matthias Apsel
            2. 0

              strong

              Raketeninterpreter

Hallo,
ich möchte die Überschrift unterschiedlich vom darüberliegenden Text absetzen.
Dies habe ich bisher gemacht mit

<h2 style="margin-top: 1rem;">Überschrift</h2>

Wie trenne ich nun korrekt Inhalt und Design?

<br>
<h2>Überschrift</h2>

oder mehrere Klassen für h2 in css oder ?

  1. @@Gerhard

    <br>
    <h2>Überschrift</h2>
    

    Nein, nicht <br>.

    oder mehrere Klassen für h2 in css oder ?

    Warum sollten verschiedene h2 unterschiedliche Abstände nach oben haben?

    h2 { margin-top: 1rem } im Stylesheet.

    😷 LLAP

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    1. Warum sollten verschiedene h2 unterschiedliche Abstände nach oben haben?

      Warum nicht? Wenn wenig Inhalt auf der Seite, möchte ich es nicht oben hinklatschen.

      1. Hallo Gerhard,

        wovon hängt der "wenige Inhalt" denn ab? Ist die Seite "Gerhard1" voll und die Seite "Gerhard2" eher leer?

        Oder gibt's nur eine Seite, und der Inhalt wird aus einer Datenbank befüllt?

        Daran hängt es, wie man hier idealerweise vorgeht.

        Rolf

        --
        sumpsi - posui - obstruxi
      2. @@Gerhard

        Warum sollten verschiedene h2 unterschiedliche Abstände nach oben haben?

        Warum nicht? Wenn wenig Inhalt auf der Seite, möchte ich es nicht oben hinklatschen.

        Und wenn mehr Inhalt auf der Seite ist, dann möchtest du es oben hinklatschen?

        Erscheint mir nicht ganz schlüssig. Vielleicht verlinkst du mal eine Seite mit wenig und eine Seite mit mehr Inhalt, damit man sich ein Bild machen kann, worum es genau geht.

        Und „wenig Inhalt“ wäre dann eine Eigenschaft der Seite (des Dokument), ist also als Attribut am html- oder am body-Element richtig aufgehoben:
        <body class="wenig-inhalt">

        Abstand der Überschrift per Nachfahrenselektor:
        .wenig-inhalt h2 { margin-top: 1rem }

        😷 LLAP

        --
        “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
        1. Seid ihr da nicht päpstlicher als der Papst!
          Wenn ich heute eine neue Seite hinzufüge, bei der ich die Überschrift etwas anders darstellen möchte, dann muss ich CSS ergänzen.
          Wenn ich die Seite wieder entferne, müsste ich logischerweise diesen speziellen Eintrag in der CSS wieder entfernen.

          1. Hallo,

            Seid ihr da nicht päpstlicher als der Papst!

            wenn das trotz des Ausrufezeichens eine Frage sein soll: Nein.

            Wenn ich heute eine neue Seite hinzufüge, bei der ich die Überschrift etwas anders darstellen möchte, dann muss ich CSS ergänzen.

            Welchen Grund sollte man haben, die Überschrift "etwas anders" darzustellen? Normalerweise strebt man genau das Gegenteil an: Ein einheitliches Layout.

            Aber selbst wenn: Natürlich kannst du eine bestimmte Formatierung auf einer Seite abweichend vom Rest machen, indem du dieser Seite ein lokales Stylesheet mitgibst, das bestimmte Regeln aus dem globalen überschreibt.

            Wenn ich die Seite wieder entferne, müsste ich logischerweise diesen speziellen Eintrag in der CSS wieder entfernen.

            Das hätte sich bei Verwendung eines lokalen Stylesheets auch von selbst erledigt.

            Live long and pros healthy,
             Martin

            --
            Lieber heimlich schlau als unheimlich blöd.
            1. Noch ein weiteres Stylesheet für eine Seite, die vielleicht nur wenige Tage lebt! Das heißt "Mit Kanonen auf Katzen schießen"!

              1. Lieber Gerhard,

                Noch ein weiteres Stylesheet für eine Seite, die vielleicht nur wenige Tage lebt!

                wieso noch eines? Es gibt genau eines, das für alle Seiten gilt!

                Das heißt "Mit Kanonen auf Katzen schießen"!

                Achso...

                Liebe Grüße

                Felix Riesterer

              2. Hi,

                Noch ein weiteres Stylesheet für eine Seite, die vielleicht nur wenige Tage lebt!

                ja, das sind schätzungsweise vier oder fünf Zeilen im head der einen Seite, die anders sein will.

                Das heißt "Mit Kanonen auf Katzen schießen"!

                Wenn du meinst ...

                Live long and pros healthy,
                 Martin

                --
                Lieber heimlich schlau als unheimlich blöd.
                1. Hallo,

                  ich verstehe nicht ganz, wieso man erst um Hilfe fragt und dann alle Antworten doof findet. Aber sei es drum.

                  Ordne doch dem <h2>-Element einfach eine entsprechende css-Klasse zu.

                  html

                  <h2>Überschrift mit wenig Margin</h2>
                  <h2 class="margin-large-top">Überschrift mit viel Margin</h2>
                  

                  style.css:

                  .margin-large-top{ margin-top: 10rem;}
                  

                  Das heißt "Mit Kanonen auf Katzen schießen"!

                  Ich dachte, es hieße: "Mit Kanonen auf Spatzen schießen."

                  Beste Grüße

                  Ben

                  1. @@vapita

                    Ordne doch dem <h2>-Element einfach eine entsprechende css-Klasse zu.

                    Sachen gibt’s, die gibt’s gar nicht. „CSS-Klassen“ gehören auch dazu.

                    Der Hinweis, dem h2-Element eine Klasse zu verpassen, kam auch schon längst. Wie auch mein Einwand, dass eine solche Klasse am html- oder body-Element besser aufgehoben wäre.

                    😷 LLAP

                    --
                    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                  2. Hi,

                    ich verstehe nicht ganz, wieso man erst um Hilfe fragt und dann alle Antworten doof findet. Aber sei es drum.

                    warum sagst du mir das?

                    Das heißt "Mit Kanonen auf Katzen schießen"!

                    Ich dachte, es hieße: "Mit Kanonen auf Spatzen schießen."

                    "Mit Elefanten nach Mücken werfen." 😉

                    Live long and pros healthy,
                     Martin

                    --
                    Lieber heimlich schlau als unheimlich blöd.
                  3. Hi,

                    Das heißt "Mit Kanonen auf Katzen schießen"! Ich dachte, es hieße: "Mit Kanonen auf Spatzen schießen."

                    Nein, "Mit Spatzen auf Kanonen scheißen".

                    cu,
                    Andreas a/k/a MudGuard

                    1. Hallo,

                      Das heißt "Mit Kanonen auf Katzen schießen"! Ich dachte, es hieße: "Mit Kanonen auf Spatzen schießen."

                      Nein, "Mit Spatzen auf Kanonen scheißen".

                      ja ja, das Leben ist kein Ponyschlecken.

                      Gruß
                      Jürgen

                      1. Hallo,

                        Das heißt "Mit Kanonen auf Katzen schießen"! Ich dachte, es hieße: "Mit Kanonen auf Spatzen schießen."

                        Nein, "Mit Spatzen auf Kanonen scheißen".

                        ja ja, das Leben ist kein Ponyschlecken.

                        auch nicht auf dem Porzellan-Hof?

                        Gruß
                        Kalk

                        1. Hi,

                          Das heißt "Mit Kanonen auf Katzen schießen"! Ich dachte, es hieße: "Mit Kanonen auf Spatzen schießen."

                          Nein, "Mit Spatzen auf Kanonen scheißen".

                          ja ja, das Leben ist kein Ponyschlecken.

                          auch nicht auf dem Porzellan-Hof?

                          Elefanten sind die Mütter der Porzellankisten 😉

                          cu,
                          Andreas a/k/a MudGuard

  2. Servus!

    Hallo,
    ich möchte die Überschrift unterschiedlich vom darüberliegenden Text absetzen.
    Dies habe ich bisher gemacht mit

    <h2 style="margin-top: 1rem;">Überschrift</h2>
    

    Wie trenne ich nun korrekt Inhalt und Design?

    <br>
    <h2>Überschrift</h2>
    

    Nein! Das br wäre ja schon Teil des Inhalts (und sollte möglichst wenig verwendet werden,, z.B. bei Lied- oder Verszeilen, der einen Zeilenumbruch benötigen.

    oder mehrere Klassen für h2 in css oder ?

    Ja!

    <style>
    .abschnitt {
      margin-top: 1rem;
    }
    </style>
    
    <h2 class=abschnitt">Überschrift</h2>
    

    So hast du Deinen Inhalt von der Präsentation getrennt. Es wäre zu überlegen, ob der Abstand nach oben nicht allen h2-Elementen zu geben wäre.

    Gib der Klasse einen aussagekräftigen Namen (nicht "abstand")!

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. Hallo,

      Nein! Das br wäre ja schon Teil des Inhalts (und sollte möglichst wenig verwendet werden,, z.B. bei Lied- oder Verszeilen, der einen Zeilenumbruch benötigen.

      ich möchte aber doch auch in normalen Texten an bestimmten Stellen den Zeilenumbruch.

      1. Hallo Gerhard,

        ich möchte aber doch auch in normalen Texten an bestimmten Stellen den Zeilenumbruch.

        In einem Printlayout kannst du die Zeilenumbrüche getrost festlegen, im Web mit seinen sehr sehr vielen verschiedenen Anzeigemöglichkeiten solltest du auf harte Zeilenumbrüche verzichten.

        Stell dir vor, du willst nach <hier> einen Zeilenumbruch und das Fenster ist nur sehr schmal.

        Stell dir vor, du willst nach
        <hier>
        einen Zeilenumbruch und das
        Fenster ist nur sehr schmal.

        Bis demnächst
        Matthias

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        1. Hallo Matthias,

          ich möchte aber doch auch in normalen Texten an bestimmten Stellen den Zeilenumbruch.

          In einem Printlayout kannst du die Zeilenumbrüche getrost festlegen, im Web mit seinen sehr sehr vielen verschiedenen Anzeigemöglichkeiten solltest du auf harte Zeilenumbrüche verzichten.

          dieser Empfehlung kann ich so pauschal nicht zustimmen.

          Ein Zeilenumbruch innerhalb eines Absatzes entspricht von der Semantik her etwa dem Semikolon innerhalb eines Satzes: Eine gewollte Unterteilung, die aber nicht so deutlich ist, dass sie einen neuen Satz/Absatz rechtfertigt.

          Ich nutze beides (Zeilenumbrüche und Semikola) sehr bewusst. Sowohl im Web, im Forum, als auch in Textverarbeitungen.

          Stell dir vor, du willst nach <hier> einen Zeilenumbruch und das Fenster ist nur sehr schmal.

          In so einem Fall ist es wirklich unsinnig.

          Live long and pros healthy,
           Martin

          --
          Lieber heimlich schlau als unheimlich blöd.
          1. Hallo Der Martin,

            Ein Zeilenumbruch innerhalb eines Absatzes entspricht von der Semantik her etwa dem Semikolon innerhalb eines Satzes: Eine gewollte Unterteilung, die aber nicht so deutlich ist, dass sie einen neuen Satz/Absatz rechtfertigt.

            Ich nutze beides (Zeilenumbrüche und Semikola) sehr bewusst. Sowohl im Web, im Forum, als auch in Textverarbeitungen.

            Ja, das gehört meiner Meinung nach in dieselbe Rubrik wie Versenden. 😍😱

            Bis demnächst
            Matthias

            --
            Du kannst das Projekt SELFHTML unterstützen,
            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
            1. Hallo,

              Ja, das gehört meiner Meinung nach in dieselbe Rubrik wie Versenden. 😍😱

              ja, Zusammenschreiben ist cool. 😉

              Live long and pros healthy,
               Martin

              --
              Lieber heimlich schlau als unheimlich blöd.
        2. Hallo Matthias,

          Stell dir vor, du willst nach <hier> einen Zeilenumbruch und das Fenster ist nur sehr schmal.

          Stell dir vor, du willst nach
          <hier>
          einen Zeilenumbruch und das
          Fenster ist nur sehr schmal.

          da möchte ich doch einhaken. Stell dir vor, du willst einen längeren Bericht am PC lesen. Dann möchte ich wie in einem Buch an geeigneten Stellen Zeilenumbrüche. Mache ich mit <br> nicht ähnliches wie das "erlaubte" <p>?

          1. Hallo Frenzi,

            ich glaube, dass die Diskussion hier auseinander läuft. Paragraphen und Zeilenumbrüche haben eine unterschiedliche Semantik, und ein zwanghafter Zeilenumbruch wegen eines gedanklichen Absatzes kommt mir auch merkwürdig vor.

            <br> ist etwas, das man im HTML - meine ich - nur ganz selten braucht. In den meisten Fällen gehört es durch Margins im CSS ersetzt, oder das Dokument sollte an der Stelle als Liste oder <pre> Bereich gestaltet werden. Man ist in Formularen auch gern zum <br> verleitet, aber da weiche ich gerne dahin aus, label { display:block; } in den Style zu schreiben und die input-Elemente als Kind der label-Elemente einzusetzen.

            Im Kontext dieses Threads ist es so, dass das <br> vor einer Überschrift ein margin sein möchte.

            Rolf

            --
            sumpsi - posui - obstruxi
  3. Lieber Gerhard,

    Wie trenne ich nun korrekt Inhalt und Design?

    diese Trennung muss im Kopf anfangen. Momentan lese ich, dass Du je nach Lust und Laune das Aussehen von Überschriften und anderen Textkörpern individuell gestalten willst. Da stellt sich mir dann die Frage, wo hört bei Dir der Inhalt auf und fängt das Design an? Wenn Du nämlich individuelle Gestaltungen auf diversen Seiten umsetzen willst, dann könnte es ja sein, dass diese ein wesentliches Element des Inhalts sind.

    Aber ja, wenn Du die technische Trennung meinst, dann gehört jegliche(!!) Gestaltungsanweisung in ein Stylesheet (CSS-Datei) und nicht in style-Attribute innerhalb Deines Dokuments.

    Liebe Grüße

    Felix Riesterer

    1. Dieser Beitrag wurde gelöscht: An falscher Stelle geantwortet.
    2. Aber ja, wenn Du die technische Trennung meinst, dann gehört jegliche(!!) Gestaltungsanweisung in ein Stylesheet (CSS-Datei) und nicht in style-Attribute innerhalb Deines Dokuments.

      Genau!

      Dafür kann es auch den technischen Grund geben, dass man aus Sicherheitsgründen (externe Inhalte, usergenerierte Inhalte) recht strenge HTTP-Header (dort

      Content-Security-Policy, default-src 'self' [HOSTNAME]; 
      

      senden will (oder irgendwann soll). Dann würde ein halbwegs moderner Browser Style-Attribute (übrigens auch Javascript) innerhalb des Dokuments erheblich misstrauen und diese also nicht beachten.

      Also ist es besser, dass Zeug gleich rauszuhalten und nur IDs oder Klassennamen zu vergeben und das Aussehen dann über externe Dateien zu bestimmen.

  4. Hallo Gerhard,

    ich habe für mich folgende Regeln:

    Style-Angaben, die für (fast) alle Seiten gelten, und das sind die meisten, kommen in ein zentrales Style-Sheet. Style-Angaben, die nur für eine Seite benötigt werden, und die möglicherweise die zentralen Angaben überschreiben, kommen in den Head-Bereich der Seite. Inhaltsnahe Angaben, wie z.b. Fehler sind <span style="color:red">rot</span> setze ich auch schon mal inline. Einfache Style-Angabe, die nur in Verbindung mit einem Javascript benötigt werden, setze ich auch per Javascript. Gruß Jürgen

    1. Hi,

      Inhaltsnahe Angaben, wie z.b. Fehler sind <span style="color:red">rot</span> setze ich auch schon mal inline.

      .error { color:red; } + class='error'

      und ein nachträgliches Ändern auf ein anderes Aussehen ist viel einfacher.

      cu,
      Andreas a/k/a MudGuard

      1. Hallo,

        Inhaltsnahe Angaben, wie z.b. Fehler sind <span style="color:red">rot</span> setze ich auch schon mal inline.

        .error { color:red; } + class='error'

        und ein nachträgliches Ändern auf ein anderes Aussehen ist viel einfacher.

        nein, weil ich es dann an zwei Stellen ändern muss.

        Gruß
        Jürgen

        1. Hallo JürgenB,

          nee, du änderst einmal den .error Style und setzt ggf. an 42 Stellen im Code einen Fehlerzustand (was Du vielleicht in einer Funktion zentralisiert hast, weshalb es Dir nicht so vorkommt).

          Farben im style-Attribut zu setzen halte ich ebenfalls für verfehlt. Custom Properties, ja. Positionsangaben, ja. Der Rest: hm. Höchstens in einem WYSIWIG Editor, wo der Anwender explizit Stile für markierte Bereiche setzen kann.

          Rolf

          --
          sumpsi - posui - obstruxi
          1. Jetzt diskutiert man also, bei welcher Vorgehensweise der Aufwand höher ist.
            Wenn ich an einer einzigen Stelle in einer Seite ein abweichendes H2 haben möchte, dann ist der Aufwand wesentlich geringer, wenn ich wie im Eingangsbeitrag geschrieben nur das HTML ändere.
            Der Aufwand sollte nach meiner Meinung immer berücksichtigt werden.
            Langlebiges Dokument - größerer Aufwand vertretbar, nur kurzfristige Dokumente (z.B. News vom Tage) geringerer Aufwand.

            Wie sieht es eigentlich mit <strong> aus? Ich verwende es um einzelne Worte hervorzuheben.

            1. Hallo Gerhard,

              Wenn ich an einer einzigen Stelle in einer Seite ein abweichendes H2 haben möchte

              …dann solltest Du Dich fragen, warum Du das willst. <h2> ist eine Überschrift, und in einem Dokument sollten Überschriften einheitlich sein.

              Wie man es dann im Einzelfall umsetzt, hängt aber auch an der Art der Abweichung. Einen zusätzlichen Margin für eine einzelne Überschrift, tja, bevor ich da Gutachter beauftrage, würde ich vermutlich auch mal schnell ein style-Attribut notieren. Oder doch eine Klasse setzen und im <style> Element des <head> die Klasse definieren? Vielleicht liegt es auch daran, dass dieses h2 auf ein bestimmtes anderes Ding folgt und in der Kombination dieses Dings mit h2 ist der Zusatzabstand etwas, das man immer haben möchte? In dem Fall würde man mit einem + oder ~ Kombinator (Nachbar oder Geschwister) besser fahren.

              Heißt: dein style="margin-top:1rem" kann im Einzelfall die beste Lösung sein. Oder eben auch nicht. Was man dazu an Überlegungen anstellen kann, könnte in der Diskussion hier deutlich geworden sein. Ein <br> Element für Zusatzabstand ist aber niemals richtig.

              Man muss sich einfach nur der Tatsache bewusst sein, dass alles, was im HTML zwecks Stylings notiert wird, Potenzial zum Stören hat. Und wenn man sich entscheidet, das an einer Stelle mal hinzunehmen, na gut. Dieses Entscheidungsrecht hat jeder von uns. Und jeder hat andere Vorstellungen von "das stört zu sehr" oder eben nicht. Das letzte Wort hast Du. Und Du weißt dann im Zweifelsfall auch, dass Du Dich aus Kostengründen über bestimmte Grundsätze hinweggesetzt hast. Sowas kriegt einen langfristig am A...llerwertesten, aber wen interessiert das bei kurzlebigen Seiten.

              Ich möchte da aber auch eine Weisheit meiner ersten Chefin entgegen halten: Nichts hält so lange wie ein gutes Provisorium. Verlass Dich also nicht bedingungslos auf die Kurzlebigkeit deiner Krücken. Das kann schiefgehen.

              Zu deiner Anmerkung:

              <strong> und <em> dienen dazu, wichtige Begriffe oder Passagen hervorzuheben. Dass dabei eine Fett- oder Kursivsatz erfolgt, ist ein Nebeneffekt und kann - rein theoretisch - je nach Browser unterschiedlich sein.

              Ok, ist es nicht. strong ist fett und em ist kursiv, und man soll die alten <b> und <i> Elemente nicht mehr dafür verwenden. Aber wenn Du nur etwas fett setzen möchtest, ohne dass der fette Inhalt auch tatsächlich besondere Wichtigkeit aufweist, dann ist <b> eher angebracht als <strong>. Oder eine Regel im CSS mit font-weight, je nach dem Umständen.

              Rolf

              --
              sumpsi - posui - obstruxi
              1. Hallo Rolf,

                <strong> und <em> dienen dazu, wichtige Begriffe oder Passagen hervorzuheben.

                Warum soll ich dann, wenn ich etwas mit rot hervorheben möchte, dies in CSS-Dateien realisieren und obiges nicht? Ich blicke nicht mehr durch.

                1. Hallo Gerhard,

                  wie ich im vorigen Posting sagte: Es ist auch eine Abwägungssache. style="color:red" kann eine Sünde sein, aber auch die für den Zweck beste Lösung. Es kommt eben auf den Kontext an.

                  Das ist eins der besten Zitate aus Star Trek Discoball - äh - Discovery. In der deutschen Übersetzung lässt es allerdings etwas nach.

                  "Universal law is for lackeys," he (Lorca) notes, "context is for kings".

                  Wenn Du Dich dabei ertappst, ständig irgendwo "color:red" in style-Attribute zu tippen, dann wäre das aber ein Anlass zum Nachdenken.

                  Rolf

                  --
                  sumpsi - posui - obstruxi
                2. @@Gerhard

                  <strong> und <em> dienen dazu, wichtige Begriffe oder Passagen hervorzuheben.

                  Warum soll ich dann, wenn ich etwas mit rot hervorheben möchte, dies in CSS-Dateien realisieren und obiges nicht?

                  Du realisierst beide Hervorhebungen im HTML – eben indem du Begriffe oder Passagen mit strong- bzw. em-Elementen auszeichnest.

                  Wenn dir die Default-Darstellung (i.d.R. fett bzw. kursiv) zusagt, musst du im CSS nichts weiter tun. Wenn du eine andere Darstellung (bspw. andere Farbe) möchtest, musst du entsprechende Regeln im CSS angeben.

                  Wobei Farbe zur Hervorhebung mit Vorsicht zu verwenden ist. Nutzer:innen können farblich Hervorgehebenes leicht mit Links verwechseln.

                  😷 LLAP

                  --
                  “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                  1. Hallo Gunnar, was ich mit meinem letzen Post aussrücken wollte: Es wird gepredigt, Inhalt und Design zu trennen. Warum sind dann z.B. strong und em im Inhaltstext nicht depreciated? Gruß Gerhard

                    1. Hallo Gerhard,

                      Es wird gepredigt, Inhalt und Design zu trennen. Warum sind dann z.B. strong und em im Inhaltstext nicht depreciated?

                      strong und em zeichnen einen Text als (stark) betont aus. Die Darstellung ist davon vollkommen unabhängig. Auch ein Screenreader liest die Betonung vor.

                      Bis demnächst
                      Matthias

                      --
                      Du kannst das Projekt SELFHTML unterstützen,
                      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                    2. Hallo Gunnar, was ich mit meinem letzen Post aussrücken wollte: Es wird gepredigt, Inhalt und Design zu trennen. Warum sind dann z.B. strong und em im Inhaltstext nicht depreciated? Gruß Gerhard

                      Hallo Gerhard,

                      weil des semantische Auszeichnungen sind. Diese besagen nur das der so eingeschlossene Text betont ist (em), oder stark betont ist (strong). Wie die Darstellung erfolgt wird über CSS festgelegt. Die HTML Spezifikation (https://html.spec.whatwg.org) enthält eine sehr gute Beschreibung, wie em, strong, b oder i eingesetzt werden sollen. Wir die Darstellung aussieht, wird im Stylesheet festgelegt, sinnvollerweise in einem zentralen Stylesheet. Inline-Styles sollten meines Erachtens ein absolute Ausnahme sein, sinnvoller ist es im Zweifelsfall einem Element, das einen individuellen Style erhalten soll, eine ID zu geben, und diese im Stylesheet zu verwenden.

                      Man sollte außerdem nicht vergessen, dass es nicht nur die visuelle Ausgabe gibt. Ein Screenreader kann z.B. em ebenfalls interpretieren, und die Aussprache entsprechend anpassen.

                      Beste Grüße

                      Jens

                      1. @@jensp

                        Die HTML Spezifikation (https://html.spec.whatwg.org) enthält eine sehr gute Beschreibung, wie em, strong, b oder i eingesetzt werden sollen.

                        Und dann gibt’s da noch Verwendung von b- und i-Elementen.

                        😷 LLAP

                        --
                        “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                        1. Für mich kann eine Farbdarstellung genau so eine Hervorhebung sein wie em, strong, b, i. Umgekehrt gilt dann, wenn eine Farbangabe nicht in den Text gehört, dann auch nicht em, strong, b, i.

                          Und dann gibt’s da noch Verwendung von b- und i-Elementen.

                          Und wenn noch auf potentielle Übersetzungen ins Japanische Rücksicht genommen werden soll, dann ist das wohl stark übertrieben.

                          1. Hallo

                            Nur mal so nebenbei, als weiterer Denkanstoß.

                            Für mich kann eine Farbdarstellung genau so eine Hervorhebung sein wie em, strong, b, i.

                            Das mag für dich zutreffen, aber trifft das auch auf alle deine Besucher zu? Farbfehlsichtigkeiten sind weit verbreitet. Als Ergebnis dessen kann eine rein farbliche Hervorhebung für den einen oder anderen nicht erkennbar sein. Für verschiedene Menschen sind zudem auch verschiedene Farben schwer oder nicht erkennbar. Es ist ein weites Feld, auf dem man sich bei diesem Thema bewegt.

                            Es für alle Fälle richtig zu machen, ist (mindestens) nicht leicht. Es ist aber leicht, es nicht schlimmer zu machen, indem man weitere Hürden einbaut.

                            Tschö, Auge

                            --
                            Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
                            Hohle Köpfe von Terry Pratchett
                          2. @@Gerhard

                            Für mich kann eine Farbdarstellung genau so eine Hervorhebung sein wie em, strong, b, i.

                            Nein, nicht auf Webseiten. Aber das sagte ich schon.

                            Umgekehrt gilt dann, wenn eine Farbangabe nicht in den Text gehört, dann auch nicht em, strong, b, i.

                            Was genau meinst du mit „dem Text“?

                            Wenn du den HTML-Quelltext meinst, ist die Aussage falsch.

                            Wenn du was anderes meinst, macht der Satz keinen Sinn.

                            Und dann gibt’s da noch Verwendung von b- und i-Elementen.

                            Und wenn noch auf potentielle Übersetzungen ins Japanische Rücksicht genommen werden soll, dann ist das wohl stark übertrieben.

                            Du hast den Artikel gelesen und verstanden?

                            😷 LLAP

                            --
                            “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                          3. Hallo Gerhard,

                            Für mich kann eine Farbdarstellung genau so eine Hervorhebung sein wie em, strong, b, i. Umgekehrt gilt dann, wenn eine Farbangabe nicht in den Text gehört, dann auch nicht em, strong, b, i.

                            em, strong, b und i sind definierte Elemente der Sprache HTML. Darstellungen gibt es auf der Ebene HTML nicht.

                            Bis demnächst
                            Matthias

                            --
                            Du kannst das Projekt SELFHTML unterstützen,
                            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
            2. Wie sieht es eigentlich mit <strong> aus? Ich verwende es um einzelne Worte hervorzuheben.

              <strong> ist Semantik und kann je nach Spracheinstellung und Landessitte durch den Browser fett, kursiv oder meinetwegen „hinterhimmelblau“ dargestellt werden. Auch beim Vorlesen kann der synthetische Redner z.B. lauter werden. Der medienerfahrene Zuhörer denkt dann, das sei die Werbung.