Your First HTML File

Visual Studio Code

What is Visual Studio Code?

Visual Studio Code is a text editor designed for coding. It offers a range of helpful tools that make writing HTML, CSS, and JavaScript easy and efficient.
Microsoft Word prepares text for the printed page; Visual Studio Code prepares text for the web.

A text editor is simply a program you use to write your code. Whereas a photo editor, like Photoshop, may have helpful tools to help you enhance your photo and graphics; text editors have helpful tools to help you write code. For instance, text editors like Visual Studio Code will highlight your syntax in different colors, display multiple tabs, and in the same way that your phone may auto-suggest words to you, Visual Studio Code will suggest options to complete your code. Visual Studio Code also has a marketplace of extensions, which we’ll dive into a little later.

Other text editors you may have heard of include Adobe Dreamweaver, Sublime Text, Notepad++. There are hundreds out there!

Creating HTML files in Visual Studio Code

Open Visual Studio Code. (No, really! Open Visual Studio Code and try this out now!)
File > New File. Save the file as test.html locally¹. That file extension, .html, is necessary. The reason we save a file before typing in anything is so Visual Studio Code can know what type of file it is (html) and how to display it properly. As mentioned earlier, VSC formats the code, so that it’s much easier to read while you’re writing/editing. Also, knowing it’s an html file allows VSC to provide code suggestions/autocompletions along the way.
Once you’ve saved your file, type in “html” in the blank workspace.
A few options should be generated automatically. Select the one that looks like html:5. Once you select it, your document will look like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

This is often referred to as the HTML boilerplate.

Whenever you’re instructed to create HTML files (we’ll be creating many in this course!) you can either follow the above instructions, copy and paste the HTML boilerplate, or once you’ve done several, type it in from memory.

If Visual Studio Code doesn’t recognize your file type, you’ll be able to tell instantly. Your code will be one solid, flat color.

HTML Boilerplate explained

Back to the auto-generated HTML boilerplate.

<!DOCTYPE html>
The line that says <!DOCTYPE html> is saying, “What’s up browser! This is a HTML5 file.” HTML5 is the most recent iteration of HTML.

<html lang="en">
This sets the primary language for the document; in this case, we’re selecting English, but you could pick any number of languages depending on your primary audience.

<head>
The first <head> tag to the closing head tag, </head>, contains information specific to this page, such as the page title (<title></title>) and other metadata. None of this information is visible on the website (unless you know where to look!)

<meta charset="utf-8">
This line provides the browser with information on character encoding and is standard with html5.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
This bit of meta data helps the browser understand the dimensions of the webpage and scaling. The width of the screen will equal the width of the device and the initial zoom level will be set to one.

<title>
The <title> tag controls the name of the webpage in the browser (and helps search engines). For example, the title tag on uga.edu says University of Georgia. The title tag on this workbook says Web Development. It’s always important to title your pages. Keep in mind that this title is NOT visible to someone viewing the site; it’s just another piece of metadata.

<body>
The <body> tags are where, you guessed it, the body of our webpage goes. The <body> section is where the majority of your content resides. Basically, everything we want someone to see when they view the site.

Ta-da! You’ve learned how to create HTML files.

Whenever we say “locally,” usually referring to saving or viewing files, we’re referring to files on your computer, flash drive, or syncing service (OneDrive, Dropbox, etc). In other words, files that are not yet on the web server (more on uploading to the web server later). ↩︎