View video tutorial

HTML Block Elements

HTML

Block elements always start in a new line no matter how much space they need.

Block Elements


Block element always takes full block space for that element.

Block element starts new line always.

A Block element can take up one or more line as one block.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>
<!-- Example: Block Elements -->
<head>
    <title>Block Elements Example</title>
    <style>
        .highlight {
            background-color: rgb(78, 78, 78);
            color: white;
        }
    </style>
</head>

<body>
    <h1>Block Elements Example</h1>
    <div>Lorem Ipsum is <p class="highlight">simply dummy text </p> of the <div class="highlight">printing and </div>
        typesetting industry.
        <h1 class="highlight">Lorem Ipsum</h1> has been the industry's standard dummy text ever since the 1500s,
        when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.


Block Elements are

<address>, <article>, <aside>, <blockquote>, <details>, <dialog>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <li>, <main>, <nav>, <ol>, <p>, <pre>, <section>, <table>, <ul>.