What is HTML? Explained for Beginners

To understand what is HTML and what is HTML used for, you have to note that point – “a website is a collection of web pages, and web pages are created by coding in HTML Language“.


What is HTML?

Hypertext Markup Language, often abbreviated as HTML, is a markup language used for creating static web pages.

Sir Tim Berners-Lee invented the Hypertext Markup Language in late 1991, but it was not released officially. The HTML-2.0 was the first standard HTML version published in 1995.


What are Static Web Pages?

Web pages with fixed content are called Static web pages. The content of this type of page is manually changeable by the user.

What are Dynamic web pages?

Dynamic Pages are the opposite of static pages. The content of the dynamic pages can change automatically according to a User or a Database or a Program.

If you want to create a dynamic website like Facebook, you have to use programming or scripting languages (PHP, JavaScript) with the HTML.


How does HTML work in a Web Browser?

First, you have to keep two things in your mind –

  1. A web browser can read only three languages ​​- HTML, CSS, and JavaScript.
  2. HTML code is written by HTML-Tags. And these tags define the structure of a web page.

Now, when you run an HTML-File in a browser, the browser reads the HTML-Tags of the HTML-File and Displays the structure on the browser.


How to create an HTML File in Notepad or TextEdit?

Follow the below steps to creat an HTML Document in Notepad or TextEdit –

Step:1 Open Notepad and Write HTML Code

Here we will use the Notepad to create an HTML Page. You can use other editors, such as – Notepad++, TextEdit, etc.

So, open your text editor and write or copy the following HTML code –

<!DOCTYPE html>
<html>
  
<head>
    <title>My Page Title</title>
</head>
  
<body>
	<h1>My first Website!</h1>
</body>
  
</html>
create html file in notepad
HTML Code in Notepad

Step 2: Save the HTML Code

Now Save the HTML Document on your Desktop or anywhere. I’ll save my HTML Document on the Desktop.

save html code
Saving HTML Code

Here I have named the HTML Document index.html. It is not mandatory to give the same name, you can choose any name. But the file extension must be .html. Like – example.html, mywebsite.html, test.html.

html file naming
The HTML file extension must be .html

Step 3: Run the HTML document on a web Browser

After saving the HTML File, just double click on it to open this file on browser.

If it is not opening on the browser –

  1. Right-click on the Html Document and then Open with > Choose your Browser.
  2. Open your browser and drag the file to it.

Output in Browser

index.html on browser

Explanation of the HTML code

<!DOCTYPE html>
<html>
  
<head>
    <title>My Page Title</title>
</head>
  
<body>
	<h1>My first Website!</h1>
</body>
  
</html>

<!DOCTYPE html>

The <!DOCTYPE> tag is used to specify the version of HTML.

Yes we called it a tag, but it is not a tag, it is a declaration of the HTML version. This tag instructs the web browser which version of HTML the web page is written.

<!DOCTYPE html> – It is HTML5 Declaration, and it is case-insensitive. You can also write like this – <!doctype html> or <!Doctype HTML>

You must have to declare it at the top of every HTML document before writing HTML-Code.

<html>…</html>

This tag represents the root of an HTML Document, and except for the <!DOCTYPE> tag, this tag contains all the other HTML elements.

But at the root of this tag, you are only allowed to write two tags – 1) <head>, 2) <body>

<!DOCTYPE html>
<html>
  
  <head>
    ...
  </head>
  
  <body>
    ...
  </body>
  
</html>

<head>…</head>

This element is used to store information about a web page such as the page title, and this tag is always written inside the <html> tag.

<title>…</title>

The <title> tag is used to define the title of a web page.

<!DOCTYPE html>
<html>
  
  <head>
    <title>My Page Title</title>
  </head>
  
</html>
HTML title tag
web page title in google search

<body>…</body>

This <body> tag contains the content (Headings, paragraphs, Images, Tables, etc.) of a Web Page, and this content will be rendered in the web browser for display to the user.

<!DOCTYPE html>
<html>
  
<head>
    <title>My Page Title</title>
</head>
  
<body>
	<h1>This is a Heading</h1>
	<p>This is a paragraph</p>
</body>
  
</html>
HTML body tag

Leave a Reply

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