| Level Navigation: 0 | 1 | 2 | 3 | 4 | 5 | 6 | Current Level: 7 | 8 | 9 |
Practice creating multiple elements simultaneously and complete Emmet challenges.
A <section> tag is used to group related content together. Think of it like a chapter in a book or a section in a newspaper. It helps organize your webpage into logical parts. For example, you might have a section for "About Us", another for "Contact Information", and another for "Latest News".
An <article> tag is used for content that could stand on its own, like a blog post, news story, or product review. Think of it like an article in a magazine - it's a complete piece of content that makes sense even if you read it by itself. Articles are often placed inside sections.
Semantic HTML means using HTML tags that describe what the content actually is, not just how it looks. Instead of using <div> for everything, we use meaningful tags like <section>, <article>, <header>, <footer>, <nav>, etc. This makes your code easier to understand and helps search engines and screen readers better understand your content.
section>article*3>p*3 + [TAB]
What happened? Click to see.
This created a section containing three articles, and each article contains three paragraphs! This is a complex structure that would take much longer to write manually.
✅ Commit Reminder:
git add .
git commit -m "Create multiple articles with paragraphs using Emmet"
git push
🔄 Workflow Reminder: Remember to save (
Ctrl + S) and refresh (Ctrl + R) as you make changes!
Try creating the following structures using Emmet shortcuts:
Hint: Think about what you’ve learned:
nav for navigationul>li*4 for 4 list itemsa for linksfooter for footer+ to create sibling elements✅ Commit Reminder:
git add .
git commit -m "Complete Emmet challenges"
git push
🔄 Workflow Reminder: Remember to save (
Ctrl + S) and refresh (Ctrl + R) as you make changes!
Congratulations! You’ve practiced key Emmet shortcuts and version control.
You learned how to:
You now have a solid foundation in Emmet shortcuts for HTML development!
| Level Navigation: 0 | 1 | 2 | 3 | 4 | 5 | 6 | Current Level: 7 | 8 | 9 |