Add Bold, Color, and Style to Your Recipes with HTML
Pam Erickson, our amazing tech support agent who joined us from MasterCook, is putting the finishing touches on the HomeCook’n 2025 Collection cookbook. Along the way, she discovered one of Cook’n Desktop’s most powerful hidden features.
She wrote:
“I'm having a blast with HTML in the directions. :) I've been learning with W3Schools.”
When I read that, I smiled and replied:
“I'm so glad to hear it! The HTML capability is really pretty powerful and gives users almost unlimited possibilities!”
Pam agreed:
“MasterCook never rendered HTML in the recipe display, so this is new territory for me. The recipes in this year's newsletter cookbook will give users ideas for their own recipes.”
If you're a bit of a techie, you're going to love this.
What Is HTML?
HTML stands for HyperText Markup Language. It is the same code used to format web pages. In Cook’n Desktop for Windows and Mac, you can add HTML tags to your recipe directions while editing a recipe.
When you switch to the View tab, Cook’n renders the HTML so your recipes can appear with bold text, italics, colors, larger text, and more.
Why Use HTML in Recipes?
HTML can help you:
- Highlight important warnings
- Emphasize critical steps
- Color-code notes
- Increase font size for easy reading
- Create visually appealing family cookbooks
This is especially helpful for notes like:
- Do not overmix!
- Reserve 1 cup of sauce before baking.
- Internal temperature must reach 165°F.
- Grandma’s secret tips and serving suggestions.
Example: Make Important Instructions Bold
Suppose your recipe includes this reminder:
Don't forget to set aside some of the marinade for basting the chicken while you're grilling it.
To make the most important part bold, enter this in the Edit tab:
<b>Don't forget to set aside some of the marinade</b> for basting the chicken while you're grilling it.
When viewed in Cook’n, it will appear like this:
Don't forget to set aside some of the marinade for basting the chicken while you're grilling it.
Useful HTML Tags for Recipes
| Effect | HTML Code |
|---|---|
| Bold | <b>Important step</b> |
| Italic | <i>Chef's note</i> |
| Underline | <u>Read carefully</u> |
| Red Text | <font color=red>Warning!</font> |
| Larger Text | <font size=5>Big Title</font> |
| Line Break | <br> |
Example: Highlight a Food Safety Warning
<font color=red><b>Important:</b> Chicken must reach 165°F.</font>
This will display in red bold text to ensure it never gets overlooked.
Learn More About HTML
Pam recommends W3Schools, one of the best free websites for learning HTML.
You can also ask Google or ChatGPT questions like:
- “How do I make text blue in HTML?”
- “How do I increase font size?”
- “How do I center text?”
The Possibilities Are Nearly Endless
With a few simple HTML tags, you can transform ordinary recipes into beautifully formatted instructions that are easier to read and harder to mess up.
Whether you're creating a polished family cookbook or simply making sure no one forgets to reserve the marinade, HTML gives you more control over how your recipes appear.
Have fun experimenting. Once you start, you may never look at plain-text recipes the same way again!
