start learning
Image 1
3208785

HTML Blocks

In HTML, a block element is a type of HTML element that occupies the entire width of its parent element by default, creating a block-level box. It starts on a new line and typically stretches from the left edge to the right edge of its containing element. Block elements are commonly used to structure the layout and organization of content on a web page.

Here's an example of a block-level element, specifically the <div> element :


<div>
  This is a block-level element.
</div>

In this example, the <div> element represents a block-level container. It creates a rectangular block on the web page and can contain other HTML elements inside it. The content within the <div> will start on a new line and span the full width of its parent container, unless specified otherwise through CSS styling.

Block elements can be used for various purposes such as grouping elements, creating sections, defining layout structures, and applying styles. Some commonly used block-level elements include <div>, <p>, <h1> to <h6> (heading elements), <ul> (unordered list), <ol> (ordered list), and <section>.

Here are a few more examples of commonly used block-level elements in HTML:

<p> - Represents a paragraph of text.


<div>
<p>This is a paragraph.</p>
</div>

Preview :

This is a paragraph.

<h1> to <h6> - Heading elements

where <h1> represents the highest level of heading and <h6> represents the lowest level.


<div>
<h1>This is a heading</h1>
<h2>This is a subheading</h2>
</div>

Preview :
<h1>This is a heading</h1> <h2>This is a subheading</h2>

<ul> - Unordered list

typically used to create bullet point lists.


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

Preview :
  • Item 1
  • Item 2
  • Item 3

<ol> - Ordered list

used to create numbered lists.


<div>
    <ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
    </ol>
</div>

Preview :
  1. First item
  2. Second item
  3. Third item

<div> - A generic block-level container

Can be used to group and organize other elements.


<div>
   <div>
  <h3>Section Title</h3>
  <p>Content goes here.</p>
</div>
</div>

Preview :

Section Title

Content goes here.

<section>

Represents a standalone section of content on a web page.


<div>
<section>
  <h2>About Us</h2>
  <p>Some information about our company.</p>
</section>
</div>

<header>

Typically used to define the header section of a document or a section within it.


<header>
  <h1>Welcome to our website</h1>
 <nav>
    <!-- Navigation links here -->
  </nav>
</header>

These are just a few examples, and there are many other block-level elements available in HTML. Remember that the choice of which element to use depends on the specific purpose and structure of your web page.