HTML Tags & Elements Hub 🏷️
Mentor's Note: HTML tags are the building blocks of the web! Just like LEGO blocks, they come in different shapes and sizes, each designed for a specific job. To help you master these foundational concepts, we have divided the topic into 8 bite-sized, detailed guides. Let's explore them! 🧱
📚 Educational Content: This hub links to our step-by-step guides for mastering HTML coding structure.
Follow the modules below in order to build complete mastery of HTML structure:
- Grammar & Rules: Understand syntax, tags vs elements, void tags, and nesting.
- Document Shell: Learn page skeleton setups, doctype declarations, and head meta config.
- Text Formatting: Master headings, paragraphs, preformatted blocks, and inline styles.
- Layout Foundations: Differentiate block vs inline layouts and grouping elements (
div/span).
🚀 The 8 Foundational Guides
Select a guide below to start learning:
1. Anatomy of Elements
Learn the basic grammar rules of HTML. Differentiate between opening tags, closing tags, attributes, and content.
2. Void & Nested Elements
Master elements that don't need closing tags, and learn the parent-child nesting rules (Russian nesting doll analogy).
3. Document Skeleton
Understand the mandatory skeletal framework of a webpage: DOCTYPE, HTML root, Head, and Body containers.
4. Metadata & Head
Configure the webpage's non-visible settings: character sets (charset), titles, description keywords, and mobile responsiveness.
5. Structural Text Elements
Format newspaper-style text using headings (H1-H6), paragraphs (P), line breaks (BR), dividers (HR), and preformatted code blocks (PRE).
6. Inline Text Formatting
Highlight text using bold/strong, italics/em, highlights (mark), subscripts/superscripts (sub/sup), and text deletions.
7. Block vs Inline Modes
Learn the fundamental differences between block elements (which start on new lines) and inline elements (which wrap horizontally).
8. Grouping (Div & Span)
Utilize generic division containers (div) and inline spans (span) to group HTML content for advanced styling with CSS.
🎨 Visualizing the Hierarchy
Here is a quick map of how these 8 guides relate to each other:
🔗 Related Topics
- Anatomy of Elements — Learn the basic grammar of tags, elements, and attributes
- HTML Attributes — Discover how attributes customize element behavior
- Void & Nested Elements — Master nesting rules and void elements
- Document Skeleton — Understand the mandatory page framework
- Create Your First Webpage — Put it all together in a hands-on tutorial