Semantyka - czego użyć do zdjęć

Question

Witam!

Chciałbym się zapytać jakiego znacznika semantycznego powinienem użyć do kontenera ze zdjęciami. Wydaje mi się że <article> ale nie jestem pewien więc chciałem się  dopytać.

Dziękuję za poświęcony czas!

Answer 1

<figure>  z lub bez <figcaption>  

poniżej przykład użycia:

<figure>
  <img src="/macaque.jpg" alt="Macaque in the trees">
  <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>

więcej na:

http://html5doctor.com/the-figure-figcaption-elements/

Comments

Ok i powinno być tak?:

<div class="container">
       <figure>
          <img src="/macaque.jpg" alt="Macaque in the trees">
          <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
        </figure>
</div>

 

---

Zależy też czy chcesz mieć galerię itp. - jeżeli galerię w jakimś artykule to <article> jako otaczający cały wpis, a <section> do samej galerii, a w galerii <figure> i <figcaption> dla poszczególnych zdjęć jeżeli chcesz mieć zdjęcia z opisem.

Ale czy jest sens aż tak bardzo się zagłębiać? Może wystarczyło by <section> w nim jakiś nagłówek <h2> z opisem, że to galeria no i <img>

Edit:

A do powyższego to zamiast diva to lepiej <section class="container"> no i w section jakiś nagłówek by musiał być aby było semantycznie :)

---

Czyli wystarczy tak:

<div class="container"> 
          <section> 
              <h2>galeria</h2>
                    <br><img src="image.jpg">
          </section>
</div>

 

---

Ok zrobię tak jak mówisz

---

wiesz, dużo zależy od kontekstu tej galerii, gdzie ona ma się znajdować i czy ma być istotna dla danej strony / dokumentu czy też nie.

Jeżeli galeria jest ważna dla całego dokumentu, ale umiejscowienie jej nie jest istotne to możesz używać <figure> i <figcaption>. 

Jeżeli umiejscowienie na stronie jest istotne to użyj np. <section>

W innych przypadkach użyj <aside>

Przetłumaczyłem podsumowanie z: https://stackoverflow.com/questions/12260838/what-element-should-a-gallery-be-in-html5

Ale co do Twojego kodu -  do tagu <img>, aby było w pełni semantycznie dodaj atrybut `alt`

---

Ok więc myślę że najlepiej będzie jeżeli użyje <section> ponieważ galeria jest bardzo ważna dla  mojej strony.

 

A i ten kod to napisałem teraz na szybko (na potrzeby pytania) i troszeczkę nie chciało mi się tego dodawać ale będę pamiętał przy pisaniu kodu

I bardzo dziękuję za pomoc

---

spoko, powodzonka :)

---

Dzięki!

I tak na marginesie myślę że będzie tak

<section id="container">
		<div class="image">
			<img src="/macaque.jpg" alt="Macaque in the trees">
		</div>
		
		<div class="image">
				<img src="/macaque.jpg" alt="Macaque in the trees">
		</div>

		<div class="image">
				<img src="/macaque.jpg" alt="Macaque in the trees">
		</div>
</section>

 

---

Ok, ale pamiętaj, że w tagu <section> dobrze, aby się znalazł też nagłówek typu h2

---

Dobrze

Answer 2

Nie da się sensownie odpowiedzieć na to pytanie, bo nie ma kontekstu.

W zależności od zastosowania możemy dywagować nad article > figure albo nawet tradycyjnym ul > img…