korrektes (semantisches) verschachteln von dl - dt - dd Definitionslisten

[einsiedler]

Hallo liebe Forumer, es geht mir heute um das korrekte (semantische) verschachteln von

dl - dt - dd Definitionslisten.

Leider benötige ich dies aktuell und es ist derzeit noch fehlerhaft

dl - dt - dd Definitionslisten Demo-Seite

FALSCH ist es wohl auf jeden Fall so:

<dl>
	<dt>Verant&shy;wortlich für diese Seite ist:</dt>
	<dd>
		<dl class="txtform_adress">
			<dt>ich bins</dt>
			<dd>demo-str.123</dd>
			<dd>48155 Münster</dd>
			<dd>Deutschland</dd>
			<dd>Tel.:  [phone]</dd>							
		</dl>
		<dl class="texform_mail">
			<dt>E-Mail</dt>
			<dd>demo<span>[punkt]</span>email<span>[ät]</span>demosite<span>[punkt]</span>de</dd>
			<dd>kontakt<span>[unterstrich]</span>ich<span>[ät]</span>meineseite<span>[punkt]</span>de</dd>
		</dl>
	</dd>
</dl>

Also das dort oben wäre FALSCH, das weiß ich nun.

Wie würde es richtig gehen?

In etwas so (2te Versuch - eventuell auch FALSCH!)

<dl>
	<dt>Verant&shy;wortlich für diese Seite ist:</dt>
	<dd>
		<dl class="txtform_adress">
			<dt>ich bins</dt>
			<dd>demo-str.123</dd>
			<dd>48155 Münster</dd>
			<dd>Deutschland</dd>
			<dd>Tel.:  [phone]</dd>							
		</dl>
  </dd>
  <dd>
		<dl class="texform_mail">
			<dt>E-Mail</dt>
			<dd>demo<span>[punkt]</span>email<span>[ät]</span>demosite<span>[punkt]</span>de</dd>
			<dd>kontakt<span>[unterstrich]</span>ich<span>[ät]</span>meineseite<span>[punkt]</span>de</dd>
		</dl>
	</dd>
</dl>

Ich möchte den jeweiligen beiden Abschnitten eine individuelle Farbe, Rahmung und bestimmte Abstände vergeben. Sowie den spans innerhalb der Klasse textform_mail eine andere Farbe, Größe und rechts und links bestimmte Abstände.

Wie macht man dies richtig (mit der Struktur)?

Wenn man mal weiterschaut (siehe den Link zur Seite! und weiter runter scrollen) wird es bei den Nutzungsbedingen und den Datenschutzrichtlinien (unten) noch ein wenig kniffeliger mit der Strukturierung der dl - dt und dd`s.

Also, wie macht man es richtig das mit dem verschachteln der dl - dt und dd`s.

LG der einsiedler

[Rolf B]

Hallo einsiedler,

die HTML-Syntax ist in beiden Fällen richtig. Man kann sowohl mehrere <dd> für ein <dt> verwenden, als auch <dl> in <dd> schachteln.

Aber die Semantik? <dl> steht für Description List, also eine Liste von Beschreibungen. Die so gelisteten Beschreibungen sollten einem einheitlichen Schema folgen, sonst ist es nicht wirklich eine Liste, das ist bei Dir nicht der Fall. Einmal ist dein Name im <dt> - aber beschreibt deine Adresse deinen Namen? Und das andere Mal ist es <dt>E-Mail</dt> - das würde ich eher als eine Überschrift als einen beschriebenen Begriff ansehen.

Nach meiner Auffassung wäre es so:

• Dein Name und "Rauminstallationen" sind die h1 Überschrift. Im <h1> kannst Du deinen Namen und "Rauminstallationen" in <span> einschließen und mit display:flex nach links und rechts ausrichten. Nach meiner Auffassung ist es nicht richtig, einen "Untertitel" zum <h1> als <h2> zu markieren.
• Die 4 Links "Zurück", "Impressum", "Nutzungsbedingungen" und "Datenschutzrichtlinien" sind allesamt keine Überschrift, sondern alle 4 gehören ins <nav>. Du kannst sie ja trotzdem mittels <p> oder <div> Elementen so anordnen, wie sie jetzt stehen.
• Das "Impressum" im grünen Rahmen - das ist eine <h2> Überschrift. Der Text "Verantwortlich...ist:" ist ein <p>. Dein Name ist ein <p>. Deine Adresse ist auch ein <p> (dem Du white-space: pre geben kannst damit die Umbrüche dem HTML Source folgen, oder Du nimmst <br>).
• E-Mail ist auch nur ein <p>. Man könnte höchstens überlegen, ob der "Verantwortlich" und "E-Mail" Absatz ein h3 sind. Aber dann beide oder keiner, sie sind logisch auf gleicher Ebene.
• Die Mailadressen könnten ein <p> sein, oder vielleicht auch eine <ul>. Aber sowas hat Folgen für Screenreader, eine Liste kündigen sie als Liste an.
• Rechtliche Hinweise ist dann wieder ein <h2>.

