I recently embarked on a journey to understand the structure of HTML5 language better. As a beginner, when I opened the MDN Web Docs website, I was overwhelmed by the sheer volume of information available. To tackle this, I decided to create something like a crib—a comprehensive mind map table of all HTML5 elements, their possible attributes, and values.
I utilized the resources available on MDN Web Docs extensively. Additionally, I leveraged the assistance of ChatGPT to help me organize and categorize the HTML elements accurately. With their help, I classified all elements into ten distinct groups:
- Document Structure and Meta
- Text Formatting
- Semantic Elements
- Links and Navigation
- Embedded Content Element
- Interactive Elements
- Tables
- Forms
- Lists
- Miscellaneous
Each group contains a collection of HTML5 elements with their respective attributes and possible values. This organization helps streamline the learning process and provides clarity on how different elements relate to each other.
How to Use:
Navigate by Groups: Easily find relevant elements by exploring the categorized groups.
Understand Attributes: Gain insights into the purpose and usage of attributes for each HTML5 element.
Explore Values: Discover the various values that attributes can take, enhancing your understanding of their functionality.
Get Started:
Ready to explore the mind map table? Click here to access the full resource on Miro.
Feedback and Contributions:
As I continue my learning journey, I welcome feedback and contributions to improve the accuracy and completeness of this resource. If you notice any mistakes or have suggestions for enhancements, please feel free to leave a comment or reach out to me directly.
Let's empower each other to become better web developers through collaborative learning and sharing of knowledge.
Happy coding!
P.S. If anyone knows how to attach Miro project to a post, please share with me)
miro.com
Top comments (0)