9.1 Block Elements
HTML Block Model is a concept that describes the structure and display of HTML elements in a document. It helps developers understand how elements interact with each other and how they are positioned on the page. Understanding the block model is important for creating structured and aesthetically appealing web pages.
The HTML block model consists of two main types of elements: block and inline. These elements play a key role in web page layout.
Block Elements
| HTML Tag | Description |
|---|---|
<div> |
Primary container for grouping other elements. |
<p> |
Paragraph of text. |
<h1> – <h6> |
Headings of various levels. |
<ul>, <ol> |
Unnumbered and numbered lists. |
<li> |
List item. |
<section> |
Semantic container for a section of a document. |
<article> |
Independent block of content. |
<aside> |
Content related to the main content (sidebar). |
<header> |
Introductory or navigational part of a page or section. |
<footer> |
Bottom part of a page or section. |
<nav> |
Navigation links. |
<main> |
Main content of the document. |
Example of a block element:
<div>
<h1>Title</h1>
<p>This is a paragraph of text inside a block element div.</p>
</div>
9.2 Inline Elements
Inline elements take up only as much width as their content requires and don't start on a new line. They can contain only inline elements or text. Examples of inline elements:
| HTML Tag | Description |
|---|---|
<span> |
Primary container for grouping inline content. |
<a> |
Hyperlink. |
<strong>, <b> |
Text emphasis (bold). |
<em>, <i> |
Text emphasis (italic). |
<img> |
Image insertion. |
<code> |
Code emphasis. |
<label> |
Association between label and form element. |
<input>, <select>, <textarea> |
Form elements. |
Example of an inline element:
<span>This is a paragraph with <strong>bold text</strong> and <em>italics</em>.</span>
9.3 Components of the Block Model
Each element in the block model can be represented as a rectangular block consisting of the following parts:
- Content: inner content of the element, such as text or image
- Padding: space between the content and the element's border
- Border: line surrounding the padding and content
- Margin: space between the element's border and neighboring elements
Visualization of the block model:
.element {
width: 200px; /* Content width */
padding: 10px; /* Padding */
border: 2px solid red; /* Border */
margin: 20px; /* Margin */
}
Example HTML with block model:
In this example, the <div> element with the class "box" has a width of 200px, padding of 10px, border of 2px, and margin of 20px. These properties define how the element is displayed on the page and interacts with other elements.
.box {
width: 200px;
padding: 10px;
border: 2px solid red;
margin: 20px;
}
<div class="box">
This is an example of a block model.
</div>
GO TO FULL VERSION