HTML5 (HyperText Markup Language 5) is the latest version of HTML used to create and structure web pages. Every website on the internet starts with HTML because it defines the content and layout of a webpage. HTML5 Introduction and basic structure practice questions with solutions help to built concepts.
HTML5 introduced several improvements over older versions, including:
- New semantic elements (
<header>,<footer>,<section>,<article>) - Better support for multimedia (
<audio>,<video>) - Improved form controls
- Canvas and SVG support
- Better accessibility and SEO
If you want to become a Web Developer, Frontend Developer, Full Stack Developer, UI Developer, or Software Engineer, learning HTML5 is the first step.
Why Learn HTML5?
HTML5 is used for:
- Building websites
- Creating landing pages
- Developing web applications
- Creating email templates
- Building blogs and portfolios
- Designing business websites
- Preparing for web development interviews
HTML5 Basic Document Structure
Every HTML5 webpage begins with a standard structure.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to HTML5</h1>
</body>
</html>
1. Create Your First HTML5 Webpage
Problem Statement
Create your first HTML5 webpage that displays the message:
Welcome to HTML5 Practice Questions
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML5 Practice Questions</h1>
</body>
</html>
Expected Output
Welcome to HTML5 Practice Questions
(Displayed as a large heading in the browser.)
Explanation
This program contains the minimum structure required for an HTML5 page.
<!DOCTYPE html>tells the browser that this is an HTML5 document.<html>is the root element.<head>stores metadata.<title>sets the browser tab title.<body>contains visible webpage content.<h1>displays the main heading.
Concepts Covered
- HTML5
- DOCTYPE
- html
- head
- title
- body
- h1
2. Create a Webpage with Heading and Paragraph
Problem Statement
Create a webpage that displays:
- A heading
- A paragraph below it
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>Learning HTML5</h1>
<p>HTML5 is the foundation of every modern website.</p>
</body>
</html>
Expected Output
Learning HTML5
HTML5 is the foundation of every modern website.
Explanation
<h1>creates the largest heading.<p>creates a paragraph.- Browsers automatically place the paragraph below the heading.
Concepts Covered
- Heading
- Paragraph
- HTML Structure
3. Create a Webpage with Multiple Headings
Problem Statement
Create an HTML page displaying all heading tags from h1 to h6.
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Heading Levels</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Expected Output
The browser displays six headings with decreasing font sizes from Heading 1 to Heading 6.
Explanation
HTML provides six heading levels:
<h1>is the largest and most important.<h6>is the smallest.
For SEO, every webpage should usually have one <h1> representing the main topic.
Concepts Covered
- h1
- h2
- h3
- h4
- h5
- h6
4. Create a Webpage Using HTML Comments
Problem Statement
Create an HTML5 webpage that contains:
- A heading
- A paragraph
- An HTML comment that is not visible on the webpage
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>HTML Comments</title>
</head>
<body>
<!-- This is an HTML Comment -->
<h1>HTML Comments Example</h1>
<p>Comments are ignored by the browser.</p>
</body>
</html>
Expected Output
HTML Comments Example
Comments are ignored by the browser.
The comment:
<!-- This is an HTML Comment -->
is not displayed in the browser.
Explanation
HTML comments are used to:
- Explain code
- Leave notes for developers
- Temporarily disable HTML code
- Improve code readability
Comments begin with:
<!--
and end with:
-->
Concepts Covered
- HTML Comments
- Code Documentation
- Readability
5. Create a Webpage with Multiple Paragraphs
Problem Statement
Create a webpage that displays three different paragraphs.
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Multiple Paragraphs</title>
</head>
<body>
<h1>HTML5 Practice</h1>
<p>HTML is used to create web pages.</p>
<p>CSS is used to style web pages.</p>
<p>JavaScript adds interactivity to websites.</p>
</body>
</html>
Expected Output
HTML5 Practice
HTML is used to create web pages.
CSS is used to style web pages.
JavaScript adds interactivity to websites.
Explanation
Each <p> element creates a separate paragraph.
Browsers automatically add spacing between paragraphs.
Concepts Covered
- Paragraph Tag
- Multiple Paragraphs
- HTML Structure
6. Display a Webpage Title in the Browser Tab
Problem Statement
Create a webpage whose browser tab displays the title:
HTML5 Learning Portal
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Learning Portal</title>
</head>
<body>
<h1>Welcome to HTML5</h1>
</body>
</html>
Expected Output
Browser Tab
HTML5 Learning Portal
Webpage
Welcome to HTML5
Explanation
The <title> tag defines the text displayed in the browser tab.
It also plays an important role in:
- SEO
- Search engine results
- Browser bookmarks
- User experience
Concepts Covered
- Title Tag
- Browser Tab
- SEO Basics
7. Build a Simple “About Me” Webpage
Problem Statement
Create an HTML5 webpage introducing yourself using:
- A heading
- Two paragraphs
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>About Me</h1>
<p>Hello! My name is Rishabh.</p>
<p>I am learning HTML5 to become a Web Developer.</p>
</body>
</html>
Expected Output
About Me
Hello! My name is Rishabh.
I am learning HTML5 to become a Web Developer.
Explanation
This exercise demonstrates how HTML can be used to structure personal information.
It is commonly used in:
- Portfolio websites
- Personal blogs
- Resume websites
Concepts Covered
- Heading
- Paragraph
- Personal Webpage
8. Create a Basic Company Introduction Page
Problem Statement
Create a webpage introducing a company with:
- Company name
- Short description
- Mission statement
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Company Introduction</title>
</head>
<body>
<h1>ABC Technologies</h1>
<p>ABC Technologies provides software development and IT consulting services.</p>
<p>Our mission is to build innovative digital solutions for businesses worldwide.</p>
</body>
</html>
Expected Output
ABC Technologies
ABC Technologies provides software development and IT consulting services.
Our mission is to build innovative digital solutions for businesses worldwide.
Explanation
This example demonstrates how HTML is used to create a simple company profile page.
Such pages are commonly found on:
- Company websites
- Startup landing pages
- Corporate portals
- Business profile pages
Concepts Covered
- HTML Page Structure
- Headings
- Paragraphs
- Company Profile Layout
9. Create a Simple School Webpage
Problem Statement
Create an HTML5 webpage for a school that displays:
- School Name
- Welcome Message
- Short Description
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>ABC Public School</title>
</head>
<body>
<h1>ABC Public School</h1>
<p>Welcome to ABC Public School.</p>
<p>We provide quality education and encourage students to achieve excellence.</p>
</body>
</html>
Expected Output
ABC Public School
Welcome to ABC Public School.
We provide quality education and encourage students to achieve excellence.
Explanation
This example shows how HTML can be used to build a simple homepage for a school website.
Concepts Covered
- HTML Document Structure
- Heading
- Paragraph
- Title
10. Create a College Information Webpage
Problem Statement
Create a webpage that displays:
- College Name
- About the College
- Courses Offered
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>XYZ College</title>
</head>
<body>
<h1>XYZ College</h1>
<p>XYZ College offers undergraduate and postgraduate programs.</p>
<p>Popular courses include BCA, B.Tech, MBA, and B.Com.</p>
</body>
</html>
Expected Output
XYZ College
XYZ College offers undergraduate and postgraduate programs.
Popular courses include BCA, B.Tech, MBA, and B.Com.
Explanation
Educational websites commonly use headings and paragraphs to organize important information.
Concepts Covered
- HTML Structure
- Educational Webpages
11. Create a Restaurant Homepage
Problem Statement
Create a restaurant homepage displaying:
- Restaurant Name
- Welcome Message
- Specialty
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Food Corner</title>
</head>
<body>
<h1>Food Corner</h1>
<p>Welcome to Food Corner Restaurant.</p>
<p>We serve delicious Indian, Chinese, and Italian cuisine.</p>
</body>
</html>
Expected Output
Food Corner
Welcome to Food Corner Restaurant.
We serve delicious Indian, Chinese, and Italian cuisine.
Explanation
Restaurant websites generally introduce their brand with a heading followed by a brief description.
Concepts Covered
- Heading
- Paragraph
- Homepage Layout
12. Create a Travel Webpage
Problem Statement
Design a webpage promoting a travel destination.
Display:
- Destination Name
- Description
- Why Visit
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Visit Manali</title>
</head>
<body>
<h1>Visit Manali</h1>
<p>Manali is one of India's most popular hill stations.</p>
<p>Enjoy beautiful mountains, snowfall, and adventure activities.</p>
</body>
</html>
Expected Output
Visit Manali
Manali is one of India's most popular hill stations.
Enjoy beautiful mountains, snowfall, and adventure activities.
Explanation
Travel websites often use simple HTML layouts to introduce destinations before adding images and links.
Concepts Covered
- Basic HTML Layout
- Travel Website Structure
13. Create a News Article Webpage
Problem Statement
Create a simple news webpage containing:
- News Heading
- News Content
- Author Information
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Latest Technology News</title>
</head>
<body>
<h1>Artificial Intelligence Continues to Grow</h1>
<p>AI is transforming industries by improving automation and decision-making.</p>
<p>Author: Rishabh Kumar</p>
</body>
</html>
Expected Output
Artificial Intelligence Continues to Grow
AI is transforming industries by improving automation and decision-making.
Author: Rishabh Kumar
Explanation
A simple news article can be built using only headings and paragraphs before adding advanced HTML5 semantic tags in later chapters.
Concepts Covered
- News Page Structure
- Heading
- Paragraph
14. Create a Personal Portfolio Homepage
Problem Statement
Create a simple personal portfolio homepage that displays:
- Your Name
- Your Profession
- A Short Introduction
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>Rishabh Kumar</h1>
<p>Frontend Web Developer</p>
<p>I am passionate about web development and enjoy building responsive websites using HTML5, CSS3, and JavaScript.</p>
</body>
</html>
Expected Output
Rishabh Kumar
Frontend Web Developer
I am passionate about web development and enjoy building responsive websites using HTML5, CSS3, and JavaScript.
Explanation
This example demonstrates how HTML5 is used to build the homepage of a personal portfolio website.
Portfolio websites are commonly used by:
- Students
- Freelancers
- Web Developers
- Designers
- Software Engineers
Concepts Covered
- HTML Structure
- Portfolio Layout
- Headings
- Paragraphs
15. Build a Complete Basic HTML5 Webpage
Problem Statement
Create a complete HTML5 webpage that includes:
- Page Title
- Main Heading
- Welcome Paragraph
- About Section
- Contact Information
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>My First HTML5 Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This website is created using HTML5.</p>
<h2>About</h2>
<p>I am learning web development from beginner to advanced level.</p>
<h2>Contact</h2>
<p>Email: example@email.com</p>
</body>
</html>
Expected Output
Welcome to My Website
This website is created using HTML5.
About
I am learning web development from beginner to advanced level.
Contact
Email: example@email.com
Explanation
This exercise combines everything learned in Chapter 1:
- HTML5 document structure
<title><head><body>- Headings
- Paragraphs
It resembles a real homepage and prepares you for more advanced HTML topics.
Concepts Covered
- Complete HTML Structure
- Headings
- Paragraphs
- Basic Webpage Layout
Chapter Summary
In this chapter, you learned the fundamentals of HTML5 and how every webpage begins with a proper HTML document structure.
You practiced creating simple webpages using headings, paragraphs, comments, and page titles. You also built beginner-friendly webpages such as school pages, company profiles, portfolio pages, and news articles.
Throughout this chapter, you covered:
- HTML5 Introduction
- HTML5 Document Structure
<!DOCTYPE html><html>element<head>element<title>element<body>element- Headings (
<h1>–<h6>) - Paragraphs (
<p>) - HTML Comments
- Creating complete HTML webpages
These concepts form the foundation of web development. Every professional website begins with the same HTML5 structure you learned in this chapter.
Key Takeaways
- HTML5 is the latest version of HTML used for building modern websites.
- Every HTML document starts with
<!DOCTYPE html>. - The
<html>element is the root of every webpage. - The
<head>section stores metadata and the page title. - The
<title>tag defines the browser tab title. - The
<body>section contains all visible webpage content. - Headings organize webpage content and improve SEO.
- Paragraphs are created using the
<p>element. - HTML comments help developers document code and are ignored by browsers.
- A well-structured HTML document improves readability, accessibility, and search engine optimization.
Frequently Asked Questions (FAQs)
1. What is HTML5?
HTML5 (HyperText Markup Language 5) is the latest version of HTML used to create and structure webpages.
It provides improved support for multimedia, semantic elements, forms, and modern web applications.
2. Why is <!DOCTYPE html> important?
<!DOCTYPE html> tells the browser that the document is written in HTML5.
Example:
<!DOCTYPE html>
Without it, browsers may render the page in compatibility mode, causing unexpected behavior.
3. What is the purpose of the <head> tag?
The <head> section stores information about the webpage, such as:
- Page title
- Character encoding
- Meta tags
- CSS links
- JavaScript files
Content inside <head> is generally not visible on the webpage.
4. What is the difference between <head> and <body>?
<head> | <body> |
|---|---|
| Stores metadata | Stores visible webpage content |
Contains <title>, <meta>, CSS, JS | Contains headings, paragraphs, images, forms, etc. |
5. Why should every webpage have a <title> tag?
The <title> tag:
- Appears in the browser tab
- Helps with SEO
- Is shown in search engine results
- Makes bookmarks more meaningful
Example:
<title>My First Website</title>
6. What are HTML comments?
Comments are notes written inside HTML that are ignored by the browser.
Example:
<!-- This is an HTML comment -->
They are useful for explaining code or temporarily disabling sections during development.
7. How many heading tags are available in HTML?
HTML provides six heading levels:
<h1><h2><h3><h4><h5><h6>
<h1> is the largest and most important heading, while <h6> is the smallest.
8. Is HTML5 enough to build a complete website?
HTML5 provides the structure of a webpage, but a complete website also requires:
- CSS for styling and layout
- JavaScript for interactivity and dynamic behavior
Together, HTML5, CSS, and JavaScript form the core technologies of frontend web development.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
