HTML Basics

Introduction to HTML – Structure of a Web Page

Chapter 1: Introduction to HTML – Structure of a Web Page

1.1 What is HTML?

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

HTML is used to tell a web browser how different parts of a web page should be organized. For example, headings, paragraphs, links, images, lists, tables, forms, and other content can be created using HTML elements.

HTML is not a programming language. It is a markup language that describes the structure and meaning of web content.

Example

<h1>Welcome to GWALNET</h1> <p>This is my first HTML web page.</p>

The <h1> element creates a main heading, while the <p> element creates a paragraph.

Note: HTML defines the structure of a web page. CSS is generally used for presentation and styling, while JavaScript is used to add interactivity and dynamic behavior.

1.2 Why Learn HTML?

HTML is the foundation of almost every website. Learning HTML is an important first step for anyone interested in web development.

Main reasons to learn HTML

It is easy to learn for beginners.
It is used to create the structure of web pages.
It works together with CSS to create attractive web pages.
It works with JavaScript to add interactivity.
It is supported by modern web browsers.
It provides the basic structure on which websites are built.

HTML, CSS and JavaScript

A simple way to understand their roles is:

Technology	Main Purpose
HTML	Structure and content
CSS	Design and presentation
JavaScript	Behaviour and interactivity

1.3 HTML Document Structure

A basic HTML document contains several important parts.

Here is a complete example:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Web Page</title> </head> <body> <h1>Welcome to GWALNET</h1> <p> This is my first HTML web page. </p> <a href="https://example.com"> Visit Example </a> </body> </html>

What does this code do?

This document creates a simple web page containing:

A page title
A main heading
A paragraph
A hyperlink

1.4 Understanding the HTML Structure

An HTML document normally contains three major sections:

1. <!DOCTYPE html>

The DOCTYPE declaration tells the browser that the document uses HTML5.

<!DOCTYPE html>

It should normally be placed at the beginning of an HTML document.

2. <html>

The <html> element is the root element of the document.

All other HTML elements are normally placed inside the <html> element.

The lang="en" attribute indicates that the main language of the document is English.

3. <head>

The <head> element contains information about the document that is not normally displayed directly as page content.

Example:

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Page</title> </head>

The <head> section can contain:

Page title
Character encoding
Viewport settings
CSS links
Metadata
Other information used by the browser

4. <body>

The <body> element contains the visible content of the web page.

<body> <h1>Welcome to GWALNET</h1> <p>This is a web page.</p> </body>

Content such as headings, paragraphs, images, links, lists and tables is generally placed inside <body>.

1.5 HTML Elements

An HTML element generally consists of an opening tag, content and a closing tag.

Example:

<p>This is a paragraph.</p>

Here:

<p> is the opening tag.
This is a paragraph. is the content.
</p> is the closing tag.

Another example:

<h1>Welcome to GWALNET</h1>

The complete structure is an HTML element.

Some common HTML elements

Element	Purpose
<html>	Root element
<head>	Contains document information
<title>	Defines the page title
<body>	Contains visible page content
<h1>	Main heading
<p>	Paragraph
<a>	Hyperlink
<img>	Image
<ul>	Unordered list
<ol>	Ordered list
<li>	List item
<table>	Table

1.6 HTML Attributes

Attributes provide additional information about an HTML element. They are normally written inside the opening tag.

Example:

<a href="https://example.com"> Visit Example </a>

Here, href is an attribute of the <a> element.

The value of the attribute is:

https://example.com

Another example

This example contains two attributes:

src specifies the image location.
alt provides alternative text for the image.

General attribute syntax

1.7 Headings in HTML

HTML provides six levels of headings, from <h1> to <h6>.

<h1>Main Heading</h1> <h2>Section Heading</h2> <h3>Subsection Heading</h3> <h4>Heading Level 4</h4> <h5>Heading Level 5</h5> <h6>Heading Level 6</h6>

