Cum pot grupa semantic un antet cu un UL în HTML? (Programare, Html)

Da – că Jake. a intrebat.

Am un document HTML în care aș dori să grupez semantic un text la capul unui UL ca „antet”. Încercarea inițială arată astfel:

    <ul id="databases">
        Databases:
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>

Validatorul W3C semnalează că nu este permis text în interiorul unui UL, dar în afara unui LI. Aș putea să pun textul în interiorul unui LI, apoi să folosesc pseudo-clasa :first-child pentru a găsi „antetul” în CSS-ul meu, dar este clar că aceasta nu este modalitatea corectă din punct de vedere semantic.

Cum pot gestiona corect acest lucru?

Comentarii

  • Posibil duplicat al Cea mai bună practică pentru a furniza o legendă, un titlu sau o etichetă pentru o listă în HTML –  > Por daiscog.
8 răspunsuri
Nick Allen

Nu ar trebui să fie setat în primul li, deoarece acest lucru ar presupune o relație de frate cu elementele li precedente, în timp ce antetul este mai important în ierarhie. Imaginați-vă cititoarele de ecran etc.

<h2>Databases:</h2>
<ul id="databases">        
    <li>Microsoft SQL Server - 10+ years</li>
    <li>Sybase SQL Server - 5 years</li>
    <li>Oracle - 5 years</li>
</ul>

Schimbați h2 cu un h(n) în funcție de ierarhia în raport cu celelalte anteturi din pagină. Pentru a direcționa antetul în css, dați-i doar o clasă dacă există alte anteturi care vor avea același stil, de ex.

<h2 class="subHeader">Languages:</h2>
<ul id="languages">        
    <li>English</li>
    <li>Chinese</li>
    <li>French</li>
</ul>

În caz contrar, atribuiți-i un id

Pup

Doar pentru referință, HTML 3.0 avea <lh>:

<ul>
    <lh>This is a list header!
    <li>Item A
    <li>Item B
    <li>Item C
</ul>

Comentarii

Nima Foladi

Ați putea încerca tag-ul „Definition List” în scopul listării. Veți obține un cod mult mai curat.

<dl>
  <dt>Databases</dt>
   <dd>Microsoft SQL Server - 10+ years</dd>
   <dd>Sybase SQL Server - 5 years</dd>
   <dd>Oracle - 5 years</dd>
  <dt>Second heading</dt>
   <dd>Item 1</dd>
   <dd>Item 2</dd>
   <dd>Item 3</dd>
</dl>

Mai multe informații despre Definition List aici http://www.w3schools.com/tags/tag_dl.asp

Comentarii

  • Este bun pentru informații de contact? De exemplu <dt>Numere de telefon</dt><dd>x-xxx-xxx…<dd> ? Adică este corect din punctul de vedere al roboților de căutare sau al indexatorilor. Nu ar fi rău pentru SEO? Sau poate că tag-ul clasic <ul> este mai potrivit pentru o listă obișnuită de informații, cum ar fi lista de contacte sau lista personalului companiei? –  > Por remort.
  • Poate doriți să aruncați o privire la microformatul hcard pentru informații de contact: microformats.org/wiki/hcard –  > Por Jeff S..
  • @remort: dt/dd este perfect pentru informații de contact. –  > Por Bergi.
chharvey
<section>
    <h1>Databases:<h1>
    <ul>
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>
</section>

sau chiar mai bine

<section>
    <h1>Databases:</h1>
    <dl>
        <dt>Microsoft SQL Server</dt> <dd>10+ years</dd>
        <dt>Sybase SQL Server</dt>    <dd>5 years</dd>
        <dt>Oracle</dt>               <dd>5 years</dd>
    </dl>
</section>

Rețineți că h1 se limitează la section, , astfel încât să nu existe ambiguitate dacă conținutul care urmează după listă aparține rubricii Baze de date. Cu alte cuvinte, titlul este cu domeniu de aplicare în cadrul secțiunii.

fbas

iată un răspuns alternativ:

<ul id="databases">
        <li style="list-style:none"><strong>Databases:</strong></li>
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>

avantajul acestui lucru este că puteți utiliza mai multe dintre aceste „titluri” în cadrul UL fără a le împărți în UL-uri separate și fără spațiul alb implicit pe care îl provoacă (sau folosind CSS pentru a elimina spațiul alb…).

Comentarii

  • Funcționează, dar dacă folosiți o listă ordonată, va trebui să adăugați și proprietatea start la tag-ul ol (și de obicei setată la 0 în loc de 1, valoarea implicită). –  > Por Silviu Burcea.
jackbot

Sau să vă aninați listele în felul următor

<ul>
    <li>Databases</li>
    <li>
        <ul>
            <li>Microsoft SQL Server - 10+ years</li>
            <li>Sybase SQL Server - 5 years</li>
            <li>Oracle - 5 years</li>
        </ul>
    </li>
</ul>

daiscog

Conform răspunsului meu la această întrebare, mi se pare că HTML5 figure și figcaption cele mai potrivite:

<figure>
    <figcaption>Databases</figcaption>
    <ul>
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>
</figure>

Sau, alternativ, pseudo-elementul ::before de la CSS3 poate fi o soluție bună:

HTML:

<ul title="Fruit">
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

CSS:

ul[title]::before {
    content: attr(title);
    /* then add some nice styling as needed, eg: */
    display: block;
    font-weight: bold;
    padding: 4px;
}

Comentarii

  • Acest lucru este acceptabil, dar trebuie doar să fie conștienți de faptul că <figcaption> elementele nu se adaugă la conturul documentului. Prin urmare, figurile și titlurile de figură vor fi sărite atunci când utilizatorii/tehnologia de asistență sar de la o secțiune la alta sau de la un titlu la altul. –  > Por chharvey.
Roman

Poate ceva de genul acesta:

<div>
 <span>Databases:<span>
 <ul id="databases">
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
 </ul>
 </div>

Comentarii

  • Nu aș folosi o etichetă span pentru a reprezenta un antet atunci când există etichete de antet deja definite în specificații.  > Por Nick Allen.

Tags: