What is HTML

What is HTML
What is HTML

Html stands for hypertext markup language which is a computer language. Html is used to define the structure of the web pages. Using HTML web developer can define how the content of the webpage will be displayed on the web browser. Here Hypertext means text within the text, hypertext contains a link that brings you to the other pages. Web pages on the internet contain so many hyperlinks to connect one page with another. And in HTML markups are used to define elements of a webpage, means you can add images, videos, tables, a different type of texts etc, by using only text within different HTML tags and elements.

History and versions of Html

Html was first developed by Tim Berners-Lee in 1990. Tim Berner-lee specified and wrote the browser and server software in late 1990. And this system was developed to share documents between researchers of CERN.

  • Html 2.0 was published in 1995 with added capabilities.
  • In 1997 Html 3.2 was published. It was the first version developed and standardized by world wide web consortium.
  • In December 1997 Html 4.0 was published as a recommendation of W3C (World wide web consortium). After in April 1998, Html 4 was reissued with minor upgrades without increasing version number. And then Html 4.01 was published in 1999.
  • After Html 4.01 there was no new version of Html for many years.
  • And after a very long time Html 5 the latest version of HTML published as a recommendation of W3C. And then Html 5.1 and Html 5.2 was published in November 2016 and December 2017 respectively.

Html tags, elements, and attributes

Now let’s understand what is tags, elements, and attributes in Html and how it looks.
As we know that Html is a markup language. Web developers use different types of elements to add images, videos, texts on a webpage. Tags and element decide how content between the opening and closing tags will be displayed on the web browser. Using different types of HTML tags you can make different types of text from smaller to bigger and create tables, menus, buttons links etc.
For an example, if you want to write below the line as a paragraph
” I am a blogger and programmer.”
In Html, you have to use <p> ( Paragraph tag ) to add a paragraph on your webpage.

<p> I am a blogger and programmer. </p>

Html Tag, Element and Content
Html Tag, Element and Content

Here, <p> is the opening tag and </p> is the closing tag. The whole paragraph called an element of web and thing between the two tags is called content. This is the basic way of adding elements to the webpage. Web developers use different tags where the opening tag contains the keyword between two angle brackets and closing tag contains keyword with the forward slash between two angle brackets. There are also some tags that do not require closing tags such as image tag “<img src=”image.jpg”>.
In HTML there are so many attributes are available like id, class, src, type etc. Attributes are used to adjust the behavior of different elements. You can use attributes to change the look of elements. Attributes are additional values that help to configure elements in different ways.
For example, if you want to change the look of any elements using elements then you can add id or class attribute with any element or, to provide image location in the< img> tag you can use src attribute.
Look of HTML attribute:

Html Attributes
Html Attributes

A simple program using Html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
Title of the weppage.
<h1> Simple paragraph </h1>
<p> This is a simple paragraph in html using paragraph tag to show you how to add paragraph in html code </p>

Now let’s understand this simple HTML code

  • Here <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> is used to declare doctype.
  • <html> tags indicates starting of the HTML document.
  • <head> tag contains the information about the page like page title, meta tags, and location of CSS and javascript file and you can also add CSS code and javascript code in the head tag.
  • <title> tag contains simply the title of the webpage.
  • Now <body> tag defines the body of the webpage and it is also an important tag because all content between body tag is viewable in the browser.
  • <body> tag contains things like text, images, videos, paragraph, tables, forms, menus etc.
  • In body tag we have used <h1> tag which is a header tag. There are six header tags <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. Text between these heade tags looks bigger and bold where <h1> is biggest one and <h6> is smallest one.
  • <p> called paragraph tag and it is used to add paragraph in the webpage.
  • In this example, almost all tags have closing tags.

What is Html 5

Html 5 was published in 2014 by the recommendation of a W3C. Html 5 is the latest version of HTML. And upgraded versions of Html 5, Html 5.1 and 5.2 published in 2016 and 2017 respectively.
The main goal of Html 5 is to reduce dependency on external plugins and scripts. Html 5 introduced many new tags and attributes to add content without the help of different plugins and scrips.
Before Html 5 if you want to add vector graphics then you need to use other technologies like Flash, Silverlight, and VML. But after Html 5 you can add vector graphics using canvas and SVG tags without dependence on other technologies. And now <audio> and <video> tags are also available in Html 5 to add audio and video files easily in webpage. The use of <div> tags in some places is replaced by <header>, <footer>, <nav>, <article>, <section> tags. Doctype declaration and character encoding is very small compare to Html 4. And cookies is also replaced by Html Local Storage to store temporary information on user device without any problem.
There are many new tags and attributes is introduced in Html 5:

  • New graphic tags: <svg> and <canvas >
  • New multimedia tags: <audio>, <video>, <source>, <track> and <embed>
  • New semantic tags: <header>, <footer>, <article>,<nav>, <aside>, <figure>, <main> and <section>
  • New form tags: <datalist> and <output>
  • New form tags: <datalist> and <output>
  • New form control attributes: Number, Date, Time and Calendar and Range.

