×
Course: Box Model

Block-level Elements [1/23]

Elements of an HTML page are usually classified into block-level elements and inline elements.

Block-level elements are represented as rectangular boxes on the page. They have the following features:

  1. There is a line break before and after a block-level element.
  2. You can set width, height, paddings and margins for them.
  3. They occupy all the horizontal space available to them.

Block-level elements are such tags as: <p>, <h1>, <h2>, <ul>, etc.

<div> is another important block-level tag. It is plainly a "block" or "rectangular container". This tag is most commonly used to create page layouts.

There are also more sophisticated elements and we are going to learn in the second part of the course.


Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Block-Level Elements</title> <link rel="stylesheet" href="/assets/course12/style.css"> </head> <body> <h1>Element Types</h1> <div> <h2>Block-Level Elements</h2> <h2>Inline Elements</h2> </div> </body> </html>
CSS
p, div, h1, h2 { margin: 10px; padding: 10px; }
HTML Academy
  1. Add two p elements and
  2. two div elements to the page.
Theory Check Next