How To Use Page Breaks In HTML

When writing documents, HTML is actually not a bad choice because you have plenty of editors to choose from and it is universally compatible. Concerning editors, you could use Seamonkey (it has an HTML editor in its suite), Kompozer or even text editors like Notepad or vi.

The issue with HTML however is that it’s not exactly clear how to make a page break. This is a completely do-able thing, and all that’s required are the use of header tags and one line of CSS in the "source" view.

CSS as most of you know means Cascading Style Sheet. You can use CSS either directly in the document or as a separate file. For simplicity’s sake I’m going to instruct how to use this directly in the document using very ‘ugly’ code, but it works.

Step 1. Input one line of code in the top of your document using "source" view

You cannot type this directly in the document because it won’t work. This code is specifically for the ‘source’ view.

The code is this:

<style type="text/css">h1 {page-break-before:always}</style>

Put this at the very top of the document.

Step 2. Use the H1 tag

H1 in HTML editors is usually labeled as "Heading 1". It’s in the same drop-down menu where it shows "Paragraph". When you highlight a block of text and change it to Heading 1, the font will be bold and large; this is normal. If you make a mistake, you can change it back to Paragraph, then select the appropriate text you want to use as Heading 1.

Any time you use Heading 1 from that point forward, a page break will happen directly before it.

Step 3. Load in web browser, print

On double-click of your file ending in .html, it will load in your web browser by default. Print from there, and the browser will obey the areas where you used H1 for page breaks.

Want a table of contents (or not waste paper)? Print to PDF

Using free PDF creator software such as PDFCreator, any document you print to a PDF file will generate its own table of contents based on your use of Heading 1. This will be shown in the left sidebar of your PDF reader of choice.

If you want to get really fancy, you can make subsections by using Heading 2, Heading 3 and so on – all the way up to Heading 6. Only Heading 1 will make a page break as you put in your code, but the others will divide into subsections. These subsections will appear as collapsible/expandable tree-style menus in your PDF reader.

When your HTML document is in PDF form, it looks and acts like it would in a word processor like Word or OpenOffice.org Writer. In a browser you don’t see page breaks even if you have them in the code, but in PDF form you do.