New APIs are also available in Html 5

  • Html Web Workers
  • Html Geolocation
  • Html Drag and Drop
  • Html Application Cache
  • Html Local Storage
  • Html SSE

New tags are added as well as some of old tags are removed in html 5 like <dir>, <frame>, <font>, <frameset>, <noframes>, <applet>, <basefont>, <big>, <tt>, <acrony> etc.

Html 5 code example

<!DOCTYPE html>
<html lang=”en”>
<meta charset=”UTF-8″>
<title> Title of the webpage.</title>
<h2> Simple H2 header text.</h2>
<p> This is a simple paragraph in html using paragraph tag to show you how to add paragraph in html code <p>

Here Doctype declaration and character encoding are very small compare to Html 4.

How Html works

Now let’s talk about “how HTML works?” because it will give you a better understanding of Html.
Different web developers design different web pages using Html language and upload it on any server. When any user wants any webpage from the internet then user makes a request using the browser and downloads that page. You can also access offline available HTML file on any device.
When you load an HTML file in any web browser your browser renders that HTML code and creates DOM ( Document object model ) of that page. then Html parser is used for parsing HTML code available in the browser. Html markups mean tags are used to understand “how to display contents on the browser”.
According to the code, the browser displays a webpage on the browser.

What is DOM :

HTML DOM(Document Object Model)
HTML DOM(Document Object Model)

Now let’s understand what is HTML DOM. To display your HTML document on the browser first browse has to understand your code means the browser has to parse your code. So browser creates a document object model of your HTML document. DOM is the collection of all HTML element of your document. And every element has relation with other.
Here <html> tag is parent of <head> and <body> and they are child of <html> tag. <head> tag has childs <title> and <script> and body has childs <p> and <h1>. And here <title> and <script>, <p> and <h1>, <head> and <body> called sibling of each othere because of same parent.
Using javascript you can change the content of the HTML document. You can add or remove elements or change the content of tags and you can also change the style of the document using javascript. To do that DOM helps javascript.

Pros of HTML:

  • You can create web pages.
  • Used widely.
  • Every browser supports.
  • No need to use other software because you just need a browser.
  • Platform independent because it uses a browser.
  • Very easy to learn. Anyone can learn without programming knowledge.
  • It is simple text so you can easily edit. And no need to compile like other programming languages because it is just like write code and execute.

Cons of HTML:

  • You can only create a static webpage. If you want to make your webpage dynamic then you need to use javascript.
  • You need to write a lot of code to make a simple webpage. And for the bigger webpage, you need to write too much code that also increases the complexity of the code.
  • Security features are not good.
  • It is not a programming language. You can’t do things that can be done with a programming language. (Though, I don’t consider it as a disadvantage because every language has its own use.)

How to write and execute:

  • To write HTML code you can use a simple text editor like notepad and if you want other facilities like auto-complete then you can use different IDEs.
  • After writing your code you can save it with extension .html and you can also use the .htm extension in windows.
  • After saving your HTML file just open in any browser and your output is ready.

Understand small HTML code:

<!DOCTYPE html>
<title>This is page Title</title>
<link rel=”stylesheet” href=”styles.css”>
<script src=”myscripts.js”></script>
<h1> This is H1 header tag</h1>
<p> This is an example of paragraph in html. You can add paragraph in html document using paragraph tag. You can write anything between opening and closing tags. </p>

Explanation: Now let’s understand this code. In the first line <!DOCTYPE html> we have declared the type of our document. Now <html> tag is the starting of our HTML code and everything in the document is written between this opening and closing HTML tags. After HTML tag you can find <head> tag. This tag contains information like the title of the webpage, CSS code, javascript code or links of external CSS and javascript code. In this example, we have used external javascript and CSS files so we can add external CSS file using <link> tag and external javascript file using the <script> tag.
After that, you can find the <body> tag. Everything in the body tag of HTML code is displayed on the web browser. In this body tag, you can add everything that you want to be displayed on the webpage.
To add paragraph in HTML code you can use <p>…</p> tag. To add header text you can choose of <h1> to <h6> tag. You can also add forms, dropdown menues, different types of texts, lists etc, using different types of HTML tags.

About Geek Kishan

Tech enthusiast | Geek | Programmer | Web developer | Introvert. Love to read and write about technology. I want to share my little knowledge with the world hoping that it will help someone.

View all posts by Geek Kishan →

Leave a Reply

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