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.

Mx. · Accepted Answer · 2014-09-10 11:33:05Z

81

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, 2014 at 11:33

Mx.

3,6832 gold badges27 silver badges33 bronze badges

answered Sep 30, 2013 at 14:05

BigBlondeViking

3,9631 gold badge34 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Samuel MacLachlan Over a year ago

This still works in Visual Studio 2013, Web Essentials is still required.

Hisham Bawa Over a year ago

 and  works in Intellij

Mauricio Aviles · Accepted Answer · 2014-10-27 05:40:08Z

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.

Paul Hadfield · Accepted Answer · 2010-08-19 12:43:50Z

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.

Ryan Kinal · Accepted Answer · 2010-08-19 12:47:08Z

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, 2010 at 12:47

Ryan Kinal

17.8k7 gold badges48 silver badges63 bronze badges

4 Comments

Paul Hadfield Over a year ago

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.

Ryan Kinal Over a year ago

I don't believe it does. I just collapsed the middle of a paragraph using this method.

Paul Hadfield Over a year ago

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.

Ryan Kinal Over a year ago

Yeah, it does lack the naming functionality. So, it's a partial solution.

user10823333 · Accepted Answer · 2018-12-22 12:31:26Z

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

Ashraf Sada · Accepted Answer · 2022-05-25 10:57:12Z

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.

suleymanduzgun · Accepted Answer · 2018-12-14 07:40:47Z

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.

Cybernetic Code · Accepted Answer · 2018-06-07 09:09:07Z

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

Heretic Monkey · Accepted Answer · 2019-06-25 14:27:06Z

0

enter image description here

<% # region %> <% # endregion %>

edited Jun 25, 2019 at 14:27

Heretic Monkey

12.2k7 gold badges63 silver badges133 bronze badges

answered Jun 25, 2019 at 14:12

Nikola Srića Žic

11

1 Comment

Heretic Monkey Over a year ago

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

Greg Gum · Accepted Answer · 2021-12-26 14:40:57Z

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.

It seems to be a bad idea to create another level of <div> just for the UI in the development environment.

Akaisteph7 · Accepted Answer · 2022-10-31 20:11:07Z

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.

corrigentia · Accepted Answer · 2024-10-04 07:44:54Z

In WebStorm (EAP) & maybe other JetBrains IDEs,

this works:

<!--#region DescriptionOfRegionContentsHere --> ... <markup /> ... <!--#endregion DescriptionOfRegionContentsHere -->

BUT this does NOT work:

<!-- #region DescriptionOfRegionContentsHere --> ... <markup /> ... <!-- #endregion DescriptionOfRegionContentsHere -->

NOTE: space before #

On the other hand, once one removes the #, it works regardless of space.

Collectives™ on Stack Overflow

Is there #Region code for HTML

12 Answers 12

2 Comments

Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

1 Comment

3 Comments

Comments

In WebStorm (EAP) & maybe other JetBrains IDEs,

Comments

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

2 Comments

Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

1 Comment

3 Comments

Comments

In WebStorm (EAP) & maybe other JetBrains IDEs,

Comments

Related