HTML Boilerplate

By

The HTML skeleton

The basic code of HTML/boilerplate

While we write the Html code, we have to follow certain things so that everything goes fine.

As we discussed earlier, HTML is used to give structure to web pages. Also, I had mentioned something called tags above. The HTML uses tags to differentiate and structure the web pages.

If you pick up any random webpage from the internet, what basically does it consist of?

It consists of some heading, some links to other webpages, some paragraphs, some text written in bold, and some in italics, a navigation bar, some images, videos, a search box, a comment box, and much much more.

All of these can be differentiated and are structured differently using HTML. There are different tags for different things like there is a different tag for paragraphs, a different tag for images, bold text, italics text, etc.

So, now we are going to study these different types of tags which certainly have some different meaning and which definitely contributes to the web pages that we shall make.

The tags comprise a starting tag and an ending tag. The starting tag specifies the start of some part (for example, a paragraph), and the ending tag for the same tells that the element has ended. (some tags are self-closing. So they don’t have an end tag. We are going to see many such tags too). The content that we write in between the tag is a part of that tag and structured according to the tag.

HTML Boilerplate Example

Example of how we are going to use some tag (This is just a demonstration. Details will be discussed ahead) →

Below is an example of a tag(here we have used an italics tag as an example. We are going to discuss this tag later too).

Note:- the tag name is written inside the less than and the greater than a symbol. The tag name for the italics tag is I, so, the complete element is written as –

<i> this text will be displayed in italics </i>

Here, the <i> tag is the starting tag, and the </i> tag is the ending tag. Any ending tag will consist of the forward slash.

There are many tags that have some content in them(referred to as elements), like in the above italics tag. However, there are some other tags that do not have any content. They are called void elements. Examples of void elements are –

  • <br> → used as a line break
  • <hr> → used for adding a horizontal rule
    and many other tags…

These tags also are going to be discussed afterward.

So, finally, it’s time to write our very first webpage, after giving a short description about tags. We will be using some more tags in the code which will be present in every HTML code that we write, so we will also take a look at all those tags.

So, the basic HTML code would be the code which is present in every web page. You can say that this would be our starter code (we are going to start from here). Below is the starter template for the HTML →

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>First webpage</title>
</head>
<body>
   
</body>
</html>

You have to save the file with a .html extension so that it is identified as a web page. You can also save it by .htm extension by the way.

You will be using your favorite browser to check the outputs of what we are writing.
Lets now discuss some things that are appearing in the above example –

  • <!DOCTYPE html>
    This is just a document specification for our document type. This is supposed to be the first line in our document, and this is NOT AN HTML TAG, but it is just information about the type of the document.
  • <head> →
    the head element contains the information related to the document. It is a container for metadata, which means, data about data. It is not for the user. It contains some different tags like the title, meta, link, etc.
  • <html>
    This element is called the root element. It is like this tag is wrapping the whole web page. It is the container for all the other HTML elements. (except for the above DOCTYPE thing). The </html> marks the end of the Html element.
  • <title>
    This element represents the title of the web page, which is contained in the browser’s title bar. The </title> marks the end of the title element.
  • <body>
    This element defines the body of the web page. Whatever is visible on the web page, like the paragraph, headings, hyperlinks, lists, tables, images, etc are a part of the body. The </body> marks the end of the document body.

All these are container elements, that is, they are having some contents. They also have end tags.