Scribd Logo
Upload

Welcome to Scribd!

  • Block-Level and Inline Elements in HTML

    Uploaded by

    Jeronimo
    1 views10 pages
    lesson

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    lesson

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    1 views10 pages

    Block-Level and Inline Elements in HTML

    Uploaded by

    Jeronimo
    lesson

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    Block-Level and Inline

    Elements in HTML

    Dot Net Tutorials

    Back to: HTML Tutorials

    In this article, I am going to discuss Block-Level and


    Inline Elements in HTML with Examples. Please
    read our previous article where we discussed Iframes
    in HTML with Examples. At the end of this article,
    you will learn everything about Block-Level and Inline
    Elements in HTML with Examples.

    Block-Level Elements in HTML

    Block elements are elements that begin on a new line.


    A block element takes up the entire width available for
    that content. Block-level elements also have a top and
    bottom margin around the element.

    In comparison to inline elements, block-level elements


    create a larger structure. A block-level element always
    utilizes the entire available width. <address>, <article>,
    <aside>, <blockquote>, <canvas>,<div> are some
    examples of block-level elements.
    <p>This para will be displayed on new line because it
    is a block level element</p>

    <!DOCTYPE html> <html> <body> <h1>Hello</h1>


    <p>This para will be displayed on new line because it
    is a block level element</p> </body> </html>

    <!DOCTYPE html>
    <html>
    <body>

    <h1>Hello</h1>
    <p>This para will be displayed on new line because it
    is a block level element</p>

    </body>
    </html>

    When you run the above HTML code, you will get the
    following output in the browser.

    As you can see in the above example there is a lot of


    space available after hello but the para is printed on the
    next line because <p> is a block-level element.

    Inline Elements in HTML

    Elements that do not start on a new line are referred to


    as inline elements. It does not begin on a new line and
    occupies only the necessary width, i.e., the space
    defined by the tags defining the HTML element,
    instead of interrupting the flow of the content. <a>,
    <abbr>, <acronym>, <b>, <bdo>, <big>, <br> are
    some examples of inline elements.

    <span>This text be displayed on same line because it


    is a inline element</span>

    <a href="https://www.google.com">Hello</a>

    <a href="https://www.google.com">Hello</a>

    <!DOCTYPE html> <html> <body> <span>Hello


    !!!</span> <span>This text be displayed on same line
    because it is a inline element</span> <a
    href="https://www.google.com">Hello</a> <a
    href="https://www.google.com">Hello</a> </body>
    </html>

    <!DOCTYPE html>
    <html>
    <body>

    <span>Hello !!!</span>
    <span>This text be displayed on same line because it
    is a inline element</span>
    <a href="https://www.google.com">Hello</a>
    <a href="https://www.google.com">Hello</a>

    </body>
    </html>
    When you run the above HTML code, you will get the
    following output in the browser.

    All elements are displayed on the same line because


    inline elements take only the required space and don’t
    start on a new line. Inline elements also don’t have top
    and bottom margins around the elements.

    List of block-level and inline Elements in HTML


    In this article, I am going to discuss JavaScript in
    HTML with Examples. Here, in this article, I try to
    explain Block-Level and Inline Elements in HTML
    with Examples and I hope you enjoy these Block-
    Level and Inline Elements in HTML with Examples
    article.

    About the Author: Pranaya Rout

    Pranaya Rout has published more than 3,000 articles


    in his 11-year career. Pranaya Rout has very good
    experience with Microsoft Technologies, Including C#,
    VB, ASP.NET MVC, ASP.NET Web API, EF, EF
    Core, ADO.NET, LINQ, SQL Server, MYSQL,
    Oracle, ASP.NET Core, Cloud Computing,
    Microservices, Design Patterns and still learning new
    technologies.

    You might also like