Post💻 Day 14: HTML Basics 🚀🔥

💻 Day 14: HTML Basics 🚀🔥 👋 Hello everyone! Welcome back to Day 14 of our HTML journey! 🙌 In the previous lessons, we learned about: 📝 HTML Forms 🔐 Form Validation 📌 Form Attributes Today, we're going to learn something very important for building professional websites: 🏗️ HTML Semantic Elements We'll learn: 🧭 <header>,🧭 <nav>,📄 <main>,📑 <section>,📰 <article>,📌 <aside>,🦶 <footer> 🤔 What is Semantic HTML? Semantic HTML means using HTML elements that clearly describe the meaning and purpose of the content. ① 🏠 <header> The <header> element represents introductory content for a page or section. It commonly contains: 🏷️ Logo 📌 Website title 🧭 Navigation 📝 Introductory content Example: <header> <h1>My Website</h1> <p>Welcome to my website!</p> </header> ② 🧭 <nav> <nav> represents a section containing navigation links. Example: <nav> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </nav> ③ 📄 <main> The <main> element contains the main content of the webpage. Example: <main> <h1>Welcome</h1> <p>This is the main content of my website.</p> </main> ⚠️ Important A page should normally have one main <main> element. ④ 📑 <section> A <section> represents a thematic section of content. Example: <section> <h2>About Me</h2> <p>I am learning web development.</p> </section> You can use sections for: 👤 About 💼 Services 📚 Course 📞 Contact ⑤ 📰 <article> An <article> represents self-contained content that could potentially stand on its own. Examples: 📰 News article 📝 Blog post 📢 Announcement Example: <article> <h2>HTML Basics</h2> <p> HTML is used to structure webpages. </p> </article> ⑥ 📌 <aside> <aside> contains content that is related to the main content but not part of its primary flow. Examples: 📢 Advertisements 👤 Author information 💡 Tips Example: <aside> <h3>Related Topics</h3> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </aside> ⑦ 🦶 <footer> The <footer> represents the footer of a page or section. It commonly contains: © Copyright information 📧 Contact information 📱 Social media links Example: <footer> <p>© 2026 My Website</p> </footer> 🧩 How They Work Together A typical webpage can look like this: ┌─────────────────────────────┐ │ HEADER │ │ Logo + Title │ ├─────────────────────────────┤ │ NAV │ │ Home | About | Contact │ ├─────────────────────────────┤ │ │ │ MAIN │ │ │ │ ┌─────────────────────┐ │ │ │ SECTION │ │ │ │ │ │ │ │ ARTICLE │ │ │ │ │ │ │ └─────────────────────┘ │ │ │ │ ASIDE │ │ Related Content │ │ │ ├─────────────────────────────┤ │ FOOTER │ │ © 2026 Website │ └─────────────────────────────┘ ⚠️ However, don't put semantic elements inside one another randomly. Each element should be used according to its purpose. 💻 Mini Coding Challenge 🚀 Create your own Personal Portfolio Structure using: ✅ <header> ✅ <nav> ✅ <main> ✅ <section> ✅ <article> ✅ <aside> ✅ <footer> Your webpage should contain: 👤 Your name 🏠 Home 🙋 About Me 💻 Your projects 📚 Your skills 📞 Contact information 🔥 Try it by yourself and share on comment.👇👇 ⏭️ Next Lesson 🚀 HTML <div> and <span> We'll learn: 📦 What <div> is ✏️ What <span> is 🔄 The difference between <div> and <span> 🎯 Block-level vs inline elements  Have a wonderful day! 😍❤️ @AbWebDeveloper