Is there #Region code for HTML

Question

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.

score 73 · Accepted Answer · edited Sep 10 '14 at 11:33

73

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

edited Sep 10 '14 at 11:33

Mx.

3,588
2
25
33

answered Sep 30 '13 at 14:05

BigBlondeViking

3,853
1
32
28

5

This still works in Visual Studio 2013, Web Essentials is still required. – Samuel MacLachlan Aug 15 '14 at 06:30
3

`` and `` works in Intellij – Hisham Bawa May 26 '20 at 11:11

score 16 · Answer 2 · answered Oct 27 '14 at 05:40

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.

score 12 · Answer 3 · answered Aug 19 '10 at 12:43

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.

score 10 · Answer 4 · answered Aug 19 '10 at 12:47

10

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

answered Aug 19 '10 at 12:47

Ryan Kinal

17,414
6
46
63

As per @Jim's original statement in his question, this only allows existing HTML sections to be collapsed, you can't wrap several HTML elements in a #region and collapse that - closest you could do is a DIV element, but then that would be sent down to the client too. – Paul Hadfield Aug 19 '10 at 12:51
1

I don't believe it does. I just collapsed the middle of a paragraph using this method. – Ryan Kinal Aug 19 '10 at 13:04
1

Sorry, you're right. It's an extra bit of functionality I've not come across before. It nearly does the same as a region but you can't appear to give it a name and if you hide 3 lines, the "..." showing the hidden selection appears as the start of the 4th line (rather than a line of it's own) but it is hidden the section. And like you say, it is completely IDE driven and could work inside an HTML element or encompass part of 2 or more distinct elements. – Paul Hadfield Aug 19 '10 at 13:27
Yeah, it does lack the naming functionality. So, it's a partial solution. – Ryan Kinal Aug 19 '10 at 13:37

score 4 · Answer 5 · answered Dec 22 '18 at 12:31

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

score 3 · Answer 6 · answered Dec 14 '18 at 07:40

3

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.

answered Dec 14 '18 at 07:40

suleymanduzgun

365
8
17

Ashraf Sada · Answer 7 · 2022-05-25T10:57:12.550

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.

Cybernetic Code · Answer 8 · 2018-06-07T09:09:07.053

2

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

edited Jun 07 '18 at 09:09

answered Jun 07 '18 at 09:01

Cybernetic Code

21
4

score 0 · Answer 9 · edited Jun 25 '19 at 14:27

0

enter image description here

<% # region %>

<% # endregion %>

edited Jun 25 '19 at 14:27

Heretic Monkey

11,687
7
53
122

answered Jun 25 '19 at 14:12

Nikola Srića Žic

11

3

I fixed your image link, but given you don't mention anything about what IDE it is, and the code snippet you present, when run, does nothing, this is unlikely to be of very much use to anyone... – Heretic Monkey Jun 25 '19 at 14:28

Greg Gum · Answer 10 · 2021-12-26T14:40:57.997

0

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.

edited Dec 26 '21 at 14:40

answered Dec 25 '21 at 18:20

Greg Gum

33,478
39
162
233

1

It seems to be a bad idea to create another level of `
` just for the UI in the development environment.
– Andrew Morton Dec 25 '21 at 18:29
@AndrewMorton, see update. – Greg Gum Dec 26 '21 at 14:41
1

That looks like an improvement! – Andrew Morton Dec 26 '21 at 15:04

score 0 · Answer 11 · answered Oct 31 '22 at 20:11

0

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.

answered Oct 31 '22 at 20:11

Akaisteph7

5,034
2
20
43

Is there #Region code for HTML

11 Answers11