Introduction
Have any of you ever been completely stumped when starting to write your html 😐? Or, perhaps, you've forgotten a few key elements - or you're just overthinking whether or not you've included everything before moving on to main content.
Well then... this is certainly for you. 🎉
If you ever forget what to start with you can just copy and paste this boilerplate in and tweak it up a little.
Why you🫵 might find this helpful
Aside from simply copying and pasting the code into your file, you can also:
Download it onto a html file and make a copy whenever you want to write html so you already have a starting point 😁
Use it to understand the main elements used to start an index.html file
Make adjustments to it and ensure you've missed nothing out
Use it to double check if you've got everything included
Although you may find it pointless to 'double-check' 🫥, it never hurts to make sure you've got everything right.
"Always double check to make sure you're not designing toward your own biases instead of what's best for your product and users" --Cap Watkins
The code 🙃
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--Your html goes here-->
<script src="script.js"></script>
</body>
</html>
That's essentially all you need to begin writing your html 🥳
Breaking it down 🥴
It's really not as complicated as it seems 😅. Opening tags look like <element>and closing tags are only slightly different looking like, </element>. Within an opening tag, you may see an attribute that looks something like:
<element attribute="value">
Attributes will usually hold a value and you will see these attributes all the time in html. 😊
1) <!DOCTYPE html>
This is used to declare that the file is written in html5. Without it, your browser may not support certain tags like:
<footer><header><article>
That's why it's important to ALWAYS 💯 start your html files with this line 👊.
2) <html> tag
Everything EXCEPT for the <!DOCTYPE html> tag will rest within within this tag.
3) <meta charset="utf-8">
This is the character encoding system. This supports many languages.
4) <title>HTML 5 Boilerplate</title>
The text within this tag tells the browser what the webpage will be titled and is displayed in the tab bar.
5) <link rel="stylesheet" href="style.css">
This simply links your style.css file and applies the style to the webpage. 🙂
And FINALLY🥳
6) <script src="script.js"></script>
This links your Javascript file to your html so you can make it interactive. 😊
Make sure to add it just before your closing </body> tag so the browser can load the page faster. 😀
Conclusion 😇
This boilerplate provides a foundation for your html code. It teaches you how to link external files, why each tag is important, the encoding system, and where the main html code goes.😌
Most importantly it provides a reference for what each index.html file should contain.
Boilerplates can be used in many types of code 🙃 and are important because they help familiarise developers with the syntax and functions of a coding language they may not be too sure about.
All in all, this boilerplate for html may be useful to you and i hope i have condensed it enough for you to truly comprehend.😁
If there is anything else you would usually add to your html boilerplates tell me below and be sure to explain the reason behind it.
Top comments (0)