The content
sections are quite similar to the semantic content sections. The main difference is that the use of all the given elements are not driven by the outline or purpose of the document like the semantic sections are.
The pre
element is the preformatted text:
<pre></pre>
The text in an HTML document is usually not shown in the browser with the same whitespace or line breaks as it is in a text document. The pre
element allows you to display text in the same way as it is in the document. Whitespace and line breaks will be preserved.
Here is an example of using line breaks:
<pre>This text has some line breaks.</pre>
The syntax of a
blockquote
element is as follows:
<blockquote cite></blockquote>
The ol
element is the ordered list element, which has the following syntax:
<ol reversed start type></ol>
The attributes that are used in the ol
element are as follows:
reversed
: This is a Boolean value. It denotes that the list is in a reverse order.start
: This accepts a value as a number to start with.type
: This will change the type of the numbered elements. By default, we can have a numbered list (1
), but we can change to other types, such as lowercase letters (a
), uppercase letters (A
), lowercase Roman numerals (i
), and uppercase Roman numerals (I
).The ol
element can be used in the same situations as a ul
element, except that an ol
element is numbered instead of bulleted. For example, you would use a ul
element for a grocery list and an ol
element for a numbered set of instructions. You can have multiple ul
or ol
elements nested within each other.
The items in the list will be the li
elements.
Here is an example of a list that uses Roman numerals and starts at 10
.
<ol start="10" type="i"> <li>Roman numeral 10</li> <li>Roman numeral 11</li> </ol>
The ul
element is an unordered list element:
<ul></ul>
The ul
element can be used in the same situations as an ol
element, but a ul
element will be bulleted and an ol
element will be numbered.
When you style this list, you should use CSS and not the older HTML 4 attributes.
You can nest the ul
and ol
elements multiple times.
Here is an example of the ul
element:
<ul> <li>Items in</li> <li>no particular</li> <li>order</li> </ul>
The li
element is the list item element:
<li value></li>
The value
attribute is used in the li
element with the ol
element and it is the value of the item in the ordered list.
The dl
element is the definition list element:
<dl></dl>
The dl
element is a list where the items have a term and definition; however, the dl
element can be used for more than just terms and definitions.
You must use the dt
element followed by the dd
element when building the list for the dl
element. Each dt
element can have multiple dd
elements after it.
Here is an example:
<dl> <dt>PactPub</dt> <dd>Packt Publishing</dd> </dl>
The dt
element is the definition term element:
<dt></dt>
The dd
element is the definition description element:
<dd></dd>
The syntax of the
figure
element is as follows:
<figure></figure>
The figure
element is a new element introduced with HTML5. In much the same way as an article adds some meaning where there was none, a figure adds meaning too. A figure is an image or any other item of information that is related to the document. This has more meaning than just using an img
element.
Here is an example:
<figure> <img src="figure1.jpg" title="Figure 1" /> <figcaption>Figure One</figcaption> </figure>
The figcaption
element is the figure caption element:
<figcaption></figcaption>
The figcaption
element was introduced in HTML5 along with the figure. This element provides the caption for a figure. This element must be inside a figure
element and it must be either the first or last child of the figure
element.
Here is a simple example of the figcaption
element:
<figure> <img src="figure1.jpg" title="Figure 1" /> <figcaption>Figure One</figcaption> </figure>
The div
element is the division element:
<div></div>
The div
element is one of the most used elements in HTML today. It is the element used to split up your document into arbitrary divisions. The div
element has no default styling. These divisions could be for placement, styling, or any other reason. A div
element does not affect the semantic meaning of the document. It should only be used when no other element suits your requirements.
<div> You can put whatever you want in here! <div> More elements. </div> </div>
The main
element should have the main content of the document inside it. You cannot have this element as a descendant of the article
, aside
, footer
, header
, or nav
elements. This differs from an article, in that, an article should be a self-contained element.
Here is an example of the main
element in use:
<main> This is the main content of the document. <article> Here is the article of the document. </article> </main>
18.220.245.140