Viewing HTML5
HTML5
|
User: Roddy 11 years ago
|
|
|
One of the most useful new features introduced in HTML5 is the figure element. One of its main uses is to combine an image and a caption in one element. This is superior to having an image with its related caption in a separate text box. To the human eye, they may both look the same but, code-wise, they are not. When a search engine spider crawls a webpage, it sees the image and the text box as separate, unrelated entities. On the other hand, with the figure element, it associates the caption with the image since they are both glued together inside the <figure> The image is inserted using the <img> tag and the caption is contained in the <figcaption> tag like this… <figure><br /> <img src="image.jpg" alt="Alt Text" /><br /> <figcaption>Caption</figcaption><br /> </figure> The figure, image and figcaption can of course all be style using CSS. Here's a couple of widgets that use this… [1] A straight up caption - http://everwebcodebox.com/widgetbox/image/fig-caption.html [2] A slide in caption which uses a CSS transition - http://everwebcodebox.com/widgetbox/image-effects/slide-in-caption.html ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |