HTML 5

Improvements in HTML Editor With Visual Studio 2015

Overview

The HTML Editor has now been improved with Visual Studio 2015 Preview. It had been announced by Microsoft at the Visual Studio Connect() event on November 12, 2014. On that day many announcement were made by Microsoft's Professionals, the improvement to the HTML editor is one of those.

Let us learn about the major improvement in the HTML Editor with Visual Studio 2015 Preview. Here Visual Studio 2015 is the latest IDE of Microsoft. Now we are listing all the major improvements of the HTML Editor below.

  • Tooltip is available
     
  • # Region Support
     
  • Support for custom elements, polymer-elements and attributes.
     
  • Basic IntelliSence for Web Component

Tooltip is Available

As we know before the release of Visual Studio 2015 we couldn't use the tooltip attribute with HTML web components (HTML elements) like Button, Tex, Label, Image, Checkbox or any others but now we can use this attribute with HTML web components also. Now we can use tooltip with HTML elements without any extra help like JavaScript and jQuery.

Example (in Visual Studio 2015 Preview):

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.   <head>  
  3.     <title>Visual Studio 2015</title>  
  4.   </head>  
  5. <body style="background-color:Teal">   
  6.    <button type="submit" tooltip="Text written in tooltip attribute" >Save Data</button>  
  7. </body>  
  8. </html>  

 TooltipInVS2015

Notes

The preceding code is written in Visual Studio 2015 in which there is no error found in the editor like the following example written in Visual Studio 2010. But I would like to say that Visual Studio announced this about tooltip but we are getting Intellisense in the Preview version as well. There is no effect on this code. Because this version is released for testing puroses so we may hope that it will work fine in the final release. 

Example (in Visual Studio 2010):
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3.     <title>Visual Studio 2015</title>  
  4. </head>  
  5.   
  6. <body>  
  7.       <%--TRY TO USE TOOLTIP IN HTML ELEMENTS--%>  
  8.       <button type="submit" tooltip="I written am in tooltip" >Save Data</button>  
  9. </body>  
  10. </html>  

 TooltipInVS2010

Notes
 
Before the release of Visual Studio 2015 Preview, we used the "title" attribute to display something on mouse hover.

Example 

  1. <body>  
  2.   <button type="submit" title="I written am in title" >Save Data</button>  
  3. </body>  

 

TitleAtribute

# Region Support

Now we can use #region in HTML code to separate the specific block of code together as in C#. To  use the #region in we need to use a starting tag of the region and an end tag. The following are the start and end tags of #region.

#region: It is the start tag of a # region

#endregion: It is the end tag of a # region

Example (in Visual Studio 2015 Preview): 

  1. #region  
  2.    <br />  
  3.    I am using the #region code in Visual Studio 2015 Preview but it behaves like simple text<br />  
  4.    <button type="submit" title="I written am in title" >Save Data</button>  
  5.    <br />  
  6. #endregion  

According to Microsoft #region is supportsed in Visual Studio 2015 but in the Preview version it's not working. We hope however that it will be fine in the final release of Visual Studio 2015 because the Preview version is released for testing purposes.

Example (in Visual Studio 2010):

Now we try to write the #region code in Visual Studio 2010 and see what it's effect is. 

  1. #region  
  2.   <br />  
  3.   I am using the #region code in Visual Studio 2010but it behaves like simple text<br />  
  4.   <button type="submit" title="I written am in title" >Save Data</button>  
  5.   <br />  
  6. #endregion  

HashRegionInVS2010

Support for custom elements, polymer-elements and attributes

Now Visual Studio 2015 also supports custom elements, polymer-elements and their attributes where polymer-element is a third-party component. It is used to create custom web elements. Let's see how it supports all these things.

Example (in Visual Studio 2015 Preview):

Custom elements  
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <link rel="import" href="TestPage.html" />  
  6. </head>  
  7. <body style="background-color:orange">  
  8.      
  9.     <!--CUSTOM ELEMENT IS HAS NO ANY ERROR-->  
  10.     <myCustomElement title="It's my custome element'"></myCustomElement>  
  11.   
  12.     <VS2015 customAtribute="Visual Studio 2015 Preview" cName="cNameVS2015"></VS2015>  
  13.      
  14. </body>  
  15. </html>  

 Polymer-element

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <link rel="import" href="TestPage.html" />  
  6. </head>  
  7. <body style="background-color:orange">     
  8.       
  9.      <!--POLYMER-ELEMENTS-->  
  10.     <polymer-element name="my-custom-element" noscript>  
  11.         <template>  
  12.             <span>Hello Friends!  from <b>my-custom-element</b>  
  13.                         This is my custme element   
  14.                                  created by polymer element</span>  
  15.         </template>  
  16.     </polymer-element>  
  17.      
  18. </body>  
  19. </html>  

 PolymerSupport

Basic IntelliSence for Web Component

It also provides some Intellisense for some web controls, like rel path, angular js, angular icons and and so on let's do one of these with an example.

Example 

  1. <head>  
  2.     <title></title>  
  3.     <link rel="import" href="TestPage.html" />  
  4. </head>  

 rel

Summary

In this article we leaned about the new improvements in the HTML Editor in Visual Studio 2015. We will explore more about it after the release of the Final Version of Visual Studio 2015. Thanks!

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs