What is HTML?
2021-10-12 12:34 · 12 min read
HyperText Markup Language (HTML)
HTML stands for HyperText Markup Language. HTML is the standard markup language for Web pages. HTML elements are known as the building blocks of Web pages. HTML elements are represented by <> tags.
HTML History
The concept of the world wide web was first devised by Tim Berners Lee in the early 1990s. The web, however, as we see it today, is not what it was, at the time of its introduction. It has undergone a series of changes and evolution and has become the web, we love. Each new version has allowed the making of web pages, simpler, easier, and efficient.
Some important landmarks in the history of HTML are:
| Version | Specification | Release Date |
|---|---|---|
| HTML 1.0 | Non-interactive websites. Just plain text. | 1994-01-01 |
| HTML 2.0 | Gave HTML its core features. Became standard for web design and development. know more | 1995-11-24 |
| HTML 3.2 | Introduced and diversified the concept of tags. However, was not much popular know more | 1997-01-14 |
| HTML 4.0 | Included CSS and became the official standard by May 1998. know more | 1998-04-24 |
| HTML 5.0 | An extended version of HTML 4.01, which was published in 2014 became popular by the name of HTML 5.0 and is the web as we see it today. It has been developed, keeping in mind, the needs of the present as well as the future. know more | 2014-10-28 |
HTML is a web technology, web designers use it to create websites.
What Is HTML?
Are you amazed by all those websites that you click upon while referencing the web for a school project? Image search probably. Or do you wonder, what it takes, to make all those amazing social media platforms that you use to communicate with your friends, even strangers? That is what this series is about: HTML, the skeleton for all these “websites”, the backbone of the web.
Coming to the usual stuff: HTML stands for HyperText Markup Language.
But what exactly is a Markup Language? A Markup language is defined as a language that uses tags to define the layout and the structuring of a document. Let us take an analogy to understand what is the purpose of Markup Language.
Imagine you are drawing a human face. The human face (just the face), usually, consists of 2 eyes, 1 nose, and 1 mouth, excluding the skin. So we have to draw:
- 2 Eyes
- 1 Nose
- 1 Mouth
to define a face, which using Markup Language can be written as:
<face>
<eyes>
<eye1>
</eye1>
<eye2>
</eye2>
</eyes>
<nose>
</nose>
<mouth>
</mouth>
</face>That is all that we are required to draw a face. Notice how eyes came first and then nose and mouth. That’s what we do using Markup Language, we define the layout using tags.
What are tags? Did you see that we used something like <eyes>, <mouth>, and <nose>? These were the tags and tags are the characteristic of a Markup Language, tags are what define a Markup language. Tags like <face> are called opening tags and the ones containing slash like </face> are called closing tags.
So till now, we have understood tags and Markup language, which will make HTML easier to understand.
HTML, using tags, defines how pages look on a website. You can view the website as a collection of web pages. For example, www.facebook.com is a website that is a collection of many pages. When your friend shares something e.g a birthday message with some images, on Facebook, it is the HTML code that specifies, where, and how an image will appear? Will the image be small or big? Would it be on the right side of the text or below it? Something like that.
However, there are some websites too, that have only 1 page.
Similar to the tags we used above, we have some predefined tags in HTML. Yes, we do not have to define our tags, someone has already done that hard work for us. We just have to reference those tags. The simplest HTML code, which consists of some basic tags, but effectively does nothing, somewhat looks like this:
<!DOCTYPE HTML>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>If you will write the above code in an IDE and run it, to obtain your very first web page, you will get a blank screen. You might think, “All this work, just to see a blank screen?” To make, at least something appears on the screen, type the following code:
<h4>This is a Paragraph</h4>
Now you will notice that, instead of a blank screen, the following text appears on the screen:
This is a Paragraph
<!DOCTYPE html>
<html>
<head>
<!--Title-->
<title>Page Title</title>
</head>
<!--Body-->
<body>
<p>This is a Paragraph</p>
</body>
</html>Now that you have got your hands dirty with HTML, lets us dive into what exactly each tag does:
<!DOCTYPE HTML>
The latest version of HTML is HTML5 and this tag informs the browser that the code you have written is using HTML5 syntax, or else the browser won’t understand, which version of HTML to use for displaying the content. Unlike other tags present in our code, this tag is case insensitive, implying that we can either write it, the way we already have, or <!DOCTYPE html> or <!doctype HTML> or <!doctype html>.
<html>
This is the root element of an HTML document. What it means is that every other tag is the child of <html> tag, just as you are a child of your parents. As you see, all other tags, including <head>,<body> are the descendants/children of <html> tag. Just as you are the descendant of your father, your father of your grandfather, your grandfather of your great grandfather, and so on, tags to our descendants. As in this example, <head> is the child of <html>, <body> too is the child of <html>, therefore, these two tags are at the same level and are siblings of one another.
<head>
This tag contains information about the title of the HTML document and meta information, which is used for ranking purposes.
<title>
No prizes for guessing, this tag contains the title of the webpage, which is displayed on the tab, usually on the top right corner of the browser.
<body>
This is where all the magic happens! This is where we write our “main” code, for our HTML document, that we want to be displayed on the screen. We will learn more about this in the upcoming tutorials.
</HTML5 SYNTAX>
This is the HTML5 basic Syntax
<!DOCTYPE html>
<html>
<head>
<!--Title-->
<title>Title</title>
<!--External StyleSheet-->
<link rel="stylesheet" href="css_file.css">
<!--Internal StyleSheet-->
<style>
.class_name{property:value}
#id_name{property:value}
</style>
</head>
<!--Body-->
<body>
<!--Inline StyleSheet-->
<p style="property:value">This is a paragraph</p>
<!--Heading-->
<h1>H1 Heading</h1>
</body>
</html></How to create your first web page using HTML5>
It is very easy to create your first HTML page.
Just follow these instructions and start your journey in the web designing field.
REQUIREMENTS
Install the latest software on your PC
i.e. Google Chrome Web Browser, VS Code Text Editor
FOLLOW THESE STEPS
Step 1 Open VS Code Editor
Step 2 Create a new file
Step 3 Copy HTML Syntax
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>This is a Heading</h2>
</body>
</html>Step 4 Now you can save it as index.html
Step 5 Open your saved File on Google Chrome Web Browser
Now you can check your webpage on Chrome Browser
