Challenge: Build a Web Page Using Common HTML Tags

Creating well-structured and accessible web pages is essential in web development. Utilizing semantic and structural HTML5 tags enhances code readability, SEO, and accessibility for users with disabilities. Semantic tags like <header>, <main>, and <footer> give meaning to our content, helping browsers and assistive technologies understand the hierarchy and purpose of different parts of our web page.

In this challenge, you’ll apply these principles to build a static blog post web page on the topic “The Benefits of Regular Exercise” using only HTML5. This exercise will reinforce your understanding of semantic markup and the proper organization of HTML documents.

Requirements

Your task is to create a static HTML5 web page that displays a blog post that adheres to the following requirements:

1. The page must include a title and navigation links.

2. The page provides supplementary content, such as an author bio or related posts.

3. The page must contain footer information like copyright notices.

4. The blog post should contain at least two logical sections, each with a heading.

5. The blog post should include at least one image relevant to the topic.

6. Incorporate a table within the blog post to present data related to exercise benefits.

   1. Include at least three rows of data.

7. Add a form at the end of the article for readers to subscribe to a newsletter.

   1. Include an email input field, and a submit button.

Note: Follow accessibility and SEO best practices

• Group elements with and without semantic meaning where appropriate.

• All images must have alt attributes with descriptive text.

• Ensure all interactive elements are properly labeled.

• Include appropriate semantic and heading tags for different sections.

• Organize your code with proper indentation and nesting to enhance readability.

Planning the structure

Utilize the following HTML5 semantic elements in specific parts of your web page:

• Header: Use <header> to contain the blog’s title and navigation.

  • Inside <header>, use <nav> to list navigation links. Use # to add placeholder links.

  • Use <h1> for blog title.

• Main: Use <main> to wrap the main content.

• Article: Place the blog post content inside an <article>.

  • Inside <article>, use the heading <h2> for the title of the article.

• Sections: Divide the blog post content into logical sections using <section>.

  • Inside each <section>, use heading <h2> or <h3>.

• Image: Include an <img> tag to add a relevant graphic within one of the sections.

  • Use descriptive alt text for images.

• Table: Create a table using <table> tag comparing different types of exercise and their specific benefits.

• Aside: Use <aside> for supplementary information, such as an author bio or links to related articles using <h3> and <ul> tags.

• Footer: Use <footer> to include footer content like contact information or copyright.

• Implement form: At the end of the article, add a form for readers to subscribe to updates.

  • Include a <label> and <input> with type="email" for the email address.

  • Use the for attribute in <label> elements to associate them with their corresponding form controls id attribute.

  • Add a <button> to submit the form.

Try it yourself

Below is a basic template to help you get started with implementing your solution.