 Let's look at some tips and tricks for working with HTML in Visual Studio. Let's first define what I mean by HTML. So if we go into tools options under text editors, we can see that we actually have two HTML editors in Visual Studio. We have one specifically for dealing with web forms, so ASP.NET web forms, so ASPX pages, user controls, master pages. And then we have one for everything else. Razer or static HTML or any other variation of HTML goes to the other HTML editor. And this other one is the newer one and it was introduced in Visual Studio 2013. And that's the one we're going to look at today. So here I have an HTML file. I copied it from some place I found online and it's all like minified into one line. So that's kind of annoying. I would like to see it sort of nicely formatted. So I can format the document and that might get me some way there. But Visual Studio actually has a command called unminify. And clicking that gives us this nice unminified view nicely formatted so I can see what's going on. Let's drag in a picture. So from solution explorer I can drag a picture in like that. Super convenient. And let's see what we can do with this image here. So notice how a light bulb show up. And I can encode this image as base 64. That's not what I want here, but I want to get the width and the height attributes automatically inserted. So Visual Studio goes in, checks out the picture and figures out what the height and width is and inserts it for me in these attributes. This is really good for performance and also making sure that when the web page renders in the browser that the browser knows up front what the height and width of the picture is so that you don't get these loading sort of unevenly and you're reading the top and then things move around by giving the browser the information of the height and width of our elements it can much better give us a better rendering experience. So that's really convenient and I really like that feature. Another thing we can do is we can wrap any element or any text, anything that's selected with another element. So the feature is called wrap with div looks like this. It's selected so I can change it to let's say a span. Here we go. And I'm going to do a line break. So I'm going to just format the document, control KD and now that looks a little bit better. Actually I want that span here. I want that to be wrapped with a div like that let's say. So when it makes it super easy for me to add these parent child relationships. So that's all built in. Here's another nice feature. I get class name intelligence. So hero is the name of a class that I defined up here. And so that's really nice that I can get the intelligence for that right out of the box. There's a bunch more to the HTML editor that makes a really nice HTML editor app but I want to show you something that an extension that I install can do that expands on this functionality. So if I open the extension manager, you can see here I have an extension called HTML tools 2019. There's also one for 2017 and earlier if you just install web essentials. So HTML tools 2019 is included in web essentials. So if you already have web essentials you already have this extension as well. Otherwise just go out and download it and let's take a look at what that gives us on top of what I just showed. So one thing is I get image hover preview. So simply just hover over an image and see what it looks like and what we can also see at the bottom of the preview what the size of that image is. Very convenient. Here's another one. Let's go to the style sheet or the style attribute here or sorry the style element and I can now say extract to file. So I can take a style element and move it into a file. So I'm going to call it site.css and the file is created for me and inserted instead of the style element is now a link reference to that style sheet. So that's very nice. So let's do this. Then we have a very nice thing here with the class name hero. So it's fine that I get intelligence for hero but what if I want to see what is defined in that style rule? Well I can do peak definition. So peak definition or alt F12 and that will find the style definition in my style sheet and display it to me here and I can actually edit it directly. It's just the HTML editor. There we go. Double. That's not a bad idea. There we go. So I even get intelligence in this peak definition window. This, by the way, works with less files and SAS files as well, not just CSS. I now decide that I have too many parents here around my image tag. I don't want that span tag. So I'm going to remove it. So that's a little cumbersome and I have to format the document afterwards. But what if I just do the light bulb that now says remove span and keep children. That just removed the span and it formats the children inside of it to its new parent. Very convenient. Label. This has to do with intelligence. So there's a bunch of intelligence things that comes with this extension called HTML tools. And one of them is intelligence for things that are defined within the same document. So one of them is in the for attribute. In a label I need to say it's for a specific input field. And in this case, I get all the valid things that it could be a label for. In this case, it's the input field with the ID of name. And you saw how I got that intelligence. So this goes for data list as well. It goes for a lot of other things where we have dynamic intelligence based on the content of the document. And all this comes from HTML tools. So I hope this was helpful to give you a little bit of tips and tricks on what's possible in the Visual Studio HTML Editor. Thank you.