Certificado HTML

HTML completion certificates: structure, print and verification

Online courses, in-company training, bootcamps and webinars all close with the same artefact: a certificate of completion. The HTML version is increasingly the canonical one because it can be embedded in a Learning Experience Platform (LXP), shared as a public URL on LinkedIn, exported to PDF for print and signed digitally — all from a single source file. Coursera, Udemy, Alura, edX, Udacity and most Brazilian EAD platforms render their certificates from an HTML template that they later snapshot to PDF, attach to the user account and email out.

A classic certificate has six fixed regions: a decorative border, the issuer's logo or brand mark, the phrase "Certificate of Completion" (or the institution's preferred wording), the recipient's name in a large display font, a descriptive paragraph naming the course, workload and completion date, and an authentication block with one or two signatures plus an optional verification QR Code. Everything else is decoration.

Page size, layout and typography

The default print canvas is A4 landscape (29.7 cm by 21 cm) in Brazil and most of the world, and US Letter landscape (11 by 8.5 inches) for the United States. For web display a 1200 by 900 pixel viewport gives a comfortable preview. Typography sets the tone: a serif family such as Garamond, Times New Roman or Playfair Display reads as institutional, while a script font like Pinyon Script or Great Vibes adds elegance to the recipient name. Mix at most two families — body text in a clean serif, the name in a script — to avoid a busy result.

Decorative borders are usually drawn with SVG patterns, CSS border-image or a classic medal frame composed of nested divs. Background watermarks, hologram-style gradients and serial numbers near the bottom signal a corporate certificate; courses for the general public often skip them.

Printing and PDF export

To guarantee that browser-print and PDF export match the visual preview, declare an explicit page rule:

@media print {
  @page { size: A4 landscape; margin: 0; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print { display: none; }
}

For programmatic PDF generation the most common stacks are jsPDF with html2canvas (browser), html2pdf.js (browser), and headless Chrome via Puppeteer or Playwright (server). Puppeteer's page.pdf() respects the @page rule and produces the cleanest output for production pipelines.

Verification, digital signature and blockchain

A printed certificate is easy to forge. Modern issuers add three layers of authentication: a unique serial number, a verification URL behind a QR Code (often example.edu/verify/{id}) and a cryptographic signature. In Brazil, courses with MEC validity use an ICP-Brasil digital signature attached to the PDF, which gives the document legal weight under MP 2200-2/2001. Internationally, Blockcerts (originated at MIT, adopted by Adobe and Salesforce Trailhead) anchors a hash of the certificate on a public blockchain, so any third party can verify authenticity without contacting the issuer. Decentralized Identifiers (DIDs) are the W3C-standardised next step.

Brand standards, MEC-recognised courses and MOOCs

Corporate certificates often follow brand guidelines: an approved logo file, brand colours, signature font and a watermark or hologram. MEC-recognised undergraduate and lato sensu courses must include specific data — course name, workload, conclusion date, institutional registry — and many universities also use a parallel digital validation portal. MOOCs (Coursera, edX, Udacity) issue certificates in similar layouts but with the platform brand dominating, and they almost always link to a public profile page rather than relying on the PDF alone.

Frequently asked questions

Will the certificate print correctly on A4? Yes. The layout is flexible and the @page rule above forces A4 landscape. For US Letter, change size to letter landscape.

Is a QR Code mandatory? No. It is optional but strongly recommended for any certificate of professional value, because it lets third parties confirm validity without contacting you.

Can I export to PDF directly from the browser? Yes. Use Ctrl+P (Cmd+P on Mac), choose "Save as PDF" and select landscape orientation. The @page rule handles the rest.

How do I add a digital signature with legal value in Brazil? Generate the PDF, then sign it with an ICP-Brasil A1 or A3 certificate using Adobe Acrobat, the gov.br assinador or a library like node-signpdf. The signature is preserved in the PDF and verifiable by any reader.

What is the difference between certificate and CV? A certificate is a single-document attestation of one specific event (a finished course, an award). A CV is a multi-page narrative of your whole career. Certificates are linked or attached to a CV, not part of it.