Introduction to Web Basics

UNIT-1

Introduction to Web Basics

1. What is the Internet?

 The Internet is a global network of interconnected computers and devices that use
standardized communication protocols to connect and exchange information. It
enables users worldwide to access a vast array of resources and services, including
websites, email, file sharing, social networks, and more.

2. What are Web Browsers?

 Web browsers are software applications used to access and navigate the World Wide
Web (WWW). They interpret HTML (Hypertext Markup Language) documents and
render them as interactive web pages. Examples of popular web browsers include
Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and Opera.

3. What is a Web Page?

 A web page is a document displayed on the World Wide Web. It is typically written
in HTML and may contain various types of content such as text, images, videos,
hyperlinks, forms, and interactive elements. Web pages are accessed through web
browsers and are fundamental units that make up websites.

4. How Does the Web Work?

 The Web operates on a client-server model where web browsers act as clients and
request information from web servers. When a user enters a web address (URL) into a
browser, the browser sends a request to the appropriate web server. The server
responds by sending back the requested web page, which the browser then renders for
the user to view and interact with.

5. What are Websites?

 Websites are collections of related web pages and multimedia content accessible via
the Internet. They are hosted on web servers and are organized into a hierarchical
structure, typically starting with a homepage that serves as the main entry point.
Websites can range from simple personal blogs to complex e-commerce platforms
and online applications.

6. Importance of Web Standards and Protocols

 Web standards and protocols ensure interoperability and consistency across different
platforms, devices, and web browsers. Standards like HTML, CSS (Cascading Style
Sheets), and JavaScript define how web pages are structured, styled, and interacted
with. Protocols such as HTTP (Hypertext Transfer Protocol) govern the transmission
 of data over the Internet, ensuring secure and efficient communication between clients
and servers.

7. Evolution of the Web

 The Web has evolved significantly since its inception. Initially a static collection of
text-based documents, it has transformed into a dynamic platform with multimedia
content, interactive applications, and social networking capabilities. Web technologies
continue to advance, driving innovations in areas like responsive design, web
accessibility, artificial intelligence, and the Internet of Things (IoT).

8. Future Trends

 Future trends in web development include advancements in mobile-first design,

progressive web apps (PWAs), voice search optimization, augmented reality (AR)
integration, and enhanced security measures such as HTTPS adoption. The Web is
expected to become more immersive, personalized, and seamlessly integrated into
everyday life.

What is the Internet?

1. Definition:

 The Internet is a global network of interconnected computers and devices that

communicate using standardized protocols. It is a vast network infrastructure that
spans the entire globe, enabling billions of devices to connect and communicate with
each other.

2. Key Components:

 Network Infrastructure: The Internet comprises various physical and virtual

components, including cables, routers, servers, and data centers. These components
form the backbone that allows data to travel across the network.
 Protocols: The Internet operates on a set of protocols, most notably the TCP/IP
(Transmission Control Protocol/Internet Protocol) suite. TCP/IP enables devices to
establish connections and exchange data packets across the Internet.
 Access Points: Users access the Internet through Internet Service Providers (ISPs) via
various technologies such as dial-up, broadband (DSL, cable), fiber optics, mobile
networks (3G, 4G, 5G), and satellite connections.

3. How Does It Work?

 Client-Server Model: The Internet operates on a client-server model. Users (clients)

request and receive information from servers. For example, when you visit a website,
your web browser (client) sends a request to the website's server, which then sends
back the requested web page.
 Data Transmission: Data is transmitted across the Internet in the form of packets.
These packets contain information such as source and destination addresses, data
content, and error-checking codes. They travel through routers, which determine the
best path for each packet to reach its destination.
  Global Connectivity: The Internet's infrastructure spans across continents and
connects diverse networks, ensuring global connectivity. This interconnectedness
allows seamless communication and access to resources regardless of geographical
location.

4. Services and Applications:

 World Wide Web (WWW): The World Wide Web is one of the most prominent
services on the Internet. It consists of billions of interconnected web pages and
websites that users can access via web browsers.
 Email: Email (Electronic Mail) is another widely used service that allows users to
send and receive messages and attachments over the Internet.
 File Transfer: FTP (File Transfer Protocol) enables users to transfer files between
