Aloha ;) Die Antwort ist etwas länger geraten. Ich gliedere sie mal auf - für alle Mitleser. --- #Wie schnell ein Design unbedienbar wird# > Unbedienbares Design? och komm, da muss man schon wirklich viel verkehrt machen und erst recht nicht nur Empfehlungen missachten. Ist das so? Ich sehe mich ausnahmsweise @Gunnar Bittersmann wirklich beipflichten: Ein „Design“, das nicht tastaturbedienbar und klick-/touchbedienbar ist, ist unbedienbar - zumindest für denjenigen, der nur die fehlende der drei Bedienoptionen zur Verfügung hat. Und wie wir gesehen haben ist es gar nicht so einfach, ein Menü so zu bauen, dass es diesem Anspruch genügt - zumindest dann, wenn man untergeordnete Ebenen im Menü ausblenden will. Dabei ist es dann verlockend, es sich einfach zu machen und entweder Tastaturbedienbarkeit oder Klick-/Touchbedienbarkeit über Bord zu werfen. Passiert auf tausend Webseiten da draußen. Und ist unglaublich ärgerlich, wenn man mal wieder mit dem Mobil-Browser unterwegs ist. Man muss nicht wirklich viel verkehrt machen, um ein (für einige User) unbedienbares Design zu erhalten. --- #Was hat Semantik mit HTML zu tun# > Aber für wen ist die Semantik denn gut? Ähm. Wir sprechen hier über die *Hypertext* ***Markup*** *Language*. Markup, so wie in Auszeichnung, so wie in semantische Auszeichnung. Semantische Auszeichnung ist der (im ursprünglichen Sinn einzige!) Sinn und Zweck von HTML. > Wenn ich Semantik haben möchte, baue ich eine XML-Datei. HTML und XML sind verwandt. Und weißt du was? Auch in X**M**L steckt das Wort Markup. Fällt dir was auf? --- #Was Semantik bedeutet und was unsemantisch bedeutet# > Hier scheint Semantik aber zu bedeuten, jede aktuelle Neuerung in der Auszeichnung muss genutzt werden, weil sonst ist es nicht semantisch/unbedienbar. Nein. Semantik bedeutet, dass man versucht, für jeden Inhalt anhand der vorhandenen Auszeichnungsmöglichkeiten eine möglichst sinnstiftende Auszeichnung zu finden. Divs für tabellarische Daten zu verwenden ist unsemantisch, denn es gibt mit den Tabellenelementen eine sinnstiftendere Auszeichnung. Eine DIV für den Hauptinhalt der Seite zu verwenden ist unsemantisch, denn es gibt mit main ein sinnstiftenderes Element. Ja, das bedeutet, dass man in dem Moment, in dem man HTML schreibt, sich aller verfügbarer Elemente bedient, um möglichst sinnstiftende Elemente zu finden. Alles andere ist unsemantisch. Nein, das bedeutet nicht, dass eine Seite unbedienbar ist. Nicht jede perfekt semantische Seite ist unbedienbar und es gibt auch semantisch perfekte, aber unbedienbare Seiten. > Seltsam daran aber, dass vor der jeweiligen Neuerung die alte Vorgehensweise dann doch semantisch war. Wie gesagt, semantische Auszeichnung hat immer damit zu tun, die möglichst akkurate Auszeichnung unter den aktuell verfügbaren Auszeichnungsmöglichkeiten zu finden. Semantik ist doch schon an sich ein Begriff, der im Kontext „Sprache“ definiert ist. Das, was in einer Sprach(-version\|-e) semantisch ist, mag in einer anderen Sprach(-version\|-e) unsemantisch sein. Frühere HTML-Versionen waren statisch versioniert. Da konnten keine Elemente dazu kommen und daher hat sich der Grad der Semantik bei einmal semantisch ausgezeichneten Texten auch nie wieder verändert - bezogen auf die Sprachversion, in der ausgezeichnet wurde. HTML5 ist ein „living standard“. Das Hinzukommen neuer Elemente und damit die graduelle Abnahme des Grads der Semantik bei einem einmal semantisch ausgezeichneten Text in Bezug auf die Sprachversion, in der ausgezeichnet wurde, ist damit selbstverständlich und wohnt dem HTML-Standard inne. --- #Wozu eigentlich Semantik# > Aber für wen ist die Semantik denn gut? Semantik gibt einem Text eine Struktur und einen Sinn, der erfassbar ist, auch wenn man den Text nicht versteht. Das hilft ganz konkret allen automatischen Verarbeitern: Suchmaschinen, Browser, Screenreader … Semantisch ausgezeichneter Text macht das gesamte WWW aus und trägt in höchstem Maße dazu bei, dass Webseiteninhalte für **alle** verständlich sind - nicht nur für die, an die bei der Erstellung im Speziellen gedacht wurde. HTML und seine Semantik stellen sicher, dass ohne jedes CSS oder Javascript immer so klar wie möglich ist, um was für Inhalte es sich handelt. Davon profitieren letztlich alle Internet-Benutzer. ## Warum generische Elemente unsemantischer sind als existierende spezialisierte Elemente # Du hast im verlinkten Beitrag die Frage gestellt, warum es semantisch besser sein soll, `<main>` zu verwenden statt `<div id="main">`. Das ist eine berechtigte Frage. Ich möchte dir die Antwort mit einem Vergleich näher bringen. Sagen wir, die zugrundeliegende Sprache ist Deutsch. Du möchtest über ein Quadrat sprechen. Nun hast du mehrere Möglichkeiten, das zu tun: Du sprichst von: - geometrische Form mit vier Ecken und jeweils einem rechten Winkel sowie geraden Kanten - Viereck mit rechten Winkeln - Quadrat Die ersten beiden verwenden generische Begriffe und präzisieren durch nähere Beschreibungen, in unterschiedlichen Graden. Letzterer fasst alles in einem eigenen, fest definierten Fachbegriff zusammen. Alle drei Möglichkeiten sind inhaltlich völlig gleichwertig. Trotzdem gehört es zum natürlichen Sprachgebrauch dazu, einen präzisen Fachbegriff, sofern es einen gibt, zu verwenden, statt generische Begriffe mit näheren Beschreibungen zu versehen. Du kannst ja mal selbst versuchen, wie viele Menschen, da es den Fachbegriff Quadrat ja gibt, noch genau verstehen, was du mit *geometrische Form mit vier Ecken und jeweils einem rechten Winkel sowie geraden Kanten* meinst. Wenn du so kommunizierst hast du zwar das selbe gesagt - aber trotzdem nicht das gleiche Verständnis bei deinem Gegenüber erzeugt. Deshalb ist die Bezeichnung eines Quadrats als geometrische Form mit vier Ecken und jeweils einem rechten Winkel sowie geraden Kanten zwar nicht inhaltlich falsch, aber trotzdem unsemantisch - denn du nutzt nicht die semantischen Auszeichnungsmöglichkeiten der Sprache, um das präziser und weniger missverständnisanfällig zu fassen. Wenn du noch nicht verstehst, was ich mit missverständnisanfällig meine: Stell dir vor, du hast auf deiner Seite eine Beschreibung aller deutschen Flüsse und ihrer Eigenschaften und verwendest auch da das generische div - und erhältst: ~~~html <div id="rhein"> <p>Beschreibung des Flusses Rhein...</p> </div> <div id="donau"> <p>Beschreibung des Flusses Donau...</p> </div> <div id="main"> <p>Beschreibung des Flusses Main...</p> </div> ~~~ Ups. Woher genau weiß jetzt der Browser oder die Suchmaschine oder ..., dass das `<div id="main">` hier nicht das Hauptelement der Seite meint, sondern Inhalte zum Fluss Main beinhaltet? Richtig. Der Browser kann das nicht zweifelsfrei sagen. Deshalb missverständnisanfällig, denn die Attributwerte sind potenziell immer mehrdeutig. Ein eigenes Element ist immer eindeutig definiert und kann nicht falsch verstanden werden. Deshalb ist die Verwendung des extra dafür definierten Elements semantischer als die Verwendung des generischen Elements mit beschreibendem Attribut[^1]. [^1]: außer, wenn die Bedeutung der Attribute auch fest und eindeutig definiert sind, zum Beispiel wie in aria-... oder den Möglichkeiten von schema.org. Aber auch da gilt, dass neu definierte, spezialisierte Attributwerte semantischere Auszeichnung ermöglichen als generische und daher auch verwendet werden sollten. --- # Was unsemantische Auszeichnung ausmacht # > Aber das ist ja doch immer eine Diskussion hier ohne Resultat, daher nochmal die Bitte an dich @Gunnar Bittersmann (sozusagen sowieso als Barrierefreibotschafter hier) zum Statement/Artikel eines z.b. Marco Zehe. Ich habe das jetzt ausführlich gemacht, und ich glaube die Beispiele sind recht verständlich geworden. Ich hoffe du nimmst dir das zu Herzen und es klärt einige deiner offenen Fragen endlich. > Dabei geht's eigentlich ja auch so: > > ~~~HTML > <div class="topnav"> > <a class="active" href="#home">Home</a> > <a href="#news">News</a> > <a href="#contact">Contact</a> > <a href="#about">About</a> > </div> > ~~~ Deine Aussage ist genau dieselbe wie: Warum sagen wir eigentlich *„Die Diagonalen eines Parallelogramms halbieren einander“*, denn eigentlich gehts ja auch so: *„Die Verbindungsstrecken, die in gerader Linie die Ecken einer geometrischen Figur mit vier Ecken und zwei Kanten, die sich als Gerade verlängert nie schneiden würden, verbinden, haben den Punkt, der von den genannten Ecken genau gleich weit entfernt ist und jeweils auf den genannten Linien liegt, gemeinsam.“* Ich denke die Frage beantwortet sich damit von selbst. Wer verstanden werden will, sollte so präzise wie möglich auszeichnen. --- Grüße, RIDER -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller # [Twitter](https://twitter.com/Camping_RIDER) # [Steam](http://steamcommunity.com/id/Camping_RIDER) # [YouTube](https://www.youtube.com/user/RidersFlame) # [Self-Wiki](http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER) # [Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[

