Is there #Region code for HTML

In VB and C# there are #Region ... #endRegion and have it collapsable. Is there a similar开发者_运维问答 way to do this in HTML?

Right now I just have comments blocking where the different elements are on my HTML page, but I would like to have a single collapse point instead of all of the <tr> <td> and <div> tags collapsed.

This indeed depends on the IDE, just noticed today that the newest version of the free Web Essentials 2012 plugin for Visual Studio has added region support in HTML.

http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6

http://vswebessentials.com/changelog

  <!--#region main  -->


  <!--#endregion -->

As of Visual Studio 2013 Update 4 regions are now supported in the HTML editor. You may use the built in code snippet: type "

<!-- #region SampleRegion -->
<!-- #endregion -->

You can find the details of this improvement and other new features in update 4 here.

I think the short answer is no.

Region is only a IDE directive recognised by the editor (Visual Studio). There is nothing in the HTML standard and anything you did put in the HTML would be sent straight down to the browser too, so I've not come across anything and can't imagine there would ever be anything.

Highlight the section you want collapsed, then go to Edit -> Outlining -> Hide Selection

Reference: How to: Collapse and Expand HTML Elements in Visual Web Developer

Edit: This assumes you're using Visual Studio

For Html:

<!--#region -->
        Code code code...
<!--#endregion -->

For Javascript:

// #region
        Code code code...
// #endregion

As you see, Visual Studio states region blocks inside of comments.

<!-- --> sign of comment in Html

// sign of comment in Javascript

I used div tag to collapse html code blocks :

<div>
  Code Blocks...
</div>

before I learn

<!--#region explanation blocks  -->
        Code Blocks...
<!--#endregion -->

both of them solve problem.

In order for outlining to work in visual studio 2019, make sure to have space before and after the comment closing tags:

<!-- #region -->
    <!--Blazor Components Signal-R server-->
    <script src="_framework/blazor.server.js"></script>
    <!-- jQuery -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="~/lib/plugins/jquery-ui/jquery-ui.min.js"></script>
    <!--Bootstrap bundle-->
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- #endregion -->

Note: this won't work in Visual Studio 2022 yet.

You can use this for your collapse comments

<!-- Your comment caption -->
   <div class="hidden">
       Put Your comments here
   </div>

So div can collapse or expand in html code in VS

<% # region %>

<% # endregion %>

Strangely, sometimes the region feature works for me in Visual Studio 2022, and sometimes it does not. I tried many of the above, and it is hit or miss as to whether the region is actually created or not.

But I have found this to work every time:

 <div data-region="My Header Region">This is my Header Region</div>
 </div>

It collapses every time, and it shows the region name plainly.

**Updated thanks to @AndrewMorton comment.

In Visual Studio Code, this can be done by using the correct syntax:

<!-- #region -->
...
Code
...
<!-- #endregion -->

Make sure there are no spaces between the # and region or endregion.