computers on the Internet.
 Streaming Media: Services like Netflix, YouTube, and Spotify deliver multimedia
content (videos, music) over the Internet through streaming protocols.
 Social Media: Platforms like Facebook, Twitter, and Instagram facilitate social
networking and communication among users worldwide.

5. Evolution and Impact:

 Historical Development: The Internet originated from ARPANET, a research project

funded by the U.S. Department of Defense in the 1960s. It evolved over decades,
transitioning from a tool for academic and military purposes to a global network
accessible to the public.
 Impact on Society: The Internet has revolutionized communication, commerce,
education, entertainment, and information dissemination. It has connected people
globally, facilitated e-commerce growth, transformed media consumption habits, and
democratized access to knowledge and information.
 Challenges and Opportunities: While the Internet brings immense benefits, it also
poses challenges such as cybersecurity threats, privacy concerns, digital divide
(unequal access to Internet services), and misinformation. Addressing these
challenges requires global cooperation and technological advancements.

What are Web Browsers?

1. Definition:

 A web browser is a software application used to access and navigate the World Wide
Web (WWW). It interprets HTML (Hypertext Markup Language) documents and
displays web pages containing text, images, videos, and other multimedia elements.

2. Functions and Features:

 Rendering Engine: The core functionality of a web browser is its rendering engine,
which interprets HTML, CSS (Cascading Style Sheets), and JavaScript to render web
pages correctly. Different browsers may use different rendering engines (e.g., Blink
for Google Chrome, Gecko for Mozilla Firefox, WebKit for Apple Safari).
  User Interface: Web browsers provide a user-friendly interface for users to navigate
the Internet. This includes features such as address bar for entering URLs, bookmarks
for saving favorite sites, and navigation buttons (back, forward, reload).
 Tabs and Windows: Most modern web browsers support tabbed browsing, allowing
users to open multiple web pages within the same window. Users can also open
multiple browser windows simultaneously.
 Security Features: Web browsers implement various security measures to protect
users from malicious activities, such as phishing and malware. This includes built-in
security settings, pop-up blockers, and support for HTTPS (Hypertext Transfer
Protocol Secure) encryption.
 Extensions and Add-ons: Many browsers support extensions or add-ons that enhance
functionality. These can include ad blockers, password managers, developer tools, and
productivity tools.

3. Evolution and History:

 Early Browsers: The first graphical web browser was Mosaic, developed in 1993. It
was followed by Netscape Navigator, which played a significant role in popularizing
the Internet in the mid-1990s.
 Browser Wars: The late 1990s saw the "browser wars" between Netscape Navigator
and Microsoft's Internet Explorer (IE). This competition led to rapid advancements in
browser technology and standards support.
 Modern Browsers: Today, popular web browsers include Google Chrome, Mozilla
Firefox, Apple Safari, Microsoft Edge, and Opera. These browsers continue to evolve
with updates that improve performance, security, and compatibility with web
standards.

4. Standards Support:

 Web browsers adhere to web standards set by organizations like the World Wide Web
Consortium (W3C) and WHATWG (Web Hypertext Application Technology
Working Group). These standards ensure consistency in how web pages are displayed
across different browsers and devices.
 Common web standards include HTML (structure), CSS (presentation), and
JavaScript (behavior). Browsers strive to support these standards to ensure
compatibility and a consistent user experience.

5. Mobile Browsing:

 With the rise of smartphones and tablets, mobile browsers have become essential for
accessing the Internet on mobile devices. Mobile browsers optimize web pages for
smaller screens, touch input, and lower bandwidth connections.
 Examples of mobile browsers include Chrome for Android, Safari for iOS, Samsung
Internet, and Firefox for mobile.

6. Impact on User Experience and Accessibility:

 Web browsers play a crucial role in shaping user experience on the Internet. They
determine how content is displayed, interacted with, and secured.
  Browsers also impact accessibility by supporting features such as screen readers,
keyboard navigation, and text resizing, making the web accessible to users with
disabilities.

hat is a Web Page?

1. Definition:

 A web page is a single document or file displayed on the World Wide Web (WWW)
that contains information accessible through a web browser. It is written in HTML
(Hypertext Markup Language) and may include other technologies such as CSS
(Cascading Style Sheets) and JavaScript.

