In this post, we’re going to find out what a typical HTML 5 boilerplate template looks like.
If you don’t know what a boilerplate is, well…it’s basically sections of code that have to be included in multiple places with little to no variation.
In our case, a boilerplate in HTML is a template you will add at the start of your project and more importantly to all of your HTML pages.
Boilerplate templates can save you time because you won’t have to write the same code all over again.
HTML Boilerplate Template
This is the basic HTML boilerplate template you should use:
The template consists of the most important basic tags that must be included on a web page.
If you want to learn more about these HTML tags, please read on or watch the following video:
HTML Tags Explained
Let’s go over each HTML tag we have in the HTML boilerplate and see what it is and why it’s important.
What is a DOCTYPE in HTML?
<!DOCTYPE html> is the first line of code required in every HTML document.
If you forget to include this line of code in your file, then the browser will render the page in Quirks mode.
So make sure to always include it in your HTML file.
If you want to learn more about this, I have a full video and article on what is DOCTYPE, why is it useful and the history behind it.
What is the html tag?
The <html> is the root-level element that defines the structure of a web page.
It is the first element in any HTML file and is used to enclose all other HTML elements that make up the content of the web page.
What is the lang attribute?
The lang attribute inside the opening <html> tag sets the language for the page.
You should always include it.
What is the head tag?
The <head> tag is used to define the metadata and other non-visible information about the HTML document.
The contents of the <head> tag are not displayed in the web browser, but are used by it to understand how to display and interact with the web page.
Some of the most common elements included in the head tag are meta, title, and link.
What are charset and UTF-8?
charset is used to specify the character encoding of the web page.
The charset attribute specifies the character encoding that should be used.
In this case, UTF-8 is a popular character encoding that can represent most of the characters used in the world’s writing systems.
It’s important to specify the correct character encoding as this ensures that the characters are displayed correctly in the browser.
If the character encoding is not specified or is specified incorrectly, it can lead to problems with text rendering, such as incorrect or missing characters.
What is the viewport meta tag in HTML?
The viewport meta tag provides instructions to the browser on how to scale and adjust the content of the web page to fit the screen size of the device it is being viewed on.
The width=device-width attribute sets the width of the viewport to the width of the device, which means that the web page will be displayed at the correct size for the screen.
The initial-scale=1 attribute sets the initial zoom level of the web page to 100%, which is the default size.
What does X-UA-Compatible mean?
The X-UA-Compatible is an HTTP header that is sent by the web server to instruct the browser to render the page using a specific version of Internet Explorer’s rendering engine, also known as the Document Mode.
The ie=edge is the highest-supported document mode.
This meta tag was introduced in IE8 as a way to ensure that web pages designed for older versions of Internet Explorer continue to work properly in newer versions.
The <title> tag is the title of the web page.
This text is shown in the browser’s title bar.
Link external CSS
The <link> tag is used to define relationships between the current document and an external resource, in this case, the CSS file.
The rel attribute specifies the relationship between the HTML document and the external resource.
The href attribute specifies the URL or the file path of the external resource.
In our example, the code indicates that the linked file is a CSS file, and the href specifies its location which is style.css.
What is the body tag in HTML?
It represents the main content of the HTML document.
It contains all the visible content of a web page that is displayed in the browser such as texts, images, videos, links, forms, and other elements.
The <body> tag is required in every HTML document and must be included after the <head> section.
What is the script element in HTML?
The script element is used to define client-side scripts that are executed by the browser.
The best practice is to put JavaScript <script> tags just before the closing </body> tag rather than in the <head> section of the HTML.
The reason for this is that HTML loads from top to bottom.
The head loads first, then the body, and then everything inside the body.
Conclusion
I hope you now have a better understanding of what is an HTML boilerplate template and the reasons why the above HTML tags must be included in every web page.
Let me know what you think about this article in the comments section below.
If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.