HTML Assignment – 5

Basic Questions

  1. Write HTML that includes a <meta> viewport tag for mobile optimization.
  2. Create an example using localStorage-related attributes (Explain conceptually, no JS).
  3. Make a sample HTML page with a <meta name=”description”>.
  4. Write HTML with a <meta name=”keywords”>.
  5. Add a <meta name=”robots”> tag with index, follow.
  6. Create HTML showing a <header> and <footer> with semantic content.
  7. Add a <picture> element showing two images for different screen sizes.
  8. Write HTML with an <img> that uses loading=”lazy”.
  9. Create a simple responsive <img> with width=”100%”.
  10. Make a webpage with a responsive <video> that adjusts to small screens.
  11. Create SEO meta tags for a personal profile page (title, description).
  12. Add Open Graph tags (og:title, og:description, og:image) in the <head>.
  13. Create meta tags for a Twitter card (twitter:card, twitter:title).
  14. Add <meta charset=”UTF-8″> tag in an HTML page.
  15. Create an <article> with a heading and paragraph inside <main>.
  16. Display an <address> element with contact information.
  17. Insert two semantic <section> blocks with headings inside <main>.
  18. Use <time> tag to represent specific dates.
  19. Write HTML that includes role attributes like role=”navigation”.
  20. Create an HTML page with lang=”en” for accessibility.

Intermediate Questions

  1. Create a blog page with a <header>, <main>, <article>, <aside>, <footer>.
  2. Write HTML for a <picture> element with 3 different versions of an image (small, medium, large).
  3. Add three images in a page using loading=”lazy”.
  4. Create an HTML page that is mobile-optimized with the viewport tag and responsive image.
  5. Add <meta name=”robots” content=”noindex, nofollow”> to prevent indexing.
  6. Write correct Open Graph meta tags for a product page.
  7. Create a Twitter Card meta configuration for a blog post.
  8. Insert semantic HTML with <nav>, <section>, <article>, <footer>.
  9. Add <meta http-equiv=”refresh” content=”30″> to refresh a page every 30 seconds.
  10. Write HTML using <input type=”email”> and <input type=”date”>.
  11. Use <input type=”range”> to create a slider input.
  12. Create a form with required fields using only HTML5 validation (required, pattern).
  13. Add alternate text (alt) to three images for accessibility.
  14. Create a simple accessible HTML page using ARIA roles (role=”banner”, role=”main”).
  15. Demonstrate a semantic page with <header>, <nav>, <main> and <aside> arranged properly.
  16. Write HTML that includes WCAG practices: alt text, headings, and correct roles.
  17. Create a <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> example.
  18. Add <link rel=”sitemap” type=”application/xml” href=”sitemap.xml”> to an HTML document.
  19. Create <article> with <time> showing publication date and author’s <address>.
  20. Write a clean HTML structure for a portfolio page (title, bio, projects section).

Advanced Questions

  1. Build a responsive homepage with <header>, <nav>, <main>, <footer> and a <picture> element that adapts images.
  2. Create a semantic blog post page with <article>, <time>, <section> and <aside> for related links.
  3. Add SEO meta tags, Open Graph tags, and Twitter card tags in the <head> of a webpage.
  4. Create a responsive portfolio website layout (bio + projects + contact) using <main>, <article>, <section>.
  5. Build a simple landing page that includes <meta viewport> + <picture> + loading=”lazy” for optimized performance.
  6. Create a business profile webpage with contact info in <address> and Open Graph/Twitter meta tags.
  7. Structure a news page with <header>, <article> (3 posts with <time>), <aside> (ads/related news), <footer>.
  8. Create a multi-device optimized page (viewport + responsive images + lazy loading + clean semantics).
  9. Write an accessible e-commerce product page using ARIA roles, semantic elements, and alt text.
  10. Build a semantic + SEO-friendly + responsive HTML page (with <picture> images, lazy loading, meta tags, and ARIA roles together).