Figure & Figcaption در HTML5

image post

Figure & Figcaption در HTML5

Figure & Figcaption دو المان معنای در Html هستند که معمولا در کنار یکدیگر استفاده  می شوند

اگر به W3C سر زده باشید شانس آنرا داشته اید که درباره تگ های بالا اطلاعاتی بدست آورده باشید

در ادامه به روش های استفاده از این تگ ها می پردازیم

تگ Figure معمولا توسط تصاویر استفاده میشود

<figure>
  <img src="Bakhshi.jpg" alt="Ali Bakhshi">
</figure>

تگ Figure نشان دهنده یک واحد در بر گیرنده محتوا می باشد

و بدون محتوای درونش معنایی ندارد !

چندین عکس در یک تگ Figure

<figure>
  <img src="iran.jpg" alt="iran">
  <img src="iraq.jpg" alt="iraq">
  <img src="turky.jpg" alt="turky">
</figure>

المان های دیگری که می توان در figure استفاده نمود

  • بلاک های کد
  • ویدیو
  • صوت
  • تبلیغات

در زیر نمونه ای از کد figure که برای نمایش کد در سایت استفاده شده را مشاهده می نمایید

<figure>
  <pre>
    <code>
      p {
          color: #333;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>
  </pre>
</figure>

گروه بندی و زیر مجموعه سازی figure ها

اگر نیاز به گروه بندی یک سری figure دارید به راحتی میتوانید این کار را انجام دهید

برای بهبود این روش میتوانیم از attribute role در figure مادر استفاده نماییم

<figure role="group">
  <figcaption>Middle Eeast</figcaption>
  <figure>
    <img src="iran.jpg" alt="Iran Country">
    <figcaption>Iran Country</figcaption>
  </figure>
  <figure>
    <img src="iraq.jpg" alt="Iraq Country">
    <figcaption>Iraq Country</figcaption>
  </figure>
</figure>

استفاده صحیح از figcaption

figcaption یک توضیح برای figure ایجاد می نماید

همه figure ها نیاز به figcaption ندارند اما اگر استفاده کردید همیشه آنرا اولین یا آخرین فرزند figure قرار دهید

<figure>
  <figcaption>Three different breeds of dog.</figcaption>
  <img src="dog1.jpg" alt="Maltese Terrier">
  <img src="dog2.jpg" alt="Black Labrador">
  <img src="dog3.jpg" alt="Golden Retriever">
</figure>

یا

<figure>
  <img src="dog1.jpg" alt="Maltese Terrier">
  <img src="dog2.jpg" alt="Black Labrador">
  <img src="dog3.jpg" alt="Golden Retriever">
  <figcaption>Three different breeds of dog.</figcaption>
</figure>

استفاده از چندین المان در تگ figcaption

شما میتوانید از تگ های مثل h1 یا p در figcaption خود استفاده نمایید

<figure>
  <img src="dogs.jpg" alt="Group photo of dogs">
  <figcaption>
    <h2>Puppy School</h2>
    <p>Championship Class of 2016</p>
  </figcaption>
</figure>

 

دنیس ریچی : یونیکس بسیار ساده هست، تنها یک نابغه باید باشید تا بتوانید سادگی آن را درک کنید.