Key Difference – Block vs Inline Elements
HTML stands for Hyper Text Markup Language. It is used to create web pages. Each web page is connected to other web pages using hyperlinks. This language consists of tags. A tag is enclosed within angle braces. The syntax is similar to <tag name>. Most tags also have a closing tag. When <html> is a tag, the closing tag is </html>. Some tags do not have a closing tag. Examples of such tag are <br > and <img >. They are known as void tags. An HTML element is a component of the HTML document or web page after it has been parsed into Document Object Model (DOM). DOM is an internal representation within the web browser. It represents each document in a tree structure. In the browser, the displayable elements can either be a block element or an inline element. Block elements have a rectangular structure. The inline elements can be embedded in block elements. The key difference between block and the inline element is that the block elements take up the full width available while the inline elements take the required width to display the contents of the elements.
CONTENTS
1. Overview and Key Difference
2. What are Block Elements
3. What are Inline Elements
4. Similarities Between Block and Inline Elements
5. Side by Side Comparison – Block vs Inline Elements in Tabular Form
6. Summary
What are Block Elements?
Block elements take the available full width. Those elements always start with a new line. Some examples of block elements are as follows. <p> is used to define a paragraph. e.g. <p> This is a paragraph </p>. There are six tags to define headers. They are <h1>, <h2>, <h3> … <h6>. The programmer can use the header accordingly.
The ordered list is defined by <ol> while the unordered list is defined by <ul>. The <hr> is used to display a horizontal line across the web page. The <table> is used to arrange data in a table format. For every web site, it is required to collect data from the site visitors. HTML forms are used to get data from the user. It is also a block level element. Those are some examples of block elements in HTML.
What are Inline Elements?
Inline elements take only the required width. Those elements do not start with a new line. Some examples of inline elements are as follows. <a> is used to create links from one page to another. Hyperlinks are one of the essential elements in HTML. It can contain the href attribute to create a link to the destination. e.g. <a href= https://www.google.lk target= “_blank” > Visit Google </a>. The target attribute is blank. Therefore, the new document will open in a new window. If the target attribute is “_self”, then the linked document will open in the same window.
Figure 01: Examples of Block and Inline Elements
The <b> is used to bold a section of text. The <i> tag is to mae the text italic. A web page should be presentable. Therefore, any web page consists of multiple images. The <img> is used to display an image on the page. This tag requires two attributes. They are src and alt. The ‘src’ describes the location of the image and the ‘alt’ describes what the image is about. e.g. <img src= “/picture/image1.jpg” alt = “This is an image” />. These are some examples of inline elements.
What is the Similarity Between Block and Inline Elements?
- Block and inline elements are used as containers in HTML.
What is the Difference Between Block and Inline Elements?
Block vs Inline Elements |
|
| The block elements are the elements that will span the entire width of the parent element, and won’t allow any other element to occupy the same horizontal space as it is placed on. | The inline elements are the elements that cannot be placed directly inside the body element and which are nested within block elements. |
| New Line | |
| Block elements start with a new line. | Inline elements do not start with a new line. |
| Required Space | |
| The block elements take all width. | The inline elements will take only the required width. |
Summary – Block vs Inline Elements
HTML stands for Hyper Text Markup language. It is a language consisting of tags. Each tag has a specific task and defines how to structure the web page. Some tags have the starting tag and the ending tag. Some tags do not have an ending tag. They are called void tags. Parsing is the process of syntax analyzing. After the parsing step, these tags become elements. Elements can be block-level elements or inline elements. The difference between block and inline elements is that the block elements take up the full width available while the inline elements take the required width to display the contents of the elements.
Download the PDF Version of Block vs Inline Elements
You can download the PDF version of this article and use it for offline purposes as per citation note. Please download the PDF version here: Difference Between Block and Inline elements
Reference:
1.Ziroll, Bob. “HTML Block vs. Inline and Important Elements.” V School Web Development, V School Web Development, 31 Mar. 2016. Available here
2.“HTML element.” Wikipedia, Wikimedia Foundation, 10 Feb. 2018. Available here
3.HTML Block and Inline Elements. Available here
4.Point, Tutorials. “HTML Overview.” The Point. Tutorials Point, 8 Jan. 2018. Available here