Block And Inline Level Tags in HTML
Block elements start on a new line and end with a carriage return. That’s, immediately after ending on a horizontal space, next block element goes to nest line.
nanadwumor
- A block level element is like a container. It can contain other elements.
-
Examples of block level elements include header (h1,h2,h3,h4,h5,h6) , paragraph tag <p>, <div> etc
- Inline elements stay in line with other elements without occupying a fresh line.
- Examples of inline elements are <a>, <strong>, <span>
RECOMMENDED ARTICLES
Difference Between Absolute and Relative References in HTML
A relative reference does not specify the complete path to a web page. It specifies only the name of the web page. An absolute reference or url contains all the information necessary to locate a resource or target A relative reference does not...
Selecting a browser for HTML5 development
Google's Chrome browser is simple to use and has the most up-to-date HTML5 features making it easier for developers. It also has pretty good developer tools. We recommend you use this browser to learn HTML5 Chrome Firefox Opera Apple Safari...
Top 10 HTML5 formatting tags
HTML offers a range of elements for formatting text. HTML formatting tags include : <b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized tex <mark> - Marked tex <small> - Smaller text <del> - Deleted...
HTML tags can be generally categorized in two groups. These are block level and Inline level tags. There are more block level elements in HTML than inline elements.
Join Other Subscribers on Our YouTube Channel and Don’t Miss a thing!
Block level elements
A block level element is like a container. It can contain other elements. Visually, block level elements occupy the whole horizontal stretch of a space in a browser. Examples of block level elements include header (h1,h2,h3,h4,h5,h6) , paragraph tag <p>, <div> etc
Block elements start on a new line and end with a carriage return. That’s, immediately after ending on a horizontal space, next block element goes to nest line.
For example,
<p>This is first line of text</p>
<p>This is second line of text</p> <p>This is third line of text</p>
Output
This is first line of text
This is second line of text
This is third line of text
We notice that each line of text delimited by <p> occupies a different space. Even when paragraph three begins immediately after paragraph two, we still see paragraph three moved to a different line.
Inline Elements
As the name suggests, inline elements stay in line with other elements without occupying a fresh line. They are in line.
That’s, inline elements are displayed on the same line. They do not start on a new line. They take up as much width as their contents require.
Examples of inline elements are <a>, <strong>, <span> etc
|
1 |
<p>We have <span style="color:red">Inline level</span> and <span style="color:red">Block level</span> elements. |
Output
In the above example, we see two <span> tags staying in same line with each other as well as the <p> tag.
Most HTML tags used for formatting are inline. Examples include <strong>, <em>, etc.
You May Also Like…
Difference Between Absolute and Relative References in HTML
A relative reference does not specify the complete path to a web page. It specifies only the name...
Selecting a browser for HTML5 development
Google's Chrome browser is simple to use and has the most up-to-date HTML5 features making it...
Top 10 HTML5 formatting tags
HTML offers a range of elements for formatting text. HTML formatting tags include : <b> -...
0 Comments