What is html?

If you cannot answer the following questions, this post is for you.

  1. What does the term hyper and markup means in the Hyper Text Markup Lanuage?
  2. How do I compile html programs?
  3. Who owns html? Whom should I pay to use html in my website?
  4. How do I install html in my computer?

From Wikipedia

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.

HTML stands for Hyper Text Markup Language. You need to know about the meanings of each term before you can start understanding html. I will try to explain what exactly html is and after reading this post you will be able to answer the questions cited above.

In literal terms Hyper means active or energetic. Hence HyperText means energetic text which means the text is not just for display. It has some power associated with it. The power that we are mentioning here is called ‘link’. Before HTML the screens could show only text and you need to update the terminal’s screen to read more text. Hypertext can be understood as a book in which you are reading some content on a page and inside the same page you encountered a phrase which is described in another chapter in the same book. The phrase has a small citation to the page number of the chapter so that you can directly open that page instead of going through every chapter and then reading about the intended topic.

Similarly hypertext works. You mark some of the words with direct reference to other page so that when you click on the reference, the new page gets opened directly and you don’t need to go through all the pages to reach the intended topic.

How do we create hyper text? Once we get accustomed to html and its tags, then we will go into the implementation part of this. Meanwhile just keep in mind that hypertext is just text that knows the page number of other pages.

Coming to the second part of the definition “Markup language”. First of all, html is NOT a programming language. It is just a markup text that is written with special tags in it so that the browser understands the text and displays it accordingly. Hence there is no compiling involved like java/c++.

You can create your own markup like below but you need to create your own program that would understand this markup. Then you would ask your colleagues to write their programs in such as way that any information inside <Book></Book> would contain all info about a book. They should also know what all possible tags are there which you intend to use. Basically to come up with a list of tags that both parties agree upon first before start writing code. Then if your books data gets popular and everybody wants to communicate with you then they would have to write their programs in the same way. They would also want to know what all tags you are using to describe book data. And that’s where comes the standards. You publish your Book standard from where people can read and know about the same.

<Book>
<Name>Understanding HTML</Name>
<Price>22 Rs</Price>
<ISBN>1234567890</ISBN>
</Book>

Similarly when the browser was developed, the developer created a few tags and published the list of tags publicly so that anybody who wants to use the browser can write code according to the same list of tags. So we have <h1>, <head>, <body>, <ul>, <li> etc.; a list of already defined tags that the browser knows about. The browser is just an application which can decode the html text written by you. You do not install HTML instead you need to have a browser installed to run your HTML code. So the browser can be a paid product but the HTML is not. You can write code in html and use the browser to load it.

Nobody owns HTML and you don’t have to pay anybody to use HTML. Though there is an organization which maintains the HTML standards so that everybody uses the same set of tags. The browser reads the tags and data inside the tags and displays the data only with special formatting according to the tag in which the data is. For e.g. making the font large if the text is inside <h1> tag. After the popularity of HTML, other developers also made their browsers in such a way that they would interpret the HTML code the same way other browsers are doing. Hence you write your HTML code and all browsers display it likewise. This is how HTML started.

Coming back to the hypertext thing. Now that we have an idea of how HTML looks like and what are tags, we can understand how links work in web world. There is a special tag called <a> tag(a stands for anchor) and written as

<a href="www.bbc.com">Click here to goto BBC</a>

The text between the start and closing tag “Click here to goto BBC” will be the text that would be shown on the page. And internally the browser would create a link so that when you click on the text, the browser redirects you to the BBC site or specifically to the site which is referred in the attribute “href” which stands for hyper reference. Additionally the browser would render the link text in blue color and with an underline so that you get a hint that it is a hyper link and not just plain text.

This is basically how links work on a page and we have our interconnected world wide web. One page contains links to some 20 pages which in turn would contain links to hundreds of pages and which then have links to more pages. That’s why having the page on the internet is not just sufficient. You want somebody to reach that page. There are two ways for that : Either you tell the person the exact URL of the page or you provide a link to your page on some already known page. That’s how search engines work. When people search on google, google shows them some text which is basically a link to your site so that when they click on the search result they go to your website without even remembering the exact URL of your website.

There is a small thing to note here. The text that is displayed for the link is different from the exact URL of the link. Note that the URL is given inside the tag as an attribute property while the text is just placed within the start and closing tag. Thats why it may happen that somebody can play with you as below. The below link will take you to a fake amazon web page where you might get the same look and feel like amazon’s and pay for something which might never get delivered to you.

<a href="www.fakewebsite.com">Amazon.com</a>

To prevent yourself from the above scenario or even just to know what link leads to which page, the browsers now a days show the full URL of the link in the bottom section of the window when you just hover over the link.

This all started in 1982 and its been around 35 years. You can expect a lot of developments. Though this is the basic principle over which websites work, there are hundreds of new technologies which have been built on top of this and thus its not just about links anymore. Web applications now are complex enough to understand in a single post or even a book. You need to understand many related tech to understand the deep world of WWW.

 

2 Comments

  1. Praveen says:

    Nice explanation for getting started.

    1. Thanks. Will be writing similar kind of posts for other various topics related to web development.

Leave a Reply

Your email address will not be published. Required fields are marked *