Learn the step-by-step process of creating a new HTML file using Emmet, a popular coding tool. This tutorial covers everything from creating a new file to entering your title and starting to code.
Key Insights
- Emmet is a useful tool for creating new HTML files.
- The first steps involve creating a new file and saving it with a '.html' extension so the application understands that it's an HTML file.
- Typing an exclamation point and hitting 'Tab' will automatically generate all the standard HTML tags like head and body.
- Using 'Tab' allows you to navigate to different sections of the HTML file, such as the title and body tags.
- Old code for Internet Explorer compatibility, such as '<meta http-equiv="X-UA-Compatible" content="IE=edge">', can be deleted from the HTML file.
- Once the initial setup is complete, the HTML file is ready for coding.
This exercise is excerpted from Noble Desktop’s front-end web development (Emmet coding tips) training materials and is compatible with updates through 2022. To continue learning web development with hands-on training, check out our coding bootcamps in NYC and live online.
| Description | |
|---|---|
| Inline | Flow with text — <span>, <a>, <em>. Width and height ignored. |
| Block | Take full width, start new line — <div>, <p>, <h1>. Respect width/height. |
How to Create a New HTML File with Emmet
- Create a new file.
- Save the file as some-file-name.html so the app knows this is an HTML file.
-
Type ! (that’s an exclamation point) and hit Tab to expand it.
All the standard tags (like head and body) will be created.
- Hit Tab until the title is highlighted, then enter your title.
- Hit Tab again to jump into the body tag and you’re ready to code!
-
You can delete the following line, which is old code for internet Explorer:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
