Get started with the building blocks of HTML, the markup language at the core of the internet.

Web Essentials

HTML is used to design standard web pages by using multiple tags and it can be used with multiple assistive languages like CSS and Javascript. In this module, you will learn about HTML tags from scratch. This module will also teach you how to code and create your own web pages using HTML in this interactive web development module for beginners.

Hyper Text Markup Language (HTML)

---
## Coding exercise: Making mint margaritas! 🍃 
---
In this exercise, you will need to do the following: 
- Create a page that showcases a recipe for making mint margaritas. 
- Use a **main-level header** for the recipe name 
- Use two **sub-headers** named as follows:
    1. `Ingredients`
    2. `Instructions`
- Create an **unordered list** with *square bullets* containing the ingredients. 
- Create an **ordered list** with *lower-case Roman numerals* with the instructions for making the margaritas. 
- Add an **image** of the final result of the recipe from a search engine of your choice to your HTML page. Give this image an *alternative text* label. Place this image under the **main level header**.
- Wrap the **main level header** and the **image** in a container. Give this container an `id` attribute, with the value `recipeTitle`.
- Group the elements comprising `Ingredients` and `Instructions` into separate containers:
    - Give each container an `id` value; one named `ingredients`, the other named `instructions`
    - Give both containers a `class` value of `recipeList`



---
# Coding exercise: Making mint margaritas! 🍃 
---
In this exercise, you will need to do the following: 
- Create a page that showcases a recipe for making mint margaritas. 
- Use a **main-level header** for the recipe name 
- Use two **sub-headers** named as follows:
    1. `Ingredients`
    2. `Instructions`
- Create an **unordered list** with *square bullets* containing the ingredients. 
- Create an **ordered list** with *lower-case Roman numerals* with the instructions for making the margaritas. 
- Add an **image** of the final result of the recipe from a search engine of your choice to your HTML page. Give this image an *alternative text* label. Place this image under the **main level header**.
- Wrap the **main level header** and the **image** in a container. Give this container an `id` attribute, with the value `recipeTitle`.
- Group the elements comprising `Ingredients` and `Instructions` into separate containers:
    - Give each container an `id` value; one named `ingredients`, the other named `instructions`
    - Give both containers a `class` value of `recipeList`



In this lesson, we’ll solve a fun exercise involving images and lists, with a flavor of headers, classes, and ids.
Let’s begin!

Before We Begin

HTML Tags

Semantic Web Page Layout with HTML

Self Evaluation

Conclusion

Challenge: Programming with HTML5 Lists and Images

Coding exercise: Making mint margaritas! 🍃