<h1> represents the highest-level heading, while <h6> represents a lower-level heading.

Example

<h1>HTML Tutorial</h1> <h2>Introduction</h2> <h3>HTML Elements</h3>

Headings help organize the content of a web page into logical sections.

1.8 Paragraphs

The <p> element is used to create a paragraph.

<p> HTML is used to create the structure of web pages. </p>

Multiple paragraphs can be created using multiple <p> elements.

<p>This is the first paragraph.</p> <p>This is the second paragraph.</p>

Using paragraph elements makes the content easier to organize and read.

1.9 Links in HTML

The <a> element is used to create hyperlinks.

Example:

<a href="https://example.com"> Visit Example </a>

The href attribute specifies the destination of the link.

Example with GWALNET

<a href="https://gwalnet.in/"> Visit GWALNET </a>

When a user clicks the link, the browser navigates to the specified address.

1.10 Images in HTML

The <img> element is used to display an image.

Example:

Important attributes include:

src – specifies the image location.
alt – provides alternative text.

The <img> element does not normally require a closing tag.

1.11 HTML Lists

HTML provides different types of lists.

Unordered List

An unordered list is created using <ul>.

<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>

It normally displays items using bullet points.

Ordered List

An ordered list is created using <ol>.

<ol> <li>Learn HTML</li> <li>Learn CSS</li> <li>Learn JavaScript</li> </ol>

It normally displays items using numbers.

1.12 HTML Comments

Comments are notes written inside HTML code that are not displayed as normal page content.

HTML comments use the following syntax:

Example:

<h1>Welcome to GWALNET</h1>  <p> Learn HTML step by step. </p>

Comments can help developers understand and organize their code.

1.13 Complete Basic HTML Page

The following example combines several concepts learned in this chapter.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Web Page</title> </head> <body> <h1>Welcome to GWALNET</h1> <p> This is my first HTML web page. </p> <h2>My Favorite Technologies</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p> Visit our website: </p> <a href="https://gwalnet.in/"> Visit GWALNET </a> </body> </html>

Expected result

The browser will display a page containing:

Welcome to GWALNET

This is my first HTML web page.

My Favorite Technologies

HTML
CSS
JavaScript

Visit GWALNET

1.14 Understanding the Complete Structure

The basic structure can be represented as:

HTML Document │ ├── DOCTYPE │ └── html │ ├── head │ ├── meta │ ├── title │ └── other information │ └── body ├── headings ├── paragraphs ├── links ├── images ├── lists └── other content

This structure provides a simple mental model for understanding how an HTML document is organized.

1.15 Key Points

HTML stands for HyperText Markup Language.
HTML is a markup language, not a programming language.
HTML is used to create the structure of web pages.
<!DOCTYPE html> declares an HTML5 document.
<html> is the root element.
<head> contains document information.
<body> contains visible page content.
HTML elements generally contain opening and closing tags.
Attributes provide additional information about elements.
<h1> to <h6> are heading elements.
<p> is used for paragraphs.
<a> creates hyperlinks.
<img> displays images.
<ul> and <ol> create lists.
<li> defines a list item.
HTML comments are written using .

1.16 Practice Exercise

Try creating a simple web page containing the following:

A page title: My School
A main heading: Welcome to My School
A paragraph describing your school.
An unordered list containing three subjects.
A link to another website.
An image with suitable alternative text.

Practice template

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My School</title> </head> <body> <h1>Welcome to My School</h1> <p> Write something about your school here. </p> <h2>My Subjects</h2> <ul> <li>Subject 1</li> <li>Subject 2</li> <li>Subject 3</li> </ul> <a href="https://example.com"> Visit Website </a> </body> </html>

1.17 Chapter Summary

In this chapter, we learned the basic structure of an HTML document and the purpose of its major elements. We learned about DOCTYPE, <html>, <head>, <body>, headings, paragraphs, links, images, lists, attributes and comments.

Understanding these fundamentals is important before moving on to more advanced HTML topics.