📚 Topic Summary
HTML5 Semantic elements are HTML tags that provide meaning to the structure of a webpage, beyond just presentation. They clearly define different parts of a webpage, such as the header, navigation, main content, and footer. Using semantic elements makes the code more readable for developers and helps search engines understand the content better, improving SEO.
For Grade 7 students learning web basics, understanding these elements is crucial for building well-structured and accessible websites. Semantic elements replace generic <div> tags with meaningful tags like <article>, <aside>, and <nav>, leading to cleaner and more maintainable code.
🧠 Part A: Vocabulary
Match the terms with their definitions:
| Term |
Definition |
| 1. Semantic |
A. The main content of the webpage. |
| 2. Header |
B. Giving meaning or context. |
| 3. Footer |
C. Introductory content for a page or section. |
| 4. Main |
D. Contains supporting content like ads or related links. |
| 5. Aside |
E. Concluding section of a page or section. |
(Answers: 1-B, 2-C, 3-E, 4-A, 5-D)
✍️ Part B: Fill in the Blanks
Complete the following paragraph using the words: <header>, <nav>, <article>, <aside>, <footer>.
The _____ element is used for the introductory content of a webpage, while the _____ element contains navigation links. The main content of a page is enclosed within the _____ element. Supporting information can be placed inside the _____ element. Finally, the _____ element usually contains copyright information or links to related documents.
(Answers: <header>, <nav>, <article>, <aside>, <footer>)
💡 Part C: Critical Thinking
Why are semantic elements important for web accessibility and SEO? Explain in your own words.