Boilerplate HTML
Learning to create an HTML page in Visual Studio
Adding HTML Boilerplate Code
Boilerplate Code refers to sections of code that are often re-used, with little to no modifications. Every time we create a new HTML file, we need to add some boilerplate code. Fortunately, Visual Studio Code makes this very easy.
If you just add a "!" character and then the "Tab" key, the following HTML will be automatically added to your file.
HTML is a Markup-Language
A mark-up language is different than a programming language. It doesn't have any programming logic or code that is executed to perform some action. It just allows you to annotate the text in the document to provide extra meaning to the content. The browser uses those annotations to know how to display the page.
The mark-up language consists of two main concepts to understand:
Elements are the building blocks for defining the hierarchical structure of the page. An element consists of a starting tag and an end tag. In between the two tags is the content for that element. The content can, and often does, contain nested elements.
Self-closing tags are an infrequent exception where the element is not allowed to contain any content between the opening and closing tag. In this case, there is a single starting tag and it is closed with a forward slash, such as <br/>, which is used to indicate a line break.
For a full list of the self-closing elements, see the MDN Documentation.
Attributes are used to specify additional information about the element. Attributes are specified on the opening element tag. An attribute consists of two parts: the attribute name (use lower case) and a value (wrap in double-quotes).
Adding First Content. Hello World!
Look for the body element. This is where the main content for the page goes. Add an h1 heading element (we'll learn more about headings soon) with the text "Hello World!".
Viewing the Page
There are two ways to load the page in your browser.
Drag the page to the browser window - you need to refresh page as you make changes. Open the Chrome browser, and then drag the file from the Visual Studio Code File Explorer onto the browser window and it should load the page.
Use Live Server from VS Code - automatically refreshes page as you make changes. Right click on the file and "Open with Live Server" will appear as top choice on menu. Select that option and and a new browser window should be launched with the page.
Here's what your page should look like in the browser.
Elements in the HTML Boilerplate code.
<!DOCTYPE html>
The <!DOCTYPE> declaration lets the browser know which version of HTML your file is written in. For the current version, HTML5, it has been simplified to just require what's above.
<html>
The top-level HTML element that will contain all of your other HTML tags. It defines the beginning and end of your HTML document.
<head>
The elements in this section provide general information about your web page and will not be displayed as part of the page content. The information is used by the web browser and search engines.
There are a few child elements in this section that you need to know about early on.
<title>: used to set what is displayed on the browser's title bar.
<link>: use to download stylesheets, custom fonts.
<meta>
Metadata is data about data. It is always contained within the <head> element. Data from this section will not be displayed on the page.
A lot of the meta elements are used to assist search engines to find the page and provide information for the search result.
If you search for NY Times on Google, you will see the following result. The text in red is taken from the meta attributes title and description.
<body>
The body element contains all of the content of a HTML document. It is the visible portion of the web page. This is where your content will go.
Adding a Title
Before you add the title, take a look at your page in the browser, specifically at the tab on the top of the page. That's called the browser's title bar. Whatever value is in the title element in the head section will be displayed here.
The boiler-plate HTML generated by VS Code, puts in a default value of "Document", so you need to remember to change this.
Change the title and refresh your page to see the new title appear.
Try it Yourself
It's important for you to not just listen, but to actively work with these new concepts, so we're going to start from scratch. Delete all the html in your document and try to reproduce it from scratch. Look at the description here to help if you get stuck. You can leave out the meta tags.
Last updated