Wie gesagt - meine persönliche Meinung. Mag falsch sein.

Rolf

[Matthias Apsel]

Hallo Rolf B,

• Die 4 Links "Zurück", "Impressum", "Nutzungsbedingungen" und "Datenschutzrichtlinien" sind allesamt keine Überschrift, sondern alle 4 gehören ins <nav>.

Besser in ein div, denn nav ist für die Hauptnavigation vorgesehen.

Wie gesagt - meine persönliche Meinung. Mag falsch sein.

Semantik liegt im Auge des Erstellers. Auf jeden Fall folge ich in diesem Fall eher deiner Meinung als des Einsiedlers Konstruktion.

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

Besser in ein div, denn nav ist für die Hauptnavigation vorgesehen.

Müsste das Element dann eigentlich besser 'mainnav' heißen?

Gruß
Kalk

[Rolf B]

Hallo Matthias,

Besser in ein div, denn nav ist für die Hauptnavigation vorgesehen.

Ich wage zu widersprechen. Im SelfWiki steht:

Nicht alle Gruppen von Links auf einer Seite müssen in einem nav-Element gruppiert sein - das Element ist in erster Linie für die Hauptnavigation gedacht.

(Fettsatz von mir)

In der Spec ist ein Beispiel mit zwei <nav> - eins für die übergreifende Navigation und eins für Navigation zu Hash-Targets innerhalb der Seite.

Aber unabhängig davon gibt's auf der Seite eh nur diese vier Navigationslinks, das ist dort also die Hauptnavigation.

Rolf

[Christian Kruse]

Hallo Rolf,

Besser in ein div, denn nav ist für die Hauptnavigation vorgesehen.

Ich wage zu widersprechen. Im SelfWiki steht:

Nicht alle Gruppen von Links auf einer Seite müssen in einem nav-Element gruppiert sein - das Element ist in erster Linie für die Hauptnavigation gedacht.

(Fettsatz von mir)

In der Spec ist ein Beispiel mit zwei <nav> - eins für die übergreifende Navigation und eins für Navigation zu Hash-Targets innerhalb der Seite.

Naja, die Spec sagt aber auch sehr deutlich, dass das für „major navigation blocks“ vorgesehen ist. Und bringt auch ein Beispiel, um das zu verdeutlichen. Matthias hat also schon recht mit dem, was er geschrieben hat; „vorgesehen“ heisst ja auch nicht „für den Rest verboten.“

Freundliche Grüße,
Christian Kruse

[Rolf B]

Hallo Christian,

„vorgesehen“ heisst ja auch nicht „für den Rest verboten.“

So wie Matthias das schrieb, läuft es aber auf das Verbot hinaus. Zumindest in meinen Augen. Aber wenn es anders gemeint war, sind wir uns ja alle einig 😀

Rolf

[Christian Kruse]

Hallo Rolf,

Aber wenn es anders gemeint war, sind wir uns ja alle einig 😀

Schrecklich, wo bleibt das Drama?! 😜

Freundliche Grüße,
Christian Kruse

[JürgenB]

Hallo Christian;

Schrecklich, wo bleibt das Drama?! 😜

für das Drama sorgen die Verfasser der Spec's, die reichlich Raum für erklärende (Blog-)Artikel lassen.

Gruß
Jürgen

[Felix Riesterer]

Lieber JürgenB,

Spec's

juhuu, schon lange keine Apostrophitis mehr gesehen.

Liebe Grüße

Felix Riesterer

[JürgenB]

Hallo Felix,

Spec's

juhuu, schon lange keine Apostrophitis mehr gesehen.

und ich dachte, das Weglassen von ification würde ein ' rechtfertigen.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

und ich dachte, das Weglassen von ification würde ein ' rechtfertigen.

