Looking to get started with HTML5, the core language of the web? In this post we’ll discuss a basic boilerplate, what a boilerplate is, and what non-visible web elements are.
Hello World
The world has been welcomed.
The code above is the minimum you need to begin a web project. HTML5 boilerplates can range from the super simple, to the extreme. I’m going for a middle ground of basic elements that should be included (in my opinon) into every website.
The first line isn’t HTML, it is a command to the web browser. We include it so the browser knows which rules it needs to follow. In the past these where much more complicated, but HTML5 simplified them to this simple line. It’s saying, “hey, I’m a html5 document, judge my content by those rules”.
We add a HTML element, and give it an attribute on lang with a value of en. The html element declares that all content contained within it, is part of the html document (document object model), that all the content has a specific language, and that language is english. You can find a series of language codes at https://www.loc.gov/standards/iso639-2/php/code_list.php if you want something other than english.
The lang attribute can be applied to any paragraph, span or other element if it contains a different language. But when you apply it to the html element, you’re applying it to the whole of the document. Any lang’s added to an element will only override it for that element.
<head>The head element, is used to define the invisible content of the HTML page with the exception of the title which is visible as part of the tab heading. Everything else is links, and information for the browser to use rather than content that the user will ever see through a browser window.
<meta charset="utf-8">The meta element is used to provide metadata about a webpage. Metadata is data about other data. This may seem weird, but the web page code itself is providing data. This provides data that applies to the presentation of that web page. In this case we’re defining a character encoding system utf-8. Basically utf-8 has to do with the way the file is encoded onto the hard drive. You can save in various different formats and change them. A good example of this is notepad++ a code editor for windows. It has a menu, that allows you to select the way a file is saved.
If you choose any of these other formats you must declare it as part of the metadata attribute charset without it you’ll find common symbols don’t appear correctly in a web page as a result.
<meta name="viewport" content="width=device-width, initial-scale=1">As you can see, multiple meta elements can refer to different information. This whole element is designed for repsonsive websites. When you open a phone and double tap on a page without this meta, you’ll find that it zooms into a page. If a website is not designed for mobile phone viewing, and appears small on your display then this meta should not be used. Because it won’t allow users to zoom in.
If however you are designing a modern website designed for mobile, tablet an desktops then use it because it disables the double-tap to zoom behaviour. It also causes the browser to zoom into the width of the page.
<title>Home Page - Hello World</title>The title element sets the title of the page. This is an example of front loaded titling. A method of informing the user which page of a website they are on and the website name. We do this so that users who click on links are clearly told if they are on our website (called hello world) or on someone elses.
Not everyone does this but it is good practice.
<link rel="stylesheet" href="css/main.css">We use this element to link to an external resource. In this case we’re linking to a CSS stylesheet. We use the rel attribute to define a stylesheet as a value. We use href to link to a specifc file on a specific path with a filename.
</head>We end the head elements influence because our website’s non-visible data has been setup (with the visible exception of title). As you can see the majority of it is simply defining the characteristics and settings of a document. You can add additional metadata such as keywords, description, author name, etc. As this is a very basic boilerplate we’ll skip that.
<body>The body element defines the area of visible data the user can see, but can still call some invisible stuff the user won’t see.
<h1>Hello World</h1>
<p>The world has been welcomed.</p>These are a simple heading level 1, and a paragraph. As a rule there should only ever been a heading level 1 on a website. It should also match the title of a website. Doing this improves your SEO (search engine optimisation) when it sees that both the main content and title match (excluding front loading) it’s more likely to trust that your website provides the information it’s claiming too.
<script src="js/main.js"></script>This is a non-visible element that calls a JavaScript file, we place it at the end, because many JavaScript files will operate on elements within the HTML document. If the elements are not created when the JavaScript file is called it will cause errors.
The JavaScript file can also be moved into the head element instead of the body or different JavaScript files can be loaded into both.
You’ll want the file in the head, if you want it to start operating before the html elements are created. This might be because you want to inject html elements that change based on certain conditions, or animate a loading bar. There are various cases where this is done.
</body>
</html>With that we’ve completed our HTML5 boilerplate. There’ still additional features you can add, including favicons, touch icons, humans.txt, robots, sitemaps and others.
But this is a good simple template for getting started. I’m sure I’ll write additional blog posts with different boilerplates or features in the future.
For now, happy web coding.
