HTML Block Elements

In HTML, block Elements are those Elements that always start on a new line and take up the full width available (by disclaimer). These elements form the structure or "blocks" of a webpage — similar as heads, paragraphs, and divisions.

Characteristics of Block Elements

  • Start on a new line.
  • Stretch to the full width of the container by disclaimer.
  • Can contain other block elements or inline elements.

Common Block Elements

  • <div> – Defines a general block-position container.
  • <p> – Represents a paragraph.
  • <h1> – Defines the largest heading.
  • <h2> – Defines the second largest heading.
  • <h3> – Defines the third largest heading.
  • <h4> – Defines the fourth largest heading.
  • <h5> – Defines the fifth largest heading.
  • <h6> – Defines the lowest heading.
  • <ol> – Defines an ordered list.
  • <ul> – Defines an unordered list.
  • <li> – Defines a list point.
  • <table> – Defines a table.
  • <thead> – Groups the heading content in a table.
  • <tbody> – Groups the body content in a table.
  • <tfoot> – Groups the footer content in a table.
  • <section> – Defines a section in a document.
  • <article> – Represents a self-contained composition.
  • <aside> – Defines content aside from the main content.
  • <nav> – Defines navigation links.
  • <footer> – Defines the footer of a section or web page.

Example

HTML Code


      <div style="border: 1px solid #ccc;">
        <h2>This is a heading</h2>
        <p>This is a paragraph inside a div.</p>
      </div>

Output:

Block Elements Output

(This image here showing a bordered box containing a heading "This is a heading" on one line and a paragraph "This is a paragraph inside a div." on the next line, both taking the full width of the box.)

Note

Block elements are stylish used to produce layout and structure. Inline elements, like <span> or <a>, should be used inside block elements for text formatting or linking.

Try it Yourself