HTML VSCode
HTML
Write HTML program in Visual Studio Code to get advanced editing features and formatting functionality.
Features of VS Code for HTML Development
➔ Syntax highlighting and formatting: VS Code offers features like highlighting HTML code while typing, it also provides the option to format the document so that the code has a clean structure.
➔ Smart Code Completion: VS Code editor helps developers by providing auto-completion feature which helps developers speed up coding. After typing a few characters, VS Code suggests possible code and developers can select the suggested code. This auto-completion can occur for any HTML tag, any attribute or value.
➔ Color Picker: When the developer works with colors in HTML or CSS code, a color picker/color chooser UI pops up and the developer can manipulate the desired color in RGB, HEX, or HSL values.
➔ Marketplace ExtensionsThe VS Code Marketplace offers a lot of extensions for developers to enhance their HTML editing capabilities as well as achieve a better coding experience.
➔ Live Server: VS Code Live Server provides local development server support that gives live previews of CSS and HTML pages with automatic reloading as soon as any changes are saved.
➔ These are just a few of the many features that vs code offers. So developers need to install and start coding to explore its features.
Download and Install VS Code.
Download Visual Studio Code. Select User Installer 64 bit or System Installer 64 bit for windows to download and install the latest version of VSCode Setup executable file.
Accept the agreement and Click Next
Click Next
Click Install
Click Finish
Start Visual Studio Code Program. type code in the search box.
Open an empty folder as a project.
Create hello.html file in your project.
Write the following code.
Open hello.html file in a browser (Right Click -> Open with -> Select a browser.).
Output looks like below.
Congratulations! you successfully write html code in Visual Studio Code editor and run HTML in a browser.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Click on the "Try it Now" button to see how it works.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML VSCode Example</title>
</head>
<body>
<p>Coding with Visual Studio Code</p>
<h1>Heading</h1>
<p>Heading details... Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s</p>
<h2>Heading</h2>
<p>Heading details... When an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries</p>
</body>
</html>
Click on the "Try it Now" button to see how it works.