Unit I- Web Page Designing

Web development
Web development is the process of creating and maintaining websites and web
applications. It involves a range of tasks and disciplines, including:

1. Front-End Development: This focuses on the parts of a website that users

interact with directly, such as the layout, design, and user experience.
Front-end developers use languages like HTML (Hypertext Markup
Language), CSS (Cascading Style Sheets), and JavaScript to build the visual
aspects of a website.
2. Back-End Development: This deals with the server side of a website,
focusing on databases, server logic, and application functionality. Back-
end developers work with server-side languages such as Python, Ruby,
PHP, Node.js, and databases like MySQL, PostgreSQL, or MongoDB.
3. Full-Stack Development: A full-stack developer handles both front-end
and back-end development, managing the entire process of building a
web application from start to finish.
4. Web Design: Although it's more closely related to the visual and user
experience aspects, web design is an integral part of web development. It
involves designing the look and feel of a website, ensuring it's both
aesthetically pleasing and functional.
5. Web Content Development: This involves creating and managing the
content that appears on a website, including text, images, videos, and
other media.
6. Web Security: Ensuring that a website or web application is secure from
threats like hacking, data breaches, and other malicious activities is also a
critical part of web development.
7. Web Performance Optimization: This includes improving the speed and
responsiveness of a website or web application to ensure a smooth user
experience.
 8. DevOps and Deployment: This involves managing the deployment and
maintenance of web applications, often including tasks like server
management, scaling, and version control.
Web development can range from creating a simple static website to building
complex web applications that interact with databases and provide dynamic
content based on user inputs.

Careers in Web Development

Web development offers a wide range of career opportunities, including:

• Front-End Developer
• Back-End Developer
• Full-Stack Developer
• Web Designer
• UI/UX Designer
• Web Content Manager
• Web Security Specialist
• DevOps Enginee

Web Development Strategies

Web development strategies are crucial for ensuring that a website or web
application meets its objectives, is user-friendly, scalable, and secure. These
strategies cover various aspects of the development process, from planning and
design to deployment and maintenance. Below are some key web development
strategies:

1. Planning and Requirement Gathering

• Define Objectives: Clearly identify the purpose of the website, target

audience, and key features. Understand what the client or stakeholders
want to achieve with the website.
 • Requirement Analysis: Gather and document all the functional and non-
functional requirements. This includes technical specifications, user
interface needs, content, and integration with other systems.
• Create a Project Plan: Develop a timeline, allocate resources, and set
milestones. This helps keep the project on track and ensures timely
delivery.
2. User-Centered Design (UCD)

• User Research: Conduct research to understand the needs, behaviors,

and pain points of the target users. This could involve surveys, interviews,
and usability testing.
• Wireframes and Prototypes: Create wireframes to layout the structure of
the website and prototypes to visualize how users will interact with it.
Tools like Figma, Sketch, and Adobe XD are commonly used.
• Responsive Design: Ensure the website is accessible and functions well on
various devices, including desktops, tablets, and smartphones. This
involves using flexible grids, images, and media queries.
3. Agile Development

• Iterative Development: Break down the project into smaller, manageable

tasks (sprints) and develop in iterative cycles. This allows for regular
feedback, making it easier to adapt to changes.
• Continuous Integration/Continuous Deployment (CI/CD): Implement
automated testing and deployment processes. CI/CD pipelines ensure
that code changes are continuously integrated, tested, and deployed with
minimal disruption.
4. Technology Stack Selection

• Choose the Right Tools and Frameworks: Select the appropriate front-
end and back-end technologies based on project requirements. Consider
factors like scalability, performance, and developer expertise.
o Front-End: React.js, Angular.js, Vue.js, Bootstrap, etc.
o Back-End: Node.js, Django, Ruby on Rails, Laravel, etc.
o Databases: MySQL, PostgreSQL, MongoDB, Firebase, etc.
 • API Design and Integration: Design RESTful or GraphQL APIs for
communication between the front-end and back-end. Ensure APIs are
well-documented and version-controlled.
5. Performance Optimization

• Optimize Assets: Compress images, minify CSS and JavaScript files, and
use lazy loading for media to reduce page load times.
• Content Delivery Network (CDN): Use CDNs to distribute content across
multiple servers worldwide, reducing latency and improving load times
for users in different regions.
• Caching Strategies: Implement browser caching, server-side caching, and
database query caching to reduce server load and speed up content
delivery.
6. Security Best Practices

• Implement HTTPS: Secure data transmission between the server and

client by using SSL/TLS certificates.
• Data Validation and Sanitization: Protect against SQL injection, cross-site
scripting (XSS), and other vulnerabilities by validating and sanitizing user
inputs.
• Authentication and Authorization: Use secure authentication methods
(e.g., OAuth, JWT) and implement role-based access control (RBAC) to
restrict access to sensitive areas of the application.
• Regular Security Audits: Conduct regular security audits and vulnerability
assessments to identify and address potential security issues.
7. Scalability and Flexibility

• Modular Architecture: Design the application using a modular approach,

where different components can be developed, tested, and deployed
independently. This makes it easier to scale and maintain the application.
• Microservices: Consider using a microservices architecture for larger
applications. This approach allows different services to be developed and
deployed independently, making the system more scalable and resilient.
 • Database Scaling: Implement techniques like database sharding,
replication, and load balancing to handle increased traffic and data
growth.
8. Search Engine Optimization (SEO)

• On-Page SEO: Optimize content, meta tags, URLs, and images for search
engines. Use keywords strategically and ensure the website is mobile-
friendly.
• Technical SEO: Improve site speed, fix broken links, create an XML
sitemap, and use structured data (schema markup) to help search engines
understand the content better.
• Content Strategy: Develop a content strategy that includes regular blog
posts, updates, and high-quality content to attract and retain visitors.
9. Testing and Quality Assurance

• Automated Testing: Implement unit tests, integration tests, and end-to-

end tests using testing frameworks (e.g., Jest, Mocha, Selenium) to ensure
code quality and functionality.
• Manual Testing: Perform manual testing for usability, accessibility, and
performance. This includes cross-browser testing, mobile testing, and
user acceptance testing (UAT).
• Continuous Monitoring: Use monitoring tools (e.g., Google Analytics,
New Relic) to track performance, user behavior, and errors in real-time.
10. Deployment and Maintenance

• Version Control and Release Management: Use Git or other version

control systems to manage code changes and releases. Ensure that there
is a clear process for rolling back in case of issues.
• DevOps Integration: Use DevOps practices to automate the deployment
process, ensuring smooth and reliable updates. Tools like Docker,
Kubernetes, and Jenkins are commonly used.
• Ongoing Maintenance and Updates: Regularly update the website to fix
bugs, improve performance, and add new features. Monitor for security
vulnerabilities and apply patches as needed.
 • Backup and Disaster Recovery: Implement regular backups and a disaster
recovery plan to protect against data loss and ensure business continuity.
11. Analytics and Continuous Improvement

• Analytics Integration: Use tools like Google Analytics, Hotjar, or Mixpanel

to gather data on user behavior, traffic sources, and conversion rates.
• A/B Testing: Conduct A/B testing to compare different versions of pages
or features to see which performs better.
• User Feedback: Collect and analyze user feedback to identify areas for
improvement and prioritize new features or enhancements.
12. Collaboration and Communication

• Cross-Functional Teams: Ensure that developers, designers, content

creators, and other stakeholders collaborate effectively throughout the
project.
• Regular Updates: Keep all team members and stakeholders informed
with regular progress updates, demos, and feedback sessions.
• Use of Collaboration Tools: Utilize project management and
collaboration tools like Jira, Trello, Slack, or Asana to streamline
communication and track progress.
Implementing these web development strategies can help ensure that your
project is successful, delivering a website or application that meets user needs,
performs well, and can grow over time.
History of Web and Internet
The history of the web and the internet is a fascinating journey that spans
decades of technological innovation, collaboration, and rapid growth. Below is
a detailed overview of this history:

1. The Birth of the Internet (1960s-1980s)

• Early Concepts (1960s)

o The concept of a global network dates back to the 1960s, with
visionary ideas like J.C.R. Licklider's "Intergalactic Computer
Network," which envisioned a network of computers that could
communicate with each other.
o Packet Switching: This concept, developed by Paul Baran, Donald
Davies, and others, involves breaking down data into packets that
are transmitted independently across a network. This was a
fundamental innovation for the development of the internet.
• ARPANET (1969)
o The Advanced Research Projects Agency Network (ARPANET) was
the first operational packet-switching network, funded by the U.S.
Department of Defense. It connected four universities: UCLA,
Stanford, UC Santa Barbara, and the University of Utah.
o ARPANET is often considered the precursor to the modern internet.
• Development of TCP/IP (1970s-1980s)
o Transmission Control Protocol/Internet Protocol (TCP/IP):
Developed by Vint Cerf and Bob Kahn in the 1970s, TCP/IP became
the standard networking protocol, allowing different networks to
connect and communicate. It is still the foundation of internet
communication today.
o ARPANET adopted TCP/IP on January 1, 1983, marking the official
birth of the modern internet.
 • Early Networking Projects
o Ethernet (1973): Developed by Robert Metcalfe, Ethernet became
a standard for local area networks (LANs), allowing computers to
connect within a limited geographic area.
o Usenet (1979): A distributed discussion system that allowed users
to post and read messages (newsgroups) across multiple servers. It
was an early form of online communication.
2. The Emergence of the World Wide Web (1989-1990s)

• Tim Berners-Lee and the Web (1989-1990)

o In 1989, Tim Berners-Lee, a British scientist working at CERN (the
European Organization for Nuclear Research), proposed a system
for sharing information over the internet. He envisioned a "web" of
hyperlinked documents that could be accessed via the internet.
o The World Wide Web: In 1990, Berners-Lee developed the first
web browser, called WorldWideWeb (later renamed Nexus), and
the first web server. He also created the first website, which
explained what the web was and how to use it.
o The foundational technologies of the web included HTML
(HyperText Markup Language), HTTP (HyperText Transfer Protocol),
and URLs (Uniform Resource Locators).
• Early Web Growth (1990s)
o 1993: Mosaic Browser: The Mosaic web browser, developed by
Marc Andreessen and Eric Bina at the National Center for
Supercomputing Applications (NCSA), was one of the first web
browsers to display images inline with text. It played a significant
role in popularizing the web.
o 1994: Netscape Navigator: Marc Andreessen co-founded Netscape
Communications and released Netscape Navigator, a more
advanced browser that quickly became the most popular way to
access the web.
 o 1994: The First Search Engines: Early search engines like
WebCrawler, Lycos, and Yahoo! emerged, helping users find
information on the rapidly growing web.
3. The Commercialization of the Web (Mid-1990s to Early 2000s)

• Dot-Com Boom (1995-2000)

o The mid-1990s saw the rise of commercial websites and the birth
of the "dot-com" boom. Companies began to realize the potential
of the web for business, leading to a surge in e-commerce and
online services.
o Amazon (1994): Founded by Jeff Bezos, Amazon started as an
online bookstore and quickly expanded to become one of the
largest e-commerce platforms in the world.
o eBay (1995): Launched as an online auction site, eBay allowed users
to buy and sell items through online auctions, revolutionizing online
commerce.
• The Rise of Search Engines and Portals
o Google (1998): Founded by Larry Page and Sergey Brin, Google
introduced a search algorithm called PageRank that ranked web
pages based on their relevance and importance. Google quickly
became the dominant search engine.
o Yahoo! and AOL: These companies became popular web portals,
offering a range of services including email, news, chat, and
directories.
• The Dot-Com Bubble Burst (2000)
o The rapid growth and speculation in dot-com companies led to a
market bubble. In 2000, the bubble burst, leading to the collapse of
many internet companies and significant losses for investors.
However, the survivors, like Amazon and eBay, continued to thrive.
4. Web 2.0 and the Rise of Social Media (2000s)

• Web 2.0
 o The term "Web 2.0" emerged in the early 2000s to describe a shift
in how the web was used. Web 2.0 emphasized user-generated
content, collaboration, and social networking.
o Blogs and Wikis: Platforms like Blogger and Wikipedia allowed
users to create and share content easily, fostering the growth of
online communities.
• Social Media Revolution
o MySpace (2003): One of the first major social networking sites,
MySpace allowed users to create profiles, connect with friends, and
share music and other media.
o Facebook (2004): Founded by Mark Zuckerberg, Facebook quickly
grew to become the largest social networking platform, connecting
billions of users worldwide.
o YouTube (2005): Launched as a video-sharing platform, YouTube
revolutionized online video content and became the go-to site for
user-generated videos.
o Twitter (2006): Twitter introduced microblogging, allowing users to
share short messages (tweets) with followers in real-time.
• AJAX and Rich Internet Applications
o AJAX (Asynchronous JavaScript and XML): This technology enabled
the development of more dynamic and responsive web
applications. It allowed web pages to update content without
requiring a full page reload, leading to a more interactive user
experience.
o Gmail and Google Maps: Google used AJAX to create highly
interactive applications like Gmail and Google Maps, setting new
standards for web application usability.
5. The Mobile Web and Cloud Computing (2010s)

• The Mobile Web

o The proliferation of smartphones and tablets in the late 2000s and
early 2010s transformed how people accessed the internet.
 Mobile-optimized websites and responsive design became
essential for reaching users on different devices.
o App Economy: The launch of app stores, like Apple's App Store and
Google Play, created a new ecosystem for mobile applications,
many of which were closely integrated with web services.
• Cloud Computing
o Definition: Cloud computing refers to the delivery of computing
services (servers, storage, databases, networking, software, etc.)
over the internet, allowing for on-demand access to resources.
o AWS (2006): Amazon Web Services (AWS) was one of the pioneers
in cloud computing, offering scalable infrastructure as a service
(IaaS). This allowed businesses to build and host web applications
without needing to manage physical servers.
o SaaS (Software as a Service): Platforms like Salesforce, Google
Apps, and Microsoft Office 365 offered software applications over
the cloud, enabling users to access tools via a web browser.
6. The Modern Web and Emerging Technologies (2020s)

• Progressive Web Apps (PWAs)

o PWAs are web applications that provide a native app-like
experience on the web. They are designed to be fast, reliable, and
work offline, blurring the lines between web and mobile apps.
• Artificial Intelligence and Machine Learning
o AI and machine learning have become integral to modern web
development. These technologies power features like personalized
content recommendations, chatbots, and advanced search
algorithms.
• Blockchain and Decentralized Web (Web 3.0)
o Blockchain Technology: Blockchain is being explored as a
foundation for decentralized web applications, where data is
distributed across a network rather than controlled by a single
entity.
 o Web 3.0: Often referred to as the "Semantic Web," Web 3.0 aims
to create a more intelligent and connected web, where machines
can understand and interpret data in a human-like way. It also
emphasizes decentralization, privacy, and user control.
• IoT (Internet of Things) Integration
o The integration of IoT devices with the web allows for real-time
data collection and interaction with physical objects via the internet.
This has applications in smart homes, healthcare, transportation,
and more.
Key Milestones in Internet History

• 1969: ARPANET goes live.

• 1983: ARPANET adopts TCP/IP, the foundation of the modern internet.
• 1989-1990: Tim Berners-Lee invents the World Wide Web.
• 1993: Mosaic browser popularizes the web.
• 1995: The dot-com boom begins; Amazon and eBay are founded.
• 1998: Google is founded.
• 2000: The dot-com bubble bursts

Protocols Governing Web

Protocols governing the web are the set of rules and standards that allow
computers and other devices to communicate over the internet. These
protocols ensure that data is transmitted accurately, securely, and efficiently
between web browsers, servers, and other systems involved in web
communication. In the context of web technology, these protocols play a
crucial role in enabling various web functionalities, from loading a webpage to
secure online transactions.

Key Protocols Governing the Web

1. HTTP/HTTPS (HyperText Transfer Protocol/Secure)

o HTTP (HyperText Transfer Protocol):
 ▪ Purpose: HTTP is the foundation of data communication on
the World Wide Web. It defines how messages are
formatted and transmitted, and how web servers and
browsers should respond to various commands.
▪ Functionality: When you enter a URL in your web browser,
an HTTP request is sent to the web server to fetch the
requested webpage. The server then sends the page back to
the browser, which renders it for you to view.
▪ Stateless Protocol: HTTP is a stateless protocol, meaning
each request from a client (browser) to a server is
independent. The server does not retain any session
information between requests.
o HTTPS (HyperText Transfer Protocol Secure):
▪ Purpose: HTTPS is the secure version of HTTP. It encrypts
data exchanged between the client and server using SSL/TLS
protocols, protecting it from eavesdropping and man-in-
the-middle attacks.
▪ Functionality: HTTPS ensures that sensitive information,
such as login credentials, payment details, and personal
data, is transmitted securely over the internet.
▪ Encryption: HTTPS uses SSL/TLS (Secure Sockets
Layer/Transport Layer Security) to establish a secure
connection between the client and server.
2. TCP/IP (Transmission Control Protocol/Internet Protocol)
o TCP (Transmission Control Protocol):
▪ Purpose: TCP is a core protocol that ensures reliable,
ordered, and error-checked delivery of data between
applications communicating over a network.
▪ Functionality: TCP divides data into smaller packets, sends
them to the destination, and reassembles them in the
correct order. It ensures that all packets arrive,
retransmitting any that are lost during transmission.
o IP (Internet Protocol):
 ▪ Purpose: IP is responsible for addressing and routing
packets of data so they can travel across networks and
reach the correct destination.
▪ Functionality: IP assigns a unique address (IP address) to
each device on a network, ensuring that data packets are
sent to the right device. It also routes these packets from
the sender to the receiver across the internet.
3. DNS (Domain Name System)
o Purpose: DNS is the protocol that translates human-readable
domain names (like www.example.com) into IP addresses that
computers use to identify each other on the network.
o Functionality: When you type a domain name into your browser,
a DNS query is sent to a DNS server, which returns the
corresponding IP address, allowing the browser to connect to the
web server hosting the site.
o Hierarchy: DNS is structured as a hierarchical system, with root
servers, top-level domain (TLD) servers, and authoritative name
servers working together to resolve domain names.
4. FTP (File Transfer Protocol)
o Purpose: FTP is used for transferring files between a client and a
server over a network.
o Functionality: FTP allows users to upload, download, and manage
files on a remote server. It is commonly used for transferring
website files from a local machine to a web server.
o Security: While FTP itself does not encrypt data, secure versions
like FTPS (FTP Secure) and SFTP (SSH File Transfer Protocol) are
used to encrypt the data during transfer.
5. SMTP (Simple Mail Transfer Protocol)
o Purpose: SMTP is the protocol used for sending email messages
between servers.
 o Functionality: When you send an email, your email client uses
SMTP to send the message to the mail server, which then
forwards it to the recipient's mail server.
o Integration: SMTP is often used in conjunction with other
protocols like POP3 (Post Office Protocol) or IMAP (Internet
Message Access Protocol) for retrieving emails.
6. SSL/TLS (Secure Sockets Layer/Transport Layer Security)
o Purpose: SSL/TLS protocols are used to establish secure
connections between clients and servers, ensuring that data
transmitted over the internet is encrypted and protected from
unauthorized access.
o Functionality: SSL/TLS is most commonly used in HTTPS to secure
web transactions. It involves a process of encryption, decryption,
and authentication to protect data in transit.
o Evolution: TLS is the successor to SSL and is more secure. Despite
this, the term SSL is still commonly used to refer to both
protocols.
7. WebSocket Protocol
o Purpose: WebSocket is a protocol that provides full-duplex
communication channels over a single, long-lived connection,
allowing for real-time data exchange between a client and server.
o Functionality: Unlike HTTP, which is request-response based,
WebSocket allows continuous data exchange after the initial
handshake, making it ideal for applications like chat apps, live
updates, and online gaming.
o Efficiency: WebSocket reduces the overhead of repeatedly
opening and closing connections, making real-time
communication more efficient.
8. REST and SOAP (Web Services Protocols)
o REST (Representational State Transfer):
 ▪ Purpose: REST is an architectural style used for building web
services that allow different systems to communicate over
the web using standard HTTP methods.
▪ Functionality: RESTful APIs use HTTP methods like GET,
POST, PUT, and DELETE to perform CRUD (Create, Read,
Update, Delete) operations on resources, which are
typically represented in JSON or XML format.
o SOAP (Simple Object Access Protocol):
▪ Purpose: SOAP is a protocol used for exchanging structured
information in the implementation of web services.
▪ Functionality: SOAP messages are XML-based and can be
transported over various protocols, including HTTP and
SMTP. SOAP provides a more rigid and standardized
approach to web services compared to REST.
9. DHCP (Dynamic Host Configuration Protocol)
o Purpose: DHCP automates the process of assigning IP addresses to
devices on a network.
o Functionality: When a device connects to a network, it sends a
request to the DHCP server, which assigns an IP address, along
with other network configuration details like the default gateway
and DNS server addresses.
10.XMPP (Extensible Messaging and Presence Protocol)
o Purpose: XMPP is a communication protocol for message-oriented
middleware based on XML, used for instant messaging, presence
information, and contact list maintenance.
o Functionality: XMPP is used in applications like chat systems,
where real-time exchange of messages is required. It supports a
decentralized network architecture and is extensible, allowing for
various features like encryption and file transfer.
Importance of Web Protocols
 • Interoperability: Web protocols ensure that different systems and
devices can communicate with each other, regardless of their underlying
architecture or platform.
• Security: Protocols like HTTPS, SSL/TLS, and WebSocket provide the
necessary security mechanisms to protect data during transmission.
• Efficiency: Protocols are optimized for different types of communication,
ensuring that data is transmitted as quickly and efficiently as possible.
• Scalability: Protocols like REST and WebSocket support scalable web
applications, allowing them to handle a large number of users and data
exchanges.

Conclusion
Protocols governing the web are the backbone of web communication,
enabling the vast and complex interactions that take place on the internet.
They provide the necessary rules and standards for data transmission, security,
and communication, making the web a reliable and secure platform for various
applications. Understanding these protocols is essential for anyone involved in
web development, network administration, or cybersecurity.

HTML-Introduction
What is HTML?
HTML (HyperText Markup Language) is used to structure and format the content
of websites on the World Wide Web. Web Developers use it to create a skeleton
of modern websites and web apps.

In simple words, HTML is the primary building block to create and structure
website content.
Let's see what HyperText Markup Language means.

• HyperText
HyperText is a way of organizing text that allows the reader to easily
navigate and access related information. It takes the reader to a
different part of the same web page, or to a different web page
altogether.
• Markup language
A markup language is a computer language that is used to add structure
and formatting to a text document. Markup languages use a system of
tags to define the structure and content of a document. These tags are
interpreted by a program or application to display the document in a
specific way.

Example of HTML
Let's see a simple example of HTML.

<!DOCTYPE html>
<html>
<head>
<title>programiz</title>
</head>
<body>
<h1>HTML Tutorial</h1>
<p>You'll learn about HTML.</p>
</body>
</html>
Browser output

In the above program,

• <!DOCTYPE html> - defines that this document is an HTML document
• <html> -root element of an HTML page which encloses all other
elements in the HTML page
• <head> - contains information about the page, such as the title and
metadata
• <title> - specifies a title for the HTML page which is shown in the
browser's title bar
• <body> - defines the main content of the page and is a container for all
the visible contents, such as headings, paragraphs, lists, etc
• <h1> - defines a heading
• <p> - defines a paragraph of HTML document

How HTML works?

HTML works by defining the structure and content of a web page using a series
of tags like <h1>, <p>, etc. Each tag has a meaning and can be used to define
the purpose of the content it encloses. For example,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Programiz</title>
 </head>
<body>
<center><h1>Programiz</h1></center>
<h1>Learn to Code for Free</h1>
<p>
Learn to code with our beginner-friendly tutorials and examples.
Read interactive tutorials, and write and test your code to learn
programming.
<p>
<button>Join for free</button>
</body>
</html>

Browser output

As you can see, a web browser reads HTML tags and displays them on the
browser by interpreting their meaning. In the above code:
• <h1> tag - displays the content inside it as a heading
• <p> tag - displays the content inside it as a paragraph
• <centre> tag - displays contents inside it at the centre of the page
How to create and run an HTML file?
You will need a text editor and a web browser to create and run an HTML file
on your computer. You can follow the following steps to create and run an
HTML file on your device.

1. Open a text editor. There are many text editors available, such as Notepad
(on Windows) or TextEdit (on macOS).
2. You can now start writing HTML code in your text editor. Here's a sample
code you can type:

3. Save the file as index.html (or any other name with the .html extension) in
your desired location.
4. Open the HTML file in a web browser. You can do this by double-clicking the
HTML file in the location where you saved it, or right click on your HTML file
and choosing open.

5. The HTML file will be displayed in the web browser, and you can view the
content of the file.

Alternatively, you can use an Online HTML compiler.

HTML Features
HTML is a text-based language used to create web pages. It has several
features that make it a powerful and widely used language for creating web
pages. Some of these features include:

• HTML is a standard language used for creating and structuring web

pages. It allows for the organization of content using elements such as
headings, paragraphs, lists, and tables.
• It supports a wide range of media types, including text, images, audio,
and video, which makes web pages more engaging and interactive.
• HTML is a flexible language that can be used with other technologies,
such as CSS and JavaScript, to add additional features and functionality
to a web page
• Since HTML is compatible with all browsers, web pages created in HTML
are displayed across a variety of platforms and devices.
• Furthermore, it is an open and standardized language, which is
constantly being updated and improved by a community of developers
and experts

HTML Basics
HTML (HyperText Markup Language) is a markup language used to structure and
organize the content on a web page. It uses various tags to define the different
elements on a page, such as headings, paragraphs, and links.

HTML Hierarchy
HTML elements are hierarchical, which means that they can be nested inside
each other to create a tree-like structure of the content on the web page.

This hierarchical structure is called the DOM (Document Object Model), and it is
used by the web browser to render the web page. For example,

<!DOCTYPE html>
<html>
<head>
 <title>My web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
<p>It contains a
<strong>main heading</strong> and <em> paragraph </em>.
</p>
</body>
</html>
Browser output

In this example, the html element is the root element of the hierarchy and
contains two child elements: head and body. The head element, in turn,
contains a child element called the title, and the body element contains child
elements: h1 and p.
Let's see the meaning of the various elements used in the above example.
• <html>: the root element of the DOM, and it contains all of the other
elements in the code
• <head>: contains metadata about the web page, such as the title and any
linked CSS or JavaScript files
• <title>: contains the title of the web page, which will be displayed in the
web browser's title bar or tab
• <body>: contains the main content of the web page, which will be
displayed in the web browser's window
• <p>: contains the paragraphs of text on the web page
 • <strong>, <em>: child elements of the <p> elements, they are used to
mark text as important and emphasized respectively

Note: Only the elements inside the <body> tag renders in the web browser.

What are HTML elements?

HTML elements consist of several parts, including the opening and closing tags,
the content, and the attributes. Here is an explanation of each of these parts:

Here,
• The opening tag: This consists of the element name, wrapped in angle
brackets. It indicates the start of the element and the point at which the
element's effects begin.
• The closing tag: This is the same as the opening tag, but with a forward
slash before the element name. It indicates the end of the element and
the point at which the element's effects stop.
• The content: This is the content of the element, which can be text, other
elements, or a combination of both.
• The element: The opening tag, the closing tag, and the content together
make up the element.

What are HTML Attributes?

HTML elements can have attributes, which provide additional information about
the element. They are specified in the opening tag of the element and take the
form of name-value pairs. Let's see an example:
<a href="http://example.com"> Example </a>

The href is an attribute. It provides the link information about the <a> tag. In the
above example,

• href - the name of attribute

• https://www.programiz.com - the value of attribute

Note: HTML attributes are mostly optional.

HTML Syntax
We need to follow a strict syntax guidelines to write valid HTML code. This
includes the use of tags, elements, and attributes, as well as the correct use of
indentation and white space. Here are some key points about HTML syntax:

1. HTML tags consist of the element name, wrapped in angle brackets. For
example, <h1>, <p>, <img> are some HTML tags.

2. HTML elements are created by enclosing the content of the element inside
the opening and closing tags of the element. For example,

<span>Some text.</span>

is an HTML element.

3. HTML attributes are used to provide additional information about HTML

elements and are specified in the opening tag of the element. For example,

<a target="www.google.com">Click Here</a>

Here, target is an attribute.

4. HTML code should be well-formed and properly indented, with each

element on its own line and each level of hierarchy indented by one level. This
makes the code easier to read and understand, and can help to avoid errors.
For example,

<html>
 <head>
<title>My First HTML Page</title>
</head>
<body>
<h1>My First HTML Page</h1>
<p> Hello World!</p>
</body>
</html>

How HTML, CSS and JavaScript Work?

Web design refers to the process of creating and styling the appearance of a
website. There are 3 fundamental technologies to build the modern website
and web applications. They are:

• HTML
• CSS
• JS
These technologies work together to provide the structure, style, and
interactivity of a web page.

HTML
HTML (HyperText Markup Language) is a markup language used to structure
and organize the content on a web page. It uses various tags to define the
different elements on a page, such as headings, paragraphs, and links. Let's see
an example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Programiz</h1>
 <p>We create easy to understand programming tutorials.</p>
</body>
</html>
Browser output

Here, we have an HTML document where:

• <h1> - heading of the document

• <p> - paragraph of the document
The heading and paragraph tag in the above code help create a webpage
structure.

CSS
CSS (Cascading Style Sheets) is a stylesheet language. It is used to style HTML
documents.

It specifies how the elements of HTML look including their layout, colors, and
fonts. We use <style> tag to add CSS to HTML documents. Let's add some CSS
to our previous HTML code.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h1 {
color: blue;
 }
p{
color: red;
}
</style>
</head>
<body>
<h1>Programiz</h1>
<p>We create easy to understand programming tutorial.</p>
</body>
</html>

Browser output

In the above code, we've applied CSS to <h1> and <p> tags to change their text
color. Notice the code,

h1 {
color: blue;
}

This CSS code turns the text color of every <h1> element into blue.
Similarly,
p{
color: red;
}

This CSS code turns the text color of every <p> element into red.

JavaScript
JavaScript (JS) is a programming language that makes websites interactive and
dynamic. It is primarily used in web browsers to create dropdown menus, form
validation, interactive maps, and other elements on a website.
We use JavaScript with HTML and CSS to create websites that are more dynamic
and user-friendly. We use <script> tag to add JS to HTML. For example,

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button onclick="displayAlert()">Click me!</button>

<script>
function displayAlert() {
alert("Learn coding from Programiz Pro");
}
</script>
</body>
</html>

Browser output (before button click)

Browser output (after button click)

In the above example we have created a button that calls displayAlert() when
clicked.
Notice the code,

<script>
function displayAlert() {
alert("Learn coding from Programiz Pro");
}
</script>
This function simply displays an alert box with the message Learn coding from
Programiz Pro.

How do HTML, CSS, and JavaScript work?

Let us see an example of how HTML, CSS, and JS work together for a user-friendly
web experience. Let's see an example,

<html>
<head>
<title>My Webpage</title>
<style>
body {
text-align: center;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML, CSS, and JavaScript webpage.</p>
<button onclick="displayAlert()">Click me!</button>
<script>
function displayAlert() {
alert('Hello World!');
}
</script>
</body>
</html>
Browser output(before button clicked)

Browser output(after button clicked)

In the above example, we created a simple webpage. We can now learn more
HTML, CSS, and JS to create even better websites.

HTML Tags
HTML tags are like keywords which defines that how web browser will format
and display the content. With the help of tags, a web browser can distinguish
between an HTML content and a simple content. HTML tags contain three
main parts: opening tag, content and closing tag. But some HTML tags are
unclosed tags.

When a web browser reads an HTML document, browser reads it from top to
bottom and left to right. HTML tags are used to create HTML documents and
render their properties. Each HTML tags have different properties.

An HTML file must have some essential tags so that web browser can
differentiate between a simple text and HTML text. You can use as many tags
you want as per your code requirement.
 o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag>
(except some tags)

Syntax

<tag> content </tag>

HTML Paragraphs
The HTML <p> tag is used to create paragraphs. For example,

<p>HTML is fun to learn.</p>

Browser Output

As we can see, a paragraph starts with the <p> and ends with the </p> tag.
HTML paragraphs always start on a new line. To demonstrate this, let's create
a webpage with two paragraphs.

<p>Paragraph 1: Short Paragraph</p>

<p>Paragraph 2: Long Paragraph, this is a long paragraph with more text to fill
an entire line in the website.</p>

Browser Output

The above HTML code contains two paragraphs. And each paragraph starts on
a new line even though there is sufficient space after the first paragraph.

Note: By default, browsers automatically add whitespace (margin) above and

below paragraphs. It is possible to change whitespace and other design aspects
using CSS.

HTML Paragraphs and Spaces

Paragraphs automatically remove extra spaces and lines from our text. For
example,

<p>
The paragraph tag removes all extra spaces.

The paragraph tag also removes all extra lines.

</p>

Browser Output

Here, the output

• remove all the extra spaces between words

• remove extra lines between sentences
Note: It's possible to add extra spaces and lines in HTML, which we will discuss
later in this tutorial.

Adding Line Breaks in Paragraphs

We can use the HTML line break tag, <br>, to add line breaks within our
paragraphs. For example,

<p>We can use the <br> HTML br tag <br> to add a line break.</p>

Browser Output

Note: The <br> tag does not need a closing tag like the <p> tag.

Pre-formatted Text in HTML

As we have discussed, paragraphs cannot preserve extra lines and space. If we

need to create content that uses multiple spaces and lines, we can use
the HTML <pre> tag.

The <pre> tag creates preformatted text. Preformatted texts are displayed as
written in the HTML file. For example,

<pre>
This text
will be
displayed

in the same manner

as it is written
</pre>

Browser Output
Other Elements Inside Paragraphs
It's possible to include one HTML element inside another. This is also true
for <p> tags. For example,
<p>
We can use other tags like <strong>the strong tag to emphasize text</strong>
</p>
Browser Output

In the above example, we have used the <strong> tag inside the <p> tag.
Browsers automatically make the contents inside <strong> tags bold.

Add Extra Space Inside Paragraphs

As discussed earlier, we cannot normally add extra empty spaces inside
paragraphs. However, we can use a certain HTML entity called non-breaking
space to add extra spaces. For example,

<p>Extra space &nbsp;&nbsp; inside a paragraph</p>

Browser Output

Here, &nbsp; is an HTML entity, which is interpreted as a space by browsers.

This allows us to create multiple spaces inside paragraphs and other HTML
tags.

HTML Headings
The HTML heading tags (<h1> to <h6>) are used to add headings to a webpage.
For 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>

Browser Output
In the example, we have used tags <h1> to <h6> to create headings of varying
sizes and importance.

The <h1> tag denotes the most important heading on a webpage.

Similarly, <h6> denotes the least important heading.

The difference in sizes of heading tags comes from the browser's default styling.
And, you can always change the styling of heading tags, including font size, using
CSS.
Note: Do not use heading tags to create large texts. It's because search engines
like Google use heading tags to understand what a page is about.

Headings are block-level elements

The Headings <h1> to <h6> tags are block-level elements. They start on a new
line and take up the full width of their parent element. For example,

<h1>Headings</h1> <h2>are</h2> <h3>fun!</h3>

Browser Output
HTML Comments
HTML comments are used to insert notes to a web page. For example,

<!-- heading 2 -->

<h2>Comments in HTML</h2>

Here, <!-- heading 2 --> is a comment. In HTML, comments start with <!-- and
ends with -->

HTML comments are not displayed by browsers. They are used to add notes
for documentation purposes within code. For example,
<!-- an HTML div -->
<div>
<p>HTML is fun to learn.</p>
</div>

Browser Output
Here,

<!-- an HTML div -->

is a comment. Hence, it is not displayed in the browser output.

Why use HTML Comments?

Comments are mainly used to make our code more readable. They are
completely hidden from the webpage and only show up in the code.

Commenting on your code is a good practice as it helps us to express what the

code is doing. It can act as an anchor for you if you want to change your code in
the future.

In a collaborative environment, code comments are helpful for other developers

as well.

Note: Even though browsers don't display comments, it's still possible to view
comments using the browser's View Source feature. That's why we must not
add sensitive information inside comments.

Single-Line and Multi-line Comments

In HTML, we use the same syntax to create single-line and multi-line comments.

Single Line Comment

<!-- Write a heading -->
<h1>Important Heading</h1>

Multi-line Comments
<!-- Multiple Line comments
can include line breaks
and also extra spaces -->

<p>this will display in the webpage</p>

HTML Tags Inside Comments

If we put HTML elements inside comments, they will be ignored. For example,

<p>this will be displayed</p>

<!-- <p>this will not be displayed</p> -->

<p>this will also be displayed</p>

Browser Output

Keyboard Shortcut for HTML Comments

Most code editors (including Programiz's Online HTML Editor) have a keyboard
shortcut for commenting code.
In general, most code editors use Ctrl + / (on Windows or Linux) and Cmd + / (on
Mac) for creating comments.

We encourage you to remember these shortcuts as comments are used

frequently to add extra information as well as to temporarily remove certain
code.

HTML Table
The HTML table tag (<table>) is used to represent data in a structured way by
creating a table. For example,

<table border="1" >

<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Harry Depp</td>
<td>28</td>
<td>Britain</td>
</tr>
<tr>
<td>John Smith</td>
<td>35</td>
<td>USA</td>
</tr>
<tr>
<td>Ram Krishna</td>
<td>19</td>
<td>Nepal</td>
</tr>
</table>
Browser Output
In the above example, you can see we have used multiple tags to create a table
in HTML.
• <table>
• <tr>
• <td>
• <th>

Table tag <table> in HTML

The <table> tag is used to define a table. For example,
<table>
….
<table>

Table Row <tr> in HTML

The <tr> tag is used to define a row in a table. For example,

<table>
<tr>
...
</tr>
</table>
The table row can include either table heading, <th> or table data, <td>.
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Prasanna</td>
<td>Nepal</td>
</tr>
<tr>
<td>Simon</td>
<td>USA</td>
</tr>

In a table, there can be any number of rows.

Table Heading, <th> in HTML

The <th> tag is used to define a table header. It is generally the top row of the
table. For example,

<table>
<tr>
<th>Item</th>
<th>Count</th>
</tr>
<tr>
<td>Mango</td>
<td>125</td>
</tr>
<tr>
<td>Orange</td>
<td>75</td>
</tr>
</table>
Browser Output

In the above example, Item and Count are table headers and they are used to
represent the category of data in a particular row.

Here, the styling of the table headers is bold and center-aligned. This is because
the <th> tag has some default styling.

Table Cell <td> in HTML

The <td> tag is used to define table cells (data). The table cells store data to be
displayed in the table. For example,

<tr>
<td>Apple</td>
<td>Mango</td>
<td>Orange</td>
</tr>

In the above example, <td>Apple</td>, <td>Mango</td> and <td>Orange</td>

are table cells.
Table cells are generally inside the table row or table headers.

Table Border
Remember we have used the border attribute in our first example.

<table border="1">
...
</table>

In HTML, the border attribute is used to add a border to a table and all the
cells.

Note: We can have borders of various styles in tables, however for more
specific borders, we need to use CSS.

To prevent double borders like the one in the example above, we can set the
border-collapse property of the table. For example,
<table border="1" style="border-collapse: collapse;">
...
</table>

Table Head, Body, and Footer

The HTML table can be divided into three parts: a header, a body, and a footer.

1. Table Header

We use the <thead> tag to add a table head. The <thead> tag must come
before any other tags inside a table. For example,

<table>
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
</tr>
</thead>

...
 ...
</table>

The content of <thead> is placed on the top part of the table and we usually
place the rows with table headers inside the <thead> tag.

2. Table Body
We use the <tbody> tag to add a table body. The <tbody> tag must come
after <thead> and before any other tags inside a table. For example,

<table>
<thead>
...
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>

...
...
</table>

The content of <tbody> is placed on the center part of the table and we usually
place the rows with the content we want to represent in the <tbody>.

3. Table Footer
We use the <tfoot> tag to add a table footer. The <tfoot> tag must come
after <tbody> and before any other tags inside a table. For example,

<table>
 <thead>
...
</thead>
<tbody>
,,,,
</tbody>
<tfoot>
<tr>
<td>foot 1</td>
<td>foot 2</td>
</tr>
</tfoot>
</table>

The content of <tbody> is placed on the bottom part of the table and we usually
place the rows with the footer in the <tfoot>.

All these tags must be placed inside a <table> tag and must contain at least
one <tr>. For example,

Example: HTML Table Head, Body, and Footer

<table>
<thead>
<tr>
<th>S.N</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apple</td>
<td>2</td>
</tr>
 <tr>
<td>2</td>
<td>Mango</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Total</td>
<td>5</td>
</tr>
</tfoot>
</table>

Colspan and Rowspan

Colspan

The colspan attribute merges cells across multiple columns. For example,
<table>
<tr>
<th>S.N</th>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
<tr>
<td colspan="2">Total</td>
<td>5</td>
</tr>
</table>

Browser Output
In the above example, you can see that the last row only has 2 cells with one cell
occupying 2 columns.

The value of the colspan attribute determines how many columns the cell
occupies.

Rowspan

The rowspan attribute merges cells across multiple rows. For example,

<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan="3">Mark Smith</td>
<td>English</td>
<td>67</td>
</tr>
<tr>
 <td>Maths</td>
<td>82</td>
</tr>
<tr>
<td>Science</td>
<td>91</td>
</tr>
</table>

Browser Output

In the above example, you can see that the first column only has 2 cells with one
cell occupying 2 rows.

The value of the rowspan attribute determines how many rows the cell occupies.

Vertical Headers

<table>
<tr>
<th>Name</th>
<td>Sam</td>
<td>Steve</td>
<td>Peggy</td>
</tr>
 <tr>
<th>Age</th>
<td>31</td>
<td>42</td>
<td>29</td>
</tr>
<tr>
<th>Gender</th>
<td>M</td>
<td>M</td>
<td>F</td>
</tr>
</table>

Browser Output

Caption in HTML TABLE

The <caption> element acts as the title of the table. It is used to give a short
description of the table. It shows up on top of the table.

The <caption> tag must be the first child of the <table> element.

<table>
<caption>Employee Details</caption>
<tr>
<th>Name</th>
<td>Sam</td>
 <td>Steve</td>
<td>Peggy</td>
</tr>
<tr>
<th>Age</th>
<td>31</td>
<td>42</td>
<td>29</td>
</tr>
<tr>
<th>Gender</th>
<td>M</td>
<td>M</td>
<td>F</td>
</tr>
</table>

HTML Lists
HTML lists are used to display related information in an easy-to-read and concise
way as lists.
We can use three types of lists to represent different types of data in HTML:
1. Unordered List <ul>
2. Ordered List <ol>
3. Description List <dl>

Unordered List
The unordered list is used to represent data in a list for which the order of items
does not matter.

In HTML, we use the <ul> tag to create unordered lists. Each item of the list must
be a <li> tag which represents list items. For example,

<ul>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ul>

Browser Output
Here, <li>Apple</li>, <li>Orange</li>, and <li>Mango</li> are the list items.

Ordered List
The ordered list is used to represent data in a list for which the order of items
has significance.

The <ol> tag is used to create ordered lists. Similar to unordered lists, each item
in the ordered list must be a <li> tag. For example,

<ol>
<li>Ready</li>
<li>Set</li>
<li>Go</li>
</ol>

Browser Output
Here, you can see list items are represented with numbers to represent a certain
order.

Description List

The HTML description list is used to represent data in the name-value form. We
use the <dl> tag to create a definition list and each item of the description list
has two elements:

• term/title - represented by the <dt> tag

• description of the term - represented by the <dd> tag

Let's see an example,

<dl>
<dt>HTML</dt>
<dd>Hyper-Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading StyleSheets</dd>
<dt>JS</dt>
<dd>Javascript</dd>
</dl>

Browser Output
Since the description list includes the definition of a term, it is also known as the
definition

Tags used in HTML lists

Tag Explanation

<ol> Defines an ordered list.

<ul> Defines an unordered list.

<dl> Defines a description list.

<li> Defines a list item in ordered or unordered lists.

<dt> Defines a term in description list.

<dd> Defines the description of a term in the description list.

HTML Unordered List

We use the HTML unordered list to define a list where the sequence or order of
the list items doesn't matter. We can use an unordered list for keeping track of
groceries, supplies and random objects.

In HTML, we use the <ul> tag to create an unordered list. For example,

<ul>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Banana</li>
</ul>
Browser Output
 Each item of the list is enclosed inside the <li> tag and they are represented by
the dot bullet point symbol.

By default, the symbol to represent an unordered list in HTML is a dot bullet

point, however, we can change them as per our choice.

Unordered Lists Marker

We use the CSS list-style-type property to change the marker that marks the list
item. The valid options for markers are

Icon Marker Description

• (default) disc sets the marker to a dot

○ circle sets the marker to a hollow circle

▪ square sets the marker to a filled black square

none removes the marker altogether

Below, we can see examples for all the marker types.

Nesting Lists

In HTML, we can create a nested list by adding one list inside another. For
example,

<ul>
<li>
Coffee
<ul>
<li>Cappuccino</li>
<li>Americano</li>
<li>Espresso</li>
</ul>
</li>
<li>
Tea
<ul>
<li>Milk Tea</li>
<li>Black Tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Browser Output
In the above example, you can see we have added unordered lists inside another
unordered list.

In this case, the first and second list items of the outer unordered list include
unordered lists.

Ordered List inside Unordered List

Similarly, we can also mix list types while nesting and add ordered lists inside
the unordered list. For example,

<ul>
<li>
Coffee
<ol>
<li>Cappuccino</li>
<li>Americano</li>
<li>Espresso</li>
</ol>
</li>
<li>
Tea
<ol>
<li>Milk Tea</li>
<li>Black Tea</li>
 </ol>
</li>
<li>Milk</li>
</ul>

Browser Output

Multi-level Nesting of Unordered List

In our examples, we are nesting the list up to a single level, however, we can
also nest lists up to multiple levels. This might be important while creating lists
like Table of Content. For example,
HTML Ordered List

We use the HTML ordered list to define a list where the sequence or order of
the list items is important. We can use the HTML ordered list for recipes,
algorithms, top ten lists, and so on.
We use the <ol> tag to create an unordered list. For example,

<ol>

<li>Name</li>

<li>Address</li>

<li>Phone Number</li>

</ol>

Browser Output

Each item of the list is enclosed inside the <li> tag and they are numbered by
decimal numbers.

By default, ordered lists are ordered by numbers, however, we can change them
as per our choice.

Ordered Lists Type

 We use the type attribute to change the marker for the list. There are five types
of numbering in the ordered list. They are

Type Description

"1"(Default) The list is numbered with numbers.

"a" The list is numbered with lower-case alphabets.

"A" The list is numbered with upper-case alphabets.

"i" The list is numbered with lower-case roman numerals.

"I" The list is numbered with upper-case roman numerals.

Below, we can see examples for all the number types.

start Attribute

We use the start attribute to change the starting point for the numbering of the
list. For example,

<ol start='5'>
<li>Harry</li>
<li>Ron</li>
<li>Sam</li>
</ol>

Browser Output

Here, we change the starting value of the list to 5.

This attribute also works with other types. For example,

<ol type="a" start='5'>

<li>Harry</li>

<li>Ron</li>

<li>Sam</li>

</ol>
Browser Output

Similarly, we can use the start attribute along with all other types.

reversed Attribute

We can use the reversed attribute on the ordered list to reverse the numbering
on the list. For example,

<ol reversed>
<li>Cat</li>
<li>Dog</li>
<li>Elephant</li>
<li>Fish</li>
</ol>

Browser Output
Here, we can see the order of the list is reversed, the first list item is numbered
4 and the last is numbered 1.

Similarly, the reversed attribute can also be used with other types and in
conjunction with the start attribute. For example,

<ol reversed type="I" start="10">

<li>Cat</li>
<li>Dog</li>
<li>Elephant</li>
<li>Fish</li>
</ol>

Browser Output

In the above example, we use the upper-case roman numeral type and start at
10 and reverse the order of the numbers.

Nesting Lists

In HTML, we can create a nested list by adding one list inside another. For
example,

<ol type="I">
<li>
 Chapter 1
<ol type="a">
<li>Lesson 1</li>
<li>Lesson 2</li>
</ol>
</li>
<li>
Chapter 2
<ol type="a">
<li>Lesson 1</li>
<li>Lesson 2</li>
<li>Lesson 3</li>
</ol>
</li>
<li>
Chapter 3
<ol type="a">
<li>Lesson 1</li>
</ol>
</li>
</ol>
In the above example, you can see we have added an ordered list inside another
ordered list.

In this case, the list item of the outer ordered list also includes an ordered list.

Similarly, we can also mix list types while nesting and add an unordered list
inside the ordered list. For example,

<ol>
<li>
Prepare the ingredients.
<ul>
<li>Eggs</li>
<li>Salt</li>
<li>Butter</li>
</ul>
</li>
<li>
Mix the ingredients and cook on a low flame.
</li>
<li>
Serve hot with garnish. You can use
<ul>
<li>Chives</li>
<li>Bacon</li>
<li>Coriander</li>
</ul>
</li>
</ol>

Browser Output
Note: In our examples, we are nesting the list up to a single level, however, we
can also nest lists up to multiple levels.

HTML Description List

We use the HTML description list to create a list where list items include terms
and descriptions of the term.

In HTML, we use the <dl> tag to create a description list. For example,

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Browser Output
Here, you can see two different types of list items:

• <dt> - defines the terms/name

• <dd> - defines the description/value of the term/name

You can see the description list includes two related values, hence it can also be
used to store items in key/value pairs.

Since the description list includes the definition of a term, it is also known as
the definition list.

Multiple Terms and Multiple Definitions

As we have seen, the definition list is used to display data in a key/value format,
where the <dt> tag indicates the key elements and the <dd> tag element
indicates the value (definition) of the key.

However, while creating a description list, it's not necessary that a

single <dt> tag (key) should have a single <dd> tag (value). We can have any
combination of the <dt> and <dd> elements.

Possible Combinations of terms and term descriptions:

 • Single term (<dt>) with a single definition (<dd>).
• Multiple terms (<dt>) with a single definition (<dd>).
• Multiple definitions (<dd>) with a single term (<dt>).
Let's take a look at a few examples,

1. Single Term and Description

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Browser Output

Here, we can see a single term is followed by a single description.

2. Single Term and Multiple Description

Sometimes, we can come across data where there are multiple descriptors that
fit the same term, like a product and its features list.

In such a case, rather than listing the product name multiple times before each
feature, we can follow the single term <dt> with multiple
feature/description <dd> to present it better. For example,

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language.</dd>
<dd>Used to create Websites.</dd>
<dd>Released in 1993.</dd>
</dl>

Browser Output

Here, we can see that the single term <dt>HTML</dt> is described by multiple
definitions <dd>

3. Multiple Term and Single Description

Sometimes, we come across data where multiple keys may have similar values.
Like multiple programming languages can feature the same feature sets.

In such cases, rather than repeating the key/value pair, we can group several
keys <dt> followed by a single description <dd> such that the single description
describes many terms,
<dl>
<dt>HTML</dt>
<dd>is markup language</dd>
<dt>Python</dt>
<dt>Java</dt>
<dd>are programming languages.</dd>
</dl>
Browser Output

Here, we can see that multiple terms <dt>Python</dt> and <dt>Java</dt> share
the same description <dd>are programming languages.</dd>.

When do you use Description List in HTML?

A description list is the best choice when we want to express the semantically
correct format of title-description elements in our HTML. We can also denote
the relation between pairs using Description lists.

HTML Line break

The HTML Line Break tag is used to apply a line break and start your text in the
new line.

In HTML, we use the <br> tag to create a line break. For example,
<p>
Use the <br> br tag <br> to create line breaks in text.
</p>
Browser Output
In the above code, if you look carefully, you can find there is no closing tag
for <br>. It's because the <br> tag is an empty tag, which means it doesn't
require a closing tag.

As you can see, the <br> tag adds a new line without having to create a new
paragraph.

The line break is helpful for writing structured texts like addresses and poems
without creating multiple paragraphs.

Line-Break vs Multiple Paragraphs

As we know, an HTML paragraph always starts on a new line, instead of a line

break we can also use multiple paragraphs. For example,

<p>Use the</p>
<p> br tag</p>
<p> to create line breaks in text.</p>
Browser Output

We can see we have successfully applied line breaks using multiple paragraphs.
However, there are several drawbacks of this approach:
• Screen readers treat each paragraph as separate sentences. That is, Use
the, br tag, and to create line breaks in text. will be read as different
sentences which will create confusion for users.
• Each paragraph has its own default styling, hence with multiple
paragraphs, there will be unnecessary margin and padding between the
lines making them not seem as continuous. You can see that in the above
output as well.

Example: Line breaks using HTML <br> and <p>

<p>Roses are red</p>
<p>Violets are blue</p>
<p>HTML is Fun</p>
<p>and so are You!</p>
 <p>
Roses are red <br>
Violets are blue <br>
HTML is fun <br>
and so are You!
</p>

Browser Output

HTML pre Tag

The HTML Preformatted text tag, <pre>, is used to define a block of text to
display them in the same manner as it is written in the HTML file.

In HTML, we use the <pre> tag to create preformatted text. For example,

<pre>
This Text will
be shown exactly
as it is written.
</pre>

Browser Output
The <pre> tag preserves all new lines and white spaces. Hence, the above
example shows the output exactly as it is written.

Font in HTML <pre> tag

By default, the HTML <pre> tag changes the font of its content to a monospaced
font. A monospace font is a font in which all the characters occupy the same
space.

As you can see in the above image, all the characters in the text have the same
width.

Code in HTML <pre> tag

Generally speaking, the HTML <pre> tag is used to include code block in our
HTML pages. For example,

<pre>
let inviteFunction = async (invite) => {
let response = await fetch("/invite", {
method: "POST",
 headers: getHeaders(),
body: JSON.stringify(invite),
});
let data = await response.json();
if (response.ok) return data;
throw new Error(data);
}
</pre>

Browser Output

Here we can see that using the HTML <pre> tag is a great way to display code in
our HTML articles. It preserves the white spaces, making code more readable.

In Contrast, if we use a <p> tag, the output would appear as below.

<p>
let inviteFunction = async (invite) => {
 let response = await fetch("/invite", {
method: "POST",
headers: getHeaders(),
body: JSON.stringify(invite),
});
let data = await response.json();
if (response.ok) return data;
throw new Error(data);
}
</p>

Browser Output

HTML Horizontal Line

The HTML Horizontal rule tag, <hr>, is used to insert a horizontal line between
our paragraphs. For example,

<p>First Paragraph</p>
<hr>
<p>Second Paragraph</p>
Browser Output

The <hr> tag is an empty tag, i.e. it doesn't require a closing tag.

HTML horizontal line to separate Page sections

The <hr> tag is used to apply a thematic break in HTML. i.e It is used when there
is a change of topic or you need to specify separation between content.
Commonly, a <hr> tag is used between sections in an article. For example,

<h2>Physics</h2>
<p>Physics is the natural science that studies matter, its fundamental
constituents, its motion and behavior through space and time, and the related
entities of energy and force. </p>
<hr>
<h2>Chemistry</h2>
<p>Chemistry is the branch of science that deals with the properties,
composition, and structure of elements and compounds, how they can change,
and the energy that is released or absorbed when they change.</p>
Browser Output

HTML Inline and Block Elements

HTML elements can be broadly categorized into one of two categories:

• Inline Elements: <span>, <a>, <strong>, <img> etc.

• Block Elements: <p>, <div>, <h1>, <figure> etc.

HTML Inline Elements

Inline elements are displayed on the same line. They do not start on a new line
and take up only as much width as their contents require. An example of an
inline element is the <span> tag.

<p>This is how <span style="border: 1px solid black">span</span> works. </p>

Browser Output

If we have multiple span tags, they get placed on the same line. For example,
<p> The following spans will be inline; <span style="border: 1px solid
black">Span 1</span> and <span style="border: 1px solid black">Span
2</span>.</p>

Browser Output

Some examples of inline elements are:

• HTML <a> tag
• HTML <input> tag
• HTML <span> tag
Most HTML formatting tags are also inline. For example:
• HTML <b> tag
• HTML <em> tag
• HTML <strong> tag, etc

HTML Block Elements

Block elements take up the whole horizontal space available in its container.
They start on a new line and take up as much height as their contents require.

An example of a block element is the HTML Paragraph Tag.

<p style="border: 1px solid black">This is how block elements works. </p>

Browser Output
If we have multiple block elements, they will each take a separate line. For
example,

<p style="border: 1px solid black">Paragraphs are</p> <p style="border: 1px

solid black">Block Elements.</p>

Browser Output

Some frequently used Block elements are:

• HTML <div> tag
• HTML Headings <h1> - <h6>
• HTML <p> tag, etc

HTML Links
HTML links or hyperlinks connect one resource on the web to another. The
resource may be an image, a web page, a program, a video clip, an audio clip, an
element within a web page, etc, or anything that can be hosted on the internet.

We use the HTML <a> tag to create hyperlinks. The syntax for the <a> tag is

<a href="URL"> Text </a>

Here,

• URL - the destination of the link

• Text - the part that will be visible as a link

Clicking on the text will navigate you to the resource in the URL. For example,

<a href="https://www.programiz.com/swift-programming/continue-
statement"> Swift Continue Statement </a>

Browser Output

Here, clicking on the Swift Continue Statement will take you to

Default Link Styles

By default, browsers will style links differently depending on whether the link is
active, visited, or unvisited.
Note: You can freely change this styling using CSS.

Image Links
You can insert almost any content inside a <a> tag to make it a link. Hence, we
can also use images as a link.
<a href="https://www.programiz.com">
<img src="programiz-logo.png" alt="Programiz Logo">
</a>

Browser Output

target Attribute
By default, any link clicked will open in the same browser window. This may lead
to a bad user experience. This is where the target attribute becomes useful. For
example,
<a href="https://www.programiz.com" target="_blank">Programiz</a>

Here, target= "_blank" opens the link in a new browser tab.

We use the target attribute to specify where the link is opened. The target
attribute has 4 values.

Target Description

_self (Default) Opens the link in the same browser tab.

_blank Opens the link in a new browser tab.

_parent Opens the link in the parent frame.

_top Opens the link in the current tab window (topmost parent).

download Attribute

When linking to a web resource, we can specify that the resource is to be

downloaded by using the download attribute. For example,

Browser Output

When the link is clicked, the file from /files/logo.png will be downloaded.
We can also provide an optional value to the download attribute. This value will
be set as the filename of the downloaded resource. For example,

<a href="/files/logo.png" download="Programiz">Download Image</a>

Here, the link is the same as the previous example, however, when downloading,
the file will have the name Programiz.png rather than the previous original
name logo.png.

Linking to an HTML element

As previously mentioned, along with linking to web sources, an <a> tag can also
link to a respecific element within the web page. We use that by adding # to the
URL followed by the id of the specific element. For example,

Link to an element in the same webpage:

<a href="#title">Go to Title</a>

Here, clicking on this link will scroll the web page to the element with
the id of title

Link to an element in another webpage:

<a href="programiz.com/html/head#title-tag"> Link </a>

Here, clicking on this link will take us to the URL programiz.com/html/head and
then scroll to the element with the id title-tag.

Email and Call links

We can also use HTML links as email links and call links to help users contact us
or someone else using their email client or call app.

Email links:

The email link opens the user's default mail client to make it easier for the user
to send mail to a specific address. For example,
<a href="mailto:[email protected]" > Send Mail </a>

Browser Output

Here, clicking on this link will open the user's mail client and fill the To field

with [email protected].
We can also add other properties of an email like subject, body, etc to the link
to make it easier for the user. The available options in an email link are:
• cc
• bcc
• subject
• body
Let us look at a link using all the available options:
<a
href="mailto:[email protected][email protected]&[email protected]&subject=Te
st &body=Demo email" >click to send mail </a>

Call links:
Similar to email links, we can create call links to trigger the user's call app with a
phone number. For example,

<a href="tel:+9778841999999"> Call Us </a>

Browser Output

Here, clicking this link will open the call app with the number already filled in so
the user does not have to type the phone number manually.
This is primarily useful in responsive sites where users are browsing the web
page through their mobile phones.

HTML Images
The HTML <img> tag embeds an image within the HTML web page. For example,
<img src="logo.png">

Browser Output

Here, the <img> tag inserts the image logo.png on the webpage.

The HTML image tag has 2 important attributes:

• The src attribute

• The alt attribute
Note: The <img> tag is an empty tag, i.e. It doesn't require a closing tag.
 HTML Image src Attribute

The src attribute is a required attribute for the <img> tag. It specifies the
path (URL) to the image. It tells the browser where to look for the image. For
example,

<img src="tictactoe.png" >

Browser Output

In the above example, the src attribute tells the browser to load the image
from the same directory where the webpage is located.

Similarly, if the image is stored in a subdirectory, the path in the src attribute
would be written as

<img src="images/tictactoe.png" >

If the image is located on another server entirely or if we want to use an

image from the web, we can provide an absolute URL for the image. For
example,

<img src="https://www.example.com/images/tictactoe.png">
 Note: Although we can provide an absolute path for images located in our
own web server, better to provide a relative path as it leads to faster loading
times. Hence always use relative paths for images in your own server.

HTML Image alt Attribute

The alt attribute is the text description of an image. The value of the alt attribute
should describe the image such that the content is meaningful even if the image
fails to load.

<img src="computer.png" alt=" A standard Computer" >

Browser Output

The alt attribute's contents are shown if the user cannot view the image (slow
internet, wrong src attribute, or using a screen reader).

It also helps in SEO as it helps the search engine understand what images are
about.

HTML Image title Attribute

The title attribute displays the information about the image when the user
hovers over the image. For example,

<img src="tictactoe.png" alt="A game of tic-tac-toe" title="Tic-Tac-Toe" />

Browser Output

Note: Although alt and title attributes appear similar, the title attribute cannot
be used as an alternative to the alt attribute. The title is not read by screen
readers and does not display when the image fails to load.

Lazy loading HTML images

By default, all the images on the web page are loaded during the initial load. If
there are many images on the page, this causes the page to load slowly.

We can change this behavior of HTML images by using the loading attribute.

<img src="dinosaur.png" alt="A T-rex" loading="lazy">

Now the image will not load until the user scrolls near the image location. If the
image is at the bottom of the page and the user never scrolls down on the
website, the image will never load.

This decreases the website's initial load time and prevents unnecessary data
fetching.

HTML Image Size - Width and Height

We can use the style attribute to specify the height and width of an Image. For
example,

<img src="tictactoe.jpg" alt="A game of tic-tac-toe" style="width: 200px; height:

200px;">

Alternatively, we can also use the height and width attributes to set the height
and width. For example,

<img src="tictactoe.jpg" alt="A game of tic-tac-toe" width="200" height="200">

Browser Output

We should always set the height or width of images. Otherwise when the image
loads, the content on the webpage will be shifted.

Note: The above two code samples give the same output, however, it is best
practice to use the style attribute rather than height and width.
Common Image Formats

Format File Format Extension

GIF Graphics Interchange Format .gif

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

JPEG Joint Photographic Expert Group image .jpg, .jpeg

WEBP Web Picture .webp

HTML Bold

We use the HTML <b> tag or the HTML <strong> tag to make text bold. For
example,

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

<br>
<strong>This text is also bold.</strong>

Browser Output
HTML <b> vs <strong> Tag
Both <b> and <strong> tags make the text inside them bold and there is no
difference in how browsers render these tags.
However, the <strong> tag is a semantic tag that indicates the text content is of
strong importance, seriousness, or urgency (for example, Warning! Falling rocks)
whereas the <b> tag has no semantic meaning and only makes the text bold.
Hence, it is generally preferred to use the HTML <strong> tag.

Note: You can also use the CSS property font-weight to make the text bold.

HTML Italic

We use the HTML <i> tag or the HTML <em> tag to make the text italic.

HTML <i> Tag

The HTML <i> tag is a physical tag used to make the text italic. It is used to
indicate foreign text, scientific nomenclature, thoughts, etc.

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

Browser Output
HTML <em> Tag

The HTML <em> tag is a semantic tag that is used to signify that the text inside
the tag is being emphasized. It is a semantic tag as opposed to <i> which doesn't
hold any semantic meaning.

<p> This text is <em>emphasized</em>.</p>

Browser Output

Usage of HTML <i> tag

The <i> tag is a presentational tag, it is mostly used to:

1. represent text in another language. For example,

<p> The Foreigner said <i>Bonjour cher ami </i>, which means 'Hello dear friend'
in French. </p>
Browser Output

2. represent words or phrases used as terms. For example,

<p> The words <i>the</i>, <i>a</i> and <i>an</i> are articles. </p>
<p> This is an example of an <i>idiom.</i> </p>

Browser Output

3. represent scientific names of animals, plants, etc. For example,

<p> The scientific name for cow is <i>Bos indicus.</i></p>

Browser Output

4. represent someone's thoughts. For example,

<p>Ram thought to himself, <i>Can I learn to code?</i></p>

 Browser Output

HTML <em> Tag Vs HTML <i> Tag

There is no difference in how <i> and <em> tag renders on the browser. For
example,

<p>Do not enter the tiger enclosure <i>under any circumstances</i>.</p>

<p>My teachers <em>heavily</em> emphasize studying.</p>

Browser Output

Both <em> and <i> make the font italic. However, <em> tag is a semantic tag
that indicates that the text inside the tag is spoken with a stressed emphasis
when compared to surrounding texts. Screen Readers will also emphasize text
inside the <em> tag. Whereas the <i> tag only make the text italic.
Note: For purely styling purposes, it is recommended to use the CSS
property font-style.

HTML Superscript and Subscript

Superscript
The HTML <sup> tag is used to create superscript text. The text inside
the <sup> tag is rendered half a character above the normal line and has a
smaller font size. For example,
<p> This is a ^Superscript text.</p>

Browser Output

Usage of Superscript
Superscript text is generally used for exponents, measurement units, and ordinal
numbers. For example,
1. Superscript in exponents
<p> a² + b² = c<sup>2<sup></p>

Browser Output
2. Superscript in measurement units

<p>The area of this park is 200m².</p>

Browser Output

3. Superscript in ordinal numbers

<p>Ram scored 1^st position in the 100m race.</p>

Browser Output

Subscript
The HTML <sub> tag is used to create subscript text. The text inside
the <sub> tag is rendered half a character below the normal line and has a
smaller font size. For example,
<p> This is a _Subscript text.</p>

Browser Output

Usage of Subscript

Superscript text is generally used for mathematics and chemical formulas. For
example,

1. Usage in Mathematical Formula

<p> <var>x₁</var> … <var>x_n</var></p>

Browser Output

2. Usage in Chemical Formula

<p> H₂SO₄ is chemical formula for sulphuric acid.</p>

Browser Output

HTML Formatting

HTML provides us with several tags to help format text, <b> for bold, <i> for
italic, <u> for underlining, etc. These tags are divided into two categories:

Physical Tags: These tags are presentational. They don't add extra meaning to
the text. For example,

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

Browser Output

Here, the <i> is only for text styling and has no other meaning.
Semantic Tags: These tags add some special meaning to the text along with
adding style to the text. For example,

<p> This text is <em>emphasized</em>.</p>

Browser Output

Here, the <em> is used to emphasize text. Screen readers also emphasize text
inside the <em> tag while dictating.

Note: The formatting tags are mostly inline tags like <b>, <u>, <i>, etc and are
used for styling texts.

HTML Formatting tags

Below are listed the formatting tags available in the latest version of HTML.
• <b> tag - Bold Text
• <i> tag - Italic Text
• <u> tag - Underlined Text
• <strong> tag - Strong Text
• <em> tag - Emphasized Text
• <mark> tag - Highlighted Text
• <sup> tag - Superscript Text
• <sub> tag - Subscript Text
• <del> tag - Deleted Text
 • <ins> tag - Inserted Text
• <big> tag - Big Text
• <small> tag - Small Text

HTML <b> and <strong> tag

The HTML <b> is a physical tag used to simply make text bold.

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

Browser Output

The HTML <strong> tag is a semantic tag that is used to signify that the text
inside the tag is of higher importance. This is shown by making the text bold.

<p> The text is <strong>strong</strong>.</p>

Browser Output
HTML <i> and <em> tag

The HTML <i> tag is a physical tag used to make the text italic. It is used to
indicate foreign text, scientific nomenclature, thoughts, etc.

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

Browser Output

The HTML <em> tag is a semantic tag that is used to signify that the text inside
the tag is being emphasized. It is a semantic tag as opposed to <i>, which doesn't
hold any semantic meaning.

<p> This text is <em>emphasized</em>.</p>

Browser Output

HTML <u> tag

The HTML <u> tag is a physical tag used to make the text underlined.

<p> This text is <u>underlined</u>.</p>

Browser Output
HTML <mark> tag

The HTML <mark> tag is a physical tag that is used to highlight text.

<p> This text is <mark>marked</mark>.</p>

Browser Output

HTML <sup> and <sub> tag

The HTML <sup> tag is used to create superscript text. The text is placed half a
character height above other text and is a size smaller.

<p> This text is ^{superscripted}.<p>

Browser Output
The HTML <sub> tag is used to create subscript text. The text is placed half a
character height below other text and is a size smaller.

<p> This text is _subscripted.<p>

Browser Output

HTML <ins> and <del> tag

The HTML <del> tag is a semantic tag used to represent that the text is deleted
or changed.

<p> This text is <del>deleted</del>.</p>

Browser Output

The HTML <ins> tag is a semantic tag used to represent that the text has been
inserted in the document. The <ins> tag generally follows some deleted text.
<p> This text is <del>deleted</del> <ins>inserted</ins>.</p>

Browser Output

HTML <big> and <small> tag

The HTML <big> tag is a physical tag used to make text one font size larger than
the surrounding text.

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

Browser Output

The HTML <small> tag is a physical tag used to make text one font size smaller
than the surrounding text.

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

Browser Output
HTML Meta Elements

The HTML <meta> tag is used to represent metadata about the HTML document.
Metadata refers to the information about data (data about the HTML document).
The metadata consists of information
like charset attribute, name attribute, http-equiv attribute, etc.

The <meta> tag should always go inside the <head> element. For example,

<head>
<meta charset="utf-8" />
</head>

Here, <meta charset = "utf-8"> tells the browser to use the UTF-8 character
encoding to convert machine code into human-readable code.

Attributes of Metadata

The Meta tag can have the following attributes:

• charset attribute
• name attribute
• http-equiv attribute

We will learn about each attribute in detail.

charset attribute

The charset attribute defines the character encoding for the HTML document.
For example,

<meta charset="UTF-8">

It helps to display an HTML page correctly in the browser. UTF-8 is the only valid
encoding for HTML5 documents.

name attribute

The name attribute together with the content attribute provides information in
terms of name-value pairs. Where:

• name - name of the metadata

• content - value of the metadata

Let's see an example:

<meta name="description" content=" In this article you will learn about meta
tags.">

Here, we have used the name attribute to provide the information about
the description of the HTML document. The text inside the content attribute is
the value of description.

Some common values for the name attribute include author, keywords, referrer,
etc. For example,

<head>
<meta name="keywords" content="Meta tag, HTML">
<meta name="author" content="Elon Musk">
</head>
Here, we have used meta tags to provide information about keywords and
the author of the HTML document.
http-equiv attribute

The http-equiv attribute is used to provide an HTTP header for the information
of the content attribute. The list of possible values for the attribute are:

• content-security-policy: Specifies a content policy for the document. It is

used to specify allowed server URLs. For example,

<meta http-equiv="content-security-policy" content="default-src 'self';" />

Here, the above tag specifies that external resources are only allowed from self,
i.e. the same host as the webpage.

• content-type: Specifies the character encoding for the document. It is the

same as using the charset attribute. It is used to set the character
encoding for the HTML document. For example,

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

• default-style: Specifies the preferred style sheet to use. For example,

<meta http-equiv="default-style" content="stylesheet-1">

Here, in case of multiple stylesheets, the stylesheet with the id of stylesheet-

1 will be prioritized.

• refresh: Defines a time interval for the document to refresh itself. For
example,

<!-- To refresh the site in 3 seconds -->

<meta http-equiv="refresh" content="3" />
You can optionally redirect the user to a separate url by adding ;url= followed by
the url. It should be inside the content attribute after the time interval.

<!-- To redirect to youtube after 3 seconds -->

<meta http-equiv="refresh" content="3;url=https://www.youtube.com" />
Uses of Metadata
The uses of Metadata are as follows:
• Tells the browser how to display content or refresh the site.
• Used by search engines to read the data of the HTML page.
• Used to set the viewport. Viewport refers to the visible area of the
webpage. For example,

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The above code tells the browser to load the webpage with the width of the
device and with 1x zoom.

HTML Form

An HTML Form is a section of the document that collects input from the user.
The input from the user is generally sent to a server (Web servers, Mail clients,
etc). We use the HTML <form> element to create forms in HTML.
Example: HTML Form

The HTML <form> element is used to create HTML forms. For example,

<form>
<label for="firstname">First name: </label>
<input type="text" name="firstname" required>
<br>
<label for="lastname">Last name: </label>
<input type="text" name="lastname" required>
<br>
<label for="email">email: </label>
<input type="email" name="email" required>
<br>
<label for="password">password: </label>
<input type="password" name="password" required>
 <br>
<input type="submit" value="Login!">
</form>

Browser Output

HTML Form Elements

A form contains special interactive elements that users use to send the input.
They are text inputs, textarea fields, checkboxes, dropdowns, and much more.
For example,

<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<label for="country">Country: </label>
<select name="country" id="country">
<option>Select an option</option>
<option value="nepal">Nepal</option>
<option value="usa">USA</option>
<option value="australia">Australia</option>
 </select><br><br>
<label for="message">Message:</label><br>
<textarea name="message" id="message" cols="30"
rows="4"></textarea><br><br>
<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Subscribe?</label><br><br>
<input type="submit" value="Submit">
</form>

Browser Output

Form Attributes

The HTML <form> element contains several attributes for controlling data
submission. They are as follows:

Action

The action attributes define the action to be performed when the form is
submitted. It is usually the url for the server where the form data is to be sent.

<form action="/login">
<label for="email">Email:</label>
 <input type="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>

In the above example, when the form is submitted, the data from the form is
sent to /login.

method
The method attribute defines the HTTP method to be used when the form is
submitted. There are 3 possible values for the method attribute:

post - It is used to send data to a server to update a resource.

<form method = "post">

...
</form>

get: It is used to request data from a specified resource.

<form method = "get">

...
</form>
• dialog: This method is used when the form is inside a <dialog> element.
Using this method closes the dialog and sends a form-submit event.
To learn more about HTTP methods GET and POST, visit HTML Form Action:
POST and GET.

target
It specifies where to display the response received after the form is submitted.
Similar to the target attribute in <a> tags, the target attribute has four possible
values.
_self (default): Load the response into the same browser tab.
<form target="_self">
<label for="firstname">Enter your first name:</label>
<input type="text" name="firstname">
</form>

_blank: Load the response into a new browser tab.

<form target="_blank">
<label for="firstname">Enter your first name:</label>
<input type="text" name="firstname">
</form>

_parent: Load into the parent frame of the current one. If no parent is
available,it loads the response into the same tab.

<form target="_parent">
<label for="firstname">Enter your first name:</label>
<input type="text" name="firstname">
</form>

_top: Load the response into the top-level frame. If no parent is available, it
loads the response into the same tab.
<form target="_top">
<label for="firstname">Enter your first name:</label>
<input type="text" name="firstname">
</form>
enctype

It specifies how the form data should be encoded for the request. It is only
applicable if we use the POST method.

<form method="post" enctype="application/x-www-form-urlencoded">

</form>
In the above example, data from the form will be encoded in the x-www-form-
urlencoded format (which is the default encoding format).

Name

It specifies the name of the form. The name is used in Javascript to reference or
access this form.

<form name="login_form">
<label for="email">Email:</label>
<input type="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
The above form can be accessed in javascript as:

document.forms['login_form']

Although it is possible to use name to access form elements in javascript, it is

recommended to use id to access the form elements.

novalidate
If the novalidate attribute is set, all validations in the form elements are skipped.
<form novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>
In the above example, the form will be submitted even if we enter some invalid
value to the email field, such as Hi.

HTML Form Elements

HTML form elements are used to store user input. There are different types of
form elements such as the text box, check box, drop-down, submit button, etc.
For example,

<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<input type="submit" value="Submit">
</form>

Browser Output

Here, <input> and <label> are all HTML Form Elements.

HTML Form Elements

There are various HTML form elements for various input types. The form
elements available in HTML5 are as follows:
• HTML <input> tag
 • HTML <label> tag
• HTML <button> tag
• HTML <select>, <option> and <optgroup> tags
• HTML <textarea> tag
• HTML <fieldset> tag
• HTML <legend> tag
• HTML <datalist> tag
• HTML <output> tag

HTML <input> tag

The HTML <input> tag defines the field where the user can enter data. For
example,

<input type="text" name="firstname">

Browser Output

Here,
• type - determines the type of input the <input> tag takes
• name - specifies the name of the input

HTML <label> tag

The HTML label tag is used to create a caption for a form element. The text inside
the <label> tag is shown to the user.

<label for="firstname">First Name</label>

<input type="text" name="firstname" id="firstname">

Browser Output

The for attribute is used to associate a label with the form element. The value
for the for attribute is set as the id of the form element which is firstname in the
above example.

HTML Label is mainly used for accessibility as screen-readers read out the label
associated with the field and it also improves user experience as clicking on the
label also focuses on the input field.

This is also greatly helpful in small screens as it makes it easier to perform actions
like focusing on input, selecting a checkbox, selecting a radio box, etc.

HTML <button> tag

The HTML <button> element is an interactive element that is activated by a user

with a mouse, keyboard, finger, voice command, or other assistive technology.
It performs a programmable action, such as submitting a form or opening a
dialog when clicked. For example,
<button type="button">Click me</button>

Browser Output

The type attribute determines the action performed by clicking the button. It
has 3 possible values:

• submit

If the value of type is submit, the button click action submits the form. For
example,

<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<button type="submit">Submit</button>
</form>
Browser Output

• reset
If the value of type is reset, the button click action resets the value of all form
elements to their initial value. For example,

<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<button type="reset">Reset</button>
</form>

Browser Output (before reset)

Browser Output (after reset)

 • button
If the value of type is button, the button click action does not have a default
function. Generally, javascript is used to add functionality to such buttons. For
example,
<button type="button">Click me</button>

Browser Output

HTML <select>, <option> and <optgroup> tags

The HTML <select> tag is used to create a menu of options. Each of the options
is represented by the <option> tag. For example,

<label for="pets">Pets:</label>
<select id="pets">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
Browser Output

Browser Output

Additionally, we can also group option elements inside the <optgroup> tag to
create a group of options. For example,

<label for="pets">Pets:</label>
<select id="pets">
<optgroup label="Mammals">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</optgroup>
<optgroup label="Insects">
<option value="spider">Spider</option>
<option value="ants">Ants</option>
</optgroup>
<optgroup label="Fish">
<option value="goldfish">Goldfish</option>
</optgroup>
</select>

Browser Output
HTML <textarea> tag

The HTML <textarea> tag is used to define a customizable multiline text input
field. For example,

<textarea rows="10" cols="30"> Type something…</textarea>

Browser Output

Here, the rows and cols attributes represent the rows and columns of the text
field.

HTML <fieldset> tag

The HTML <fieldset> tag is used to group similar form elements. It is a

presentational tag and does not affect the data in the form. For example,
<form >
<fieldset>
<label for="firstname">First name:</label><br>
<input type="text" id="firstname" name="fname"><br>
<label for="lastname">Last name:</label><br>
<input type="text" id="lastname" name="lname"><br>
</fieldset>
</form>

Browser Output

Here, the border is from the <fieldset> element.

HTML <legend> tag

The HTML <legend> tag is another presentational tag used to give a caption to
a <fieldset> element. It acts similarly to an HTML <label> tag. For example,

<form>
<fieldset>
<legend>Name</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br>
</fieldset>
</form>

Browser Output

HTML <datalist> tag

The <datalist> tag defines a list of pre-defined options for an <input> element.
It is used to provide autocomplete options to the form elements that show up
as recommended options when the user fills in the form. For example,

<label for="country-choice">Choose a country:</label>

<input list="country-options" id="country-choice" name="country-choice">
<datalist id="country-options">
<option value="Australia">
<option value="Austria">
<option value="America">
<option value="Nepal">
</datalist>
Browser Output

Here, when the user types au, the browser suggests options with the letters to
the user as a recommendation.

HTML <output> tag

The HTML <output> tag is a container element that is used to store the output
of a calculation usually performed using javascript. For example,

<form>
<input type="number" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="10" /> =
<output name="result" for="a b"></output>
</form>
<script>
const output = document.getElementsByName("result")[0]
const inputA = document.getElementById('a')
const inputB = document.getElementById('b')
output.innerText = Number(inputA.value) + Number(inputB.value)
</script>
Browser Output

The for attribute of the <output> tag accepts a space-separated value of all the
inputs used in the calculation. You can notice we have used a b inside the for.
This is to denote that the output inside the <output> tag was generated using
inputs a and b.

The value inside the <output> is generally generated from Javascript and filled
inside the element. Here, we have calculated the sum of both inputs and
inserted it inside the <output> element.

HTML Input Tag

The HTML <input> tag defines the field where the user can enter data. The type
attribute determines what type of user input is taken.

<input type="text" name="firstname">

Browser Output

Here,
 • type - determines the type of input the <input> tag takes

• name - specifies the name of the input which is what the data is named
as when submitting the data to a server.
Different Input Types
The various types of input tags available in HTML5 are:

text - creates a single-line text fields (default)

button - creates a button with no default functionality
checkbox - creates a checkbox
color - creates a color picker
date - creates a date picker
datetime-local - creates a date and time picker
email - creates an input field that allows the user to input a valid email address
file - creates an input field that lets the user upload a file or multiple files
hidden - creates an invisible input field
image - creates a button using an image
month - creates an input field that lets the user enter month and year
password - creates an input field that lets the user enter information securely
radio - creates a radio button
range - creates a range picker from which the user can select the value
reset - creates the button which clears all the form values to their default value
search - allows user to enter their search queries in the text fields
submit - allows user to submit form to the server
tel - defines the field to enter a telephone number
time - creates an input field that accepts time value
url - lets the user enter and edit a URL
week - lets the user pick a week and a year from a calendar

1. Input Type text

The input type text is used to create single-line text fields. It is the default input
type.
<label for="name">Search: </label>
<input type="text" id="name">

Browser Output

The input type text can also contain minlength, maxlength, and size attributes.
For example,

<label for="name">Name</label>
<input type="text" id="name" minlength="4" maxlength="8">

Browser Output

In the above example, values are only allowed between the length
of 4 to 8 characters.

2. Input Type button

The input type button is used to create a button with no default functionality.
For example,
<input type="button" value="Click Me!">

Browser Output

The text inside the value attribute is displayed in the button.

Note: Generally, javascript is used to add functionality to such buttons.

3. Input Type checkbox

The input type checkbox is used to create a checkbox input. For example,

<input type="checkbox" id="subscribe" value="subscribe">

<label for="subscribe">Subscribe to newsletter!</label><br>

Browser Output (checkbox unselected)

The checkbox can be toggled between selected and not selected.

Browser Output (checkbox selected)

The value of the checkbox is included in the form data only if the checkbox is
selected and is omitted if the checkbox is not selected.

4. Input Type color

The input type color is used to create an input field that lets the user pick a color.
For example,

<input type="color" id="background">

<label for="background">Background Color</label>

Browser Output (before expanding)

Browser Output (after expanding)

The color picker is inbuilt into the browser. Users can also manually enter the
hex code of the color instead. The UI for the color picker differs from browser to
browser.

5. Input Type date

The input type date is used to create an input field that lets the user input a date
using the date picker interface from the browser. For example,

<label for="birthday">Birthday:</label>
<input type="date" id="birthday">

Browser Output (before expanding)

Browser Output (after expanding)

6. Input Type datetime-local

The input type datetime-local is used to create an input field that lets the user
pick a date and time using a date-time-picker from the browser. The time
selected from the input does not include information about the timezone. For
example,

<label for="meeting-time">Choose a time for your appointment:</label>

<input type="datetime-local" id="meeting-time" >

Browser Output (before expanding)

Browser Output (after expanding)

7. Input Type email

The input type email is used to create an input field that allows the user to input
a valid email address.

<label for="email">Enter your email:</label>

<input type="email" id="email">

Browser Output
This input field throws an error if the value provided is not a valid email. For
example,

Browser Output

8. Input Type file

The input type file is used to create an input field that lets the user upload a file
or multiple files from their device. For example,

<input type="file" name="file">

Browser Output

9. Input Type hidden

The input type hidden is used to create an invisible input field. This is used to
supply additional value to the server from the form that cannot be seen or
modified by the user. For example,
<input type="hidden" name="id" value="123" >

10. Input Type image

The input type image is used to create a button using an image.
<input type="image" src="/submit.png" alt="submit" >

Browser Output

Let's see an example of how we can use it in a form.

<form>
<label for="firstname">First name: </label>
<input type="text" id="firstname" name="firstname"><br><br>
<label for="lastname">Last name: </label>
<input type="text" id="lastname" name="lastname"><br><br>
<input type="image" src="/submit.png" alt="submit" >
</form>

Browser Output
11. Input Type month

The input type month is used to create an input field that lets the user enter
month and year using a visual interface from the browser. For example,

<label for="start">Select Month:</label>

<input type="month" id="start" >

Browser Output (before expanding)

Browser Output (after expanding)

12. Input Type password

The input type password is used to create an input field that lets the user enter
information securely. For example,
<label for="password">Password:</label>
<input type="password" id="password">

Browser Output

The browser displays all the characters the user types using an asterisk (*).

13. Input Type radio

The input type radio is used to define a radio button. Radio buttons are defined
in a group. Radio buttons let users pick one option out of a group of options.

<form>
<input type="radio" id="cat" name="animal" value="cat">
<label for="cat">cat</label>
<input type="radio" id="dog" name="animal" value="dog">
<label for="dog">dog</label>
</form>

Browser Output
From the above example, we can see that all the radio buttons share the
same name attribute. It allows the user to select exactly one option from the
group of radio buttons.

When submitting the form data, the key for the input will be the name attribute,
and the value will be the radio button selected.

Note: The name attribute is used as the key for the data when submitting the
form.

14. Input Type range

The input type range is used to create a range picker from which the user can
select the value. User can select a value from the range given. It has a default
range from 0 to 100. For example,

<label for="range">Select value: </label>

<input type="range" id="range" value="90">

Browser Output
15. Input Type reset

The input type reset defines the button which clears all the form values to their
default value. For example,

<form>
<label for="name">Name:</label>
<input id="name" type="text" /><br />
<input type="reset" value="Reset" />
</form>

Browser Output

Browser Output (after reset)

16. Input Type search
The input type search allows user to enter their search queries in the text fields.
It is similar to input type text. For example,

<label for="search">Search: </label><input type="search" id="search" >

Browser Output

Note: The search input does not work as a search unless we use some JavaScript
to do the search calculation.

17. Input Type submit

The input type submit is used when the user submits the form to the server. It
is rendered as a button. For example,

<input type="submit" value="submit">

Browser Output
Here, The text provided in the value attribute of the input is shown in the button.

18. Input Type tel

The input type tel is used to define the field to enter a telephone number. The
telephone number is not automatically validated to a particular format as
telephone formats differ across the world. It has an attribute
named pattern used to validate the entered value. For example,

<label for="phone">Phone Number:</label>

<input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

Browser Output

The pattern in the above example allows numbers in the format XXX-XX-XXX
where X is a number between 0 and 9.

19. Input Type time

The input type time attribute creates an input field that accepts time value. It
allows users to add time in hours, minutes, and seconds easily. For example,

<label for="time">Select Time:</label>

<input type="time" id="time">

Browser Output (before expanding)

Browser Output (after expanding)

20. Input Type url

The input type url is used to let the user enter and edit a URL. For example,

<label for="url">URL:</label>
<input type="url" id="url" placeholder="https://example.com"
pattern="https://.*">
Browser Output

Here, placeholder is a hint that specifies the expected value of an input field,
and the pattern defines what type of value is accepted. The above pattern
means that only text beginning with https:// will be valid.

21. Input Type week

The input type week lets the user pick a week and a year from a calendar. For
example,

<label for="week">Week</label>
<input type="week" id="week" >

Browser Output

HTML Form Action: POST and GET

The method attribute in the <form> element specifies how the data is sent to
the server.
HTTP methods declare what action is to be performed on the data that is
submitted to the server. HTTP Protocol provides several methods, and the HTML
Form element is able to use two methods to send user data:

• GET method - used to request data from a specified resource

• POST method - used to send data to a server to update a resource

The GET Method

The HTML GET method is used to get a resource from the server. For example,
<form method="get" action="www.programiz.com/search">
<input type="search" name="location" placeholder="Search.." />
<input type="submit" value="Go" />
</form>

When we submit the above form by entering California in the input field, the
request sent to the server will
be www.programiz.com/search/?location=California.

The HTTP GET method adds a query string at the end of the URL to send data to
the server. The query string is in the form of key-value pair followed by ? symbol.

The HTTP GET method adds a query string at the end of the URL to send data to
the server. The query string is in the form of key-value pair followed by ? symbol.

From the URL, the server can parse the user-submitted value where:

• key - location
• value – California

Note: If there is more than one query, the query string will be separated by
a & symbol.

The POST method

The HTTP POST method is used to send data to the server for further processing.
For example,

<form method="post" action="www.programiz.com/user">

<label for="firstname">First name:</label>
<input type="text" name="firstname" /><br />
<label for="lastname">Last name:</label>
<input type="text" name="lastname" /><br />
<input type="submit" />
</form>

When we submit the form, it will add the user input data to the body of the
request sent to the server. The request would look like

POST /user HTTP/2.0

Host: www.programiz.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 33

firstname=Robin&lastname=Williams

The data sent is not easily visible to the user. However, we can check the sent
data using special tools like the browsers' dev tools.
GET vs POST

GET POST

Data sent with the GET method is visible in Data sent with the POST method is
the URL. not visible.

POST requests can't be

GET requests can be bookmarked.
bookmarked.

GET requests can be cached. POST requests can't be cached.

GET requests have a character limit of

POST requests do not have a limit.
2048 characters.

Only ASCII characters are allowed in GET

All data is allowed in POST request
requests.

HTML Iframes
The HTML <iframe> tag is used to embed a webpage within a webpage. It is also
called an inline frame. For example,

<iframe src="https://programiz.pro" title="programiz pro website"

height="500" width="500" ></iframe>

Browser Output
Here,

• src: It is used to specify the URL of the website to be loaded.

• title: It is good practice to include a title attribute so that screen readers

can read the title to users.

Other Attributes for <iframe>

There are some importat attributes for <iframe>. They are:

• height and width

• name
• srcdoc

We will explore each of them in detail.

height and width

We can set the height and width of the <iframe> element with
the height or width attribute. For example,

<iframe src="https://programiz.pro" height="200" width="300"></iframe>

We can also use CSS to set the width and height of the <iframe> using
the style attribute. For example,
<iframe src="https://programiz.pro" style="height:200px;width:300px"></iframe>

It is important to add height and width to allocate space on the webpage for the
iframe. It prevents content from moving when the iframe loads.

name

The name attribute is used to specify the name for an iframe. It can be used as
a target for other HTML elements like the <a> tag. For example,

<iframe src="https://parewalabs.com" name="iframe_target" height="500"

width="400"></iframe>

<a href="https://www.programiz.pro" target="iframe_target">Switch to

Programiz Pro</a>

Browser Output (Before Clicking the link)

Browser Output (After clicking the link)

Here, clicking the <a> tag changes the URL of the target instead of the current
window.

Srcdoc

Instead of a website URL, we can send HTML directly to the iframe, which will
be displayed instead of another website. For example,

<iframe srcdoc="<h1>Learn to code</h1>"></iframe>

Browser Output
HTML <div> Tag
The HTML <div> tag is a non-semantic tag that is used to define division in an
HTML document. For example,

<div>
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>

Browser Output

Here, you can see the <div> tag is used like a container for HTML elements.

Usage of HTML <div>

The HTML <div> tag is generally used to group content and provide CSS styles
using class or id attributes. For example,

<div class="div1">
<h2>This is heading.</h2>
<p>This is a paragraph</p>
</div>

<div class="div2">
<h2>This is another heading.</h2>
<p>This is another paragraph</p>
</div>

<style>
.div1 {
color: red;
}

.div2 {
color: green;
}
</style>

Browser Output

Here, the styling for the first two <div> comes from
selector .div1 and .div2 respectively.

Introduction of CSS
CSS (Cascading Style Sheets) is a styling language used to add style to a webpage.
HTML provides structure and adds content to a webpage, while CSS enhances
the visual presentation of that content through various styles. For example,
CSS Syntax
Here's the syntax to style an element on a webpage:

selector {
 property1: value;

property2: value;

The basic syntax of CSS includes 3 main parts:

• selector - specifies the HTML element that we want to apply the styles

• property1 / property2- specifies the attribute of HTML elements that we

want to change (color, background, and so on)

• value - specifies the new value you want to assign to the property (color
of the text to red, background to gray, and so on)
To learn more, visit the tutorial on CSS Syntax.

Example: Style a Document with CSS

Let us see an example of an HTML page without CSS.

<!DOCTYPE html>
<html lang="en">

<head>
<title>CSS Example</title>
</head>

<body>
<p>This is a sample text.</p>
</body>

</html>

Browser Output

Now, let's add CSS to the above HTML code.

<!DOCTYPE html>
<html lang="en">

<head>
<title>CSS Example</title>

<style>
p{
color: blue;
}
</style>
</head>

<body>
<p>This is a sample text.</p>
</body>

</html>

Browser Output

In the above example, notice the following code:

<style>
p{
color: blue;
}
</style>
• <style> - an HTML tag used to define a section that contains CSS
• p - is a selector that specifies the styles to be applied to all <p> elements
on the page
• color: blue - changes the text color of <p> tag to blue

Adding CSS to HTML

In the last example, we used CSS code inside our HTML file.

<!DOCTYPE html>
<html lang="en">

<head>
<title>CSS Example</title>

<style>
p{
color: blue;
}
</style>
</head>

<body>
<p>This is a sample text.</p>
</body>

</html>

Here, as the CSS code is inside the HTML file itself, it is called internal CSS.

There are other ways to add CSS to HTML as well. To learn more visit Adding
CSS to HTML.

Comments in CSS
Comments are notes written along with the code that is ignored by the
browser. For example,
/* this is css comment */
The CSS comment starts with /* and ends with */. Let's see how we can use
comments with CSS code.

/* Define text color for the div*/

div {
color: blue;
}

/* Define text color for headings */

h1{
color: green;
}

In the above example,

/* Define text color for the div*/

/* Define text color for headings */

is a single line comment. It can be seen while reading the code but gets ignored
by the browser during the rendering of the page.

We can also add a multiline comment on CSS. Simply by ending the comment
in a different line. for example,

/* This is
a multi-line
comment */

Why use comments in CSS ?

 • Comments in code help the person reading the code understand what
you were trying to do when you wrote it.
• This makes it easier for other developers to understand the code and
make changes if necessary.
• Comments are also useful for anyone who needs to maintain the code in
the future.
Why should you learn to use CSS?
We should learn CSS because of the following reasons:

1. Customizes and styles a website

CSS allows you to customize the appearance of your web page content in many
different ways. For example,

<html lang="en">

<head>
<link rel="stylesheet" href="style.css" />
<title>Browser</title>

<style>
p{
background-color: yellow;
color: red;
}
</style>

</head>

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

</html>
Browser Output:

As you can see, we have used CSS to change the font and color of web page
elements. CSS gives us the freedom to present our content in a way that best
suits our design vision.

2. Responsive Design

Responsive web design is a web design approach to make web pages render
well on all devices with different screen sizes and viewports.

With the increase of devices of various sizes, it is important to create

webpages that can adapt to different device sizes.

CSS media queries and other techniques allow the creation of web pages that
can automatically adjust to various changes in the screen size. For example,
Desktop View of Programiz Website
Mobile View of Programiz Website:

Include CSS in a webpage

CSS is used for styling the look and formatting of a document written in HTML.
There are three ways to add CSS in HTML

• Inline CSS: Styles added directly to the HTML element.

• Internal CSS: Styles defined at the head section of the document.
• External CSS: Styles defined in a separate file.
Inline Style
Inline style is the approach of adding CSS rules directly to the HTML element
using the style attribute. For example,

Style

Here,

• style - defines the CSS for the element <p>

• color: red - changes the text of the <p> element to the color red

The style attribute can be added to any element but the styles will only be
applied to that particular element. For example,

<html lang="en">

<head>
<title>Browser</title>
</head>

<body>
<h1>This is h1</h1>
<p>This paragraph doesn't have CSS.</p>
<p style="color:red">This paragraph is styled with inline CSS.</p>
</body>

</html>
Browser Output

Internal CSS
Internal CSS applies CSS styles to a specific HTML document. Internal CSS is
defined inside an HTML document using <style> attribute within the head tag
of an HTML. For example,

<head>
<style>
p{
color: red;
}
</style>
</head>

Here,
• <style> - defines CSS
• p - selects p tag and applies CSS to it
• color: red; - changes the text color of the content of <p> elements to red

Now, let's look at a complete example of how we use internal CSS in an HTML.

<html lang="en">
<head>
<style>
p{
color: red;
}
 </style>
<title>Browser</title>
</head>
<body>
<h1>Internal CSS Example</h1>
<p>This is Paragraph 1</P>
<p>This is paragraph 2</p>
<div>This is a content inside a div</div>
</body>

</html>
Browser Output

Note: The styles defined in an internal stylesheet will only affect the elements
on the current HTML page and will not be available on other HTML pages.

external-css External CSS

External CSS is an approach to applying CSS styles to HTML pages by defining

the CSS in a separate file.

Let's see an example:

p{
color: blue;
}
Here, we have CSS in a separate file named style.css. The external CSS file
should have a .css extension.

The external CSS file can be linked to the HTML document by using
the link element in the HTML. For example,

<head>
<link href="style.css" rel="stylesheet">
</head>

We use the <link> tag to link the style.css file to an HTML document. In the
above code,

• href="style.css" - URL or file path to the external CSS file.

• rel="stylesheet" - indicates the linked document is a CSS file

Example: External CSS

Let's see a complete example of using external CSS in an HTML document.

style.css
p{
color: blue;
}

Now, let's connect it with html file

<html lang="en">

<head>
<link href="style.css" rel="stylesheet">
 <title>Browser</title>
</head>

<body>
<p>This is a sample text.</p>
</body>

</html>

Browser Output:

Using Multiple Stylesheet

We can link multiple CSS file to an HTML file. Suppose we have the following
two CSS files.

style.css

p{
color: red;
}

div {
 color: yellow;
}

main.css

body {
background: lightgreen;
}

Now, let's link these two CSS files to our HTML document.

<html lang="en">

<head>
<link href="main.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Browser</title>
</head>

<body>
<h1>Multiple Stylesheet Example</h1>
<p>This is Paragraph 1</P>
<p>This is paragraph 2</p>
<div>This is a content inside a div</div>
</body>

</html>
Browser Output

Here, we have linked main.css and style.css to our HTML file. Adding multiple
CSS files helps us organize our CSS files into manageable parts.

Inline Style Override Internal Style

If an internal CSS and inline CSS are both applied to a tag, the styling from the
inline tag is applied. Let's see an example.
<html lang="en">

<head>
<style>
h1 {
color: blue;
}

p{
background: red;
}
</style>
 <title>Browser</title>
</head>

<body>
<h1 style="color: green">Priority Example</h1>
<p>This is Paragraph 1</P>
<p style="background: orange">This is paragraph 2</p>
</body>

</html>

Browser Output

As you can see the styling from inline CSS is applied to elements.

CSS Syntax
CSS syntax is used to add CSS to an HTML document. A CSS syntax consists of a
selector and a declaration block. For example,

selector {
property1: value;
property2: value;
}

The basic syntax of CSS includes 3 main parts:

• selector - specifies the HTML element that we want to apply the styles
 • property1 / property2- specifies the attribute of HTML elements that we
want to change (color, background, and so on)
• value - specifies the new value you want to assign to the property
(color of the text to the red, background to gray, and so on)

Example CSS Syntax

Let us see an example of CSS

p{
color: red;
font-size: 20px;
background-color: yellow;
}

Here,

• p - selector that selects all the <p> elements from the document
• color: red; - changes the text color of <p> contents to red
• font-size: 20px; - changes the font size of <p> contents to 20px
 • background-color: yellow; - sets the background of the <p> element
to yellow

We add CSS to an HTML file using <style> tag. For example,

<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>Browser</title>
<style>
p{
color: red;
font-size: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

Browser Output:

Example: Styling Multiple Elements

We can apply CSS to multiple HTML elements at once. For example,

h1, p
{
color: red;
font-size: 20px;
background-color: yellow;
}

Here, the CSS rules will be applied to both the <h1> and <p> elements. Now,
let's add the above CSS code to our HTML file.

<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>Browser</title>
<style>
h1,p {
color: red;
font-size: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<h1>This is the heading</h1>
<p>This is a paragraph</p>
<div>This is a div</div>
</body>
</html>

Browser Output
CSS Syntax for Inline CSS

We can apply CSS to a single HTML element using the style attribute within the
HTML tag. This is called inline CSS. For example,
<p style="color: blue">This text will be blue.</p>

Browser Output

Here,

style="color: blue"

changes the text color of the paragraph to blue.

Multiple Properties in Inline CSS

We can also add multiple styling using inline CSS. For example,

<p style="color: blue; font-size: 50px">This text will be blue.</p>

Browser output

Here, we have used multiple properties by separating them with a (;)

semicolon.

CSS Essential Concepts

CSS is the language for styling web pages, and it has a few essential concepts
that are important to understand.

These concepts includes:

• Inheritance
• Rule Order
• Style Rule Hierarchy
• Specificity
• Box Model

By learning these concepts, we can build a strong foundation for

understanding and using CSS effectively.

Let's look at each of these in detail.

Inheritance

In CSS, inheritance passes the styles directly from the parent element to its
child elements.

The child elements normally take the same styles that have been assigned to
the parent, unless they are provided their own styles.

This mechanism ensures a consistent design across a webpage.

Let's look at an example.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

 <meta name="viewport" content="width=device-width, initial-scale=1.0"
/>

<link rel="stylesheet" href="style.css" />

<title>CSS Inheritance</title>

</head>

<body>

<section>

<h2>This is a heading.</h2>

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

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

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

</section>

</body>

</html>

CSS

section {

color: blue;

}
Browser Output

In the above example,

section {

color: blue;

sets the text color of all child elements of section i.e h2 and p to blue.

This minimizes the need for repetitive declaration of styles, hence maintaining
uniformity across the multiple elements.

Note: The inheritance behavior in CSS is property-specific, and not all

properties are inherited by child elements.

Rule Order

Rule order refers to the sequence in which CSS rules are applied to the HTML
elements.

The order of CSS rules determine the priority for the styles. The later rules
overrides the earlier ones and ensures that the most recent styles are applied.

Let's look at an example.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS Rule Order</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
CSS

p{
color: red;
}

/* overrides color previous color value */

p{
color: blue;
}

Browser Output

Here, the paragraph color is blue because it is declared last in the stylesheet,
overriding all previous values.

Style Rule Hierarchy

The style rule hierarchy determines the priority of CSS rules when multiple
rules target the same element.

In CSS, the following hierarchy of style priorities applies:

• Inline styling: Styles applied directly within HTML element.

• ID selectors: Styles elements with specific ID.
• Class and attribute selectors: Styles elements with certain class or
attribute.
• Element selectors: Styles elements with specific tag name.

Let's look at an example.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Style Rule Hierarchy</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class=""paragraph"" id="unique">
This text will be red as the ID selector takes precedence over other
selectors.
</p>
</body>
</html>

CSS
/* id selector */
#unique {
color: red;
}

/* class selector */
.paragraph {
color: green;
}

/* element selector */
p{
color: blue;
}

Browser Output

In the above example, the id selector overrides the styles of class and element
selector. This is because the id selector has more priority than the class and
element selectors.

Specificity

Specificity in CSS determines which style rules take precedence when multiple
rules target the same element.
This helps the browser prioritize and apply the most relevant styles.

Let's look at an example.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS Specificity</title>
</head>
<body>
<div>
<p id="para">This is a paragraph.</p>
</div>
</body>
</html>
CSS

div p {
color: blue;
}

p{
color: orange;
}

Browser Output
In the above example, the element selector p sets the color of all p elements
to orange.

However, the selector div p is more specific for selecting paragraph so the
color of paragraph is colored blue.

Note: The more specific a CSS selector is, the higher its priority. This means
that if two selectors match the same element, the more specific selector will
be used to style the element.

Box Model

The box model specifies that every element in HTML is represented as a

rectangular box. It helps to understand how elements are structured and
interact with each other on a webpage.

Let's look at an example.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>CSS Box Model</title>
<link rel="stylesheet" href="style.css" />
 </head>
<body>
<h2>CSS Box Model</h2>
<div>
<p>This is a <span>paragraph</span> inside div element.</p>
</div>
</body>
</html>

CSS
h2, div, p, span {
border: 1px solid;
}

Browser Output

Here, the styles cause all h2, div, p, and span elements to have a 1px solid
border. This shows that all elements are rectangular in nature.

These essential concepts allow us to understand how CSS rules behave and
help to design layouts more effectively.

CSS Selectors
CSS selectors are used to select the HTML elements that are to be styled by
CSS. For example,

h1 {
color: red;
}

Browser Output

Here, the h1 is the selector that selects all the h1 elements of our document
and changes their color to red.

Types of Selector
There are the following different types of selectors in CSS.
• Element selector
• Id selector
• Class selector
• Universal selector
• Group selector
• Attribute selector

Now, let's learn about them in detail.

Element Selector
The element selector selects HTML elements (p, div, h1, etc) and applies CSS to
them. For example,

Let's see an example,

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS selectors</title>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

CSS

h1 {
color: red;
}

p{
color: orange;
}
Browser Output
In the above example, the element selector

• h1 selects all h1 elements and styles their color to red

• p selects all p elements and styles their color to orange

Note: The element selector is also referred to as a tag selector because it

selects HTML elements based on their tag names.

ID Selector

The id selector selects the HTML element with a unique identifier (id) and adds
CSS to it.

The id selector is specified using the hash (#) character, followed by the id of
the element.

Let's see an example,

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS selectors</title>
</head>
<body>
<p>First Paragraph</p>
<p id="second-paragraph">Second Paragraph</p>
<p>Third Paragraph</p>
</body>
</html>

CSS

#second-paragraph {
color: red;
}

Browser Output
 Here,

• #- id selector
• second-paragraph- the name of the id

The id selector #second-paragraph selects the second paragraph and styles the
text color to red.

Note: The id selector is unique and selects one unique element.

Class Selector

The class selector selects the HTML element using the class attribute and
applies CSS to it.

The class selector is specified using the period (.) character, followed by the
class name.

Let's see an example,

HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS selectors</title>
</head>

<body>
<h2>Section First</h2>
 <p class="first-paragraph">This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<h2>Section Second</h2>
<p class="first-paragraph">This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>

CSS

.first-paragraph {
background-color: orange;
}

Browser Output

Here,

• . - class selector
• first-paragraph-name of the class
The class selector .first-paragraph selects all the paragraphs having the first-
paragraph class name and styles background-color to orange.
The class selector .first-paragraph selects all the paragraphs having the first-
paragraph class name and styles background-color to orange.

Universal Selector

The universal selector selects every single HTML element on the page. It is
written using the asterisk ( * ) character.

Let's see an example,

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS selectors</title>
</head>
<body>
<h1>Heading</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</body>
</html>
CSS
*{
color: red;
}

Browser Output

In the above example, the universal selector * selects all the HTML elements
and applies the red color.

Note: The universal selector is also referred to as the wildcard selector.

#group-selector Group Selector

The group selector allows you to select multiple elements and apply the same

style to all of them.

Let's see an example,

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS selectors</title>
</head>

<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

CSS

h1, p {
color: blue;
}

Browser Output

Here, the code applies CSS styling to all <h1> and <p> elements. Notice that we
have used , to separate the HTML elements..
Attribute Selector

The attribute selector selects elements based on specific attribute values.

The syntax for the attribute selector is:

Element[attribute]

Let's see an example,

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS selectors</title>
</head>
<body>
<p class="first">This is a first paragraph.</p>
<p>This paragraph doesn't have a class attribute.</p>
<p class="third">This is a third paragraph.</p>
<p class="fourth">This is a fourth paragraph.</p>
</body>
</html>

CSS

p[class] {
background-color: orange;
}
p[class="third"] {
color: blue;
}

Browser Output

In the above example, the attribute selector

• p[class] selects all p elements having the class attribute and styles their
background color to red.

• p[class="third"] selects all p elements with the .third class name and
styles their color to blue.

Note: This selector only selects an element if a specified given attribute exists.

CSS Pseudo-Classes Selectors

CSS pseudo-classes selectors select the HTML elements based on their state or
position. For example,
button:hover {
background-color: red;
color:black;
}

Browser Output
Here, hover pseudo-class changes the styles of button while placing the mouse
over it.

Syntax of Pseudo Class Selector

The syntax of a pseudo-class selector is as follows:

element:pseudo-class {
/* CSS styles */
}

Here,

• element: specifies the HTML element

• pseudo-class: specifies the specific state of the element that we want to
target

Pseudo-class keywords are added to the selectors and preceded by a colon (:).

Types of Pseudo-Classes
There are the following types of pseudo-classes in CSS:
• Structural pseudo-class: Selects elements based on their position in
document such as :first-child, :last-child, etc.
• Link pseudo-class: Selects the links based on their state such
as :link, :visited, etc.
• UI pseudo-class: Selects the form elements based on their state such
as :enabled, :disabled, etc.

Let's learn each of them in detail.

Structural Pseudo-Classes
Structural pseudo-class selects elements based on their position in the
document. There are following structural pseudo-classes.

CSS first-child Pseudo-Class

The first-child pseudo-class selector styles the first child of its parent element.
For example,

HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>CSS first-child</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
 <p>This is the third paragraph.</p>
</div>
</body>

</html>

CSS

div p:first-child {
color: red;
}

Browser Output

Here, the div p:first-child selector selects the first paragraph element that is a
direct child of the div element and changes its color to red.

CSS last-child Pseudo-Class

The last-child pseudo-class selector styles the last child of its parent element.
For example,

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>CSS last-child</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
</html>

CSS

div p:last-child {
color: red;
}

Browser Output
Here, the div p:last-child selector selects the last paragraph element that is a
direct child of the div element and changes its color to red.

CSS first-of-type Pseudo-Class

The first-of-type pseudo-class selector styles the first element of a particular

type within the parent. For example,

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>CSS first-of-type</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2>Section one</h2>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</div>
<h2>Section two</h2>
<div>
 <p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</div>
</body>
</html>

CSS

p:first-of-type {
color: red;
}

Browser Output

Here, the first-of-type pseudo-class selects the first p element within the
parent elements and changes the text color to red.

CSS not Pseudo-Class

The not pseudo-class selector styles the elements that do not match the user
defined selector. For example,

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>CSS Pseudo-Classes</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div>
<p>This is the first paragraph.</p>
<p class="special-paragraph">This is a special paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
</html>

CSS

p:not(.special-paragraph) {
color: red;
}
Browser Output

In the above example,

p:not(.special-paragraph) {
color: red;
}

select all p elements that are not of the class special-paragraph.

This means that the first and third paragraphs will be red, but not the second
paragraph.

CSS empty Pseudo-Class

The empty pseudo-class selector styles every element that has no children. For
example,
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>CSS Pseudo-Classes</title>
<link rel="stylesheet" href="style.css" />
</head>
 <body>
<!--empty div-->
<div></div>
<!--div having child elements-->
<div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
</body>
</html>

CSS

div:empty {
width: 100px;
height: 20px;
background-color: red;
}

Browser Output

Here, the empty pseudo-class selects and styles only the empty div element.

Link Pseudo-Classes

Link pseudo-classes select links based on their state. There are following link
pseudo-classes.
CSS link Pseudo-Class
The link pseudo-class selector styles all the unvisited links. For example,

HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS Pseudo-Classes</title>
</head>

<body>
<p>Find additional information from <a href="#">here</a>.</p>
</body>

</html>

CSS
a:link {
text-decoration: none;
color: blue;
font-weight: bold;
background-color: greenyellow;
}

Browser Output
Here, the link pseudo-class selects and styles the link prior to it is clicked or
visited.

Note that as soon as we click on the link, the color changes to purple. This is
the default behavior of the link.
CSS visited Pseudo-Class
The visited pseudo-class selector styles the links that are visited by the user.
For example,
HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS Pseudo-Classes</title>
</head>

<body>
<p>Find additional information from <a href="#">here</a>.</p>
</body>

</html>

CSS

/* styles the default state */

a:link {
text-decoration: none;
color: blue;
font-weight: bold;
background-color: greenyellow;
}
/* styles the visited state */
a:visited {
color: red;
}

Browser Output

In the above example, when the user clicks on the link, the color changes
to red.

CSS focus Pseudo-Class

The focus pseudo-class selector styles the element that is focused by the user.
For example,
HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS Pseudo-Classes</title>
</head>

<body>
<p>Find additional information from <a href="#">here</a>.</p>
</body>
</html>

CSS
/* styles the focused state */
a:focus {
background-color: skyblue;
}

In the above example, the a:focus selector styles link during focus with
a skyblue background color.

CSS hover Pseudo-Class

The hover pseudo-class selector styles the elements when the mouse is placed
over it. For example,
HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
 <link rel="stylesheet" href="style.css" />
<title>CSS Pseudo-Classes</title>
</head>

<body>
<p>Find additional information from <a href="#">here</a>.</p>
</body>

</html>

CSS
/* styles the link state */
a:link {
text-decoration: none;
color: blue;
font-weight: bold;
}

/* styles the visited state */

a:visited {
color: purple;
}
/* styles the hover state */
a:hover {
background-color: greenyellow;
}

Browser Output
In the above example, the a:hover selector adds a background color to link
while hovering.

Note: The hover pseudo-class can be used with any element, not only with the
links.

CSS active Pseudo-Class

The active pseudo-class selector styles the elements when the user clicks on it.
For example,
HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS Pseudo-Classes</title>
</head>

<body>
<p>Find additional information from <a href="#">here</a>.</p>
</body>

</html>

CSS

/* styles the link state */

a:link {
text-decoration: none;
color: blue;
font-weight: bold;
 background-color: greenyellow;
}

/* styles the visited state */

a:visited {
color: purple;
}

/* styles the hover state */

a:hover {
text-decoration: underline;
}
/* styles the active state */
a:active {
color: red;
}
Browser Output

In the above example, the a:active selector styles link when it is active
with red color.

Note: The order of providing link pseudo-classes is important. The correct

sequence is link, visited, hover, and active to ensure that styles are applied
correctly.

UI Pseudo-Classes
A UI pseudo-class selects elements based on their state or interaction with the
user.
CSS enabled Pseudo-Class
The enabled pseudo-class selects and styles any enabled element.
An element is enabled if it can be selected, clicked on, typed into, etc., or
accepts focus.
Let's look at an example.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS Pseudo-Classes</title>
</head>
<body>
<input type="text" placeholder="Enter your username" />
<button>Submit</button>
</body>
</html>
CSS

input:enabled {
border: 2px solid blue;
}
Browser Output

Here, the enabled pseudo-class selects the input element and adds a
blue solid border of 2px.

CSS disabled Pseudo-Class

The disabled pseudo-class selects and styles elements that are
disabled. It can form elements like input fields or buttons that the user
cannot interact with.
Let's look at an example.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS Pseudo-Classes</title>
</head>
<body>
<input type="text" placeholder="Username..." />
<button disabled>Submit</button>
</body>
</html>

CSS

button:disabled {
cursor: not-allowed;
}

Browser Output

Here, the cursor property sets the cursor to a not-allowed when the user hovers
over the disabled button.
Note: To use the disabled pseudoclass selector, we need to add the disabled
keyword to the HTML element.

CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the
part of CSS rule set. CSS selectors select HTML elements according to its id, class,
type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p{
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p>This style will be applied on every paragraph.</p>
13. <p id="para1">Me too!</p>
14. <p>And me!</p>
15. </body>
16. </html>
 Output:
This style will be applied on every paragraph.

Me too!

And me!

2) CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific

element. An id is always unique within the page so it is chosen to select a single,
unique element.
It is written with the hash character (#), followed by the id of the element.
Let?s take an example with the id "para1".

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #para1 {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p id="para1">Hello Javatpoint.com</p>
13. <p>This paragraph will not be affected.</p>
14. </body>
15. </html>
Output:
Hello Javatpoint.com
This paragraph will not be affected.

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used
with a period character . (full stop symbol) followed by the class name.

Note: A class name should not be started with a number.

Let's take an example with a class "center".

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is blue and center-aligned.</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>
Output:
This heading is blue and center-aligned.
This paragraph is blue and center-aligned.

CSS Class Selector for specific element

If you want to specify that only one specific HTML element should be affected
then you should use the element name with class selector.
Let's see an example.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is not affected</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html> Output:
This heading is not affected
This paragraph is blue and center-aligned.

4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements
on the pages.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. *{
6. color: green;
7. font-size: 20px;
8. }
9. </style>
10. </head>
11. <body>
12. <h2>This is heading</h2>
13. <p>This style will be applied on every paragraph.</p>
14. <p id="para1">Me too!</p>
15. <p>And me!</p>
16. </body>
17. </html>
Output:
This is heading

This style will be applied on every paragraph.

Me too!

And me!

5) CSS Group Selector

The grouping selector is used to select all the elements with the same style
definitions.
Grouping selector is used to minimize the code. Commas are used to separate
each selector in grouping.
Let's see the CSS code without group selector.
1. h1 {
2. text-align: center;
3. color: blue;
4. }
5. h2 {
6. text-align: center;
7. color: blue;
8. }
9. p{
10. text-align: center;
11. color: blue;
12. }
As you can see, you need to define CSS properties for all the elements. It can be
grouped in following ways:
1. h1,h2,p {
2. text-align: center;
3. color: blue;
4. }
Let's see the full example of CSS group selector.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1, h2, p {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. <h2>Hello Javatpoint.com (In smaller font)</h2>
14. <p>This is a paragraph.</p>
15. </body>
16. </html> Output:

What is Bootstrap
o Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing a responsive and mobile friendly website.
o It is absolutely free to download and use. o It is a front-end framework
used for easier and faster web development.
o It includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many others.
o It can also use JavaScript plug-ins. o It facilitates you to create responsive
designs.

3. <head>
4. <title>This is a Bootstrap example</title>
5. <meta name="viewport" content="width=device-width, initial-scale=1">
6. <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/boots
trap.min.css">
7. </head>
8. <body>
9. <div class="container">
10. <h1> First Bootstrap web page</h1>
11. <p>Write your text here..</p>
12. </div>
13. <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"
></scrip t>
14. <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.mi
n.js"></script>
15. </body>
16. </html>

History of Bootstrap
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was
released as an open source product in August 2011 on GitHub.

In June 2014 Bootstrap was the No.1 project on GitHub.

First Bootstrap Example (with responsive fixed width container)

1. <!DOCTYPE html>
2. <html lang="en">