I have a question about figure and span.

I don't know how the ratio of the image will go in, so I tend to wrap it around with a span. Even if there is no figure caption, if you want to wrap the block that controls the size of the image,

<figure>
    <img src="" alt="">
</figure>

Is this a better way to fill it out? Or is it better to wrap it with a span, literally? I still don't understand the direct use of figure, not the dictionary meaning;

fast-frontend html

2022-09-22 18:55

1 Answers

Hello, I'm Yamoo. ^ - ^

Let me answer your question.

"If you want to wrap the block that adjusts the size of the image,"

If your goal is to wrap <img> elements as block elements like the question? The following block elements can be used to wrap the image element: (e.g., <div>, <figure>, <picture>)

<!-- CASE 1: DIV -->
<div class="img-wrapper">
  <img
    src="https://s3.ap-northeast-2.amazonaws.com/grepp-cloudfront/hashcode_imgs/banners_imgs/banner-job.png" 
    alt="Only open recruitment site for developers!">
</div>

<!-- CASE 2: FIGURE -->
<figure class="img-wrapper">
  <img 
    src="https://s3.ap-northeast-2.amazonaws.com/grepp-cloudfront/hashcode_imgs/banners_imgs/banner-job.png" 
    alt="Only open recruitment site for developers!">
</figure>

<!-- CASE 3: PICTURE -->
<picture class="img-wrapper">
  <img 
    src="https://s3.ap-northeast-2.amazonaws.com/grepp-cloudfront/hashcode_imgs/banners_imgs/banner-job.png" 
    alt="Only open recruitment site for developers!">
</picture>

The <span> element cannot be the answer the question requires because it is not a block element.

<span class="img-wrapper">
  <img 
    src="https://s3.ap-northeast-2.amazonaws.com/grepp-cloudfront/hashcode_imgs/banners_imgs/banner-job.png" 
    alt="Only open recruitment site for developers!">
</span>

However, if you use the CSS to display the <span> element on the screen like a block element, this may be the answer the question requires.

.img-wrapper {
  display: block;
  ...
}

However, <span> is not the answer if the block element mentioned in the question is a block element that is classified by default.

The <img> element is meaningful as an "image" in itself. Even if it doesn't cover certain elements. It can be wrapped in block elements or in-line elements.

The important thing is to choose the appropriate method based on the situation among the various methods available in HTML.

For example, if you want to display only images on the screen, how do you structure them?

Available for each case listed below.

<!-- CASE 1: IMG -->
<img 
  class="illustration"
  src="https://res.cloudinary.com/eightcruz/image/upload/v1544484028/xxgz6zomehywtnu3ugnl.jpg" 
  alt="For those with special needs...">

<!-- CASE 2: DIV -->
<div class="illustration">
  <img 
    src="https://res.cloudinary.com/eightcruz/image/upload/v1544484028/xxgz6zomehywtnu3ugnl.jpg" 
    alt="For those with special needs...">
</div>

<!-- CASE 3: FIGURE -->
<figure class="illustration">
  <img 
    src="https://res.cloudinary.com/eightcruz/image/upload/v1544484028/xxgz6zomehywtnu3ugnl.jpg" 
    alt="For those with special needs...">
</figure>

<!-- CASE 4: PICTURE -->
<picture class="illustration">
  <img 
    src="https://res.cloudinary.com/eightcruz/image/upload/v1544484028/xxgz6zomehywtnu3ugnl.jpg" 
    alt="For those with special needs...">
</picture>

So how do we structure the type like the image below?

This is an example of the proper use of <figure> as shown in the image for structuring. Bundle several relevant <img> together and use the <configcaption> element that describes the images below.

<figure class="illustration">
  <img src="a11y/input.jpg" alt>
  <img src="a11y/visual.jpg" alt>
  <img src="a11y/auditory.jpg" alt>
  <img src="a11y/voice.jpg" alt>
  <Configuration>Permanent / Temporary / Situation Disorder Examples</Configuration>
</figure>

Lastly, how do we structure the example below?

Similarly, you can structure it as it appears on the screen. Non-image videos (such as <video> and <iframe>) can also be wrapped using <Figure> elements and added explanatory text (<configcaption>).

<figure class="video-illustration">
  <iframe src="https://cdn.iframe.ly/api/iframe?url=https%3A%2F%2Fwww.apple.com%2F105%2Fmedia%2Fkr%2Faccessibility%2F2016%2F2c27194c_cf72_4f59_bbdb_9b87728c0082%2Ffilms%2Ffeature%2Faccessibility-feature-kr-20161018_1280x720h.mp4&amp;key=4fb668ebc74b721f3c2230d81634c8bc" allowfullscreen></iframe>
  <figcaption>Being there is the power of true technology.</figcaption>
</figure>

Use <div> is sufficient for the purpose of using a block element that encloses <img> for the design shown on the screen. However, HTML5 standards recommend structuring images with elements such as <figure> and <figcaption> if they have a clear purpose (including illustrations and descriptions), as shown in the examples above.

2022-09-22 18:55

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656