Making Paragraphs

Block Elements

• 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
  
  <p>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.</p><p>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.</p>
  
  
  
  Click here to view the result of Example 1A...
  
  
  When using <p>...</p> tags, the end tag may be omitted. Each <p> start tag will automatically begin a new paragraph. Example:
  
  
  Example 1B
  
  <p>First paragraph starts here...<p>Second paragraph starts here...<p>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
  
  <div>This is the first generic division. The text will continue to flow normally until this 'div' element is terminated by the end tag.</div><div>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.</div>
  
  
  
  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>
<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.</div>
  
  
  
  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.</blockquote>
  
  
  
  Click here to view the result of Example 4...