Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: join.designers...
The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here: / @designerslearncode
------
Another media we should discuss is the figure element and its optional caption or figcaption element. A figure, its caption, and contents are a single unit. The figure element is generally used for images, illustrations, diagrams, graphs, infographics, charts and code snippets. The main content can reference a figure but it can be moved to another part of the document such as an appendix without affecting the meaning of the main content. Because it is considered a self-contained unit of content that is related but not part of the main content it has some similarities with an aside; but a figure element has a built-in captioning mechanism. Content in an aside also tends to be tangentially related to the main content so figure information has a closer supportive relationship to the main content. The figcaption is within the figure element and it is either first or last.
The difference between figure and aside is confusing. An aside lacks a caption element. So if your "side content" needs a caption then it is probably more correct to use the figure element. Remember, figure content is more directly related while aside content is tangential. Keeping this in mind, pullquotes, charts, graphs and infographics probably belong in a figure. However, sidebar content and comments are more appropriate for an aside element.
Watch the video for several examples.
#HTML #CSS #coding #web #accessibility #figure #aside #figcaption #illustrations #charts #graphs #inforgraphics #tangentialinformation #sidebar #designtocode #codingbootcamp #codinglife #webdesign #designerslearncode #dailycodesnippet #codingforbeginners #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse
28 авг 2024
