A page break in HTML is used to force content onto a new page when printing a webpage. It’s mainly controlled with CSS, not plain HTML tags.

HTML itself doesn’t have a true “page break” tag for screen display, but you can create page breaks for print layouts using CSS properties like page-break-before, page-break-after, or the modern break-before.

Example:

<div style="page-break-after: always;"></div>

This tells the browser to start a new page when printing.

1. What is a Page Break?

A page break forces content to start on a new page when printing a webpage or converting it to PDF.

In HTML, there is no visible page break on the screen.
Page breaks affect printing (Ctrl + P) or PDF export.
They are controlled using CSS, not standard HTML tags.

2. Basic CSS Page Break Properties

CSS provides three main properties:

Property	Description
`page-break-before`	Inserts a page break before the element
`page-break-after`	Inserts a page break after the element
`page-break-inside`	Prevents a page break inside an element

Values:

auto → Default, no forced page break
always → Always create a page break
avoid → Avoid breaking if possible

Note: page-break-* is supported in most browsers for printing.
In modern CSS, you can also use break-before, break-after, break-inside.

3. Example: Forcing a Page Break

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
    page-break-before: always; /* Force new page before h2 when printing */
}

section {
    page-break-inside: avoid; /* Keep section content together */
}

hr {
    page-break-after: always; /* Force new page after horizontal rule */
}
</style>
</head>
<body>

<h1>Chapter 1</h1>
<p>Content of chapter 1...</p>

<hr>

<h2>Chapter 2</h2>
<p>Content of chapter 2...</p>

</body>
</html>

When printed, each <h2> starts on a new page.
<section> will not break across pages.

4. Using Modern CSS Properties

Modern CSS introduces:

Property	Alternative to older property
`break-before`	`page-break-before`
`break-after`	`page-break-after`
`break-inside`	`page-break-inside`

Example:

h2 {
    break-before: page;
}

section {
    break-inside: avoid;
}

page → same as always
avoid → prevents breaking

Modern properties are more consistent with screen, print, and PDF export.

5. Page Break in PDF Generation

When generating PDF from HTML (using libraries like wkhtmltopdf, jsPDF, PrinceXML, or Puppeteer):

CSS page breaks (page-break-* or break-*) are respected
You can control which elements start on a new page
Example:

.print-section {
    break-before: page;
}

<div class="print-section">
    <h1>New PDF Page</h1>
</div>

6. Preventing Page Breaks Inside Elements

If you have a table, list, or paragraph that should stay together on one page:

table {
    page-break-inside: avoid;
}

ul {
    page-break-inside: avoid;
}

Ensures table rows or list items aren’t split across pages.

7. Tips for Using Page Breaks in HTML

Test in Print Preview
Use browser print preview (Ctrl + P) to verify breaks.
Combine with @media print
Only apply page breaks when printing:

@media print {
    h2 {
        page-break-before: always;
    }
}

Use break-* for modern browsers
Prefer break-before, break-after, break-inside over old properties.
Avoid overusing
Too many forced page breaks can make your document hard to read.
Tables and Images
Use page-break-inside: avoid to prevent splitting rows or images.

8. Quick Example: Full Printable HTML Page with Page Breaks

<!DOCTYPE html>
<html>
<head>
<style>
@media print {
    h2 {
        break-before: page;
    }
    section {
        break-inside: avoid;
    }
}
</style>
</head>
<body>

<h1>My Document</h1>

<section>
    <h2>Chapter 1</h2>
    <p>Lots of text...</p>
</section>

<section>
    <h2>Chapter 2</h2>
    <p>More text...</p>
</section>

<section>
    <h2>Chapter 3</h2>
    <p>Final text...</p>
</section>

</body>
</html>

Result:

Each <h2> starts a new printed page.
Each <section> content stays together.

9. Summary

Feature	Property	Example
Page break before element	`page-break-before: always;`	`<h2>`
Page break after element	`page-break-after: always;`	`<hr>`
Prevent break inside	`page-break-inside: avoid;`	`<table>`
Modern syntax	`break-before: page; break-after: page; break-inside: avoid;`	Works in print & PDF

Page breaks are primarily for print or PDF, not visible on the screen.

HTML page break-Everything you need to know

Example:

1. What is a Page Break?

2. Basic CSS Page Break Properties

Values:

3. Example: Forcing a Page Break

4. Using Modern CSS Properties

Example:

5. Page Break in PDF Generation

6. Preventing Page Breaks Inside Elements

7. Tips for Using Page Breaks in HTML

8. Quick Example: Full Printable HTML Page with Page Breaks

9. Summary

Other Courses:

Leave a Comment Cancel Reply