Aloha ;) Die Antwort ist etwas länger geraten. Ich gliedere sie mal auf - für alle Mitleser. --- #Wie schnell ein Design unbedienbar wird# > Unbedienbares Design? och komm, da muss man schon wirklich viel verkehrt machen und erst recht nicht nur Empfehlungen missachten. Ist das so? Ich sehe mich ausnahmsweise @Gunnar Bittersmann wirklich beipflichten: Ein „Design“, das nicht tastaturbedienbar und klick-/touchbedienbar ist, ist unbedienbar - zumindest für denjenigen, der nur die fehlende der drei Bedienoptionen zur Verfügung hat. Und wie wir gesehen haben ist es gar nicht so einfach, ein Menü so zu bauen, dass es diesem Anspruch genügt - zumindest dann, wenn man untergeordnete Ebenen im Menü ausblenden will. Dabei ist es dann verlockend, es sich einfach zu machen und entweder Tastaturbedienbarkeit oder Klick-/Touchbedienbarkeit über Bord zu werfen. Passiert auf tausend Webseiten da draußen. Und ist unglaublich ärgerlich, wenn man mal wieder mit dem Mobil-Browser unterwegs ist. Man muss nicht wirklich viel verkehrt machen, um ein (für einige User) unbedienbares Design zu erhalten. --- #Was hat Semantik mit HTML zu tun# > Aber für wen ist die Semantik denn gut? Ähm. Wir sprechen hier über die *Hypertext* ***Markup*** *Language*. Markup, so wie in Auszeichnung, so wie in semantische Auszeichnung. Semantische Auszeichnung ist der (im ursprünglichen Sinn einzige!) Sinn und Zweck von HTML. > Wenn ich Semantik haben möchte, baue ich eine XML-Datei. HTML und XML sind verwandt. Und weißt du was? Auch in X**M**L steckt das Wort Markup. Fällt dir was auf? --- #Was Semantik bedeutet und was unsemantisch bedeutet# > Hier scheint Semantik aber zu bedeuten, jede aktuelle Neuerung in der Auszeichnung muss genutzt werden, weil sonst ist es nicht semantisch/unbedienbar. Nein. Semantik bedeutet, dass man versucht, für jeden Inhalt anhand der vorhandenen Auszeichnungsmöglichkeiten eine möglichst sinnstiftende Auszeichnung zu finden. Divs für tabellarische Daten zu verwenden ist unsemantisch, denn es gibt mit den Tabellenelementen eine sinnstiftendere Auszeichnung. Eine DIV für den Hauptinhalt der Seite zu verwenden ist unsemantisch, denn es gibt mit main ein sinnstiftenderes Element. Ja, das bedeutet, dass man in dem Moment, in dem man HTML schreibt, sich aller verfügbarer Elemente bedient, um möglichst sinnstiftende Elemente zu finden. Alles andere ist unsemantisch. Nein, das bedeutet nicht, dass eine Seite unbedienbar ist. Nicht jede perfekt semantische Seite ist unbedienbar und es gibt auch semantisch perfekte, aber unbedienbare Seiten. > Seltsam daran aber, dass vor der jeweiligen Neuerung die alte Vorgehensweise dann doch semantisch war. Wie gesagt, semantische Auszeichnung hat immer damit zu tun, die möglichst akkurate Auszeichnung unter den aktuell verfügbaren Auszeichnungsmöglichkeiten zu finden. Semantik ist doch schon an sich ein Begriff, der im Kontext „Sprache“ definiert ist. Das, was in einer Sprach(-version\|-e) semantisch ist, mag in einer anderen Sprach(-version\|-e) unsemantisch sein. Frühere HTML-Versionen waren statisch versioniert. Da konnten keine Elemente dazu kommen und daher hat sich der Grad der Semantik bei einmal semantisch ausgezeichneten Texten auch nie wieder verändert - bezogen auf die Sprachversion, in der ausgezeichnet wurde. HTML5 ist ein „living standard“. Das Hinzukommen neuer Elemente und damit die graduelle Abnahme des Grads der Semantik bei einem einmal semantisch ausgezeichneten Text in Bezug auf die Sprachversion, in der ausgezeichnet wurde, ist damit selbstverständlich und wohnt dem HTML-Standard inne. --- #Wozu eigentlich Semantik# > Aber für wen ist die Semantik denn gut? Semantik gibt einem Text eine Struktur und einen Sinn, der erfassbar ist, auch wenn man den Text nicht versteht. Das hilft ganz konkret allen automatischen Verarbeitern: Suchmaschinen, Browser, Screenreader … Semantisch ausgezeichneter Text macht das gesamte WWW aus und trägt in höchstem Maße dazu bei, dass Webseiteninhalte für **alle** verständlich sind - nicht nur für die, an die bei der Erstellung im Speziellen gedacht wurde. HTML und seine Semantik stellen sicher, dass ohne jedes CSS oder Javascript immer so klar wie möglich ist, um was für Inhalte es sich handelt. Davon profitieren letztlich alle Internet-Benutzer. ## Warum generische Elemente unsemantischer sind als existierende spezialisierte Elemente # Du hast im verlinkten Beitrag die Frage gestellt, warum es semantisch besser sein soll, `<main>` zu verwenden statt `<div id="main">`. Das ist eine berechtigte Frage. Ich möchte dir die Antwort mit einem Vergleich näher bringen. Sagen wir, die zugrundeliegende Sprache ist Deutsch. Du möchtest über ein Quadrat sprechen. Nun hast du mehrere Möglichkeiten, das zu tun: Du sprichst von: - geometrische Form mit vier Ecken und jeweils einem rechten Winkel sowie geraden Kanten - Viereck mit rechten Winkeln - Quadrat Die ersten beiden verwenden generische Begriffe und präzisieren durch nähere Beschreibungen, in unterschiedlichen Graden. Letzterer fasst alles in einem eigenen, fest definierten Fachbegriff zusammen. Alle drei Möglichkeiten sind inhaltlich völlig gleichwertig. Trotzdem gehört es zum natürlichen Sprachgebrauch dazu, einen präzisen Fachbegriff, sofern es einen gibt, zu verwenden, statt generische Begriffe mit näheren Beschreibungen zu versehen. Du kannst ja mal selbst versuchen, wie viele Menschen, da es den Fachbegriff Quadrat ja gibt, noch genau verstehen, was du mit *geometrische Form mit vier Ecken und jeweils einem rechten Winkel sowie geraden Kanten* meinst. Wenn du so kommunizierst hast du zwar das selbe gesagt - aber trotzdem nicht das gleiche Verständnis bei deinem Gegenüber erzeugt. Deshalb ist die Bezeichnung eines Quadrats als geometrische Form mit vier Ecken und jeweils einem rechten Winkel sowie geraden Kanten zwar nicht inhaltlich falsch, aber trotzdem unsemantisch - denn du nutzt nicht die semantischen Auszeichnungsmöglichkeiten der Sprache, um das präziser und weniger missverständnisanfällig zu fassen. Wenn du noch nicht verstehst, was ich mit missverständnisanfällig meine: Stell dir vor, du hast auf deiner Seite eine Beschreibung aller deutschen Flüsse und ihrer Eigenschaften und verwendest auch da das generische div - und erhältst: ~~~html <div id="rhein"> <p>Beschreibung des Flusses Rhein...</p> </div> <div id="donau"> <p>Beschreibung des Flusses Donau...</p> </div> <div id="main"> <p>Beschreibung des Flusses Main...</p> </div> ~~~ Ups. Woher genau weiß jetzt der Browser oder die Suchmaschine oder ..., dass das `<div id="main">` hier nicht das Hauptelement der Seite meint, sondern Inhalte zum Fluss Main beinhaltet? Richtig. Der Browser kann das nicht zweifelsfrei sagen. Deshalb missverständnisanfällig, denn die Attributwerte sind potenziell immer mehrdeutig. Ein eigenes Element ist immer eindeutig definiert und kann nicht falsch verstanden werden. Deshalb ist die Verwendung des extra dafür definierten Elements semantischer als die Verwendung des generischen Elements mit beschreibendem Attribut[^1]. [^1]: außer, wenn die Bedeutung der Attribute auch fest und eindeutig definiert sind, zum Beispiel wie in aria-... oder den Möglichkeiten von schema.org. Aber auch da gilt, dass neu definierte, spezialisierte Attributwerte semantischere Auszeichnung ermöglichen als generische und daher auch verwendet werden sollten. --- # Was unsemantische Auszeichnung ausmacht # > Aber das ist ja doch immer eine Diskussion hier ohne Resultat, daher nochmal die Bitte an dich @Gunnar Bittersmann (sozusagen sowieso als Barrierefreibotschafter hier) zum Statement/Artikel eines z.b. Marco Zehe. Ich habe das jetzt ausführlich gemacht, und ich glaube die Beispiele sind recht verständlich geworden. Ich hoffe du nimmst dir das zu Herzen und es klärt einige deiner offenen Fragen endlich. > Dabei geht's eigentlich ja auch so: > > ~~~HTML > <div class="topnav"> > <a class="active" href="#home">Home</a> > <a href="#news">News</a> > <a href="#contact">Contact</a> > <a href="#about">About</a> > </div> > ~~~ Deine Aussage ist genau dieselbe wie: Warum sagen wir eigentlich *„Die Diagonalen eines Parallelogramms halbieren einander“*, denn eigentlich gehts ja auch so: *„Die Verbindungsstrecken, die in gerader Linie die Ecken einer geometrischen Figur mit vier Ecken und zwei Kanten, die sich als Gerade verlängert nie schneiden würden, haben den Punkt, der von den genannten Ecken genau gleich weit entfernt ist und jeweils auf den genannten Linien liegt, gemeinsam.“* Ich denke die Frage beantwortet sich damit von selbst. --- Grüße, RIDER -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller # [Twitter](https://twitter.com/Camping_RIDER) # [Steam](http://steamcommunity.com/id/Camping_RIDER) # [YouTube](https://www.youtube.com/user/RidersFlame) # [Self-Wiki](http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER) # [Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[

