HTML Block and Inline Elements

    In HTML elements are often used to display specific values, for example <img> display pictures, <h1> display bold-big heading text, and <p> display textual paragraphs. On the basis os displaying content HTML elements are divided into two categories.

    • Block Elements
    • Inline Elements

    Block Elements

    The Block elements always display their content or value from a new line. It occupies a rectangular area and stretches its surface according to the content and CSS specifiers. <p>, <pre>, <ul>, <table>, <hr>, and <li> are some examples of Block Elements.

    Example 

    <p> First Paragraph</p> <p> This is a new paragraph </p>
<div> Div block content </div>

    Output

    First Paragraph This is a new paragraph.

    Div block content

    Here you can see that all the elements content start form a new line, and each one has a separate spacing area.

    Major HTML Block element.

    <address> <article> <aside> <blockquote>
    <canvas> <dd> <div> <dl>
    <dt> <fieldset> <figcaption> <figure>
    <footer> <form> <h1> to <h6> <header>
    <hr> <li> <main> <nav>
    <nonscript> <ol> <p> <pre>
    <section> <table> <tfoot> <ul>

    Inline Elements

    Inline elements generally used as a nested element to the block elements. The inline element's content does not start from a new line; instead, it displayed in the line itself. The area of the inline elements depends on the length of the text.

    Example 

    <p> Welcome to <b>TechGeekBuzz</b> </p>

    Output

    Welcome to TechGeekBuzz

    Here <b> is the inline element and TechGeekBuzz it's content.

    Some Major Inline elements

    <a> <abbr> <acronym> <b>
    <bdo> <big> <button> <cite>
    <code> <dfn> <em> <i>
    <img> <input> <kbd> <lable>
    <map> <object> <output> <q>
    <samp> <script> <select> <small>
    <span> <strong> <sub> <textarea>
    <strong> <time> <tt> <sup>

    HTML <div> Element

    <div> is a very popular Block element, and it is generally used as a container that requires a specific styling. <div> does not have its own specific attributes but it can work with style , class and id .

    Example 

    <!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.first {
color: red;
}
.second {
color: blue;
}
</style>
</head>
<body>

<div class="first"> 
Step up and begin your game and if you 
are already in the journey, and enter the league of Tech Pros! 
</div>

<div class="second"> 
Tutorials are designed for all levels. The
concepts and code are described in details to be comprehended 
easily by the reader.
</div>

</body>
</html>

    Output

    Step up and begin your game and if you are already in the journey, and enter the league of Tech Pros!
    Tutorials are designed for all levels. The concepts and code are described in details to be comprehended easily by the reader.

    HTML <span> element

    Similar to <div> , <span> is also a container element, but it is used to represent inline content. Like <div>, <span> also does not have its unique attributes, but it can use style, class and id attributes.

    Example 

    <p> Welcome to <span style="color:red;"> TechGeekBuzz </span></p>

    Output

    Welcome to TechGeekBuzz

    Summary

    • Block start its content from a new line.
    • Inline is used inside the Block content.
    • Both Block and Inline are used as a container that needs specific styling and scripting.
    • We can not use block elements inside the inline elements.
    Previous Tutorial Next Tutorial