Keyboard Shortcut for Notepad++ to Make HTML Coding Easily

Question

I am new here.

I'm starting learning Web Designing. I wonder when I watch the tutorial video I found on http://webdesign.tutsplus.com you might have to watch it.

I give the link for more detail http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-sleek-corporate-web-design-hd-video-series-day-3/ (PART 1) about the fourth minutes.

The author said if he used some tricks to make his coding easily and faster. He said he will generate <div id="TopContainer"></div> by writing div#TopContainer then pressing F1.

Yeah, I think it will save a lot more time. But I try to do that and do same like him. And I can't like the tutorial. I used Notepad++ 5.9.5. I want to ask and hope getting light about this cases.
What might my understanding is wrong, or I am wrong while doing it, or it may take some add-ons or plugins so I can do it.

Very appreciated all reply and help. I know I am very new on this field, and may it seem kidding for you. But really I need some "light" here.

Solution

all,

i suggest you to use Zen Coding, its nice and quickest way to create html files, it can support many editors

Zen coding

For online demo you can check it . Demo for zen coding

NOtepad++ extensions for zen coding