Coding HTML with Notepad++

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:

1. Select the View menu
2. Activate the Word wrap option

Auto-completion

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:

Auto-insert

This is a setting I highly recommend you learn to use. Navigate to the Auto-Insert options: Settings » 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

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).

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++

Read the post: Being selective: navigating the Microsoft environment for more keyboard shortcuts and related skills.

“Prettify” your HTML with XML Tools

OK so you may not be able to install this extension on the computer you work on at school, so it is mostly just a bonus extra for those of you who are bitten by the bug and do a lot of HTML coding at home.

Using this extension, you simply select your HTML code, and the extension will format it correctly, indents and all! This can be super useful when working on someone else’s code who has not followed the basic HTML code formatting standards.

1. Plugins >> Plugins Admin and select the Available tab
2. Search for and select XML Tools
3. Click the Install button
4. The extension will now appear on the Installed tab

The screenshots below demonstrate the use of the extension; the “prettified” HTML is visible in the “After” screenshot:

1. Select the Plugins menu
2. Select the XML Tools option
3. Select the Pretty print option from the sub-menu