"Every HTML Element" by Will Wang provides a comprehensive, searchable, and interactive directory of all current HTML elements. It details each element's permitted content, attributes (including global and ARIA attributes), browser compatibility, and accessibility considerations. The site functions as a practical reference for web developers, allowing them to quickly look up specific element usage details and understand the semantic meaning and purpose of each tag. It encourages best practices by highlighting accessibility implications and offering contextual examples.
The blog post "Every HTML Element" by Will Wang provides a comprehensive, albeit subjective and opinionated, overview of HTML elements, aiming to guide developers toward semantic and effective HTML usage. Wang categorizes elements into several groups based on their function and purpose, offering detailed explanations and examples for each. He emphasizes the importance of using the right element for the right job to ensure proper document structure, accessibility, and search engine optimization (SEO).
The post begins with an introduction stressing the significance of semantic HTML and its benefits. It then dives into the categorization of elements, starting with grouping elements, such as <main>, <article>, <aside>, <section>, and <nav>, elucidating their roles in structuring the layout and content of a webpage. Subsequently, Wang explores text-level semantics, highlighting elements like <h1> through <h6> for headings, <p> for paragraphs, <span> for inline styling or scripting, <strong> and <em> for emphasizing text, <abbr> for abbreviations, <cite> for citations, <dfn> for defining terms, <time> for representing dates and times, <code> for code snippets, and <var> for variables.
The post further examines elements related to links and navigation, including <a> for hyperlinks, <nav> again for navigation sections, and <link> for establishing connections with external resources. Multimedia elements, such as <img> for images, <audio> for sound, and <video> for video, are also discussed in detail, covering their attributes and usage. Embedded content, like <iframe>, <embed>, and <object>, is also addressed, explaining the differences between these elements and their respective use cases.
Wang then delves into the realm of forms and user input, covering elements like <form>, <input>, <textarea>, <select>, <option>, <button>, <label>, <fieldset>, and <legend>. He meticulously explains the various input types and their functionalities, advocating for the appropriate usage of labels and fieldsets for improved accessibility.
Furthermore, the post touches upon tabular data with the <table> element and its related elements like <tr>, <th>, and <td>, explaining how to structure tabular information effectively. It also explores less frequently used elements like <details> and <summary> for creating expandable sections, <dialog> for creating modal dialog boxes, and <progress> and <meter> for displaying progress and measurements. Finally, the post concludes with a section on scripting elements like <script> and <noscript>, highlighting their importance in web development.
Throughout the post, Wang underscores the importance of choosing the correct HTML element based on its semantic meaning and intended purpose, emphasizing that doing so leads to more maintainable, accessible, and SEO-friendly web pages. He also provides practical examples and clear explanations of each element's functionality, making the post a valuable resource for web developers of all skill levels.
Summary of Comments ( 19 )
https://news.ycombinator.com/item?id=42823722
Hacker News users generally praised the linked resource for its comprehensiveness and clear presentation of HTML elements. Several commenters pointed out its usefulness as a quick reference, especially for less common elements or attributes. Some appreciated the inclusion of accessibility considerations and modern HTML5 elements. A few suggested minor improvements, like adding interactive examples or highlighting deprecated elements. One user noted the potential for overload given the sheer number of elements, but overall the reception was positive, with many expressing gratitude for the resource.
The Hacker News post titled "Every HTML Element," linking to iamwillwang.com/dollar/every-html-element/, has generated a moderate number of comments, primarily focusing on the practicality and educational value of the resource, along with some discussion on the evolution and complexity of HTML.
Several commenters appreciate the resource's comprehensive nature, finding it useful as a quick reference for both common and lesser-known HTML elements. They praise its concise explanations and easy-to-navigate format, highlighting its value for both beginners learning HTML and experienced developers needing a refresher. The interactive sandbox feature where users can experiment with different elements is also mentioned favorably.
Some discussion revolves around the sheer number of HTML elements, with some expressing surprise at the extent of the list and pondering the practical usage of some of the more obscure elements. This leads to a tangent about the ever-evolving nature of HTML and web standards, acknowledging how some elements become obsolete while new ones are introduced.
A few commenters offer constructive criticism, suggesting potential improvements like adding semantic groupings of elements or highlighting deprecated/obsolete elements more clearly. There's also a brief exchange regarding the subtle differences in rendering across different browsers, reinforcing the perennial challenge of cross-browser compatibility in web development.
A particularly insightful comment thread explores the balance between using semantic HTML elements correctly and the sometimes necessary use of
<div>and<span>elements for styling purposes. This delves into the tension between semantic purity and practical considerations in web development.While not overwhelmingly lengthy, the comment section provides a valuable perspective on the utility and limitations of the linked resource, offering insights into the current state of HTML and common web development practices.