<!DOCTYPE html>
<!-- HTML5 document declaration: tells the browser that this document is in HTML5 format -->

<html lang="en">
<!-- html: the top-level tag that wraps the entire document -->
<!-- lang="en": states that this document is written in English (important for screen readers and search engines) -->

<head>
  <!-- head: the area that holds document information that is not shown on screen -->

  <meta charset="UTF-8">
  <!-- charset="UTF-8": sets the character encoding to UTF-8 so that text does not break -->

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- viewport: makes the page fit the screen size on mobile devices -->

  <meta name="description" content="A page introducing the Doe family.">
  <!-- description: meta information shown as the site description by search engines -->

  <title>Introducing Our Family</title>
  <!-- title: the page title shown in the browser tab and bookmarks -->
</head>

<body>
  <!-- body: contains everything that is actually displayed on the browser screen -->

  <!-- ====== Overall page title ====== -->
  <h1>Let Us Introduce Our Family!</h1>
  <!-- h1: the most important heading on the page. Using only one per page is recommended -->

  <!-- ====== Paragraph introducing the whole family ====== -->
  <p>
    Our family is a warm household of four members.
    We live in Seoul, and we treasure spending time together every weekend.
  </p>
  <!-- p: short for paragraph. It represents a single paragraph and gets automatic space above and below -->

  <!-- ====== List of family members ====== -->
  <h2>Family Members</h2>
  <!-- h2: the heading level below h1. Used as the main heading of each section -->

  <ul>
    <!-- ul: unordered list. Used when order does not matter -->
    <li>Father - James Doe (55, office worker)</li>
    <!-- li: list item. Represents each item inside a ul or ol -->
    <li>Mother - Mary Doe (50, teacher)</li>
    <li>Me - John Doe (25, university student)</li>
    <li>Younger sister - Emily Doe (20, high school student)</li>
  </ul>

  <!-- ====== Introducing my father ====== -->
  <h2>Father - James Doe</h2>

  <p>
    My father is an office worker at a large company, and he is a very diligent and sincere person.
    On weekends he is also a skilled cook who makes delicious food for the family.
  </p>

  <p>My father's hobbies and skills:</p>
  <!-- Write an explanatory sentence before a list using a p tag -->
  <ul>
    <li>Fishing - he enjoys fishing with friends once a month</li>
    <li>Cooking - he is especially good at Korean dishes</li>
    <li>Hiking - he climbs mountains every weekend to stay healthy</li>
  </ul>

  <!-- ====== Introducing my mother ====== -->
  <h2>Mother - Mary Doe</h2>

  <p>
    My mother is an elementary school teacher.
    She always leads the mood of our family with bright and positive energy.
    Thanks to her, our home is always warm and harmonious.
  </p>

  <p>My mother's hobbies and skills:</p>
  <ul>
    <li>Reading - she enjoys reading literary novels and essays</li>
    <li>Knitting - she gives the family scarves she has made herself</li>
    <li>Gardening - she grows a variety of plants on the balcony</li>
  </ul>

  <!-- ====== Introducing myself ====== -->
  <h2>Me - John Doe</h2>

  <p>
    I am John Doe, a 25-year-old currently majoring in computer science at university.
    I am very interested in web development, so I study HTML, CSS, and JavaScript whenever I have time.
  </p>

  <!-- div: used to group related content into a single block -->
  <div>
    <p>The technology stack I am learning now:</p>
    <ol>
      <!-- ol: ordered list. Used when the order of the content matters -->
      <li>HTML - web page structure (currently learning)</li>
      <li>CSS - web page styling (next goal)</li>
      <li>JavaScript - web page behavior (the goal after that)</li>
    </ol>
  </div>

  <!-- ====== Introducing my younger sister ====== -->
  <h2>Younger Sister - Emily Doe</h2>

  <p>
    My younger sister Emily is a second-year high school student with an artistic temperament and a love of art.
    She hopes to become a web designer, and someday she wants to build a website together with her older brother.
  </p>

  <p>My sister's hobbies:</p>
  <ul>
    <li>Drawing - she enjoys digital art</li>
    <li>Listening to music - she likes K-POP</li>
    <li>Cooking - she is especially good at baking</li>
  </ul>

  <!-- ====== Things we want to do with the family ====== -->
  <h2>Things We Want to Do Together as a Family</h2>

  <p>Here is a list of the things our family wants to do, arranged in order of importance:</p>
  <!-- Use ol to express priority/order -->
  <ol>
    <li>Family trip to Jeju Island - I want to travel with my family to Jeju Island, which we have never visited</li>
    <li>Camping - I want to spend time with my family grilling barbecue in nature</li>
    <li>Family photo shoot - I want to take a great family photo at a studio</li>
    <li>Cooking contest - I want to see whether my father or I cook better</li>
    <li>Watching movies together - I want to have a movie marathon at home with popcorn</li>
  </ol>

  <!-- ====== Closing paragraph ====== -->
  <h2>Closing</h2>

  <p>
    I have introduced our family to you.
    We each have different personalities, but we are a precious family that cares for and loves one another.
    <!-- span: used to mark only a specific part of a sentence separately (currently just to give it meaning) -->
    <span>I hope we always stay healthy and happy!</span>
  </p>

</body>
</html>