HTML · Introduction to HTML & Web Fundamentals · Lesson 1 of 32

Introduction to HTML & Web Fundamentals

Introduction to HTML & Web Fundamentals

HTML stands for HyperText Markup Language. It is the standard markup language used to create and structure content on webpages.

HTML provides the structure of a webpage. It tells the browser what each piece of content represents, such as a heading, paragraph, image, link, table, form or list.

Important:

HTML is a markup language, not a programming language. It uses tags and elements to describe the structure and meaning of webpage content.

1. What is HTML?

HTML is used to create the basic structure of webpages. It allows developers to organize text, images, links, tables, forms, multimedia and other content.

HTML works together with other web technologies:

  • HTML: Provides the structure and content.
  • CSS: Controls presentation, styling and layout.
  • JavaScript: Adds behaviour, interaction and dynamic functionality.
Technology Primary Purpose Example
HTML Structure and content Heading, paragraph, image, form
CSS Styling and presentation Colour, font, spacing, layout
JavaScript Behaviour and interaction Validation, menus, calculations

2. What is HyperText?

HyperText refers to text that contains links to other documents, webpages or resources.

These links allow users to move from one webpage or resource to another by clicking a hyperlink.

Example:

When you click a link such as Home, About Us or Contact, you are using the concept of HyperText.

3. What is a Markup Language?

A markup language uses special symbols or tags to describe the structure and meaning of content.

HTML uses tags to tell the browser how different pieces of content should be interpreted.

For example: 

<h1>Welcome to CodeStep Academy</h1>

The <h1> element tells the browser that the text represents a major heading.

4. HTML is Not a Programming Language

HTML is a markup language, not a programming language.

Programming languages generally contain programming constructs such as variables, loops, conditions and functions to perform computation. HTML primarily describes the structure and meaning of content.

HTML Programming Language
Markup language Programming language
Describes webpage structure Performs computations and logic
Uses tags and elements Uses programming constructs

5. What is a Webpage?

A webpage is a document that can be displayed in a web browser. A webpage is commonly created using HTML and may also include CSS and JavaScript.

Example:

A school website's Home page, About School page or Contact page is an example of a webpage.

6. What is a Website?

A website is a collection of related webpages and other resources available under a common domain name.

For example, a school website may contain:

  • Home page
  • About Us page
  • Academics page
  • Admissions page
  • Faculty page
  • Gallery page
  • Contact page
Remember:

Webpage = A single web document

Website = A collection of related webpages

7. What is a Web Browser?

A web browser is software used to access and display webpages available on the World Wide Web.

Common web browsers include:

  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
  • Apple Safari
  • Opera

When a browser receives an HTML document, it interprets the HTML and renders the webpage on the screen.

8. How Does a Browser Display HTML?

A simplified flow of displaying a webpage is:

From HTML Code to Webpage

1. User enters a URL → The browser identifies the requested resource.

2. Browser sends a request → The browser requests the webpage from the web server.

3. Server sends the response → The requested HTML and related resources are returned.

4. Browser parses HTML → The browser interprets the HTML elements.

5. Browser renders the webpage → The content is displayed to the user.

9. What is a Web Server?

A web server is a computer system or software that stores and delivers webpages and other web resources to clients, usually through HTTP or HTTPS.

When a browser requests a webpage, the web server processes the request and sends the appropriate response.

10. Client and Server

Web communication commonly involves two important sides: the client and the server.

Term Meaning Example
Client Requests and consumes web resources. Web browser
Server Provides requested web resources. Web server

11. What is a URL?

URL stands for Uniform Resource Locator. It is the address used to locate a resource on the Internet.

Example:

https://codestepacademy.in/index.html

A URL may contain components such as:

  • Protocol: https
  • Domain: codestepacademy.in
  • Path: /index.html

12. HTTP and HTTPS

HTTP stands for HyperText Transfer Protocol. It is used for communication between web clients and servers.

HTTPS stands for HyperText Transfer Protocol Secure. It uses encryption to provide a more secure communication channel.

HTTP HTTPS
HyperText Transfer Protocol HyperText Transfer Protocol Secure
Not encrypted by default Uses encryption through TLS
Less suitable for sensitive communication Preferred for secure web communication

13. Your First HTML Program

Create a file named index.html and write the following code: 

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to CodeStep Academy</h1>
    <p>I am learning HTML.</p>
</body>
</html>

Open the file in a web browser to see the result.

Expected Output:

A webpage displaying the heading Welcome to CodeStep Academy followed by the paragraph I am learning HTML.

14. Understanding the Basic HTML File

