• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Sposób na poprawne stworzenie listy w HTML

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
437 wizyt
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>
  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ć :(

1
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

+1 głos
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 (605,800 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.).

0 głosów
odpowiedź 25 lutego 2018 przez modular Użytkownik (520 p.)
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?

Podobne pytania

0 głosów
1 odpowiedź 174 wizyt
pytanie zadane 10 lipca 2018 w HTML i CSS przez Biay Początkujący (420 p.)
0 głosów
3 odpowiedzi 647 wizyt
pytanie zadane 20 lutego 2020 w HTML i CSS przez UnexoN Nowicjusz (200 p.)
0 głosów
1 odpowiedź 176 wizyt

93,096 zapytań

142,059 odpowiedzi

321,513 komentarzy

62,441 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...