HTML Basics - Boilerplate
The boilerplate is the basic structure every HTML file should have. The term comes from the template printing plate relied on by smaller newspapers and provided by the larger printing syndicates. They resembled the plates used to make steam boilers, and the content of the print from these plates eventually became known as boilerplate as well.
Why is this important to web devs?
Because there are some things every HTML file has in common. At that point, may as well start with a template of things you need, but don’t have to type out. Much like the boilerplates of old, we can just copy something pre-made for us.
Sounds nice right? Here it is, line by line -
<!DOCTYPE html>We start the file with the DOCTYPE declaration to tell the browser what version of HTML the document is using. HTML5 is the newest version, so it is the default. If for whatever reason you wish to use an earlier version of HTML, which you shouldn’t, there are resources for what to add here to activate those versions. The doctype is a declaration and doesn’t need a closing tag.
<html lang=”en”></html>This is the root element of our HTML document, and everything else in it will be nested under this tag. The ‘lang’ attribute tells browsers and screen readers the primary language of the document, and helps with accessibility.
<head></head>This is where the following parts of the document go -
- <title> - This gives your website a title, which is important if you ever want it to look like a real website. This title is what users will see when the site shows up on Google or other search engines.
- <meta charset=”utf-8"> - There are many different meta tags with different uses, but this one is the most important. The ‘charset’ makes sure that the browser displays characters from different languages correctly.
- <link> - Linking documents allows you to use characters, symbols, and styles from external sources - the most important of which is the CSS stylesheet. More on these in CSS Basics.
There is much more to include in the head of a document, but in this case (being a template and all) we will keep it to these elements.
<body></body>This is where the bulk of the website goes, and all of the visible elements live. Since this is the last element we need to add before actually building the site, it is also the last element in our boilerplate. Some choose to add a blank script initialization line, but that’s subjective.
Here we have it all together, be sure to save this as a template in your favorite IDE so you can use this boilerplate every time you start a new document and save yourself a minute or two -
