Notepad++ banner.

Whilst Notepad++ is not a full WYSIWYG like Adobe Dreamweaver it does offer a fair amount of help to the HTML coder. It is well worth your while to have a look at some of the settings as one or two small tweaks can really make a difference to how you code (Cracking HTML in the CAT syllabus has a few more recommendations for improving your HTML). Remember: your file must already have been saved with an .html extension for these features to work.

In this post:

  1. Word wrap
  2. Auto-completion
  3. Auto-insert
  4. Highlight Matching Tags
  5. Coding like a pro: keyboard shortcuts

Word wrap

The simplest and most important setting to check is Word wrap. If it is not activated your code will run off the screen on the right and you will have to scroll horizontally which is a nightmare! The Word wrap setting can be activated in the View menu.


The code AutoComplete feature in Notepad++ can be confusing as apart from anything else it offers you options that are not in the curriculum or are not relevant to HTML. The screengrab below illustrates this; in addition to the correct option (p) being displayed, a whole list of additional options (most of which are CSS attributes and could not be used at this point in the code) are offered:

AutoComplete in Notepadd++


This is a setting I highly recommend you learn to use. Navigate to the Auto-Insert options: Settings » Preferences:

Setting Notepad++ preferences
  1. On the Preferences dialogue window
  2. Select the Auto-Completion tab
  3. Activate the html/xml close tag option

Now, when you finish typing an opening tag the appropriate closing tag will automatically be inserted and the cursor will be in between the opening and closing tags for you to type the content. This is a great way to ensure you always match your tags correctly.

Highlight Matching Tags

Probably the most useful feature is the highlighting of matching tags — use the slider to view what happens:

  1. when you select a tag (the opening <table> tag in the below example) it is highlighted
  2. and its matching, closing </table> tag is also highlighted
Notepad++ code matching tags selectionNotepad++ code matching tags selection

In the before-and-after image below you can see how code highlighting can help you pick up a common error: an <h1> tag where a lowercase “L” has been used instead of a 1 (the digit one).

Notepad++ syntax highlighting errorNotepad++ syntax highlighting error corrected

This is also invaluable for checking that you have nested your tags correctly.

If you find that the default highlight colour (the dull purplish colour) is not obvious enough, you can even change that! Navigate to: Settings » Style Configurator…:

  1. Open the Style Configurator
  2. Select Global Styles
  3. Select the Tags matching highlight option
  4. Click on the Background colour swatch and select a colour
  5. Click the Save & Close button

Coding like a pro: keyboard shortcuts

Now that you are writing code you will find that you are typing quite a bit and it will help if you adjust your style of working to rely on keyboard shortcuts. Your fingers will soon dance across the keyboard as you code your web pages:

  1. CNTRL+S to save changes in your file (CNTRL+SHIFT+S to save changes in all open files) in Notepad++
  2. ALT+TAB; to switch to your browser
  3. f5 to refresh the page in the browser to see your changes
  4. ALT+TAB to switch back to Notepad++

For more keyboard shortcuts and related skills, read the post: Being selective: navigating the Microsoft environment.

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.