Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
You can also find further discussion and get answers to your questions over in #get-help.
Agree with a comment or answer? Like () to up-vote the contribution!
When using the figure element with an image, would we still use alt text withing the img tag, as well as figcaption to describe the image or would that be redundant?
I would say it depends on your caption. If the caption is going to be the same as alt or you are in a case where you cannot provide any Information in the alt attribute, then you can omit it.
Sometimes captions might not describe the picture, in which case an alt attribute should be added to describe the picture.
There is a semantic tag that could separate all media from all the code of HTML, like <nav> do with <anchors> that separate it from all the code, exist a tag that separates all media elements like img, gif, etc in a solo chunk?
Also is it a good practice to do this with <figure> semantic tag?
My understanding of the position being independent was that a figure is media that can be anywhere on the page, in other words, its location doesn’t impact its meaningfulness. Compare this to when you might use an img tag to put an image in a very specific place. If you go back and re-read the information for when an aside tag is applicable, it’s the same logic just for media instead of text.
As for the figcaption vs p question, I tried replacing it in the exercise and the only presentation difference was that p spaced the text further from the image. It might be possible that the only difference is the semantic meaning, I think that’s the undertone to this whole lesson.
I am not entirely sure, so maybe someone else could clarify.
Looking at it from my view, I would say that it could count for metadata only when the caption would be the same as your alt, as in that case, the alt is not required. If your caption does not describe the figure in any way, then I would say its not metadata as it does not provide any useful information about the figure, in which case the alt attribute would be a good option to include and that would become the metadata for the figure.
I started turning extensions off and found out my Adblock extension was causing it to fail for some reason. I turned it off and pressed Run and it passed. Really strange. Hopefully this helps troubleshoot other people in the future.
We can still write semantic markup using only the HTML 4 elements as we always have. The new elements only make it easier to see what would be hard to spot semantics. We give meaning through structure, not just the tags we use.
Quite a lot, actually, though they are both connected to accessibility. alt="" is an empty alternate text attribute that would appear in an <img> tag, and is left empty because the image has not particular relevance to the topic. It is essentially window dressing and we want screen readers and search engines to ignore it.
<figcaption/> on the other hand is not something we intend to have ignored. More the opposite. We want it to be seen and easily understood. It is a way to give an image a directly related caption so that search engines and screen readers can relate their relevance to the topic. This, and the <img> element would both be contained in the same <figure/> element. Before this element was added to the specification all we had was the title attribute and an associated <p/> element which could be wrapped in the same DIV or LI.