In my previous post I hinted at the fact I love HTML because it is a markup language and therefore makes complete sense to me. Want to add a button? use < button > tag, want to add a paragraph? < p > tag. Logical stuff. However, one of my favourite things about html is, no matter how fancy the website, they all start with a simple “boilerplate” HTML and this made me feel like HTML was accessible. No matter how fancy I wanted my page to, eventually, be I could at least feel like I was on the road to fanciness.
If you are like me and coding along with some online resources, you will hear the words “boilerplate” HTML thrown around an awful lot. In the context we are using it, it does not mean ” rolled steel for making boilers”. HTML boilerplate simply refers to the group of tags that just about every single website you visit will have: like a skeleton template. Although this is standard, and you can copy and paste it from most places on the web, I always find it best to understand exactly what you are marking.
Each HTML page must start with a doctype statement. All this does is tell the browser that the following content it is going to read is HTML and what version of HTML. HTML4.01 had three different ways to do this, but since the update to HTML5 there is just one statement required. The doctype statement simply looks like this:
< !DOCTYPE html >
Not so scary, right? It just says “Hey man, I am going to be sending you some HTML5 to read” [to your browser]. Notice that it doesn’t need a closing tag. Perfect.
The next markup you will see is < html > , you might think “I’ve already told the browser I am sending it html with my doctype?” but this next tag has a closing tag and inside will be all your markup. Like one big container, rather than a statement. So you’ve said “hey, I am going to be sending HTML5” and then you hand the computer your box of HTML5. On a little side note, the < html > element normally contains the language your page will be in e.g < html lang=en >.
Following the < html > there are three other tags that are important to our boilerplate.
- < head > this tag is different to < header >. < header > is used as semantics to make, just that, a header for your page. The < head > of a website contains all the extra information that your page needs, but that isn’t shown on the browser page. Common things you will find in here is metadata, < meta > is a self closing tag. Metadata can tell us things like the character set our page will use, the author of the page, a description of your page for search engine results. We can also use Metadata to make our page responsive to different screen sizes: a requirement as today many people will be scrolling on their phones! For a little more on metadata check out W3Schools.
- < title > this is always found within the < head > of your document. This tells us the title of our page and will show up as the title in search engine results, favourites and the tab at the top of you computer.
- < body > the body tag is where all of the markup that you want people to see, when they visit your page. Everything will be in here: headings, paragraphs, images, lists. Any content that you want people to see will be in the < body > of your document.
And that’s it! A quick skim over. When you type it all up, you will end up with a document like this:
Make sure to save your page as .html for the text editor to know you are adding HTML. In brackets, you can make your life easier by adding the extension HTML skeleton which will save you having to type the boilerplate out every time; saving you a few precious seconds. In sublime text editor, type < then ht and it should come up with a list of option, top of which is HTML. Click enter on this and it should give you your HTML boilerplate! It looks simple, and has no content, but rest assured that this is the start to your first webpage.
Some final notes: As previously stated, I am in no way an expert and always keen for comments and [constructive] criticism. So, if you feel that I didn’t explain something very well, or I am totally off the mark, please let me know! This is intended as a documentation of my own learning, by writing things down in my own words I feel I can retain the information better. Also, when I type any html tags, you’ll notice I leave space between the < > and the element in-between. This is simply because wordpress would read it as markup and it wouldn’t show up for you to read, your markup shouldn’t use spaces. Remember to check out resources such as MDN to look a little further into certain tags and what they do!