HTML Project

In this topic we have looked at the most commonly used and important HTML elements separately, but have not yet created a larger web page combining several elements. Let us do that now.

We are going to create a recipe web site, where we can browse through a list of recipes and see the recipe ingredients and instructions.

We are going to continue improving this same web site over the next couple of topics and courses by adding styling and interactivity to the page.

Goals

  • Divide the page into a navigation, main and footer section.
  • Use <article> elements for each recipe.

Discussion

The final solution can be found at the bottom of the page. At the moment it looks like a page from the early 2000s, but that is okay for now. Let us discuss some of the code and structural decisions.

Header and navigation

We set the web pages main heading title by using an <h1> element. We then list three links to the home, about and contact page. All of this is wrapped in a <nav> element is supposed to represent a section of a page that provides navigation.

Recipes

We are making a recipe web site, so it makes sense that the classify the recipes as the main content. We do this by wrapping them in a <main> element. By using a <main> element, we increase accessibility because many screen readers have functionality to automatically skip to the main content.

Every recipe is wrapped in an <article> element. Articles are supposed to make sense even when separated from its context, and a single recipe is understandable without the surrounding content.

The recipes consist of a <header> with the recipe name, a <section> with a list of ingredients, a <section> with a list of instructions and finally an image of the finished recipe.

Footer

The <footer> provides some copyright information and a link to the company behind the web page.

Code and Preview

Editor
Preview