2. Components of a Web Page:

 HTML Structure: HTML provides the structure and content of a web page. It
consists of elements (or tags) that define different parts of the page, such as headings,
paragraphs, images, links, forms, and multimedia content.
 CSS Styling: CSS is used to control the presentation and layout of a web page. It
allows developers to specify colors, fonts, spacing, and other visual aspects to
enhance the appearance and user experience.
 JavaScript Interactivity: JavaScript is a scripting language that enables dynamic and
interactive features on web pages. It can be used to create animations, validate forms,
handle user input, and communicate with web servers asynchronously (via AJAX).
 Content: A web page can contain various types of content, including text (articles,
descriptions), images (photos, graphics), videos, audio clips, and embedded media
(such as maps or social media feeds).
 Hyperlinks: Hyperlinks (or links) are elements that allow users to navigate between
different web pages or resources. They are created using the <a> tag in HTML and
can link to other pages within the same site or external websites.

3. Structure and Markup:

 Document Object Model (DOM): When a web page is loaded in a browser, it is

parsed into a structured representation called the Document Object Model. This model
allows JavaScript to manipulate the content and structure of the page dynamically.
 Metadata: Web pages often include metadata in the <head> section of the HTML
document. Metadata provides information about the page, such as its title (<title>),
character encoding, viewport settings for responsive design, and links to stylesheets
and scripts.

4. Types of Web Pages:

 Static Web Pages: These are fixed pages whose content does not change unless the
webmaster manually updates them. They are commonly used for presenting
information that doesn't need frequent updates, such as company profiles or product
descriptions.
 Dynamic Web Pages: Dynamic web pages are generated on the fly based on user
interactions or data inputs. Content can be pulled from databases, APIs, or other
sources, allowing for personalized user experiences and real-time updates.
  Single Page Applications (SPAs): SPAs load a single HTML page and dynamically
update the content as the user interacts with the application. They use JavaScript
frameworks like React, Angular, or Vue.js to manage navigation and data rendering
without full page reloads.

5. Accessibility and Standards:

 Web pages should adhere to accessibility standards (e.g., WCAG - Web Content
Accessibility Guidelines) to ensure they are usable by people with disabilities. This
includes providing text alternatives for images, using semantic HTML, and ensuring
proper keyboard navigation.
 Adhering to web standards (set by organizations like W3C) ensures that web pages
are compatible across different browsers and devices, providing a consistent
experience for users.

6. Evolution and Trends:

 Web pages have evolved from simple text-based documents to multimedia-rich,

interactive experiences. Advances in web technologies, broadband internet, and
mobile devices have driven this evolution.
 Trends include responsive web design (optimizing for various screen sizes), mobile-
first design (prioritizing mobile user experience), and the adoption of modern web
development frameworks and tools.

HTML Basics: Understanding Tags

1. What is HTML?

 HTML (Hypertext Markup Language) is the standard markup language used to create
web pages. It defines the structure and content of a web page using a set of elements
(or tags) that describe how content should be displayed in a web browser.

2. Structure of HTML Tags:

 HTML tags are keywords enclosed in angle brackets < > that define the beginning
and end of an element. They are used to structure content and provide meaning to
different parts of a web page.
 Opening Tag: The opening tag marks the beginning of an element and is written as
<tagname>. It specifies the type of element, such as <p> for paragraphs, <h1> for
headings, <a> for links, etc.
 Closing Tag: The closing tag marks the end of an element and is written as
</tagname>. It mirrors the opening tag but includes a forward slash before the tag
name, indicating where the element ends.
 Example:

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


o In this example, <p> is the opening tag that defines a paragraph, and </p> is
the closing tag that ends the paragraph element.
3. Common HTML Tags:

 <html>: Defines the root of an HTML document.

 <head>: Contains metadata about the HTML document, such as <title>, <meta>,
and links to external resources like stylesheets and scripts.
 <title>: Sets the title of the HTML document, displayed in the browser's title bar or
tab.
 <body>: Contains the content of the HTML document that will be displayed in the
browser window.
 <h1>, <h2>, <h3>, ... <h6>: Defines headings of different levels (from most important
<h1> to least important <h6>).
 <p>: Defines a paragraph of text.
 <a>: Creates a hyperlink to another web page or resource.
 <img>: Embeds an image into the web page.
 <ul> and <ol>: Define unordered and ordered lists, respectively.
 <li>: Defines list items within <ul> or <ol>.

