Assignments of Class 13: Semantic HTML
Assignments
Assignment 1: Create a Semantic Web Page
Objective: Practice using semantic HTML elements to structure a simple web page.
Instructions:
- Create a New HTML Document: Start with a blank HTML file.
- Add a Header Section: Use the <header> tag to include a website title and a navigation menu.
- Add a Main Content Section: Use the <main> tag to encompass the primary content of your page.
- Include Articles: Inside the <main>, create at least two <article> elements with headings and paragraphs.
- Add a Footer Section: Use the <footer> tag to include copyright information and links to privacy policy and contact page.
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML Page</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article 1</h2>
<p>This is the first article. It provides some information about the topic.</p>
</article>
<article>
<h2>Article 2</h2>
<p>This is the second article. It offers additional insights on the subject.</p>
</article>
</main>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
<p><a href="privacy-policy.html">Privacy Policy</a> | <a href="contact.html">Contact Us</a></p>
</footer>
</body>
</html>
Assignment 2: Enhance an Existing Web Page
Objective: Modify an existing non-semantic HTML page to use semantic HTML elements.
Instructions:
- Obtain a Non-Semantic HTML Page: You can use any HTML page that only uses <div> and <span> tags.
- Convert <div> and <span> to Semantic Elements:
- Replace <div> elements with appropriate semantic tags such as <header>, <footer>, <section>, and <article>.
- Ensure that each section of the page is correctly represented with semantic HTML.
- Ensure Proper Structure: Confirm that the resulting HTML document maintains a logical and meaningful structure.
Example Transformation:
Before:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<div id="header">
<h1>My Page</h1>
<div id="nav">
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div>
</div>
<div id="content">
<div id="section1">
<h2>Section 1</h2>
<p>Content for section 1.</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>Content for section 2.</p>
</div>
</div>
<div id="footer">
<p>© 2024 My Page</p>
</div>
</body>
</html>
After:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<header>
<h1>My Page</h1>
<nav>
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="section1">
<h2>Section 1</h2>
<p>Content for section 1.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>Content for section 2.</p>
</section>
</main>
<footer>
<p>© 2024 My Page</p>
</footer>
</body>
</html>
Assignment 3: Create a Blog Layout
Objective: Design a basic blog layout using semantic HTML.
Instructions:
- Create a New HTML Document: Start with a blank HTML file.
- Structure the Blog Layout:
- Use <header> for the blog’s title and navigation.
- Use <main> to contain the blog posts.
- Each blog post should be wrapped in an <article> tag.
- Use <section> for different sections within each article, such as the content and comments.
- Add a <footer> with information about the blog and contact details.
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog</title>
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>First Blog Post</h2>
<p>This is the content of the first blog post.</p>
<section>
<h3>Comments</h3>
<p>Comment 1</p>
<p>Comment 2</p>
</section>
</article>
<article>
<h2>Second Blog Post</h2>
<p>This is the content of the second blog post.</p>
<section>
<h3>Comments</h3>
<p>Comment 1</p>
<p>Comment 2</p>
</section>
</article>
</main>
<footer>
<p>© 2024 My Blog. All rights reserved.</p>
<p><a href="contact.html">Contact Us</a></p>
</footer>
</body>
</html>
Assignment 4: Enhance a News Article Page
Objective: Use semantic HTML to enhance a news article page.
Instructions:
- Create a News Article Page: Start with an HTML file for a news article.
- Use Semantic Elements:
- Use <header> for the article title and metadata (e.g., publication date and author).
- Use <section> for different parts of the article, such as the introduction, body, and conclusion.
- Include <footer> with additional information like the source or related links.
- Optionally, use <aside> for related news or advertisements.
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News Article</title>
</head>
<body>
<header>
<h1>Breaking News: Major Event Happens</h1>
<p>Published on September 1, 2024 by John Doe</p>
</header>
<main>
<section>
<h2>Introduction</h2>
<p>The introduction to the news article...</p>
</section>
<section>
<h2>Details</h2>
<p>Details of the major event...</p>
</section>
<section>
<h2>Conclusion</h2>
<p>The conclusion of the article...</p>
</section>
<aside>
<h3>Related News</h3>
<p>Link to related articles or updates...</p>
</aside>
</main>
<footer>
<p>Source: <a href="source.html">News Source</a></p>
<p><a href="contact.html">Contact Us</a></p>
</footer>
</body>
</html>
These assignments will help students practice using semantic HTML elements to create well-structured, accessible, and SEO-friendly web pages.
4o mini
You said:
some more
ChatGPT said:
ChatGPT
Here are additional assignments for Class 13: Semantic HTML:
Assignments
Assignment 5: Create a Resume Page
Objective: Design a personal resume page using semantic HTML.
Instructions:
- Create a New HTML Document: Start with a blank HTML file.
- Structure the Resume:
- Use <header> for the resume header, including your name and contact information.
- Use <section> to divide the resume into sections such as Education, Experience, and Skills.
- Use <article> for individual job positions or educational qualifications.
- Add a <footer> with additional contact information or links to your professional profiles (e.g., LinkedIn).
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume</title>
</head>
<body>
<header>
<h1>Jane Doe</h1>
<p>Email: jane.doe@example.com | Phone: (123) 456-7890</p>
</header>
<main>
<section id="education">
<h2>Education</h2>
<article>
<h3>Bachelor of Science in Computer Science</h3>
<p>University of XYZ, 2020</p>
</article>
</section>
<section id="experience">
<h2>Experience</h2>
<article>
<h3>Software Developer</h3>
<p>Tech Solutions Inc., 2021-Present</p>
<ul>
<li>Developed web applications using JavaScript and React.</li>
<li>Collaborated with cross-functional teams to deliver software solutions.</li>
</ul>
</article>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>Node.js</li>
</ul>
</section>
</main>
<footer>
<p>Connect with me on <a href="https://linkedin.com/in/janedoe">LinkedIn</a>.</p>
</footer>
</body>
</html>
Assignment 6: Design a Business Website Home Page
Objective: Create a business home page layout using semantic HTML elements.
Instructions:
- Create a New HTML Document: Start with a blank HTML file.
- Structure the Business Home Page:
- Use <header> for the company logo and navigation menu.
- Use <section> for different sections like About Us, Services, and Contact.
- Use <article> for service descriptions or featured content.
- Include <footer> with company contact details and social media links.
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Business Home Page</title>
</head>
<body>
<header>
<h1>Business Name</h1>
<nav>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Us</h2>
<p>We are a leading company in our industry.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<article>
<h3>Consulting</h3>
<p>Expert advice to help your business grow.</p>
</article>
<article>
<h3>Web Development</h3>
<p>Building responsive and modern websites.</p>
</article>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: contact@business.com | Phone: (987) 654-3210</p>
</section>
</main>
<footer>
<p>© 2024 Business Name. All rights reserved.</p>
<p>Follow us on <a href="https://twitter.com/businessname">Twitter</a> | <a href="https://facebook.com/businessname">Facebook</a></p>
</footer>
</body>
</html>
Assignment 7: Create an Article with Sidebar
Objective: Design a web page with a main article and a sidebar using semantic HTML.
Instructions:
- Create a New HTML Document: Start with a blank HTML file.
- Structure the Page:
- Use <header> for the page title and navigation.
- Use <main> to contain the primary content.
- Inside <main>, use <article> for the main content and <aside> for the sidebar.
- Use <footer> for footer content.
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Article with Sidebar</title>
</head>
<body>
<header>
<h1>Article Title</h1>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Main Article Heading</h2>
<p>This is the main content of the article...</p>
</article>
<aside>
<h2>Related Information</h2>
<p>Additional information or links related to the article...</p>
</aside>
</main>
<footer>
<p>© 2024 Your Website. All rights reserved.</p>
</footer>
</body>
</html>
Assignment 8: Develop a Product Landing Page
Objective: Create a product landing page with semantic HTML.
Instructions:
- Create a New HTML Document: Start with a blank HTML file.
- Structure the Landing Page:
- Use <header> for the product name and call-to-action buttons.
- Use <section> for product features, testimonials, and pricing.
- Use <footer> for additional links and contact information.
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Landing Page</title>
</head>
<body>
<header>
<h1>Product Name</h1>
<button>Buy Now</button>
<button>Learn More</button>
</header>
<main>
<section id="features">
<h2>Product Features</h2>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
</section>
<section id="testimonials">
<h2>What Our Customers Say</h2>
<blockquote>
<p>"This product changed my life!"</p>
<footer>- Happy Customer</footer>
</blockquote>
</section>
<section id="pricing">
<h2>Pricing Plans</h2>
<p>Choose the plan that suits you best.</p>
</section>
</main>
<footer>
<p>Contact us: <a href="mailto:support@product.com">support@product.com</a></p>
<p>Follow us on <a href="https://twitter.com/product">Twitter</a> | <a href="https://facebook.com/product">Facebook</a></p>
</footer>
</body>
</html>
Assignments
Assignments on Semantic HTML
Assignment 1: Create a Simple Semantic Webpage
- Create a webpage with the following:
- A <header> containing the site title and a navigation menu.
- A <main> section with at least two <section> elements for content.
- An <aside> with related links or advertisements.
- A <footer> with copyright information.
Assignment 2: Convert Non-Semantic HTML
- Rewrite the following non-semantic HTML into semantic HTML:
html
Copy code
<div id="header">Welcome to My Blog</div>
<div id="content">This is the main content.</div>
<div id="footer">Contact us at example@example.com</div>
Assignment 3: Accessibility Enhancement
- Create a webpage using semantic HTML elements and ensure it is accessible:
- Add proper <nav> for navigation links.
- Use <main> for the primary content.
- Add <aria-label> attributes where necessary.
Assignment 4: Blog Post Structure
- Design a blog post layout:
- Use <article> for the post content.
- Include <header> with the post title and author.
- Add <footer> for publication date and tags.
- Include a <section> for related articles.
Assignment 5: SEO Optimization
- Build a semantic HTML webpage optimized for SEO:
- Include <meta> tags for description and keywords.
- Use semantic elements like <header>, <section>, <article>, and <footer>.
- Create meaningful headings and subheadings using <h1> to <h6>.
Assignment 6: Semantic HTML Validation
- Create a webpage using semantic HTML elements.
- Validate your HTML code using the W3C Validator.
- Fix any errors or warnings highlighted.
Assignment 7: Webpage Layout with Semantic HTML
- Create a webpage layout for an online store:
- A <header> with the store logo and navigation.
- A <main> section with product details divided into <section> or <article>.
- An <aside> for promotions or offers.
- A <footer> with store information and contact details.
Assignment 8: Highlight Key Text
- Create a semantic webpage where you:
- Use <strong> and <em> to highlight important and emphasized text.
- Use <mark> to highlight key phrases.
- Use <code> to display snippets of code.
Assignment 9: News Article Layout
- Design a news article page:
- Use <article> for each news post.
- Include a <header> with the title and author.
- Use <section> for additional related stories.
- Add a <footer> with the publication date and comments section.
Assignment 10: Create a Semantic Portfolio
- Create a personal portfolio page using semantic HTML:
- A <header> with your name and navigation links.
- A <main> with <section> elements for:
- About Me
- Projects
- Contact Information
- A <footer> with social media links and a copyright notice.
SOLUTIONS
Solution 1: Create a Simple Semantic Webpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Semantic Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Introduction</h2>
<p>This is the introduction section of the webpage.</p>
</section>
<section>
<h2>About</h2>
<p>This section provides information about the website.</p>
</section>
</main>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Resources</a></li>
</ul>
</aside>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
Solution 2: Convert Non-Semantic HTML
<header>Welcome to My Blog</header>
<main>
<p>This is the main content.</p>
</main>
<footer>Contact us at example@example.com</footer>
Solution 3: Accessibility Enhancement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Webpage</title>
</head>
<body>
<header>
<h1>Accessible Navigation</h1>
<nav aria-label="Main Navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Welcome</h2>
<p>This is the home section of the webpage.</p>
</section>
</main>
<footer>
<p>© 2025 Accessible Webpage</p>
</footer>
</body>
</html>
Solution 4: Blog Post Structure
<article>
<header>
<h1>Understanding Semantic HTML</h1>
<p>By Jane Doe</p>
</header>
<p>Semantic HTML helps create accessible and SEO-friendly web pages.</p>
<footer>
<p>Published on January 1, 2025 | Tags: HTML, Accessibility</p>
</footer>
</article>
Solution 5: SEO Optimization
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Learn Semantic HTML for better accessibility and SEO.">
<meta name="keywords" content="HTML, Semantic HTML, Web Development">
<meta name="author" content="John Doe">
<title>Learn Semantic HTML</title>
</head>
<body>
<header>
<h1>Semantic HTML Guide</h1>
<p>Making the web accessible and meaningful.</p>
</header>
<main>
<section>
<h2>Introduction</h2>
<p>Semantic HTML is the backbone of accessible and optimized websites.</p>
</section>
</main>
<footer>
<p>Created by John Doe | Contact: <a href="mailto:john.doe@example.com">john.doe@example.com</a></p>
</footer>
</body>
</html>
Solution 6: Semantic HTML Validation
- Write a webpage using semantic elements (example in Solution 1).
- Use the W3C Validator to check your code.
- Correct any errors or warnings displayed.
Solution 7: Webpage Layout with Semantic HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Store</title>
</head>
<body>
<header>
<h1>Welcome to Our Online Store</h1>
<nav>
<ul>
<li><a href="#products">Products</a></li>
<li><a href="#offers">Offers</a></li>
</ul>
</nav>
</header>
<main>
<section id="products">
<h2>Products</h2>
<p>Here you can find our available products.</p>
</section>
</main>
<aside>
<h3>Promotions</h3>
<p>Check out our latest discounts!</p>
</aside>
<footer>
<p>© 2025 Online Store</p>
</footer>
</body>
</html>
Solution 8: Highlight Key Text
<p>The <strong>importance</strong> of semantic HTML cannot be <em>understated</em>.</p>
<p>Using semantic HTML improves <mark>SEO</mark> and accessibility.</p>
<p>For example, here is a code snippet: <code><header></header></code></p>
Solution 9: News Article Layout
<article>
<header>
<h1>Breaking News: Semantic HTML Matters</h1>
<p>By Alex Smith</p>
</header>
<p>Today, we explore the importance of semantic HTML in modern web development.</p>
<footer>
<p>Published on January 1, 2025</p>
</footer>
</article>
<section>
<h2>Related Stories</h2>
<ul>
<li><a href="#">Why Accessibility Matters</a></li>
<li><a href="#">Improving SEO with HTML</a></li>
</ul>
</section>
Solution 10:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background-color: #333;
color: white;
padding: 1em 0;
text-align: center;
}
header nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
main {
padding: 2em;
}
section {
margin-bottom: 2em;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em 0;
}
footer a {
color: #1e90ff;
margin: 0 10px;
text-decoration: none;
}
.social-links a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<h1>John Doe</h1>
<nav>
<a href="#about">About Me</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- Main Section -->
<main>
<!-- About Me Section -->
<section id="about">
<h2>About Me</h2>
<p>
Hello! I’m John Doe, a passionate web developer specializing in creating responsive and user-friendly websites.
I enjoy coding, learning new technologies, and building projects that make a difference.
</p>
</section>
<!-- Projects Section -->
<section id="projects">
<h2>Projects</h2>
<ul>
<li><strong>Project 1:</strong> <a href="https://example.com">E-commerce Website</a> - A fully functional online store built with HTML, CSS, and JavaScript.</li>
<li><strong>Project 2:</strong> <a href="https://example.com">Portfolio Website</a> - A personal portfolio to showcase my work and skills.</li>
<li><strong>Project 3:</strong> <a href="https://example.com">Weather App</a> - A weather application using an API to display real-time data.</li>
</ul>
</section>
<!-- Contact Information Section -->
<section id="contact">
<h2>Contact Information</h2>
<p>Email: johndoe@example.com</p>
<p>Phone: +123 456 7890</p>
<p>Feel free to reach out via email or phone for any inquiries or collaborations.</p>
</section>
</main>
<!-- Footer Section -->
<footer>
<p class="social-links">
<a href="https://twitter.com/johndoe" target="_blank">Twitter</a> |
<a href="https://github.com/johndoe" target="_blank">GitHub</a> |
<a href="https://linkedin.com/in/johndoe" target="_blank">LinkedIn</a>
</p>
<p>© 2025 John Doe. All Rights Reserved.</p>
</footer>
</body>
</html>
Features of This Code:
- Semantic Tags:
- <header> for the header section with navigation.
- <main> for the main content, containing <section> elements for each category.
- <footer> for the footer with social media links and copyright.
- Navigation:
- Links in the <header> navigate to specific sections using IDs (#about, #projects, #contact).
- Styling:
- Basic CSS styling for layout and responsiveness.
- Styling for links and hover effects.
- Content Organization:
- About Me, Projects, and Contact Information sections are structured for clarity.