Nö. Wenn, dann einen Apostroph ’. Für ' in Fließtext gibt es kaum eine Rechtfertigung.

Aber IMHO auch keinen Apostroph bei der Kurzform eines Worts. Um eine solche handelt es sich ja hier: Nom. Sg. die Spec, Nom. Pl. die Specs, Gen. Pl. der Specs.

Bei einer Auslassung müsste es ja so sein: Nom. Sg. die Spec’, Nom. Pl. die Spec’en, Gen. Pl. der Spec’en.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Raketenschriftmaler]

Das MDN sagt zu <nav> wie folgt:

1. Es ist nicht nötig, dass alle Links in einen <nav> Element enthalten sind. Die Benutzung von <nav> ist nur für wichtige Abschnitte von Navigationslinks beabsichtigt; normalerweise enthält das <footer> Element eine Liste von Links, welche nicht in einem <nav> Element beinhaltet sein müssen.
2. Ein Dokument darf mehrere <nav> Elemente enthalten, zum Beispiel, eins für die Seitennavigation und eins für seiteninterne Navigation. aria-labelledby kann benutzt werden um Barrierefreiheit zu fördern (siehe Beispiel).
3. User-Agents, wie Bildschirmleser zur Unterstützung von Menschen mit Behinderung, können dieses Element benutzen, um zu entscheiden, ob das anfängliche Rendering von Navigationsinhalt ausgelassen werden kann.

Ich denke, Punkt 3 erklärt zusammen mit Punkt 1 viel: <nav> macht (SEO-Kram mal außen vor) mit Screenreadern den meisten Sinn, weil man die so einstellen kann, dass die Navigation nach dem Inhalt (oder einem Überspringen desselben) vorgelesen wird. Deshalb der explizite Hinweis, dass der „Umfasser“ (→„tag“) für Links im Footer nicht notwenig erscheint. (Ich frage mich gerade, warum ich eigentlich versuche, die Navigation(en) am Ende zu notieren…)

[Gunnar Bittersmann]

@@Matthias Apsel

Besser in ein div, denn nav ist für die Hauptnavigation vorgesehen.

Nö. nav ist für Navigationen (Plural!) vorgesehen.

Wobei wenn es mehrere davon gibt, jede ein accessible label haben sollte – eine Überschrift, die visuell versteckt werden kann.

„Impressum“, „Nutzungsbedingungen“ und „Datenschutzrichtlinien“ sind aber keine Navigationspunkte, da stimme ich mit dir überein, dass die nicht in ein nav gehören. Statt div darf es auch footer sein. Oder aside.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Gunnar,

„Impressum“, „Nutzungsbedingungen“ und „Datenschutzrichtlinien“ sind aber keine Navigationspunkte, da stimme ich mit dir überein, dass die nicht in ein nav gehören

Im Allgemeinen würde ich zustimmen, aber das ist ja die Seite, die diese 3 Themen bündelt. Da kann man schon einen Verteiler obenhin setzen.

Rolf

[JürgenB]

Hallo

Nö. nav ist für Navigationen (Plural!) vorgesehen.

Wobei wenn es mehrere davon gibt, jede ein accessible label haben sollte – eine Überschrift, die visuell versteckt werden kann.

auf einer meiner Seite sieht das Inhaltsverzeichnis so aus:

<nav id="Inhalt">
	<h2>Inhalt</h2>
	<ul>
		<li><a href="#…">…</a></li>
		<li><a href="#…">…</a></li>
		…
	</ul>
</nav>

Ein Site-Navigation mit <nav id="sitenav">, die aber nur Links enthält und keine Überschrift, gibt es auch noch.

Brauche ich da jetzt noch accessible label?

Gruß
Jürgen

[jensp]

Hallo Jürgen,

Ein Site-Navigation mit <nav id="sitenav">, die aber nur Links enthält und keine Überschrift, gibt es auch noch.

Brauche ich da jetzt noch accessible label?

wenn keine Überschrift vorhanden ist: Wäre sinnvoll. Wenn schon eine Überschrift vorhanden ist, dann nicht.

Der korrekte Name für das ganze ist übrigens Accessible Name, zumindest in den Standards bezüglich Barrierefreiheit. Wie der ermittelt werden soll, ist hier beschrieben: https://www.w3.org/TR/accname-1.2/

Im Firefox kann man in den Entwicklertools unter dem Reiter Barrierefreiheit sehen, welche Namen Firefox für die Elemente einer Seite ermittelt hat.

