HTML Boilerplate Tags

Previous Blog   

Basic HTML Boilerplate Tags

Now, we are going to learn some basic tags to structure the content beautifully.

How to get started with Atom editor? 

To open a new project folder to work out of. All you need to do is to create a new folder either on your desktop or somewhere else that you prefer.

Go ahead and open the folder you just created, and now you'll see your project folder show up in the sidebar over here and you can toggle it closed by clicking on that arrow button over there.

You can further create subfolders in your parent folder to store a collection of projects in that particular folder so go ahead and right-click on that folder and create a new folder inside that folder, and now we're ready to create our very first HTML file inside this folder.

So again, right-click on this subfolder and we're going to create a new file. Now, as you get used to Atom, you are going to start to want to use some of their shortcuts. So for example, instead of right-clicking and select a new file, you can also just simply select the subfolder and hit A in order to do the same thing. But in the beginning, as you're getting used to Atom, but feel free to start incorporating the shortcuts into your workflow and as time goes on, you'll find that they make life so much quicker and so much easier.

Homepage for HTML site

Now if you have created a file inside your subfolder then go ahead and create it as the homepage of your site by following the conventional naming index.html and that is usually the name that developers will give their homepage. 

HTML Boilerplate

Now in order to create any HTML website, there's a little bit of boilerplate code that's associated. Now, you're going to either write it all out, or because if you have installed the Emmet plugin, we can simply write HTML and then hit enter, and it will insert all of that boilerplate code for you. Now, if that didn't work for you, you could also hit the tab key after writing HTML or typing an exclamation mark and then hitting the tab or the enter key.

Try some of these combinations if it's not working for you. And you're going to come to see and appreciate all of the powers of the Atom plugins and how helpful they can be. So now we mentioned that this is a standard HTML boilerplate code. Now in Programming, we talk about boilerplates quite frequently, and it's similar to having a code template, something that you'll reuse for different projects. And it comes from the days when the printing press would make these heavy iron plates that would function as their printing template. And because they looked very similar to the small metal plate that identified the builder of a steam boiler they called it the boilerplate. That's just where this word comes from. But when we're talking about it in Programming, we usually mean a co-template that you can reuse. 

Unsaved Progress

whenever you see a blue dot on the tab bar of your file, that means that there's unsaved progress. And in order to make it disappear and to keep your progress, you can simply go to file and then click on save or use whatever shortcut that shows up for you over here. It should be command + s on Mac, and it should be control + s on Windows.  And once you've saved your file on Atom you'll see that little blue dot disappear, and now you can rest assured that all your progress has now been safely saved. Now there's quite a lot of stuff on the screen.

Understanding Boilerplate HTML

So let's talk about this boilerplate line by line to understand what it all does. So the first line here is where we declare the document type. And this tells the browser when it opens up this file, what is the version of HTML that we're using. 

For HTML 5 we write simply HTML as document type. Now in previous versions of HTML,

this doctype was incredibly convoluted. And in fact, it can show you what some of them look like. So we can write html:4t and press tab or enter then because we've installed emmet, if I hit tab, you can see this is what the boilerplate code for a particular HTML 4 version would look like. And you can see that doctype is a lot longer and very often programmers won't be able to remember that so they actually have to look it up somewhere. But since HTML 5, the doctype declaration became a lot simpler and now it's just  ! DOCTYPE HTML and this tells the browser to render this file as an HTML 5 document.

And there are a few differences between how things will appear or how things will be structured depending on whether if the doctype was HTML5 or a previous version. So that's the doctype. Now we inserted all of this code using auto-complete from Emmet. And if you want to look at all the other things that you can do with Emmet, then you can go ahead and have a look at docs.emmet.io/cheat-sheet. And here you can see what all of those abbreviations look like and what is the result of it. As you're developing into a professional web developer, it's a great resource to have in order to save yourself a lot of time when you get used to using these common shortcuts.

HTML tag

Now the next line in our code, it's an HTML tag. And this tells the browser that everything in between the opening and closing tags is going to be HTML code. 

And what does that code consist of?

Well, it consists of a 

• head tag
• body tag

Head Tag

Now the head is the part of the HTML file that holds information about the webpage and it tells the browser how it should handle the page.

So for example,

we might have a title tag in here that tells the browser what is the title of this particular document or this particular page. So let's go ahead and give your website a title. And now if we go ahead and hit save,

How to view your website inside your browser?

we can have a look at it inside our browser. Now there's a couple of ways how you can open up the website that you are coding up inside your browser. Now, one of these ways is simply 

• Going into your Finder or your Explorer and finding that index.html file, and then double-clicking on it and it should bring it up inside Chrome. 
• Now, the other way of opening up your website is if you right-click on your file inside Atom and you go to copy the full path, then it copies the entire directory path to the location of your website. So if you just go ahead and paste it into the bar here and here with this file path, we're telling the browser how to find this file index.html on our computer. 

Let's go ahead and hit enter on that file path in order to do exactly the same as double-clicking on this file, which is opening up our website inside Chrome. Now, if Chrome is not your default browser, then you can change that by going into your settings, then scrolling down to the default browser in order to change it. But it does have a title, which you can see here and it says the document, which is what we created over here.

Now inside the head section, there's also this meta element. Now there are quite a few different meta elements, but this particular one is called character set. And the one that we're setting it to is UTF-8. Now,

Character set

The meta elements give extra metadata or associated data to your HTML document. 

UTF8 Encoding Scheme

And in this case, we're telling the browser when it opens up this file that all the text inside our webpage is encoded using the UTF-8 encoding system. So this is basically a list of all the available characters that we can use inside our website for it to be rendered correctly. Now, sometimes when you open up a webpage, especially in an outdated browser like Internet Explorer, or an email that you got from a Bulgarian friend, you might see some of the characters being jumbled up like this,

and this is called Mojibake. And it's a Japanese word that stands for characters that are transformed. And it occurs because your browser is trying to render the characters using the wrong character set. So there are quite a few different types of encoding and they are specialized for different languages because different languages use different symbols. For example, if you have a look at the Windows Greek symbol chart, you can see that the symbol at position 224, it looks like this, but if you have a look at the chart for Windows Arabic, then 224 actually encodes a completely different character. And that's why we get these messed up websites or strange-looking emails when it's interpreted using the wrong encoding.

Now UTF8 is the standard encoding that you should be using when working with HTML 5. And the reason for that is because it includes all of those international symbols. And in fact, every single symbol is included in the Unicode character set.

So if you go to unicode-table.com, then you can see a table of all of the Unicode characters. 

The other thing about Unicode is that it also includes emojis. For example, if you have a look at the emoji chart, let's look for heart symbols, for example, then we've got all of these different emoji characters that we can also use on our website that's encoded with UTF-8.

So let's go ahead and give that a try. Let's find a nice-looking heart symbol. We can right-click to copy it or hit command C or control C, and we can paste it to the front of our website title using control + V or command + V. And now if I hit save and go back to my website and hit command or control + r to refresh or click this refresh button here, then you can see our title is updated with that emoji. So everything that is Unicode can be encoded correctly using UTF-8 

and it's something that you should just have as your boilerplate code for any new website you create. This gives your website the maximum chance of being rendered correctly on browsers that are from international visitors. 

There are also other attributes that you might see on different websites. So some of the common ones include the description or things like keywords about your website, who the author is as well as the viewport. And these meta-tags tell the browser how it should render or display the webpage. And also they give information to search engines about the content of the website. 

In the next blog, we are going to deep dive into Html basic tags and we're going to be creating the content for the website.

So for all of that and more, I'll see you on the next Blog.

Previous Blog