Home
Fullpage
HTML

HTML Block Elements

You already know about HTML inline elements.

 

HTML Block Elements

You already know about HTML inline elements. All HTML tags have specific display behavior: they are either block-level elements or inline elements.

What are Block-level Elements?

Block-level elements are those that start on a new line and take up the entire width of their container by default. They essentially claim all the horizontal space for themselves, pushing any content that comes after them to a new line.

Characteristics of Block-level Elements:

  • Always start on a new line.
  • Take up the full width available.
  • Width and height can be controlled via CSS.
  • Can contain other block-level as well as inline elements.

Common Block-level Elements:

  • <h1>,<h2>,<h3>,<h4>,<h5>,<h6> - Headings
  • <p> - Paragraphs
  • <hr> - Horizontal rule
  • <address> - Address information
  • <article> - Article content
  • <aside> - Sidebar content
  • <blockquote> - Block quotations
  • <canvas> - Drawing area
  • <dd> - Description in a description list
  • <div> - Generic container
  • <dl> - Description list
  • <dt> - Term in a description list
  • <fieldset> - Group of related form elements
  • <figcaption> - Caption for a figure
  • <figure> - Image or media with a caption
  • <footer> - Footer of a section or page
  • <form> - HTML form
  • <header> - Header of a section or page
  • <li> - List item
  • <main> - Main content of a document
  • <nav> - Navigation links
  • <noscript> - Alternate content when JavaScript is not enabled
  • <ol> - Ordered list
  • <ul> - Unordered list
  • <pre> - Preformatted text
  • <section> - Standalone section in a document
  • <table> - Table
  • <video> - Video content

Post a Comment