HTML: Blocks

HTML blocks refer to elements that create a block-level box in the document's layout. These elements typically start on a new line and take up the full width available, pushing subsequent content down. Some common HTML block-level elements include <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, <table>, <form>, and <section>.

Here are a few examples of HTML block-level elements:

• <div>: The <div> element is a generic block-level container used to group and style content.

<div>
    <p>This is a paragraph inside a div block.</p>
    <img src="example.jpg" alt="Example Image">
</div>

• <p>: The <p> element represents a paragraph of text.

<p>This is a paragraph of text.</p>
<p>Another paragraph goes here.</p>

• <h1> to <h6>: Heading elements represent headings of different levels, with <h1> being the highest level and <h6> the lowest.

<h1>Main Heading</h1>
<h2>Subheading 1</h2>
<h3>Subheading 2</h3>

• <ul> and <li>: Unordered lists (<ul>) and list items (<li>) create lists without numerical order.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

• <table>, <tr>, <th>, <td>: These elements are used to create tables.

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

• <form>: The <form> element is used to create a form for user input.

<form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <button type="submit">Submit</button>
</form>

Each of these examples represents a different type of block-level element in HTML and serves various purposes in structuring and presenting content on a web page.