Sposób na poprawne stworzenie listy w HTML

Question

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>

1. Nie przeszkadza to, że w elemencie <li> jest tyle elementów? Nawet jakbym dodała tam jeszcze ze dwa paragrafy i span?
2. 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ł?
3. 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ć?
4. 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?
5. 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ć :(

Comments

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.

---

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

Answer 1

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).

Comments

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?

---

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.).

Answer 2

Hej, odświeżę nieco temat gdyż sam tworzę podobną listę i też zastanawiam się jak to powinno wyglądać poprawnie, więc jaka jest ostatecznie dobra praktyka? figure + figcaption?