Code Purpose
<!DOCTYPE html> Declares that the document uses HTML5.
<html> Root element of the HTML document.
<head> Contains metadata and document information.
<title> Defines the title shown in the browser tab.
<body> Contains the visible webpage content.

15. HTML File Extension

HTML documents generally use the .html file extension.

For example:

  • index.html
  • about.html
  • contact.html
  • gallery.html
Tip:

index.html is conventionally used as the default or entry webpage for many websites.

16. HTML, CSS and JavaScript — The Web Development Trio

A useful way to understand front-end web development is to compare a webpage with a building.

Web Technology Building Analogy Role
HTML Structure Defines the content and structure.
CSS Decoration Defines appearance and presentation.
JavaScript Behaviour Adds interaction and dynamic functionality.

17. Common Beginner Mistakes

  • Saving the file with .txt instead of .html.
  • Forgetting to close elements where closing tags are required.
  • Writing incorrect tag names.
  • Confusing HTML with CSS or JavaScript.
  • Opening the wrong HTML file in the browser.
  • Ignoring proper document structure.

18. Professional Tip

Write semantic HTML from the beginning.

Do not think of HTML merely as a way to make text appear on the screen. HTML should communicate the meaning and structure of the content to browsers, search engines, assistive technologies and developers.

19. Interview Questions

Question 1: What does HTML stand for?

Click to View Answer

HTML stands for HyperText Markup Language.

Question 2: Is HTML a programming language?

Click to View Answer

No. HTML is a markup language used to structure content on webpages.

Question 3: What is the difference between a webpage and a website?

Click to View Answer

A webpage is an individual web document, whereas a website is a collection of related webpages and resources available under a common domain.

Question 4: What is the role of a web browser?

Click to View Answer

A web browser requests web resources and interprets and renders webpages so that users can view and interact with them.

Question 5: What is the difference between HTML, CSS and JavaScript?

Click to View Answer

HTML provides structure, CSS provides presentation and styling, and JavaScript provides behaviour and interactivity.

20. Exam Questions

Q1. Expand HTML.

Answer

HyperText Markup Language

Q2. What is the purpose of HTML?

Answer

HTML is used to create and structure the content of webpages.

Q3. Differentiate between HTML and CSS.

Answer

HTML defines the structure and content of a webpage, whereas CSS defines its appearance, presentation and layout.

Q4. What is a URL?

Answer

URL stands for Uniform Resource Locator. It is the address used to locate a resource on the Internet.

21. MCQs

1. HTML stands for:

  1. HyperText Machine Language
  2. HyperText Markup Language
  3. HighText Markup Language
  4. Hyperlink Text Management Language
Answer

B. HyperText Markup Language

2. Which technology is primarily responsible for styling a webpage?

  1. HTML
  2. CSS
  3. JavaScript
  4. SQL
Answer

B. CSS

3. Which of the following is a web browser?

  1. MySQL
  2. Chrome
  3. PHP
  4. HTML
Answer

B. Chrome

22. Viva Questions

  • What is HTML?
  • What does HyperText mean?
  • What is a markup language?
  • Is HTML a programming language?
  • What is a webpage?
  • What is a website?
  • What is a web browser?
  • What is a web server?
  • What is a URL?
  • What is the difference between HTTP and HTTPS?
  • What is the role of HTML in web development?
  • What is the difference between HTML, CSS and JavaScript?

23. Practical Activity

Create Your First Webpage

Create a file named index.html.

The webpage must contain:

  1. Your name as the main heading.
  2. A paragraph introducing yourself.
  3. The name of your school or institution.
  4. A statement about why you are learning HTML.
  5. The title My First Webpage.

Open the file in a browser and verify the output.

24. Challenge Yourself

Create a webpage with the heading Welcome to CodeStep Academy.

Below the heading, display a paragraph explaining why learning HTML is useful for students.

Challenge: Create the webpage without copying the complete example from this lesson.

25. Quick Revision

HTML → HyperText Markup Language

Purpose → Structure webpage content

Webpage → Individual web document

Website → Collection of related webpages

Browser → Displays and renders webpages

Server → Provides web resources

URL → Address of an Internet resource

HTML → Structure

CSS → Presentation

JavaScript → Behaviour

Key Takeaways

  • HTML stands for HyperText Markup Language.
  • HTML is a markup language, not a programming language.
  • HTML provides the structure of a webpage.
  • CSS is used for presentation and styling.
  • JavaScript is used for behaviour and interaction.
  • A browser interprets HTML and renders the webpage.
  • A website generally consists of multiple related webpages and resources.
Start This Course From the Beginning →