You're progressing wonderfully with your About Me webpage! So far, you've established a solid foundation and made your page more engaging with images and links. Now, it's time to elevate the user experience further by introducing navigation. This will help visitors easily browse through the different sections of your webpage.
Navigation is a critical component of any webpage, as it allows users to move between different sections or pages. We already know how to create a navigation, so let's enhance your About Me webpage by adding a navigation bar.
HTML, XML1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>About Me - Sections and Navigation</title> 6</head> 7<body> 8 <header> 9 <h1>Welcome to My Website</h1> 10 <nav> 11 <ul> 12 <li><a href="#home">Home</a></li> 13 <li><a href="#about">About</a></li> 14 </ul> 15 </nav> 16 </header> 17 <main> 18 <section id="home"> 19 <h2>Home</h2> 20 <p>This is the homepage of my personal website.</p> 21 <img src="https://codesignal-staging-assets.s3.amazonaws.com/uploads/1718974161470/e877015c-32db-4655-bd20-46aa93158a4f.jpg" alt="A photo of myself" width="300"> 22 <p>Learn more about me <a href="https://en.wikipedia.org/wiki/About.me" target="_blank">here</a></p> 23 </section> 24 <section id="about"> 25 <h2>About Me</h2> 26 <p>Hi! I'm a web development enthusiast eager to learn more.</p> 27 </section> 28 </main> 29 <footer> 30 <p>© 2024 My Personal Website</p> 31 </footer> 32</body> 33</html>
In this snippet, you can see the navigation bar created using the <nav> tag, containing two links to the "Home" and "About" sections of your webpage.
Navigation is a crucial aspect of any webpage for several reasons:
- Improved User Experience: Navigation menus make it easy for visitors to find the information they need quickly, preventing frustration and improving the overall browsing experience.
- Professional Appearance: A well-structured navigation bar contributes to a more polished and professional-looking webpage.
- Organization: Navigation helps you to effectively organize your content, making your webpage more coherent and easy to understand.
By mastering navigation, you will ensure that your About Me webpage is not only beautiful and engaging but also user-friendly and well-organized. Ready to make your website even better? Let's dive into the practice section and implement the navigation bar together!