A block-level element is one that contains a significant block of content that should be displayed on its own line, to break apart long passages of text into manageable portions such as paragraphs, headings, and lists. Many nonempty, block-level elements can contain other block-level elements, and all can contain text and inline elements.
As with most word processors, HTML includes several tags to delimit, and hence format paragraphs of text. These tags include the following:
- <p>—Formatted paragraphs
- <h1>through <h6>—Headings
- <pre>—Preformatted text
- <blockquote>- Blockquote
- <BR>Line Break, <HR> Horizontal Rule
- <div>—A division of the document
- <ul>,<ol>, <dl>—Unnumbered, ordered, and deļ¬nition lists
Each of the block elements results in a line break and noticeable space padding after the closing tag. As such, the block elements only work when used to format paragraph-like chunks of text—they cannot be used as inline tags.
Formatted Paragraph
The paragraph tag p is used, quite simply, to mark up paragraphs of text:
Example:
<p> This is a paragraph of text……</p>
<p>…and this is another paragraph.</p>
The p element is one of the most commonly used building blocks of HTML. When you use the p element to begin a new paragraph in HTML, it automatically creates a line space above and below the content.
This element may contain any text content, but it can’t include any block-level elements: only inline or phrase elements can be included. The P element has an attribute called align that will center the content inside the two paragraphs.
Example:
To control the justification via CSS you would use the text-align attribute, the example below would set the paragraph justification to "center".
It is better to use CSS to achieve any formatting of the elements within an html document, and this will also prepare you to make the transition to xhtml, and using CSS styles in your html documents.
Headings
The heading elements are used to create “headlines” in documents. Six different levels of headings are supported: <H1>, <H2>, <H3>, <H4>, <H5>, and <H6>. These range in importance from <H1>, the most important, to <H6>, the least important. Each heading uses a large, usually bold character-formatting style to identify itself as a heading. HTML automatically adds an extra blank line before and after a heading.
An attribute that aligns the text left, right, or center can be added to the heading elements. By default, headings are usually left-aligned, but by setting the ALIGN attribute of the various heading elements, the text may be aligned to the right, left, or center of the screen.
Note: The size of Html heading <h1> to <h6> in pixels and em unit. HTML Heading Elements
Preformatted Text
The <PRE> and </PRE> tags can be used to surround text that shouldn’t be formatted by the browser. The text enclosed within the <PRE> tags retains all spacing and returns, and doesn’t reflow when the browser is resized. Scroll bars and horizontal scrolling are required if the lines are longer than the width of the window. The browser generally renders the preformatted text in a monospaced font, usually Courier. Some text formatting, such as bold, italics, or links, can be used within the <PRE> tags.
The pre element in this example displays as shown in below. The second part of the figure shows the same content marked up as a paragraph (p) element for comparison.
Example:
Blockquote Tag
The HTML <blockquote> tag defines a long block quotation in the HTML document from another source. Browsers traditionally render the text found within the <blockquote> tag as indented text. This tag is also commonly referred to as the <blockquote> element.
Syntax:
Horizontal Rule
One way you can separate sections of your Web page is to use the hr tag. By default, this tag produces a thin, gray horizontal line called a horizontal rule. The <HR> element is an empty element, because it has no close tag and encloses no data, the W3C recommends using <hr/> to officially start and end this tag. Several attributes can change the appearance of the horizontal rules you use on your pages such as SIZE sets the bar’s thickness (height). WIDTH sets the bar’s width. ALIGN sets its vertical alignment. NOSHADE renders the bar without a surrounding shadow.
<HR SIZE=4 WIDTH="50%">
Line Breaks
The <br> tag is used to add a line break in your HTML page. It causes the browser to stop printing text on that line and drop down to the next line on the page. Because the <br> tag has no end tag (or closing tag), it breaks one of the rules for future HTML (the XML based XHTML), namely that all elements must be closed. Writing it like <br /> is a future proof way of closing (or ending) the tag inside the opening tag, accepted by both HTML and XML.
Div Tag
The HTML <div> tag is used to group
the large section of HTML elements together.
We know that every tag has a specific purpose e.g. p tag is used
to specify paragraph, <h1> to <h6> tag are used to specify headings
but the <div> tag is just like a container unit which is used to
encapsulate other page elements and divides the HTML documents into sections.
The div tag is generally used by web developers to group HTML
elements together and apply CSS styles to many elements at once. For example:
If you wrap a set of paragraph elements into a div element so you can take the
advantage of CSS styles and apply font style to all paragraphs at once instead
of coding the same style for each paragraph element.
- Div tag is Block level tag
- It is a generic container tag
- It is used to the group of various tags of HTML so that sections can be created and style can be applied to them.
As we know Div tag is block-level tag in this example div tag contain entire width. It will be displayed div tag each time on a new line, not on the same line.
Example:
