We’ve covered paragraphs, headings, and lists, but there are a few more special text elements to add to your HTML toolbox that don’t fit into a neat category: long quotations (blockquote), preformatted text (pre), and figures (figure and figcaption). One thing these elements do have in common is that they are considered “grouping content” in the HTML5 spec (along with p, hr, the list elements, and the generic div, covered later in this chapter). The other thing they share is that browsers typically display them as block elements by default.
Long quotations
<blockquote>...</blockquote>
A lengthy, block-level quotation If you have a long quotation, a testimonial, or a section of copy from another source, you should mark it up as a blockquote element. It is recommended that content within blockquote elements be contained in other elements, such as paragraphs, headings, or lists.
Example test the code:
<p>Renowned type designer, Matthew Carter, has this to say about his
profession:</p>
<blockquote>
<p>Our alphabet hasn't changed in eons; there isn't much latitude in
what a designer can do with the individual letters.</p>
<p>Much like a piece of classical music, the score is written
down – it's not something that is tampered with – and yet, each
conductor interprets that score differently. There is tension in
the interpretation.</p>
</blockquote>
Sectioning Roots
The blockquote is in a category of elements called sectioning roots. Headings in a sectioning root
element will not be included in the main document outline. That means you can have a complex heading
hierarchy within a blockquote without worrying how it will
affect the overall structure of the document. Other sectioning root elements include figure, details,
fieldset (for organizing form fields), td (a table cell), and body (because it has its own outline, which also
happens be the outline of the document).
Preformatted text
<pre>...</pre>
Preformatted text
In the previous chapter, you learned that browsers ignore whitespace such as line returns and character spaces in the source document. But in some types of information, such as code examples or poetry, the whitespace is important for conveying meaning. For these purposes, there is the preformatted text (pre) element. It is a unique element in that it is displayed exactly as it is typed—including all the carriage returns and multiple character spaces. By default, preformatted text is also displayed in a constant-width font (one in which all the characters are the same width, also called monospace), such as Courier.
The pre element in this example displays as shown in Figure 5-8. The second part of the figure shows the same content marked up as a paragraph (p) element for comparison.
Example Test this code
<pre>
This is an example of
text with a lot of
curious white space.
</pre>
Preformatted text is unique in that the browser displays the white space exactly as it is typed into the source document. Compare it to the paragraph element, in which line returns and character spaces are reduced to a single space.
Figures
<figure>...</figure>
Contact information
<figcaption>...</figcaption>
Contact information
The figure element is used for content that illustrates or supports some point in the text. A figure may contain an image, a video, a code snippet, text, or even a table—pretty much anything that can go in the flow of web content—and should be treated and referenced as a self-contained unit. That
means if a figure is removed from its original placement in the main flow (to a sidebar or appendix, for example), both the figure and the main flow should continue to make sense.
Although it is possible to simply drop an image into text, wrapping it in figure tags makes its purpose explicitly clear. It also allows you to apply special styles to figures but not to other images on the page.
<figure>
<img src="piechart.png" alt="chart showing fonts on mobile devices">
</figure>
A caption can be attached to the figure using the optional figcaption element above or below the figure content.
example test the code:
<figure>
<pre><code>
body {
background-color: #000;
color: red;
}
</code></pre>
<figcaption>
Sample CSS rule.
</figcaption>
</figure>
you’ll get a chance to mark up a document yourself and try out the basic text elements we’ve covered so far.
happy coding season.
if you have any question simply drop it on our comment box or follow us at any of our
social media platform....
0 comments:
Post a Comment