Web Programming with HTML5, CSS, and JavaScript

4.5 Figures

In this section, you’ll learn how to implement a figure. Typically, a figure holds text, programming code, an illustration, a picture, or a data table. As with all figures, the figure element’s content should be self-contained, and it should be referenced from elsewhere in the web page.

Figure with a Code Fragment

Take a look at FIGURE 4.6. It uses the figure element to display a listing of programming code that’s offset from the regular flow of the web page. The programming code is in JavaScript, which you’ll learn about in later chapters. For now, there’s no need to worry about what the JavaScript code means. Instead, just focus on the figure element’s syntax. In FIGURE 4.7, note the figure element’s start tag and end tag. ...