Viele Grüße

Jens

[JürgenB]

Hallo Jens,

danke. Ich ändere es jetzt in

<nav id="sitenav" aria-labelledby="sitenav-label">
	<h2 id="sitenav-label" class="visually-hidden">Site-Navigation</h2>

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

<nav id="Inhalt">
	<h2>Inhalt</h2>
	<ul>
		<li><a href="#…">…</a></li>
		<li><a href="#…">…</a></li>
		…
	</ul>
</nav>

Ein Site-Navigation mit <nav id="sitenav">, die aber nur Links enthält und keine Überschrift, gibt es auch noch.

Brauche ich da jetzt noch accessible label?

(Screenreader-)Nutzer, die sich von landmark zu landmark bewegen, sollten erfahren, in welchem Bereich sie sich gerade befinden. Jeder dieser Bereiche (z.B. main, header, nav) sollte ein accessible label haben.

IIRC ist eine Überschrift am Anfang des Bereichs hinreichend; aber ich mag da auch irren. Möglicherweise müsste die auch verknüpft werden:

<nav id="page-nav" aria-labelledby="page-nav-label">
  <h2 id="page-nav-label">Auf dieser Seite</h2>
  ⋮
</nav>

„Inhalt“ ist kein glücklich gewähltes accessible label. Handelt es sich um den Inhalt auf der Website (die Hauptnavigation)? Oder um den Inhalt auf der aktuellen Seite?

Wenn da wirklich „Inhalt“ stehen soll, könnte man das so machen:

<nav id="page-nav" aria-label="Auf dieser Seite">
  <h2 id="page-nav-label">Inhalt</h2>
  ⋮
</nav>

Aber besser ist wohl, auch für Sehende eine eindeutige Bezeichnung zu wählen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[JürgenB]

Hallo Gunnar,

für die Hauptnavigation habe ich es jetzt so gemacht:

https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation

Für die Unternavigation auf einigen meiner Seiten werde ich auf die Überschrift "Inhalt dieser Seite" mit einem aria-labelledby verweisen.

Gruß
Jürgen

[einsiedler]

Ähm liebe Leute , bei den drei Punkten handelt es sich um keine Navigation , wenn ihr sie mal betätigen würdet dann seht ihr es, es sind Sprungmarken innerhalb der privacy.php zu den Punkten Impressum , Nutzungsbedingungen & Datenschutzrichtlinien

Also wie verhält es sich es nun?

der einsiedler

[Rolf B]

Hallo einsiedler,

Navigation: Funktionalität, die das Anspringen eines bestimmten Inhalts ermöglicht.

Kann zum Beispiel sein:

• Link auf andere Seite, ohne Hash-Anteil
• Link auf andere Seite, mit Hash-Anteil
• Link auf ein href das nur aus Hash-Anteil besteht
• Button, auf der aktuellen Seite Inhalte austauscht (Ajax)
• Select Element für n Themen mit Auto-Postback (JavaScript) oder ANZEIGEN Button
• Area-Map

Die beiden letzten würde ich jetzt nicht unbedingt als <nav> Inhalt empfehlen.

Rolf

[einsiedler]

Äähm liebe Leute, nun ist die Verwirrung bei mir gross:

Wäre es also richtig wenn ich meine interne sitemap zu den sprungmarken dann so gestalte:

<aside class="sitemap">
    <h3>Sprungmarke</h3>
    <ul>
				<li><a href="#impressum">Impressum</a></li>
				<li><a href="#nutzungsbedingungen">Nutzungsbedingungen</li>
				<li><a href="#datenschutzrichtlinien">Datenschutzrichtlinien</li>
    <ul>
</aside>

den Ankerlink in der Mitte der Seite die wieder nach oben verweist dann so:

<aside class="sitemap">
    <h3>Sprungmarke</h3>
		<ul class="anker_link">
				<li><a href="#top">zum Seitenanfang</a></li>
		</ul>
</aside>

Und ganz unten am Ende der Seite dann so:

<aside class="sitemap">
    <h3>Sprungmarke</h3>
		<ul class="anker_link">
			<li><a href="#top">zum Seitenanfang</a></li>
      <li><a href="/login.php">Zurück zum Login</a></li>
		</ul>
</aside>

Wobei ich die jeweiligen < h3 > im CSS mit display: none; visibility: hidden; ausblende!

Wäre das so nun korrekt so?

der einsiedelnde