it-swarm.com.de

Was wäre die beste Methode, um Überschriften/Titel für <ul> oder <ol> zu kodieren? Wie haben wir <caption> in <table>?

Was wäre die beste Methode, um Überschrift/Titel von <ul> oder <ol> zu kodieren? Wir haben <caption> in <table> und wollen sie nicht fett machen.

Ist das okay?

<p>heading</p>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

Oder sollten Überschriften immer verwendet werden?

<h3|4|5|6>heading</h3|4|5|6>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>
50
Jitendra Vyas

Verwenden Sie immer Überschriften für Überschriften. Der Hinweis ist im Namen :)

Wenn Sie nicht möchten, dass sie fett gedruckt werden, ändern Sie ihren Stil mit CSS. Zum Beispiel:

HTML:

<h3 class="list-heading">heading</h3>

<ul> 
    <li>list item </li>
    <li>list item </li>
    <li>list item </li>
</ul>

CSS

.list-heading {
    font-weight: normal;
}

In HTML5 können Sie die Überschrift und die Liste mithilfe des <section>-Elements deutlicher verknüpfen. (<section> funktioniert jedoch in IE 8 und früheren Versionen ohne JavaScript nicht richtig.)

<section>
    <h1>heading</h1>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</section>

Sie könnten etwas Ähnliches in HTML 4 machen:

<div class="list-with-heading">
    <h3>Heading</h3>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</div>

Dann stylen Sie so:

.list-with-heading h3 {
    font-weight: normal;
}
37
Paul D. Waite

Obwohl dies alt ist, aktualisiere ich es für andere, die diese Frage bei einer späteren Suche möglicherweise finden.

@Matt Kelliher:

Die Verwendung des css : before und eines data- * -Attributs für die Liste ist eine großartige Idee, kann aber leicht modifiziert werden, um auch für Handicaps zugänglich zu sein:

HTML:

<ul aria-label="Vehicle Models Available:"> 
    <li>Dodge Shadow</li>
    <li>Ford Focus</li>
    <li>Chevy Lumina</li>
</ul>

CSS:

ul:before{
    content:attr(aria-label);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

Dadurch wird eine Liste mit dem Pseudoelement "header" darüber erstellt, wobei der Text auf den Wert im Attribut "aria-label" gesetzt ist. Sie können es dann ganz einfach an Ihre Bedürfnisse anpassen. 

Der Vorteil gegenüber einem data- * -Attribut besteht darin, dass aria-label von Screenreadern als "label" für die Liste abgelesen wird. Dies ist semantisch für Ihre beabsichtigte Verwendung dieser Daten.

Hinweis:IE8 unterstützt: before-Attribute, muss jedoch die Single-Colon-Version verwenden (und muss einen gültigen Doctype definiert haben). IE7 unterstützt nicht: vorher, aber Modernizer oder Selectivizr sollten dieses Problem für Sie beheben. Alle modernen Browser unterstützen die ältere: vor der Syntax, bevorzugen jedoch die Verwendung der Syntax :: vor. Im Allgemeinen ist dies am besten, wenn Sie ein externes Stylesheet für IE7/8 verwenden, das das alte Format verwendet, und ein allgemeines Stylesheet, das das neue Format verwendet. In der Praxis wird jedoch meist nur das alte Format mit einem Doppelpunkt verwendet, da es noch zu 100% gekreuzt ist Browser, auch wenn technisch nicht gültig für CSS3.

32
Erasmus

Ich benutze gerne das css :before und ein data-* Attribut für die Liste

HTML:

<ul data-header="heading"> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

CSS:

ul:before{
    content:attr(data-header);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

Dadurch wird eine Liste mit dem Header erstellt, der dem als data-header-Attribut der Liste angegebenen Text entspricht. Sie können es dann ganz einfach an Ihre Bedürfnisse anpassen.

8
Matt Kelliher

wie wäre es, wenn Sie die Überschrift zu einem Listenelement mit verschiedenen Stilen machen?

<ul>
 <li class="heading">heading</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
</ul>

und das CSS

ul .heading {font-weight: normal; list-style: none;}

verwenden Sie zusätzlich ein Reset-CSS, um Ränder und Füllungen direkt auf Ul und Li festzulegen. hier ist eine gute Reset-CSS. Nachdem Sie die Ränder und Füllungen zurückgesetzt haben, können Sie einen Rand für die Listenelemente verwenden, die sich von denen der Überschriftenklasse unterscheiden.

4
pixeltocode

Wäre die Verwendung von <caption> erlaubt?

<ul>
  <caption> Title of List </caption>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ul>
1
phonedog365

h3 ist absolut eine bessere Lösung als h2, h1 oder h6!

  1. Sie müssen eine bestimmte Stufe verwenden: Wenn Sie sich in einem h1 befinden, verwenden Sie h2, wenn Sie sich in einem h5 befinden, verwenden Sie h6 (wenn Sie sich in einem h6 ... summen, verwenden Sie strong oder em zum Beispiel). Es ist keine Verpflichtung, sondern eine Frage der Zugänglichkeit ( Hier grüner Teil ).

  2. Sie müssen der Liste keinen Titel geben ... weil dieses Element nicht existiert. Der Bildschirmleser verwendet also nichts Besonderes. 

Daher ist die Verwendung von Hn wahrscheinlich eine der besten Lösungen, aber sicherlich keine bestimmte Stufe.

0
Alysko