Part 1: Using Inline and Block Elements
- Create a Section for a Blog Post:
- Add a title using a <h1> tag.
- Use a <div> or <section> to contain your content.
- Write a short paragraph using the <p> tag.
- Highlight specific words in the paragraph using inline elements such as <strong> and <em>.
Part 2: Adding Semantic HTML
- Design the Page Layout:
- Add a <header> that includes:
- A title (<h1>) for your webpage.
- A navigation menu using a <nav> element with links (<a> tags) to three sections: Home, Blog, and Contact.
- Add a <main> section containing the blog post from Part 1.
- Add a <footer> with copyright information and a link to the privacy policy.
- Add a <header> that includes:
Part 3: Implementing Accessibility
- Enhance Accessibility:
- Add ARIA attributes where needed:
- Use aria-label for navigation links in the <nav> element.
- Add ARIA attributes where needed:
To complete this test, you will use the EduCourse Code Editor below to write the provided HTML code. The editor is specifically designed to help you practice coding with immediate feedback. After writing your code, click the Test Your Code button. If your code is correct, you will receive a green success message indicating that everything is written properly. This confirmation ensures your code is free of errors and follows the required structure. Once you see the green message, you can preview the outcome of your code in the built-in browser preview tool. This feature allows you to see how your webpage will look and function, giving you a clear understanding of how your code translates into a visual format. If your code is incorrect you will receive an error message with what needs to be added again. You may start the task again. By completing this task, you’ll gain confidence in coding and see the results of your work instantly.
HTML Blog Layout Practice
Write the HTML document based on the instructions and click “Test Your Code”.