Aloha ;) Die Antwort ist etwas länger geraten. Ich gliedere sie mal auf - für alle Mitleser. --- #Wie schnell ein Design unbedienbar wird# > Unbedienbares Design? och komm, da muss man schon wirklich viel verkehrt machen und erst recht nicht nur Empfehlungen missachten. Ist das so? Ich sehe mich ausnahmsweise @Gunnar Bittersmann wirklich beipflichten: Ein „Design“, das nicht tastaturbedienbar und klick-/touchbedienbar ist, ist unbedienbar - zumindest für denjenigen, der nur die fehlende der drei Bedienoptionen zur Verfügung hat. Und wie wir gesehen haben ist es gar nicht so einfach, ein Menü so zu bauen, dass es diesem Anspruch genügt - zumindest dann, wenn man untergeordnete Ebenen im Menü ausblenden will. Dabei ist es dann verlockend, es sich einfach zu machen und entweder Tastaturbedienbarkeit oder Klick-/Touchbedienbarkeit über Bord zu werfen. Passiert auf tausend Webseiten da draußen. Und ist unglaublich ärgerlich, wenn man mal wieder mit dem Mobil-Browser unterwegs ist. Man muss nicht wirklich viel verkehrt machen, um ein (für einige User) unbedienbares Design zu erhalten. --- #Was hat Semantik mit HTML zu tun# > Aber für wen ist die Semantik denn gut? Ähm. Wir sprechen hier über die *Hypertext* ***Markup*** *Language*. Markup, so wie in Auszeichnung, so wie in semantische Auszeichnung. Semantische Auszeichnung ist der (im ursprünglichen Sinn einzige!) Sinn und Zweck von HTML. > Wenn ich Semantik haben möchte, baue ich eine XML-Datei. HTML und XML sind verwandt. Und weißt du was? Auch in X**M**L steckt das Wort Markup. Fällt dir was auf? --- #Was Semantik bedeutet und was unsemantisch bedeutet# > Hier scheint Semantik aber zu bedeuten, jede aktuelle Neuerung in der Auszeichnung muss genutzt werden, weil sonst ist es nicht semantisch/unbedienbar. Nein. Semantik bedeutet, dass man versucht, für jeden Inhalt anhand der vorhandenen Auszeichnungsmöglichkeiten eine möglichst sinnstiftende Auszeichnung zu finden. Divs für tabellarische Daten zu verwenden ist unsemantisch, denn es gibt mit den Tabellenelementen eine sinnstiftendere Auszeichnung. Eine DIV für den Hauptinhalt der Seite zu verwenden ist unsemantisch, denn es gibt mit main ein sinnstiftenderes Element. Ja, das bedeutet, dass man in dem Moment, in dem man HTML schreibt, sich aller verfügbarer Elemente bedient, um möglichst sinnstiftende Elemente zu finden. Alles andere ist unsemantisch. Nein, das bedeutet nicht, dass eine Seite unbedienbar ist. Nicht jede perfekt semantische Seite ist unbedienbar und es gibt auch semantisch perfekte, aber unbedienbare Seiten. > Seltsam daran aber, dass vor der jeweiligen Neuerung die alte Vorgehensweise dann doch semantisch war. Wie gesagt, semantische Auszeichnung hat immer damit zu tun, die möglichst akkurate Auszeichnung unter den aktuell verfügbaren Auszeichnungsmöglichkeiten zu finden. Semantik ist doch schon an sich ein Begriff, der im Kontext „Sprache“ definiert ist. Das, was in einer Sprach(-version\|-e) semantisch ist, mag in einer anderen Sprach(-version\|-e) unsemantisch sein. Frühere HTML-Versionen waren statisch versioniert. Da konnten keine Elemente dazu kommen und daher hat sich der Grad der Semantik bei einmal semantisch ausgezeichneten Texten auch nie wieder verändert - bezogen auf die Sprachversion, in der ausgezeichnet wurde. HTML5 ist ein „living standard“. Das Hinzukommen neuer Elemente und damit die graduelle Abnahme des Grads der Semantik bei einem einmal semantisch ausgezeichneten Text in Bezug auf die Sprachversion, in der ausgezeichnet wurde, ist damit selbstverständlich und wohnt dem HTML-Standard inne. --- #Wozu eigentlich Semantik# > Aber für wen ist die Semantik denn gut? Semantik gibt einem Text eine Struktur und einen Sinn, der erfassbar ist, auch wenn man den Text nicht versteht. Das hilft ganz konkret allen automatischen Verarbeitern: Suchmaschinen, Browser, Screenreader … Semantisch ausgezeichneter Text macht das gesamte WWW aus und trägt in höchstem Maße dazu bei, dass Webseiteninhalte für **alle** verständlich sind - nicht nur für die, an die bei der Erstellung im Speziellen gedacht wurde. HTML und seine Semantik stellen sicher, dass ohne jedes CSS oder Javascript immer so klar wie möglich ist, um was für Inhalte es sich handelt. Davon profitieren letztlich alle Internet-Benutzer. ## Warum generische Elemente unsemantischer sind als existierende spezialisierte Elemente # Du hast im verlinkten Beitrag die Frage gestellt, warum es semantisch besser sein soll, `<main>` zu verwenden statt `<div id="main">`. Das ist eine berechtigte Frage. Ich möchte dir die Antwort mit einem Vergleich näher bringen. Sagen wir, die zugrundeliegende Sprache ist Deutsch. Du möchtest über ein Quadrat sprechen. Nun hast du mehrere Möglichkeiten, das zu tun: Du sprichst von: - geometrische Form mit vier Ecken und jeweils einem rechten Winkel sowie geraden Kanten - Viereck mit rechten Winkeln - Quadrat Die ersten beiden verwenden generische Begriffe und präzisieren durch nähere Beschreibungen, in unterschiedlichen Graden. Letzterer fasst alles in einem eigenen, fest definierten Fachbegriff zusammen. Alle drei Möglichkeiten sind inhaltlich völlig gleichwertig. Trotzdem gehört es zum natürlichen Sprachgebrauch dazu, einen präzisen Fachbegriff, sofern es einen gibt, zu verwenden, statt generische Begriffe mit näheren Beschreibungen zu versehen. Du kannst ja mal selbst versuchen, wie viele Menschen, da es den Fachbegriff Quadrat ja gibt, noch genau verstehen, was du mit *geometrische Form mit vier Ecken und jeweils einem rechten Winkel sowie geraden Kanten* meinst. Wenn du so kommunizierst hast du zwar das selbe gesagt - aber trotzdem nicht das gleiche Verständnis bei deinem Gegenüber erzeugt. Deshalb ist die Bezeichnung eines Quadrats als geometrische Form mit vier Ecken und jeweils einem rechten Winkel sowie geraden Kanten zwar nicht inhaltlich falsch, aber trotzdem unsemantisch - denn du nutzt nicht die semantischen Auszeichnungsmöglichkeiten der Sprache, um das präziser und weniger missverständnisanfällig zu fassen. Wenn du noch nicht verstehst, was ich mit missverständnisanfällig meine: Stell dir vor, du hast auf deiner Seite eine Beschreibung aller deutschen Flüsse und ihrer Eigenschaften und verwendest auch da das generische div - und erhältst: ~~~html <div id="rhein"> <p>Beschreibung des Flusses Rhein...</p> </div> <div id="donau"> <p>Beschreibung des Flusses Donau...</p> </div> <div id="main"> <p>Beschreibung des Flusses Main...</p> </div> ~~~ Ups. Woher genau weiß jetzt der Browser oder die Suchmaschine oder ..., dass das `<div id="main">` hier nicht das Hauptelement der Seite meint, sondern Inhalte zum Fluss Main beinhaltet? Richtig. Der Browser kann das nicht zweifelsfrei sagen. Deshalb missverständnisanfällig, denn die Attributwerte sind potenziell immer mehrdeutig. Ein eigenes Element ist immer eindeutig definiert und kann nicht falsch verstanden werden. Deshalb ist die Verwendung des extra dafür definierten Elements semantischer als die Verwendung des generischen Elements mit beschreibendem Attribut[^1]. [^1]: außer, wenn die Bedeutung der Attribute auch fest und eindeutig definiert sind, zum Beispiel wie in aria-... oder den Möglichkeiten von schema.org. Aber auch da gilt, dass neu definierte, spezialisierte Attributwerte semantischere Auszeichnung ermöglichen als generische und daher auch verwendet werden sollten. --- # Was unsemantische Auszeichnung ausmacht # > Aber das ist ja doch immer eine Diskussion hier ohne Resultat, daher nochmal die Bitte an dich @Gunnar Bittersmann (sozusagen sowieso als Barrierefreibotschafter hier) zum Statement/Artikel eines z.b. Marco Zehe. Ich habe das jetzt ausführlich gemacht, und ich glaube die Beispiele sind recht verständlich geworden. Ich hoffe du nimmst dir das zu Herzen und es klärt einige deiner offenen Fragen endlich. > Dabei geht's eigentlich ja auch so: > > ~~~HTML > <div class="topnav"> > <a class="active" href="#home">Home</a> > <a href="#news">News</a> > <a href="#contact">Contact</a> > <a href="#about">About</a> > </div> > ~~~ Deine Aussage ist genau dieselbe wie: Warum sagen wir eigentlich *„Die Diagonalen eines Parallelogramms halbieren einander“*, denn eigentlich gehts ja auch so: *„Die Verbindungsstrecken, die in gerader Linie die Ecken einer geometrischen Figur mit vier Ecken und zwei Kanten, die sich als Gerade verlängert nie schneiden würden, haben den Punkt, der von den genannten Ecken genau gleich weit entfernt ist und jeweils auf den genannten Linien liegt, gemeinsam.“* Ich denke die Frage beantwortet sich damit von selbst. --- Grüße, RIDER -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller # [Twitter](https://twitter.com/Camping_RIDER) # [Steam](http://steamcommunity.com/id/Camping_RIDER) # [YouTube](https://www.youtube.com/user/RidersFlame) # [Self-Wiki](http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER) # [Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[