How to preview and check HTML code
Before HTML goes into a website, an email or a CMS, it pays to see it rendered and to catch mistakes. Here is a quick routine that works for pages, snippets and email templates.
1. Look at it at three widths
Switch between Phone, Tablet and Laptop. Text that overflows, tables that are too wide and images without max-width show up straight away at 375 pixels.
2. Read the console
Red lines in the console are JavaScript errors that stop the rest of a script. The line number points into the JavaScript tab, or into the HTML if the script is inline.
3. Fix the code check items
Errors first: unclosed tags and duplicate IDs cause layout and script bugs. Then warnings such as missing alt text and title, which affect accessibility and search.
Snippets for a CMS
- Paste only the part that goes in the editor, without html and body tags.
- Put styles inline or in the CSS tab to see the final look.
- Use Format before pasting so the next person can read it.
- Check the snippet at Phone width, since most visitors use phones.