HTML Fundamentals
HTML for Beginners: Building the Skeleton of a Webpage

HTML for Beginners: Building the Skeleton of a Webpage

Biraj Singh's photo
Biraj Singh
·

3 min read

Have you ever wondered what HTML is? What is it used for? and what are the basic building blocks of an HTML document?

If your answer is yes, then let’s dive deeper and explore the answers to these questions.

What is HTML and what it is used for?

HTML an abbreviation for HyperText Markup Language is the basic building block of the web. Most of the visual elements that you see on a website is written in HTML. When we enter a URL in our browsers’ address bar, the HTML document of that particular website is loaded in our browser. Our browser then reads the HTML document and controls our screen to display the contents accordingly.

You can think of HTML as a building without any paintings, elevators or automatic doors.

To understand HTML (HyperText Markup Language) let’s break it down and understand it’s meaning word by word. In HTML, HyperText means links that connect one web page to another, Markup means to make use of tags (we will see this later) to write contents, link images etc. inside those tags and Language means… well I don’t think I need to explain that one.

Therefore, in conclusion we can say that HTML is a language that uses hyperlinks and tags to structure the document.

What are the basic building blocks of an HTML document?

Tags

Tags are the most basic and an essential part of an HTML document, they tell the web browser how to display the contents written in a tag.

Tags are written between an open angle bracket < and a closed angle bracket>, For example: <html>. Most of the tags have a start (<html>) and an end (</html>), all the relevant contents that has to be contained inside the tag are written between them.

Element

Together, <p>Some Content….</p> make an element.

Attributes

An attribute gives additional information about the html element to modify its functionality. At some places you will also see <html lang=”en”>…</html>. In this html is the tag name, lang is the attribute and en is the value of that attribute.

Below is the structure of an HTML document using a flow chart

Below is the skeleton of an html document. Let’s understand each line one by one.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>

    </body>
</html>

  • <!DOCTYPE html> - This particular line tells the browser the type of document that is being loaded.

  • <html> - This is the beginning tag of every html document, all the contents of an HTML document must be contained inside <html>…</html> . The lang attribute specifies the language of the HTML content, in this case the value of lang is en which is a shorthand notation of English.

  • <head> - This tag contains all the meta tags, links to external files (CSS or Javascript) that the document is using and also the title of the document.

  • <meta> - The <meta> tag is used to store the metadata (data describing the data) of the HTML document. The charset attribute tells the browser what encoding the HTML document is using.

  • <title> - The title tag is used to display the title of a webpage, the stuff that is written on the top of your browser tab.

  • <body> - The body tag contains the main parts of your HTML document. It is in the body tag that we declare different HTML elements like <p>…</p>, <h1>…</h1> , <div>…</div> etc.

So in this article we saw what an HTML document is and what are it’s basic building blocks. Thanks for reading.

For any corrections mail me at .

ChaiCodeHTML5HTMLWeb Developmenttagselements