When writing up HTML source code, all line breaks created by pressing the 'Enter' key will be ignored by the web browser and will not register as line breaks on the actual web page. In order to create line breaks and hence format your visible text into paragraphs, you will use what are known as block-level
or block elements
. The main difference between block elements and inline elements
is that the end tag of a block element forces a line break in the visible text. Some commonly used block elements are:
|Renders text into paragraphs with a blank line in between each... (More)|
|Renders text into generic division with no blank line in between each... (More)|
|Renders text into an indented paragraph which is typically used to indicate quoted text... (More)|
These are all described in more detail below:
- p (paragraph) ~ Creating paragraphs using HTML is accomplished by placing the text which you wish to be rendered as a paragraph in between the
<p>...</p> tags. The end
</p> tag terminates the first paragraph while a new start
<p> tag begins a new paragraph. Example:
Example 1A - SOURCE CODE
This is the first paragraph. In printed text, paragraphs are traditionally rendered by merely breaking the flow of text to the next line and then indenting the first line of the new paragraph. In web pages, however, a new paragraph is typically rendered by breaking the flow of text to the next line which then contains a line of 'white space'. The blank line is subsequently followed by the new paragraph whose first line appears flush with the left margin.
This is the next paragraph. Note that any line breaks created in the source code by pressing the 'Enter' key will be ignored by the web browser when it displays the web page. Creating line breaks in the visible text can only be accomplished by using one of various HTML elements. In this case, we are using the 'p' element.
Click here to view the result of Example 1A...
<p>...</p> tags, the end tag may be omitted. Each
<p> start tag will automatically begin a new paragraph. Example:
First paragraph starts here...
Second paragraph starts here...
Third paragraph starts here...
- div (generic division) ~ The
div element differs from the
p element in that the
</div> end tag only breaks the flow of text to the next line. No blank line will appear between it and the succeeding text. Example:
Example 2 - SOURCE CODE
This is the first generic division. The text will continue to flow normally until this 'div' element is terminated by the end tag.
This is the second generic division. Use the 'div' element in conjunction with CSS to achieve a much more refined control over formatting blocks of text on your web page.
Click here to view the result of Example 2...
Note that, unlike the
</p> end tag, the
</div> end tag is mandatory.
Here's a quick example of how you can use the style attribute with the
div element to create a traditional paragraphing style:
Example 3 - SOURCE CODE
<div style="text-indent: 30px;">
This uses the 'div' element in conjunction with the 'style' attribute to create a paragraph style similar to printed text paragraphing. The first line of text in this generic division is indented by a space of 30 pixels.
<div style="text-indent: 30px;">
Here is the second generic division. The flow of text breaks to the next line and the first line of text is also indented by a space of 30 pixels.
Click here to view the result of Example 3...
- blockquote ~ This element can be used to indent an entire block of text. This is typically used to indicate that the text is quoted from another source although it can also be used simply to offset the text for aesthetic reasons. To display text as such, place it within the
<blockquote>...</blockquote> tags. Here's an example:
Example 4 - SOURCE CODE
In the official HTML 4.01 Specification, the World Wide Web Consortium (W3C) makes this distinction between block level and inline elements:
<blockquote>Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
Click here to view the result of Example 4...
Of course, there may be times when you wish to create line breaks at will without having to decide in advance which sections of text to enclose in a block element. There may also be times when you wish to prevent
the line from breaking in between two words. How to accomplish both of these as well as how to align text on your web page
will be covered next...