An HTML inline element is totally opposite to the block elements on the page. HTML inline elements and blocks are special tag elements that decide the structure of elements in the HTML document based on the document flow. The HTML inline element and blocks share significant differences in the way they work and are implemented in the document flow.
Sometimes, new developers get confused between the inline elements and block elements which might lead to discrepancies in the web design. In this article, we are going to learn more about HTML inline elements and HTML block elements. We will also learn about some major differences between these two element tags in HTML.
HTML Inline Element
The HTML Inline Elements are used to start a statement from the same line without using a new space. It also avoids top and bottom margins. They do not create a new block and only take up as much width as required within the same line.
For instance, inline elements are <span>, <a>, <b>, <strong> <u>, and more tags. These HTML tags do not start from a new line, rather, they resume from the same line. They only take as much space as necessary to contain statements inside.
Examples of HTML Inline Element
The HTML inline element starts from the same block in the document and does not require covering all the space available on the webpage.
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Inline Elements</title> </head> <body> <p>This is a <span style=”color: blue;”>span</span> inside a paragraph.</p> <p>Click <a href=”#”>here</a> to visit a link.</p> <p><strong>Bold</strong> and <em>italic</em> are inline elements.</p> <p>Here is an image: <img src=”example.jpg” alt=”Example Image” width=”100″></p> </body> </html> |
In the above example, we can clearly see some of the HTML inline elements such as <span>, <a>, <strong>, and more, which do not take a new line to start and continue from the available space.
Example of Block Elements HTML
The block level elements of HTML take complete space wherever they start and must start with a new line hence, they are preferred for giving headers, footers, navbars, paragraphs, div tags, and more.
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Block Elements</title> </head> <body> <h1>This is a Block Element</h1> <p>This is a paragraph, which is also a block element.</p> <div style=”background-color: lightgray; padding: 10px;”> This is a <strong>div</strong>, a block-level container. </div> <section> <h2>Section Title</h2> <p>This is a section containing a heading and a paragraph.</p> </section> </body> </html> |
HTML Inline Element Vs Block Element Tags
Let us compare between HTML inline elements and block element tags below.
| HTML Inline Element | HTML Block Element |
| ✔️Inline Elements do not create a new block and only take up as much width as necessary within the same line. | ✔️Block elements create a new block level structure in the document with full width available in the document. |
| ✔️Inline elements stay within the same line. | ✔️Block Elements always start with a new line. |
| ✅ HTML inline element takes as much space as is available or required. | ✅ Block elements span the full width of their parent container by default. |
| ✔️HTML Inline elements can contain inline elements inside. | ✔️Block elements can contain an HTML inline element inside. |
| ✔️Inline elements do not disrupt the flow of content on the webpage. | ✔️Block elements affect the page layout as they divide contents into separate sections. |
| ✅ Inline elements are often used for styling a portion of elements within a block. | ✅It can be used to structure content such as headings, paragraphs, sections, etc. |
HTML Inline & Block Element Tags
Let us list all HTML inline and block elements frequently used in web development.
| HTML Inline Elements | HTML Block Elements |
| <span>, <a>, <strong>, <em>, <b>, <i>, <u>, <img>, <input>, <label> | <div>, <p>, <h1>, <section>, <article>, <header>, <footer>, <ul>, <ol>, <table>, <form> |
Which is More Used: Inline Elements or Block Elements?
Both HTML inline elements and block elements are used more often when designing and developing web pages. Inline elements are primarily used to style the elements on a web page with anchor tags, strong, labels, images, underlining and more.
Block elements, on the other hand, decide and structure the layouts of the page. You can alter the complete structures of the web page with these block element tags. Both of these elements are necessary to design web pages and applications. We can convert an HTML inline element into a block element and vice versa as per our uses or needs.
How To Change An HTML Inline Element Into Block Element?
You can change a section or element in the HTML document in the form of block elements. You will use CSS attributes to change the inline element into block elements using the display property.
display: block;
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Inline to Block Example</title> <style> span { display: block; /* Converts inline span to a block element */ background-color: lightblue; padding: 10px; margin: 10px 0; } </style> </head> <body> <p>Normal inline <span>This span is now a block element.</span> behavior changed.</p> </body> </html> |
If you want an element to retain its inline properties but also accept block-level styles like width and height then you can use the “inline-block” property.
| <style>
a { display: inline-block; /* Allows width, height, margin, padding */ background-color: yellow; padding: 10px; width: 150px; text-align: center; } </style> <a href=”#”>This link is now inline-block</a> |
<a> anchor tag being an HTML inline element, we can use inline-block display attribute to make changes in the element display while retaining its inline properties.
Learn HTML & Web Development With PW Skills
Grab Full Stack Web Development Skills and discover a wide range of career opportunities as a frontend developer, backend developer, full stack developer, and more. Develop skills in trending technologies and frameworks with PW Skills Full Stack Web Development Course this year.
Get in-depth tutorials and interactive classes covering fundamentals, tools, and real world projects within the course. You will also get coding exercises, assignments, capstone projects, certification, doubt support and more only at pwskills.com
HTML Inline Element FAQs
Q1. What is the HTML inline element?
Ans: The HTML Inline Elements are used to start a statement from the same line without using a new space. It also avoids top and bottom margins. They do not create a new block and only take up as much width as required within the same line.
Q2. What is a Block elements HTML?
Ans: The block level elements HTML take complete space wherever they start and must start with a new line and hence are more preferred for giving headers, footers, navbars, paragraphs, div tags and more.
Q3. Can an Inline element contain a block element inside?
Ans: No, inline elements cannot contain a block element inside due to the default constraints in these element tags. You can use an inline element in a block element but vice versa is not possible.
Q4. How to change an inline element into a block element?
Ans: You can use the display property in the CSS to change the behaviour of the HTML inline element into a block element. You can use either “block” or “inline-block” to implement this.
