HTML semantico: elenco di utenti

Come dovrei marcare un elenco di utenti?

Ogni utente ha un nome, un’immagine e un titolo di lavoro.

utente

Com’è questo?

Venmo

Employees

Devo rimuovere gli elementi article ? Devo rimuovere gli elementi ul & li ?

Questo non è tanto un elenco di utenti come una tabella di dati sugli utenti. Ogni utente ha un’immagine, un nome e un titolo di lavoro. Questo ti dà righe e colonne.

 table { display: block; } tr { display: block; overflow: auto; clear: left; margin-bottom: 10px; } td { display: block; width: 200px; } td:first-child { float: left; width: auto; } td:nth-child(2) { margin-left: 60px; padding-bottom: 6px; border-top: solid grey 2px; } td:nth-child(3) { margin-left: 60px; padding-top: 6px; border-bottom: solid grey 2px; } 
 
Jane Smith Software Engineer
Jane Smith Software Engineer
Jane Smith Software Engineer

Secondo HTML5 W3C Recommendation: 4.4.7 L’elemento li :

Nota: Sebbene sia conforms a includere gli elementi di intestazione (es. h1 ) all’interno degli elementi li , probabilmente non trasmette la semantica voluta dall’autore. Un’intestazione inizia una nuova sezione, quindi un’intestazione in un elenco divide implicitamente l’elenco in più sezioni.

Quindi, rimuovi gli elementi ul & li .