Grouping Elements for Small Content
Grouping Content – Part 1
Foreword: In this part of the series, I talk about grouping elements that would group (or contain) smaller elements.
By: Chrysanthus Date Published: 24 Jun 2015
Introduction
The philosophy of HTML5 is that any entity you can think of should have its own element. Smaller elements exists in categories. So, HTML5 provides grouping elements to group elements by their category.
Pre-Knowledge
At the bottom of this tutorial, you have links to previous series you should have read before coming here. This series is part of the HTML professional course, which is part of the HTML course as a whole.
The p Element
This element is for paragraphs (like paragraphs in a text book). However, this element does not indent the first line of the paragraph. Also paragraphs created by this element are separated by a blank line. The paragraph element groups text-level semantic elements as well a text; examples of text level-semantic elements are the strong, i, u, and a elements.
The p element is a double tag element. The end tag is optional under certain conditions. In my opinion, you should always include the end tag, since you would not have the time to memories the conditions under which the tag can be omitted.
In the past (HTML4 and below) you could create a paragraph by typing the line break (br) element twice at the end of a long text. HTML5 no longer encourages that: any paragraph text now, goes into the paragraph element. Line break elements should be used mainly within a grouping element (see below), not to create a blank line, but to force the text on its right to the next line.
Here is an example of a paragraph coding:
<p>The young artist has a new way of dancing and he has a brilliant voice. At the age of 20 he can carry out musical activities that others start at the age of 30. <a href='http://www.somesite.com/bio.htm'><em>John Smith</em></a>looks like someone who will sing for us for at least the next 15 years, as compared to other artists whose average singing carrier is 5 years. You can get more info, about this young man from, <a href='http://www.somesite.com/bio.htm'>John Smith</a>
</p>
The blockquote element represents content that is quoted from another source. If the source is a web page, then you should have a cite element in the quote element. In the previous series I talk about the q element called the quote element. Now what is the difference between the q element and the blockquote element? The q element is for short quotations, such as a word, phrase and up to a sentence. When you have to quote text that is more than a sentence and would be a paragraph or more, you have to use but the blockquote element.
HTML5 has a cite attribute and a cite element. The cite attribute or cite element serves a similar purpose. Both the q element and the blockquote element have a cite attribute.
If the q element’s content is from a web page, then it should have a cite attribute, whose value is the URL of the web page; this is not a hyperlink. If the quotation is not from a web page, then the q element does not need a cite attribute. The blockquote element is for a paragraph or more. If the quotation is from a web page, then the blockquote element should be accompanied by a cite element, not really a cite attribute. Part or all of the content of this cite element should be the hyperlink to the web page. A cite element does not have a cite attribute.
The cite element is at the end of the blockquote. It can be inside or outside the blockquote block. If the quotation is not from a web page; say it is from a book, then it should have as content, the name of the author or title of the book or both. In this case the cite element will not have a URL.
The blockquote element is a double tag element. If the quotation is just a paragraph, then all the text goes into the blockquote element (within its double tags). If the quotation is more than one paragraph, then each paragraph will be in a p element.
The q element can do without a cite attribute; because the quotation is short and can even be quotation from an ordinary conversation. However, the blockquote element should be accompanied by a cite element. An example copied from the HTML5 specification is given here; it is of one paragraph length.
<blockquote>
The people recognize themselves in their commodities; they find their
soul in their automobile, hi-fi set, split-level home, kitchen equipment.
— <cite><a href="http://en.wikipedia.org/wiki/Herbert_Marcuse">Herbert Marcuse</a></cite>
</blockquote>
The cite element is an inline element. So, if you want the content of the cite element to stand out in its own right, then you should place it in a footer element. The footer element may be inside the blockquote element or outside the blockquote element.
Another example taken from the HTML5 specification is given below. This time the quotation is in a cite element in a footer element:
<blockquote>
<p>I contend that we are both atheists. I just believe in one fewer
god than you do. When you understand why you dismiss all the other
possible gods, you will understand why I dismiss yours.</p>
<footer>— <cite>Stephen Roberts</cite></footer>
</blockquote>
Here, the footer element is in the blockquote element. The actual quotation is in the paragraph element.
Before we leave this section, note that your browser may not display the block quotation of the blockquote within quotation signs (“”).
Also note that the paragraph element is a block-level element and the blockquote element is also a block-level element. A block-level element is an element that has inherent line break element above and below it.
For HTML elements (e.g. the p element), when producing text, when you type the spacebar more than once, you end up with only one space. The exception to this is the pre element: the number of spaces you type in a pre element is displayed by the browser. For HTML elements (e.g. the p element), when you type text and press the Enter key to have a new line of text, the browser will not display your expected new line as a new line; it will display the former line and the expected new line on the same line. Again the pre element is an exception to this: when you type text in the pre element and press the Enter key of the keyboard, the browser displays your expected new line as a new line. So, the pre element is used to position text where you like on the display, within its borders.
The pre element is a double tag element. The following is an example of a pre element and content:
<pre>
love
love love love
love
love
love love love
love
</pre>
Inside the pre element above, you have the word, “love”, repeated in a pattern. Now, because all that is in the pre element, the browser will display it as you have typed. The browser will display it as follows:
love
love love love
love
love
love love love
love
The Spacebar spaces and the pressing of the Enter key have been respected. The pre element can be used for the following:
- Poem
- ASCII Art
- Programming Code Fragments
I spend the rest of this section talking about these four applications.
Poem
The following example, copied from the HTML5 specification, is a special poem and because it is in the pre element, it will be displayed as you are seeing:
<pre> maxling
it is with a heart
heavy
that i admit loss of a feline
so loved
a friend lost to the
unknown
(night)
~cdr 11dec07</pre>
ASCII Art
The pre element uses a fixed width font. This is a font with characters of the same width, e.g. the courier font. The idea here is that you can use characters to make a sketch. You must have heard about the DOM. The browser will display the following DOM tree as type (but without the pre element tags).
<pre>
|_DOCTYPE: html
|
|_html
|
|_head
| |
| |_text: \n sp sp
| |
| |_title
| | |
| | |_text: Simple Page
| |
| |_text: \n sp
|
|_text: \n sp
|
|_body
|
|_text: \n sp sp
|
|_h1
| |
| |_text: Simple Page
|
|_text: \n sp sp
|
|_p
| |
| |_text: This is a
| |
| |_a href="demo.htm"
| | |
| | |_text: simple
| |
| |_text: sample.
|
|_text: \n sp sp
|
|_comment: this is a comment
|
|_text: \n sp \n
</pre>
Email paragraphing is different from HTML paragraphing. For the email body, a line has a maximum of 78 characters. Lines make up a paragraph in email coding. Paragraphs are separated by blank lines in email coding. So the pre element can be used to type the body of an email, but you will need some extra ECMAScript coding to make this effective. I will not say more on that here, consult some other document for the details.
The pre element is used to mark up computer programming code. It is true that HTML has the code element for computer code, but browsers do not respect the formatting in the code. So you have to insert the code element in the pre element to have the formatting respected, as in the following example (you do not have to understand the code content here):
<pre><code>
use strict;
my $var = "";
if (!$var)
{
print "condition is equivalent to false\n";
}
</code></pre>
Remember the kbd element in the previous series, “Text Elements in HTML”? This is a double tag element used to markup software keyboard or mouse commands for web display. You can have a sequence of that in the pre element to maintain the formatting of the teacher and to properly convey his instructions.
Remember the samp element too? This is a double tag element used to markup computer program output, like the ones that go to the console, not the ones that are displayed in windows. You can place samp element in the pre element and even do additional markup (e.g. coloring) to maintain the formatting of the programmer and to properly convey his message (e.g. error message).
The kbd and samp elements are not there to interfere with programming; they are there to better convey computer-programming messages to the reader, who is reading from the browser.
In this part of the series, you have learned about the p, blockquote and pre elements. These are all block-level elements that will always take the complete width of their containing elements, unless you give them a definite width (in pixels). Each of them has an inherent line break element above and below it.
Time to take a break. Let us stop here and continue in the next part of the series.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
Text Elements in HTML
Grouping Content
Microsyntax Dates and Times in HTML
Sectioning Content
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
NEXT