Հայերեն Русский

Homework 3: Designing an HTML5 Semantic Webpage

Overview

For this assignment, you will either create a new webpage or revise an existing webpage to utilize HTML5 semantic elements effectively, integrate essential meta tags, and apply mobile-friendly design principles. This task aims to reinforce your understanding of HTML5's features and best practices to enhance accessibility, SEO, and user experience.

Objectives

Requirements

Part 1: Semantic Structure
  1. Webpage Content:
    • Create a webpage with a clear topic (e.g., a personal portfolio, a small business page, or an informational page about a hobby or interest).
    • Use HTML5 semantic elements such as <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> to structure the content.
    • Each section should be appropriately labeled with headings (<h1> through <h6>) that reflect the structure and hierarchy of the content.
Part 2: Meta Tags and Character Encoding
  1. Head Section Setup:
    • Include a <meta charset="utf-8"> tag to specify the character encoding.
    • Add <meta name="viewport" content="width=device-width, initial-scale=1.0"> to ensure your page is mobile-friendly.
    • Use <meta name="description"> to provide a brief description of your webpage, which is crucial for SEO.
Part 3: Responsive Design
  1. CSS for Mobile-Friendly Layouts:
    • Attach an external CSS file where you will write styles for your page.
    • Use media queries to adapt the layout to different screen sizes (e.g., smartphones, tablets, desktops).
    • Ensure images and other media are scalable, possibly using techniques like max-width: 100% and height: auto for images.
Part 4: Validation and Testing
  1. Validate and Test Your Webpage:
    • Use tools like the W3C HTML Validator to check your HTML for errors and ensure it complies with web standards.
    • Test your webpage on multiple devices or using device simulation features in web development tools to ensure it looks good and functions well on all screen sizes.

Submission Guidelines

Evaluation Criteria

This assignment provides a practical opportunity to apply what you've learned about HTML5, focusing on creating web content that is both accessible and effective across various platforms and devices. Good luck!