HTML5 Tutorial - HTML Block and Inline Elements

HTML Block and Inline Elements

Every HTML Element has a default display. It depends on type of elements. There are two types of elements as per display in which HTML elements can be categorized:

1. Block Level Elements
2. Inline Elements

<h1>This is heading.</h1>
<h1>This is Second heading.</h1>
<p>This is paragraph.</p>
<p>This is Second paragraph.</p>
<div>This is a section.</div>
<div>This is a second section.</div>
<p>The paragraph element is block level element but <span>span is inline element.</span></p>

In above example you can clearly notice that <h1>, <p>, <div> elements are covering full with of web page. They starched out from left to right with full available width.

Block Level Element

Block level elements are HTML elements that by default always cover full width on webpage. By default they have line break before and after them. They always start with a new line.

In above example <h1> and <p> have default margin that is why they are maintaining a distance between each other but <div> is a block level element that has no default margin and padding. This is the reason that both of the <div> are stick with each other.

Block level elements can be customized to display with CSS.

List of Block level elements

<div> <article>  <p>  <blockquote>  <nav>  <canvas>  <center>  <picture>  <pre>  <figure>  <header>

<ul>  <footer>  <ol>  <section>  <h1> - <h6> <form>  <hr>  <address>  <main>  <aside>  <output>

Inline Element

Inline elements are HTML Elements that cover up only as much width as they required. They don’t have line breaks by default and they only starched up to area till where the content require.

In the very first example of this chapter you can see yellow bordered area which is written inside <span> element, is actually an inline element.

List of Inline elements

<a> <br> <i>  <object> <abbr> <span> <strong> <big> <small> <sub> <sup>

<img> <b> <code> <kbd> <script> <label> <select> <button> <cite> <q> <em>

HTML Grouping Elements

HTML Grouping Elements are used to group other elements. There are two most important tags which regularly used to group the HTML elements.

1. <div> tag
2. <span> tag

The <div> tag

<div> is a block level element or tag that is used at high frequency to group the other HTML elements. It defines block level section in a document. It can be used to define the layout of a webpage. This tag doesn’t have any special default visual on webpage and not has any required attribute but this is very useful and meaningful when it is used with CSS. In other words it can be said that <div> is the block level container of another <div> tag or other HTML tags.

<div style = "color: #369000;">
 <h1>Asian Countries Group - 1</h1>
        <p>List of Asian Countries</p>
   <ul>
    <li>India</li>
    <li>Pakistan</li>
    <li>China</li>
    <li>Singapore</li>
    <li>Japan</li>
   </ul>
</div>
 
<div style = "color: #424242;">
 <h1>European Countries Group - 2</h1>
  <p>List of European Countries</p>
   <ul>
    <li>United Kingdom</li>
    <li>Germany</li>
    <li>Italy</li>
    <li>Spain</li>
    <li>Switzerland</li>
   </ul>
</div>

The <span> tag

<span> is an inline element that is used to group inline elements. It defines an inline section in HTML document. This tag doesn’t have any special default visual on webpage but this is very useful and meaningful when it is used with CSS. It doesn't required any special attribute.

<p>The Apples are <span style = "color:red;">Red</span> and 
 Guavas are <span style = "color:green;">Green</span>.</p>

Related Topics