HTML Academy
Marking up a recipe
Text markup3/21
Back to the list of challenges
  • 1. Let’s start the diary
  • 2. The ul tag, which is used to indicate an unordered list
  • 3. The ol tag, which is used to provide an ordered list
  • 4. The start and reversed attributes
  • 5. Nested lists
  • 6. The dl, dt and dd tags as well as description list
  • 7. The pre tag, which is used to designate preformatted text
  • 8. HTML entities
  • 9. The tag code, or code snippet
  • 10. Combining pre and code tags
  • 11. The tag q, which is used to format inline quotes
  • 12. The blockquote tag, which is used for calling out quotes
  • 13. The br tag, which is used to create a line break
  • 14. The sub and sup tags, which are used to indicate subscript and superscript
  • 15. The time tag, which is used to specify the date and time
  • 16. The em and i tags, which are used to attract the user’s attention
  • 17. The strong and b tags, which are used to strengthen or highlight text
  • 18. The del and ins tags, which are used to highlight changes
  • 19. The div and span tags, style containers
  • 20. Summary of “Text markup”
  • 21. Test: Marking up an article
Eternal revisions
  • Sign up
  • Log in

Register to take up challenges

Registration will only take a minute and let you save your study progress. You can register with your email and password or login via social networks.

or
Log in and continue
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Multi-level shopping list</title> <link rel="stylesheet" href="style.css"> </head> <body> Shopping list Food Fish Fillet of trout, 2 pieces Crucian carp, 5 pieces Perch, 10 pieces Dairy products Sour cream Yogurt Fatty Low-fat Things Toys Scratching post Balls, 2 pieces Care Comb for fur Mousse for whiskers </body> </html>
CSS
body { margin: 0; padding: 0 10px; font-family: "Arial", sans-serif; font-size: 16px; line-height: 20px; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

100%
  • Goal
  • Result
  • Overlay
  • Differences
  • ?

Press Compare to send your code for review.

Failed to load the goal. Try later.

Goal — the interface you need to get.

Result — the way the server sees your code. Can differ from what you see in the mini-browser. The comparison is made between this result and the goal.

Overlay — semi-transparent result is shown above the goal.

Differences — the map of differences between the goal and the result.

Done 0%.
The code has been changed

Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2024

VISAMastercard