4. Attributes:

 HTML tags can have attributes that provide additional information about an element.
Attributes are specified within the opening tag and typically come in name/value
pairs, separated by an equal sign (=).
 Example with Attributes:

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


o In this <a> (anchor) tag example:
 href is the attribute that specifies the URL to link
(https://www.example.com).
 target="_blank" is another attribute that opens the link in a new
browser tab or window.

5. Semantic HTML:

 Semantic HTML tags convey the meaning and structure of content, improving
accessibility and search engine optimization (SEO). Examples include <header>,
<nav>, <section>, <article>, <footer>, <aside>, <main>, etc.

6. Nesting and Hierarchy:

 HTML elements can be nested inside one another to create complex structures. This
nesting defines the hierarchy and relationship between different parts of a web page.
 Example of Nesting:
 <div>
 <h1>Main Heading</h1>
 <p>Paragraph of text.</p>
 <ul>
 <li>List item 1</li>
 <li>List item 2</li>
 </ul>
 </div>

o In this example, <h1>, <p>, <ul>, and <li> elements are nested inside a <div>
(division) element.

7. HTML Comments:

 Comments in HTML are written using <!-- to start the comment and --> to end it.
Comments are not displayed in the browser and are used to add notes or explanations
for developers maintaining the code.
 Example of HTML Comment:

<!-- This is a comment -->

Self-closing Tags:

 Some HTML tags do not have a closing tag and are self-closing. They end with a
forward slash (/>) before the closing angle bracket.
 Example of Self-closing Tag:

<img src="image.jpg" alt="Description of the image" />

The <img> tag is self-closing and inserts an image into the web page.

UNIT-2

Tags for Document Structure in HTML

1. <html> Tag:

 Definition: The <html> tag is the root element of an HTML document. It

encapsulates the entire content of the web page, including the <head> and <body>
sections.
 Attributes: The <html> tag can have attributes that provide additional information
about the document, such as the language of the content (lang="en" for English, for
example).
 Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document Title</title>
 <link ref="stylesheet" href="styles.css">

</head>

<body>

<h1>Hello, World!</h1>

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

</body>

</html>

</html>



 Explanation:
o The <html> tag is the outermost element and contains the entire HTML
document.
o The lang="en" attribute specifies that the primary language of the content is
English.
o Inside <html>, there are <head> and <body> sections, which play distinct
roles in the structure and presentation of the document.

2. <head> Tag:

 Definition: The <head> tag is a container for metadata and other head elements that
are not directly displayed on the web page. It provides information about the
document, such as its title, character encoding, stylesheets, scripts, and more.
 Common Elements Inside <head>:
o <title>: Sets the title of the HTML document, displayed in the browser's title
bar or tab.
o <meta>: Specifies metadata, such as character set (<meta charset="UTF-
8">), viewport settings for responsive design (<meta name="viewport"
content="width=device-width, initial-scale=1.0">), and others.
o <link>: Links to external resources like stylesheets (<link
rel="stylesheet" href="styles.css">) or icons (<link rel="icon"
href="favicon.ico">).
o <script>: Includes scripts (JavaScript) or links to external script files
(<script src="script.js"></script>).
 Example:

html
Copy code
<head>
<meta charset="UTF-8">
<title>Document Title</title>
<link rel="stylesheet" href="styles.css">
</head>
  Explanation:
o The <head> section is where metadata and links to external resources are
defined.
o <meta charset="UTF-8"> specifies the character encoding for the document.
o <title> sets the title displayed in the browser tab.
o <link rel="stylesheet" href="styles.css"> links to an external CSS
file for styling.

3. <body> Tag:

 Definition: The <body> tag contains the main content of the HTML document that is
displayed in the browser window. It includes text, images, links, forms, multimedia
content, and more.
 Attributes: The <body> tag can also have attributes, although they are less commonly
used compared to <html> or <head> tags. One notable attribute is bgcolor (e.g.,
<body bgcolor="#ffffff">), which sets the background color of the web page.
 Example:

<body>

<h1>Hello, World!</h1>

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

<img src="image.jpg" alt="Description of the image">

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

</body>

 Explanation:
o The <body> tag encapsulates the visible content of the web page.
o Inside <body>, various elements like <h1>, <p>, <img>, and <a> are used to
structure and present content (heading, paragraph, image, hyperlink).

Overall Structure:

 The <html>, <head>, and <body> tags together form the foundational structure of an
HTML document.
 <html> encapsulates the entire document, <head> contains metadata and links to
external resources, and <body> contains the visible content displayed in the browser.

Block-level Text Elements in HTML

1. Headings (<h1> to <h6>):

 Definition: Headings in HTML are used to define the importance and hierarchy of
text content. There are six levels of headings, <h1> being the highest (most important)
and <h6> being the lowest (least important).
  Usage: Headings are typically used to structure and organize content, making it easier
for users and search engines to understand the main topics and sections of a web page.
 Example:

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6</h6>

 Explanation:
o <h1> is typically used for the main heading of the page or section and should
be used sparingly to maintain hierarchy.
o <h2> to <h6> are used for subheadings or lower-level headings, indicating
subsections or less prominent content.
 Semantic Importance: Using headings correctly not only helps in structuring content
visually but also provides semantic meaning to assistive technologies (like screen
readers) and search engines, improving accessibility and SEO (Search Engine
Optimization).

2. Paragraphs (<p> Tag):

 Definition: The <p> tag in HTML is used to define paragraphs of text. It represents a
block of text or content that forms a coherent unit.
 Usage: Paragraphs are used to present textual content, such as articles, descriptions,
or any form of continuous text that is logically grouped together.
 Example:

<p>This is a paragraph of text. It can contain multiple sentences and paragraphs.</p>

<p>Another paragraph follows, providing additional information or content.</p>

 Explanation:
o <p> tags are block-level elements by default, meaning they start on a new line
and take up the full width available.
o They are commonly used within the <body> section of an HTML document to
structure and format textual content.
 Attributes and Styling: Paragraphs can be styled using CSS to adjust text alignment,
spacing, margins, and fonts to enhance readability and visual presentation.

3. Block-level vs. Inline Elements:

  Block-level Elements: Elements like <h1> to <h6> and <p> are block-level by
default. They typically start on a new line and occupy the full width available. They
can contain other block-level and inline elements.
 Inline Elements: Inline elements, such as <span>, <strong>, <em>, <a>, etc., do not
start on a new line and only occupy as much width as necessary. They can be nested
within block-level elements but cannot contain block-level elements.

4. Accessibility and Semantics:

 Accessibility: Proper use of headings (<h1> to <h6>) and paragraphs (<p>) enhances
accessibility by providing a clear structure and hierarchy to content, aiding users who
rely on assistive technologies.
 Semantics: Using these elements correctly helps in maintaining semantic HTML,
making the content more meaningful for both browsers and search engines. It also
improves the overall user experience by organizing information logically and
intuitively.

Font Style Elements in HTML

1. <b> Tag (Bold):

 Definition: The <b> tag is used to apply bold formatting to text content.
 Usage: It is typically used for stylistic purposes when text needs to be visually
emphasized or made more prominent, but it does not imply any additional semantic
meaning.
 Example:

<p>This is <b>bold</b> text.</p>

 Explanation:
o The text wrapped in <b> tags will appear bold in most browsers by default.
o It is a presentational tag and should be used when no other semantic element
(like <strong>) is more appropriate.

2. <i> Tag (Italic):

 Definition: The <i> tag is used to apply italic formatting to text content.
 Usage: Italicized text is used to indicate emphasis, citations, technical terms, and
other stylistic purposes where a different textual appearance is desired.
 Example:

<p>This is <i>italic</i> text.</p>

 Explanation:
o Text enclosed in <i> tags will appear italicized in most browsers by default.
o Similar to <b>, <i> is a presentational tag and should be used when no other
semantic element (like <em>) is more appropriate.

3. <font> Tag:
  Definition: The <font> tag was historically used to specify the font, size, color, and
other text properties directly within the HTML document.
 Usage: While still supported in HTML, it is considered obsolete and should be
avoided in favor of CSS for styling purposes.
 Example (Avoid using <font>):

<p><font color="red">This is red text.</font></p>

 Explanation:
o The <font> tag allowed developers to specify attributes like color, size, and
face directly.
o It is no longer recommended due to separation of concerns (HTML for
structure, CSS for presentation) and accessibility concerns.

4. <small> Tag:

 Definition: The <small> tag is used to indicate smaller text or text that is less
important or less relevant than surrounding text.
 Usage: It is used for disclaimers, legal text, copyright notices, etc., where smaller text
size is appropriate.
 Example:

<p>This is <small>smaller</small> text.</p>

 Explanation:
o Text within <small> tags appears smaller in most browsers by default.
o It helps in maintaining semantic HTML by indicating the relative importance
or relevance of text content.

5. <strong> Tag:

 Definition: The <strong> tag is used to indicate that the enclosed text should be
given strong importance or emphasis.
 Usage: It is typically rendered as bold text, but its primary purpose is to indicate
semantic importance rather than just visual presentation.
 Example:

<p>This text is <strong>important</strong>.</p>

 Explanation:
o <strong> is preferred over <b> when the text has strong importance or
emphasis in the context of the document.
o It conveys meaning to assistive technologies and search engines, enhancing
accessibility and SEO.

6. <strike> Tag:

 Definition: The <strike> tag is used to draw a horizontal line through the enclosed
text, indicating that it is no longer relevant or should be removed.
  Usage: It is commonly used for strikethrough text in revisions, indicating deleted or
outdated information.
 Example:

<p>This text is <strike>no longer relevant</strike>.</p>

 Explanation:
o Text within <strike> tags appears with a line through it in most browsers by
default.
o It is useful for indicating changes or deprecated content.

7. <big> Tag:

 Definition: The <big> tag was historically used to increase the font size of the
enclosed text.
 Usage: Similar to <font>, <big> is now considered obsolete and should be avoided.
Instead, CSS should be used for font size adjustments.
 Example (Avoid using <big>):

<p><big>This is bigger text.</big></p>

Explanation:

 <big> directly increases the font size of text, which can impact accessibility and
presentation consistency across different devices.
 It is not recommended due to modern best practices favoring separation of content
and presentation.

Unit-3

Lists in HTML

HTML (Hypertext Markup Language) provides various types of lists to organize and display
content on web pages. These lists help structure the content in a readable and organized
manner.

Types of Lists

There are three primary types of lists in HTML:

1. Ordered Lists
2. Unordered Lists
3. Definition Lists
1. Ordered Lists

An ordered list is used to create a list of items that follow a specific sequence. Each item in
an ordered list is numbered. The <ol> tag is used to create an ordered list, and each item
within the list is defined using the <li> tag.

Syntax:

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

Attributes of <ol>:

 type: Specifies the type of numbering for the list items.

o Values: 1 (default), A, a, I, i
o Example: <ol type="A">
 start: Specifies the starting number for the list.
o Example: <ol start="5">
 reversed: Reverses the order of the list.
o Example: <ol reversed>

2. Unordered Lists

An unordered list is used to create a list of items that do not follow a specific sequence. Each
item in an unordered list is marked with a bullet point. The <ul> tag is used to create an
unordered list, and each item within the list is defined using the <li> tag.

Syntax:

<ul>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ul>

Attributes of <ul>:

 type: Specifies the type of bullet for the list items.

o Values: disc (default), circle, square
 o Example: <ul type="square">

3. Definition Lists

A definition list is used to create a list of terms and their descriptions. The <dl> tag is used to
create a definition list, <dt> is used for the term (definition term), and <dd> is used for the
description (definition description).

Syntax:

<dl>

<dt>Term 1</dt>

<dd>Description for term 1</dd>

<dt>Term 2</dt>

<dd>Description for term 2</dd>

</dl>

Nesting Lists

Nesting lists means placing one list inside another list. This can be done with both ordered
and unordered lists. Nesting allows for the creation of hierarchical structures.

Example of Nested Ordered List

Syntax:

<ol>

<li>Item 1

<ol>

<li>Subitem 1.1</li>

<li>Subitem 1.2</li>

</ol>

</li>

<li>Item 2</li>

</ol>
Example of Nested Unordered List

Syntax:

<ul>

<li>Item 1

<ul>

<li>Subitem 1.1</li>

<li>Subitem 1.2</li>

</ul>

</li>

<li>Item 2</li>

</ul>