Skip to main content
Practice

Exploring the body Tag

Let's examine the main sections and structure within the <body> tag.


<header id="hero">​

  • The header section of the webpage, containing primary navigation and website introduction.
  • Internal structure:
    • <nav class="navbar">: Main navigation bar
      • Logo (<span id="logo">)
      • Navigation menu items (<ul class="nav-menu">)
      • Hamburger menu button (<div class="hamburger">): Menu display in mobile environment (Hamburger menu will be detailed in Chapter 2)
    • <section class="header-container">: Website introduction area
      • Includes profile picture, greeting, name, and a brief introduction
      • Instagram link icon

<div class="division"></div>​

  • An empty element for separating sections (can be used for design purposes)

<section id="about" class="container">​

  • 'About' section
  • Includes personal information and a brief self-introduction

<div class="division"></div>​

  • An empty element for separating sections

<section id="interests" class="container">​

  • 'Interests' section
  • Grid layout including photos and videos

<div id="modal">​

  • Modal (popup window) appearing when images or videos are clicked
  • Contains areas for displaying images and descriptive text

<div class="division"></div>​

  • An empty element for separating sections

<section id="memory" class="container">​

  • 'Memories' section
  • Includes an image slideshow

<div class="division"></div>​

  • An empty element for separating sections

<section id="contact" class="container">​

  • 'Contact' section
  • Includes email address and contact information

  • The footer section of the webpage
  • Includes links to Instagram and YouTube

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.