Web design Tutorials Lesson 4.( Part 7)

Adding captions to images

 Two new parts area unit the HTML5 tags FIGURE and FIG CAPTION. the primary one, FIGURE, is nice for things like pictures and different graphics, whereas FIG CAPTION is employed to inform folks what they're observing As Associate in Nursing example, take a glance at the subsequent code:

A read of royalty cathedral from a street.

Here, we've enclosed the IMG code with 2 FIGURE tags. FIG CAPTION tags area unit then place beneath the image. this is often be} what the higher than code seems like during a browser:

You can have the FIG CAPTION tags higher than the image.

A read of royalty cathedral from a street.

Notice, though, that the FIGURE and FIG CAPTIONS tags aren't getting formatted for you - you have got to try and do that yourself with some CSS:

FIG CAPTION

Because FIGURE and FIG CAPTION area unit new HTML5 tags, older browsers will not apprehend what they're. so that they get rendered on the page as inline tags.

 What this suggests is you will not get Associate in Nursing automatic line break for your figure captions: they'll simply be side-by-side with the pictures. the answer is to use the CSS property show with a worth of block. Like this:

FIGURE, FIG CAPTION

The CSS higher than tells the browser to render FIGURE and FIG CAPTION tags as block-level parts as a result of block level parts area unit stacked one on high of the opposite, your caption can then be within the right place - higher than or below your pictures. (You'll learn additional concerning block-level parts within the CSS positioning chapter later within the course.)

But we'll leave pictures there. within the next section, we'll take a glance at hyperlinks.