Essential front-end development
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.