Sposób na poprawne stworzenie listy w HTML

pytanie zadane 28 lipca 2017 w HTML i CSS przez imklau Nałogowiec (42,090 p.)

Hej! ;)

Tworzę listę pracowników, ale zastanawiam się, jaki sposób byłby najodpowiedniejszy. Będzie trochę tych pytań, bo podobne listy często pojawiają sie na stronach, więc mam nadzieję, że nie tylko mi się to przyda ;)

<ul class="employees-list">
	<li class="employee">
		<img class="employee__image" src="images/portrait1.jpg" alt="">
		<h3 class="employee__name"> Lorem Ipsum </h3>
		<p class="employee__info"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias omnis inventore vero, fugiat nam possimus. Saepe, facere quis voluptate cupiditate. </p>
	</li>
	<li class="employee">
		<img class="employee__image" src="images/portrait1.jpg" alt="">
		<h3 class="employee__name"> Lorem Ipsum </h3>
		<p class="employee__info"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias omnis inventore vero, fugiat nam possimus. </p>
	</li>
	<li class="employee">
		<img class="employee__image" src="images/portrait1.jpg" alt="">
		<h3 class="employee__name"> Lorem Ipsum </h3>
		<p class="employee__info"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias omnis inventore vero, fugiat nam possimus. Saepe, facere quis voluptate cupiditate. </p>
	</li>
</ul>

Nie przeszkadza to, że w elemencie <li> jest tyle elementów? Nawet jakbym dodała tam jeszcze ze dwa paragrafy i span?
Oglądałam jakiś czas temu filmik na kodu.je, gdzie był oceniany czyjś kod i Damian stwierdził, że przy <section class="team"> poszczególni pracownicy (ze zdjęciem, opisem) zamiast <li> nawet lepiej jakby byli, jako <article>. To dobry pomysł?
Biorąc pod uwagę, że nagłówek sekcji z pracownikami mam pod <h2> to nazwiska mogą być pod <h3> ? Czy lepiej jako <p> je dać?
Altem powinno być tylko imię i nazwisko pracownika?
Bo widziałam też alt="John Smith photo". Które jest lepsze? Czy może to nie ma różnicy?

Pod warunkiem, że do punktu 1 nie ma zastrzeżeń to może element listy powinien wyglądać tak:

<li class="employee">
    <figure>
         <img class="employee__image" src="images/portrait1.jpg" alt="">
         <figcaption class="employee__info">
              <h3 class="employee__name"> Lorem Ipsum </h3>
              <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias omnis inventore vero, fugiat nam possimus. Saepe, facere quis voluptate cupiditate. </p>
         </figcaption>
   </figure>
</li>

Jakby był ktoś tak miły i wytłumaczył mi w jakich sytuacjach stosować <figure> i <figcaption> zamiast <img> i powiedzmy <p> pod spodem to byłabym baardzo wdzięczna, bo nie potrafię tego zrozumieć :(

komentarz 28 lipca 2017 przez xmentor Nałogowiec (49,520 p.)

Altem powinno być tylko imię i nazwisko pracownika?
Bo widziałam też alt="John Smith photo". Które jest lepsze? Czy może to nie ma różnicy?

U Ciebie powinien być pusty, bo później masz .employee__name - byłaby to niepotrzebna duplikacja.

komentarz 29 lipca 2017 przez imklau Nałogowiec (42,090 p.)

hmm no właściwie w ten sposób o tym nie pomyślałam, dzięki ;)

2 odpowiedzi

odpowiedź 28 lipca 2017 przez E1 Obywatel (1,810 p.)

Jakby był ktoś tak miły i wytłumaczył mi w jakich sytuacjach stosować <figure> i <figcaption> zamiast <img> i powiedzmy <p> pod spodem to byłabym baardzo wdzięczna, bo nie potrafię tego zrozumieć :(

Figure z figcaption ogólnie stosuje się do ilustracji. To jak w książce, masz rysunek i podpis do niego. W ten sposób przeglądarka/czytnik wie że te elementy się ze sobą wiążą i w rezultacie używając asystenta głosowego można je traktować jako kompozycję. Dlatego sądzę że pisząc w HTML5 należy używać ich praktycznie zawsze (w tym kontekście).

komentarz 29 lipca 2017 przez imklau Nałogowiec (42,090 p.)

Już podobne wyjaśnienie czytałam, obrazek + podpis do obrazka, czyli w moim przypadku to jest dobre rozwiązanie i powinnam zastosować figure + figcaption? Czy to dużo zmieni, jak tego nie zrobię i zostawię tak, jak jest?

1	komentarz 25 lutego 2018 przez Comandeer Guru (600,810 p.) Nie tylko do ilustracji, bo w figure można zamykać tabele, cytaty, listingi kodu etc. Słowem: do figure można włożyć wszystko, co da się wyciągnąć do aneksu (np. Spis ilustracji, spis cytatów etc.).