HTML Block Level Elements Tutorial with Stone River eLearning

An HTML document comprises of elements that define the functionalities of the web page and decide its operations and the characteristics that it will possess. HTML elements are of two different types, namely, block level elements and inline elements. In this blog post, we will discuss about the different block level elements in HTML and understand their functioning.

What is a block level element?

A block level element occupies the entire space of the container, which is its parent body, and creates a block to display the contents on the web browser. As explained in the video, web browsers display the content before and after a block level element, in a different line.

Eg:

<!DOCTYPE html>
<html>

<head>
<meta charset =”UTF-8”>
<title>Block Level Elements </title>
</head>

<body>
This text is before a block level element.<div> This is a block level element </div>We are out of the block level element. 
</body>

</html>

The output of the above code will look like this in the browser window:

This text is before a block level element.

This is a block level element

We are out of the block level element.

 

What are the different types of block level elements?

Block level elements are extensively used to arrange content on the web page and also give continuity and relevance to the content. If you need the content to show in the form of a paragraph, you will need a block level element, if you need it in the form of lists, you will need a block level element, and you will have to use a block level element even for the job of assigning footers to your webpage. You webpage cannot be completed without the proper use of block level elements in it and therefore, it is important that we have knowledge about the different block level elements and their functionality.

1. <div>

    The <div> element can be used as a container for other block level elements. In other words, <div> element can be considered as a mini block level element inside the primary block level element.

2. <hr>

    There are very few elements in HTML that do not require both the opening tag and the closing tag, and <hr> element is one of those few. The recent versions of HTML have allowed <hr> tag to be used without a closing tag. The <hr> element is used to get a horizontal rule, i.e dividing line in the web page.

3. <p>

    The <p> element puts the content inside it in a separate paragraph. The <p> element is highly beneficial for web pages where a lot of text needs to be put up on display. Eg: The ‘History’ section of a company’s webpage.

4. <ol> and <ul>

    The ordered list <ol> and unordered list <ul> are used to display the content in the form of a list. The ordered list displays contents in the form of numbers while the unordered list displays it in the form of bullets. The <li> element (list items) is used inside the ordered/unordered list to display the content.

5. Heading Elements <h1> to <h6>

    The heading tags are used to highlight a certain section of the content on the web page. There are six types of heading elements available in HTML, starting from <h1> to <h6>. The <h1> element displays the content inside it in bold and with the biggest font size. The size decreases as we move from <h1> element to <h6> element.
The block level elements are easy to use and have great utility in displaying content on the webpage. Every webpage, no matter how big or small, will use some kind of block level element in its code to make the content look organized and progressive.

 

 

download the source code:

GET YOUR FREE HTML EBOOK!

(Visited 86 times, 1 visits today)