Bhavitha Cherukuri: HTML Block and Inline Elements

HTML Block and Inline Elements

Every HTML element has a default display value, depending on what type of element it is.

There are two display values: block and inline.

Block-level Elements

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.

Example

<!DOCTYPE html>
<html>
<body>

<p style="border: 5px solid black">Hello World</p>
<div style="border: 5px solid black">Hello World</div>

<p>The P and the DIV elements are both block elements, and they will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).</p>

</body>
</html>

Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

Example

<!DOCTYPE html>
<html>
<body>

<p>This is an inline span <span style="border: 5px solid hsl(0, 48%, 76%)">Hello World</span> element inside a paragraph.</p>

<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.</p>

</body>
</html>

The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:

Example

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is my first webpage</title>
    </head>
    <body>
    <div style="background-color:black; padding:20px;">
        <!--inline, Internal, External-->

        <h1 style="color:white">This is my website</h1>

        <p style="color:white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt corporis suscipit cupiditate iusto! Accusamus facilis similique repudiandae voluptatibus maxime molestiae nam doloremque. Perspiciatis accusamus neque cum. Id quia illo natus.</p>
        <p style="color:white">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem natus magnam excepturi beatae, repellendus facilis architecto sunt laboriosam nisi a eum nostrum dolor nemo omnis dolores, nobis animi quia? Culpa?</p>
        <p style="color:white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati tempore aliquam vel magni fuga pariatur vitae iste! Fugit modi explicabo veritatis nihil laborum autem, distinctio similique sed ut laboriosam dignissimos?</p>
    </div>

     </body>
</html>

The <span> Element

The <span> element is an inline container used to mark up a part of a text, or a part of a document.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

Example

<!DOCTYPE html>
<html>
<body>

<h1>The span element</h1>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis illum inventore ipsam libero, facilis suscipit quod atque eveniet quas! Fuga tempore libero recusandae dolore voluptates. Rem expedita ipsum distinctio pariatur?<span style="color:hsl(15, 88%, 44%);font-weight:bold;">Lorem</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et molestiae suscipit molestias excepturi in sint nam natus enim officiis sequi sit, ipsam quae ad unde earum obcaecati facere cum perspiciatis?<span style="color:hsl(119, 89%, 45%);font-weight:bold;">ipsam</span> eyes.</p>

</body>
</html>