Deep dive into HTML5 boiler plate
What should an HTML file contain and why?
Order than the repetitive use of these templates, I personally see no reason why it is called an “HTML boilerplate”. In the simplest way to put this boilerplate concept is,
Any seemingly repetitive code that shows up again and again in order to get a result that seems like it ought to be much simpler.
~ Meet Zaveri
Making a bed requires a few things, like the mattress, sheets, pillow cases, and if you want to go an extra mile, perhaps a blanket and sophisticated pillows.
Consider the above prerequisites to be the HTML boilerplate as well as the bedsheet or pattern of laying the bed as actual code. Unlike the ‘laying-a-bed’ illustration used above, where the items are visible to the eye, most parts of the boilerplate are not exactly visible on the webpage display save the <title></title> element.
Below is what an actual HTML boilerplate looks like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello, world!</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>Let’s kick-start our boilerplate journey with the first element in the HTML code.
Firstly, document-type-declaration.
<!DOCTYPE html>Browsers are told by this URL which version of HTML they are currently working with, which in this case is HTML5. Each HTML version has its own declarations. I am not saying anything serious here, just a little declaration, which is the most important.
Next, the root-element-declaration cum language-type-declaration.
<!DOCTYPE html>
<html lang=”en”>
</html>This defines the root of the HTML file. We go ahead to add the language attribute here for international readability. Additionally, the Lang attribute can also impact search engine optimization (SEO) and the way text is rendered in different languages.
Next is the head tag.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
</html>This contains everything that isn’t in the body of the HTML document. It contains links to the CSS and Javascript files. More importantly, it contains the title of the document and other metadata (more on this later).
Meta tags: charset=”UTF-8”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
</html>The charset attribute specifies the character encoding for the HTML document. The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all the characters and symbols in the world!
Meta tag: name=”viewport” content=”width=device-width, initial-scale=1.0”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
</html>This tag sets the viewport, which is the area of the browser window used to display the web page. The value ‘width=device-width’ sets the width to the width of the device and ‘initial-scale=1.0’ sets the initial zoom level to 100%.
Meta tag: name=”Description” content=””
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="enter the page description">
</head>
</html>The description tag as the name implies is responsible for giving the website it’s detailed description. It is very important for SEO (Search Engine Optimization) and for easy accessibility. All you need is to use adequate keywords that are required or commonly used in that space / industry.
Title tag <title></title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="enter the page description">
<title> Displays the page title </title>
</head>
</html>The title tag is very important as it is the first part seen by both a co-developer and users. It is important for this part to be very short and precise when deciding on the title name. You can use short titles that are quite descriptive. Below are some examples of titles for a web page.
Colored Markers, Photo Gallery, Rothko Painting, Noelas Kitchenlink tag: rel=”stylesheet” href=”styles.css”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="enter the page description">
<title> Displays the page title </title>
<link rel="stylesheet" href="styles.css">
</head>
</html>The link is a self-closing tag. What this means is you do not have to open another link tag after the declaration value, and put a forward slash like this </link>. The ‘rel’ represents the ‘relationship’ of the link to the HTML document. I’m beginning to sound abstract now yeah? But it’s true, as it really represents the relationship or connection between the link and the index.html document. The above sample link is going to be representing an external stylesheet connection to the HTML document. Having said that, the document wants to know what direction to look at, in order to receive the instructions for styling the page, which brings us to the ‘href’ attribute AKA ‘hypertext-reference’. The value of the ‘href’ attribute is more or less an instruction to the browser, which can be denoted as these, “while looking at me, ensure you look at her to obtain my design characteristics”.
Body tag: <body></body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="enter the page description">
<title> Displays the page title </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>The body tag represents all that you can see on the browser. If you have gotten this far, congratulations, you are about to write your first HTML code.
Remember to comment, subscribe, share and like the post for more engagements. The next chapter will dive deeper into the code writing.