More about WEB PAGE
Anatomy of the <head>
Grouping content
- Understanding the need to group content
- Using the div Element
- Grouping content into lists
- Dealing with figures
Creating advanced tables
- Adding table headers cells
- Denoting the headings and the table body
- Creating irregular tables
- Applying borders to the table element
Form Handling
- The action attribute
- The method attribute
- Configuring the Data Encoding
- Controlling form completion
- Setting the name of the form
- Adding labels to a form
- Automatically focusing on an input element
- Disabling individual input elements
- Grouping form elements together
- Using the button element
Customizing the input element
- Using the input element for text input
- Setting values and using placeholders
- Using a data list
- Creating read-only and disabled text boxes
- Restrict data entry
Using input validation
The last of the grouping elements relates to figures. HTML5 defines figures as “a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning”. This is a fairly general definition and can be applied more widely than the traditional idea of a figure, which is some form of illustration or diagram. You define figures using the figure element. The figure element can optionally contain a figcaption element, which denotes a caption for the figure.
You can see the figure and figcaption elements used together below.
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
I like apples and oranges.
<figure>
<figcaption>Listing 23. Using the code element</figcaption>
<code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>
document.writeln("I like " + fruits.length + " fruits");
</code>
</figure>
You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>In this example, we have used the figure element to create a figure around a code element. We have used the figcaption element to add a caption. Note that the figcaption element must be the first or last child of the figure element. You can see how the browser applies the style conventions for these elements below.