If you are completely new to web development, don’t worry. In this chapter, we will start from the very beginning.
By the end of Introduction to HTML chapter, you will know what HTML is, how to create an HTML file, how to run it in a browser, and what the basic HTML code means.
What is HTML?
HTML stands for HyperText Markup Language which is used to create the structure of a webpage.
For example, a webpage can have:
- Headings
- Paragraphs
- Images
- Links
- Lists
- Tables
- Forms
How Does HTML Work?
When you create a webpage, you write HTML code in an HTML file. The browser reads that code and displays the webpage on your screen.
For example, if we write:
<h1>My First Web Page</h1>
The browser understands that <h1> is a heading and displays:
Create Your First HTML File
Let’s create your first webpage step by step.
Step 1: Open Notepad
Open Notepad on your computer.
Step 2: Write the HTML Code
Copy and paste this complete code into Notepad:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>
Don’t worry if you don’t understand the code yet. We will understand every important line in a moment.
Step 3: Save the File
Click:
File → Save As
Name your file:
index.html
When saving, make sure you select All Files as the file type.
Step 4: Open the File
Find the index.html file you just created.
Double-click it.
It should open in your web browser.
You will see:
Hello, World!
This is first webpage using HTML.
Understanding Your First HTML Code
Now let’s understand the code line by line.
<!DOCTYPE html>– Tells the browser that we are using HTML5.<html>– Starts the HTML document.<head>– Contains information about the webpage.<title>– Sets the name shown on the browser tab.</title>– Ends the title.</head>– Ends the head section.<body>– Starts the part of the webpage that is shown in the browser.<h1>– Creates the main heading.</h1>– Ends the main heading.<p>– Creates a paragraph.</p>– Ends the paragraph.</body>– Ends the body section.</html>– Ends the HTML document.
Change Your First Webpage
Now let’s make a small change.
Change:
<h1>Hello, World!</h1>
to:
<h1>Welcome to My Website</h1>
Also change:
<p>This is my first web page.</p>
to something you like.
For example:
<p>I am learning HTML.</p>
Your complete code will now look like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>I am learning HTML.</p>
</body>
</html>
Save the file and refresh the browser. You will see your new text on the webpage. That’s your first step into HTML.
Quick Recap
- HTML is used to create the basic structure of a webpage.
- We write HTML code inside an
.htmlfile. - A browser reads the HTML code and displays the webpage.
- HTML uses tags to tell the browser what different parts of the webpage are.
- Most HTML tags have an opening tag and a closing tag.
<!DOCTYPE html>tells the browser that we are using HTML5.- The
<body>contains the content that appears on the webpage.
In the next chapter, we will properly learn HTML tags and start creating webpage content with them.
Frequently Asked Questions (FAQs)
Q1. What is Introduction to HTML?
Introduction to HTML explains the basics of HTML, how it creates the structure of a webpage, and how beginners can create and run their first HTML file.
Q2. What is HTML used for?
HTML is used to create the structure of webpages. It can be used to add headings, paragraphs, images, links, lists, tables, and forms to a webpage.
Q3. How can I create my first HTML page?
You can create your first HTML page using a text editor such as Notepad. Write the HTML code, save the file as index.html, and open it in a web browser.
Q4. Is HTML easy to learn for beginners?
Yes. HTML for beginners is relatively easy because you can start creating webpages with simple tags without knowing another programming language.
Q5. What are the HTML basics beginners should learn first?
The HTML basics for beginners include understanding HTML tags, the <html>, <head>, and <body> sections, headings, paragraphs, and how to save and open an HTML file.
Q6. How do I run an HTML file in a browser?
After creating an HTML file, save it with the .html extension, such as index.html. Then double-click the file to open it in your web browser and view the webpage.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.