HTML Block-Level and Inline Element
HTML TUTORIAL (PART-05)
HTML Block-Level and Inline Element
In this tutorial we learn about HTML Block-Level element and Inline element, how are these elements different from each other, now here we learn with example.
HTML Block-Level Element-
In HTML (Hyper Text Markup Language) Block-Level element is how different from the Inline element. An HTML Block-Level element is an element that create a horizontal boundary block. It always starts on a new line and take the full width available. Block-Level element always may be appeared within body <body> tag.
This is the list of commonly used HTML Block-Level Element.
- <h1> to <h6> element
- <p> element
- <div> element
- <hr> element
- <from> element, etc.
Here the programming Example of Block-Level Element.
<!DOCTYPE <html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <metaname="viewport" content="width=device-width, initial-scale=1.0"> <title>Blocl-Level Element</title> </head> <body> <h1>Block-Level Element</h1> <h2>Block-Level Element</h2> <h3>Block-Level Element</h3> <h4>Block-Level Element</h4> <h5>Block-Level Element</h5> <h6>Block-Level Element</h6> <p>It always start new line</p> <div>It is different from Inline element</div> <hr> </body> </html> |
Here the Output of this example-
Block-Level ElementBlock-Level Element
|
HTML Inline Element-
In HTML (Hyper Text Markup Language), Inline Element is an element that does not start on a new line. It does not create its own horizontal boundary block. We also called it is the opposite of Block-Level element. It is also appeared in the body tag of HTML webpages. Here is a list of some commonly used Inline Elements.
- <span> element
- <img> element
- <a> element
- <sub> element
- <button> element
- <b> element, etc.
Programming Example of Inline Element.
<!DOCTYPE <html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Inline Element</title> </head> <body> <img src="star.png"alt="Star"> <span>Inline Element</span> <ahref="https://www.Studymuch.in"> "StudyMuch.in" don't stat in new line.</a> <sub>Inline Element</sub> </body> </html> |
Here the Output of this example-
 |
Here in this tutorial, we learned HTML Block-level element and Inline element, and next tutorial we learned new best topic of HTML.
Also Learn This-
- HTML example of Hello world Program.
- HTML attributes and Comments.
- Learn HTML Link, Line Break.
- Learn HTML Style and Color
- Example of block-level elements in html.
- <div> block is an inline-level element.
- Inline elements in html examples.
- Block-level elements examples.
- Text level elements in html.
- Span is inline or block.
- Difference between inline and block elements in html.
-
Which of the following is not inline element?
3 Comments
zoritoler imol · October 23, 2022 at 4:23 am
Outstanding post however , I was wanting to know if you could write a litte more on this subject? I’d be very thankful if you could elaborate a little bit more. Thank you!
Bobby Cornn · January 16, 2023 at 7:38 am
I’m not that much of a internet reader to be honest but your blogs really nice, keep it up! I’ll go ahead and bookmark your website to come back down the road. Cheers
tlovertonet · May 5, 2024 at 7:18 pm
It’s actually a cool and useful piece of information. I’m satisfied that you just shared this useful information with us. Please keep us informed like this. Thanks for sharing.