Exercise 2: What’s New in the HTML Editor
Visual Studio has an improved HTML editor. Some of the enhancements included in this version are smart indentation in HTML documents, HTML5 snippets, HTML start and end tag matching, and HTML validation. Throughout this exercise, you will see how these changes improve your fluency when working in the website markup.
Like the CSS editor, the HTML editor was also improved. Most of these improvements are small ones that make the Web developer’s life easier. Things like more code snippets for HTML5, smart indentation, matching start and end tags when editing and validation targeting the HTML document DOCTYPE are some of these improvements.
Task 1 – Improved DOCTYPE Validation
The HTML editor now has the ability to check the DOCTYPE of your page, even though the definition might be in the master page. Depending on the DOCTYPE of your page, the HTML editor will validate with the correct set of rules and will filter the IntelliSense list considering the DOCTYPE elements.
In this task, you will change the DOCTYPE of a page to see how the HTML editor behavior changes accordingly.
Task 2 – Start/End Tags Automatic Update
Visual Studio now updates the HTML opening or closing tags of the element that you are editing to match each other. This new feature will improve your productivity when editing HTML tags.
Task 3 – New HTML5 Code Snippets
Visual Studio now includes several HTML5code snippets. In this task, you will use some of these snippets.
Task 4 – HTML Editor Smart Tags
Another improvement in the HTML Editor is the Smart Tags feature. Smart tags make it easy to perform common or repetitive development tasks on a per-control basis. This feature was already available in the HTML Designer, but not in the HTML Editor.
Task 5 – Smart Indentation
One of the best practices in HTML is indenting the nested elements to keep the code readable. In Visual Studio 11, you will notice that the editor automatically indents the elements while you are writing the code.
In previous version of Visual Studio, smart indentation was available in the XML editor but not in the HTML editor.
Task 6 – Extract to User Control
The Refactoring tools included in Visual Studio, such as extracting a portion of code to a function, are great features that facilitate the improvement and the refactoring the existing code. The counterpart for ASP.NET pages would be the extraction of HTML code to a User Control. Doing it manually would involve several steps, like creating a new User Control, moving the code section to the User Control, registering a tag prefix for the User Control, and, finally, instantiating the User Control on the pages. Now, the new Extract to User Control tool automatically performs all those steps for you.
In this task, you will use the new Extract to User Control contextual operation to generate a new user control from the selected code.