HTML Blocks

HTML Block elements/tags: In this tutorial, we are going to learn about the HTML block elements like paragraph tag, heading tags, div tag, horizontal rule tag, etc.
Submitted by Jhanvi Tripathi, on July 22, 2019

In HTML, the elements have some default displays and according to their values. The display of the element also depends on what type of element it is.

In HTML, there two kinds of display values which are as block and inline.

In HTML, the block elements, when they appear on the screen a line break are present before and after the element. This line break is present with them by default. The block level elements start with their new line in the given block, their own block. Some example for the block level elements are as the paragraph tag (<p>), the heading tags ( <h1>, <h2>, <h3>, <h4>, <h5>, <h6>), the lists ( <ul>, <ol>, <dl>), the preformatted text (<pre>), the horizontal rule (<hr/>), the blockqoute (<blockquote>), and the address tag <address>.

In the block-level elements, they not only start with a new line but also takes the full width of the screen available to them. That means they stretch up to the width of the web browser.

Some commonly used block-level elements

1) The <div> element

<div> is a commonly used block element. It has been used in most of the webpages created. The <div> element is easy to use and manage the content presented on the overall webpage.

A simple example to illustrate the <div> element.

<html>

<body>
    <div style="background-color: #efefef; height: 170px; width: 230px;">
        Hello From div 1
    </div>
    <div style="background-color: #54f314; height: 170px; width: 230px;">
        hello form div 2
    </div>
</body>

</html>

Output

2) The <hr/> tag

The <hr/> tag gives a break-in on the HTML webpage, this break is a shift of the next topic on the page. The <hr/> element can also be used to separate content in on HTML page.

Example:

<html>

<body>
	Content with some text
	<hr/> 
	Content after line division.
</body>

</html>

Output

3) The heading tags (h1, h2, h3, h4, h5, h6)

The <h1> to <h6> tags are the heading tags in HTML and are used to define headings.

<h1> defines the most important heading and it gives the largest heading while the <h6> is the smallest heading and thus defines the least important headings in HTML.

Example:

<html>

<body>
    <h1>Include Help</h1>
    <h2>Include Help</h2>
    <h3>Include Help</h3>
    <h4>Include Help</h4>
    <h5>Include Help</h5>
    <h6>Include Help</h6>
</body>

</html>

Output

Note that the next line of the heading begins as a new line. It because the heading tags are block elements thus it is represented this way.

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples