EXPERIMENT NO.

Title: HTML5 Web Page Creation

Name: Aarya Shimpi Date: 30-1-25
Class: SY comp Batch:C3
Roll No: 66 Div: C

Aim: To create a basic and responsive web page using HTML5.

Theory:
Introduction:
HTML, the foundational language for web development, employs various tags to structure and
present content. Links, denoted by the tag, are crucial for connecting different web pages. They
enable seamless navigation and enhance user experience by providing pathways between
related content. The href attribute within the tag defines the destination URL, while attributes
like target control how the link opens, allowing for customization.
Images in HTML are incorporated using the <img> tag, which embeds visual content into web
pages. The src attribute specifies the image source, and additional attributes like alt provide
alternative text for accessibility and SEO purposes. Tables, denoted by the <table> tag,
facilitate the organized display of data. Rows and columns are created using <tr> and <td> tags,
respectively, ensuring a structured and visually appealing presentation of tabular information.
HTML includes structural tags like <span> and <div> to compartmentalize and style content.
The <span> tag is an inline element often used for applying styles or scripting to a specific
portion of text. On the other hand, the <div> tag is a block-level element employed to group
and structure content, allowing for more extensive styling and layout control. Lists, represented
by the <ul>, <ol> and <li> tags, organize content into ordered or unordered lists. They
contribute to the logical structuring of information, aiding in readability and comprehension.
In essence, HTML tags for links, images, tables, spans, divs, and lists collectively form the
foundation of web page structure, navigation, and presentation. Understanding the nuances of
these tags is fundamental for developers seeking to create well-organized, visually appealing,
and accessible web content. HTML5, the latest version of Hypertext Markup Language,
introduces a plethora of new elements and attributes that significantly enhance the structure
and semantics of web documents. In this chapter, we will explore the practical application of
HTML5 by creating web pages that leverage these advanced features.
New Semantic Elements:
HTML5, the latest iteration of Hypertext Markup Language, introduces a set of semantic
elements that significantly enrich the structural and meaningful aspects of web documents.
These elements, including <nav>, <article>, <section>, <header> and <footer> , play a crucial
role in providing a clear and purposeful organization to the content of a web page.
Header and Footer Elements:
In addition to < nav>, <article> and <section> , HTML5 introduces <header> and <footer>
elements to further enhance document semantics. The <header> element is employed to define
the introductory or navigational section at the beginning of a page or a section. It typically
includes headings, logos, and navigation elements. Conversely, the <footer> element represents
the concluding section of a page or a section, containing metadata, copyright information, or
links to relevant resources. By incorporating these elements, HTML5 allows developers to
structure web documents more intuitively, providing a clearer hierarchy and enhancing both
user experience and search engine optimization.
Practical Use Cases:
For instance, the <nav> element is specifically designed for navigation links, ensuring that
menus and links related to site navigation are semantically represented. The <article> element
encapsulates a self-contained piece of content, such as a blog post or news article, contributing
to improved document organization. The <section> element divides content into thematic
groups, emphasizing the importance of grouping related information for better clarity.
Including <header> and <footer> elements further refines the document structure by
designating specific areas for introductory and concluding content, respectively. This
comprehensive set of semantic elements in HTML5 empowers developers to create web
documents that are not only visually appealing but also logically structured for both users and
web crawlers.
Importance of Semantic HTML:
Emphasizing semantic HTML is crucial for creating accessible and search engine-friendly web
pages. By utilizing elements that accurately represent the content's meaning, such as headers,
paragraphs, and new HTML5 semantic elements, developers contribute to improved web
document structure. This not only benefits users with disabilities who rely on assistive
technologies but also enhances SEO by providing search engines with better context and
understanding of the content.
CODE:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Responsive Web Page</title>

<style>

body {

font-family: 'Segoe UI';

margin: 0;

padding: 0;

text-align: center;

background-color: #f4f4f4;

header {

background-color: #333;

color: white;

padding: 20px;

font-size: 24px;

font-weight: bold;

nav {

justify-content: center;

background-color: #444;

padding: 30px;

nav a {

color: white;

text-decoration: none;

margin: 0 20px;

font-size: 18px;

transition: color 0.3s;

nav a:hover {

color: #f4f4f4;
}

footer {

background-color: #333; }

color: white; .login-container button:hover {

padding: 15px; background-color: #555;

position: fixed; }

width: 100%; </style>

bottom: 0; </head>

} <body>

.login-container { <header>

width: 300px; Welcome to My Modern Responsive Web Page

padding: 20px; </header>

background-color: white; <nav>

margin: 100px auto; <a href="#">Home</a>

border-radius: 10px; <a href="#">About</a>

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); <a href="#">Services</a>

} <a href="#">Contact</a>

.login-container h2 { </nav>

margin-bottom: 20px; <div class="login-container">

} <h2>Login</h2>

.login-container input { <form>

width: 100%; <input type="text" placeholder="Username"

required>
padding: 10px;
<input type="password" placeholder="Password"
margin: 10px 0; required>
border: 1px solid #ccc; <button type="submit">Login</button>
border-radius: 5px; </form>
} </div> <footer>
.login-container button { &copy; 2025 My Website | All Rights Reserved
width: 100%; </footer>
padding: 10px; </body>
background-color: #333; </html>
color: white;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 16px;
OUTPUT:

CONCLUSION:
We learned how to create a basic and responsive web page using HTML5 different attributes
and elements.