| Ruby Styling (by/via) | | 716 |
| ruby-markup, css |
| Abbreviations Suck (by) | | 715 |
| accessibility |
| “<article>” vs. “<section>”: How to Choose the Right One (by/via) | | 714 |
| semantics, comparisons |
| Roundup of Recent Document Outline Chatter (by/via) | | 713 |
| semantics, accessibility |
| Subheadings, Subtitles, Alternative Titles, and Taglines in HTML (by/via) | | 712 |
| semantics, headings, microcontent, accessibility |
| Abbreviations Can Be Problematic (by) | | 711 |
| accessibility |
| What Is the Best Way to Mark Up an Exclusive Button Group? (by) | | 710 |
| semantics, accessibility, aria |
| Minimal Social Markup (by) | | 709 |
| social-media, minimalism |
| What You Need to Know About ARIA and How to Fix Common Mistakes (via) | | 708 |
| accessibility, aria, mistakes |
| Avoiding “<img>” Layout Shifts: “aspect-ratio” vs. “width” and “height” Attributes (by) | | 707 |
| performance, web-vitals, comparisons, attributes, css |
| Why the HTML Outlining Algorithm Was Removed From the Spec—the Truth Will Shock You! (by) | | 706 |
| semantics, accessibility |
| Two Levels of Customising “<selectmenu>” (by) | | 705 |
| accessibility |
| Best Practices for Images (by) | | 704 |
| images, best-practices |
| What the Hell Is “<!DOCTYPE html>”? | | 703 |
| doctype-switching |
| Farewell to HTML5Rocks (by/via) | | 702 |
| community, history |
| Are You Sure That’s a Number Input? (by) | | 701 |
|
| My Wonderful HTML Email Workflow (by) | | 700 |
| mjml, email, processes |
| HTML Cheatsheet (by) | | 699 |
| examples, cheat-sheets |
| Write HTML Right (by) | | 698 |
| optimization |
| The “Form” Element Created the Modern Web—Was It a Big Mistake? (by/via) | | 697 |
| forms, history, mistakes |
| 8 Shocking HTML Tips You Probably Don’t Know About (by) | | 696 |
| tips-and-tricks |
| Why Are Iframe Titles Important for Accessibility? (via) | | 695 |
| accessibility, frames, writing |
| A Perfect Table of Contents With HTML and CSS (by/via) | | 694 |
| css |
| HTML Cheat Sheet: A Quick Reference Guide for HTML Developers (by/via) | | 693 |
| guides, semantics, examples, cheat-sheets |
| Conditionally Loading CSS or Any Resource Using Media Queries (by) | | 692 |
| media-queries, performance |
| Building a Button Component (by/via) | | 691 |
| components, css, javascript, buttons |
| How the HTML “lang” Attribute Helps Accessibility (via) | | 690 |
| accessibility, attributes, localization |
| Don’t Fight the Browser Preload Scanner (by/via) | | 689 |
| browsers, parsing, performance |
| XHTML Syntax Is Still Worth Using (by) | | 688 |
| xhtml |
| Divs Are Bad! (by) | | 687 |
| semantics |
| Learn HTML [and] CSS (by) | | 686 |
| websites, courses, css |
| What’s Your Heading? (by) | | 685 |
| accessibility, headings, semantics |
| Lost in Translation (by/via) | | 684 |
| videos, design, accessibility, css |
| How to Use Videos With Alpha Transparency on the Web (by) | | 683 |
| how-tos, multimedia, transparency |
| Please, Stop Disabling Zoom (by) | | 682 |
| accessibility, zooming |
| Under-Engineered Multi-Selects (by) | | 681 |
| accessibility, aria |
| Foundations: Lists (by/via) | | 680 |
| accessibility, fundamentals, lists |
| Introducing “inert” (by/via) | | 679 |
| introductions, attributes, accessibility, keyboard-navigation |
| The CSS Art Paradox (by) | | 678 |
| css, art, quality |
| Common Frontend Interview Questions I’ve Been Asked | | 677 |
| interviewing, javascript |
| Non-Interactive Elements With the “inert” Attribute (by/via) | | 676 |
| attributes, semantics |
| Plain Old Semantic HTML: A Perfect Basis for Accessibility (via) | | 675 |
| accessibility, semantics |
| How Web Browsers Work: Parsing the HTML | | 674 |
| browsers, parsing |
| Progressive Enhancement and HTML Forms: Use “FormData” (by/via) | | 673 |
| forms, progressive-enhancement |
| Does Valid and Semantic HTML Still Matter? (by+/via) | | 672 |
| podcasts, semantics, conformance |
| Building a Dialog Component (by/via) | | 671 |
| components, modals, css, javascript |
| Those HTML Elements You Never Use (by) | | 670 |
| semantics |
| How to Turn HTML Webpage Into an Image? (by) | | 669 |
| how-tos, images, conversion |
| Designing Better Breadcrumbs (by/via) | | 668 |
| usability, information-architecture |
| Alternative Text (Alt Text) (via) | | 667 |
| accessibility, writing, alt-text |
| HTML Is All You Need to Make a Website (by) | | 666 |
|
| 12 Years Beyond a HTML Joke (by) | | 665 |
| semantics |
| “aria-labelledby” Usage Notes (by) | | 664 |
| accessibility, aria, labels |
| Accessible Cards (by) | | 663 |
| accessibility, css |
| How to Match HTML Elements With an Indeterminate State (by) | | 662 |
| how-tos, css, selectors |
| HTML-Only Keyboard Shortcuts (by) | | 661 |
| accessibility, keyboard-navigation, keyboard-shortcuts |
| Picture Perfect Images With the Modern “<img>” Element (by/via) | | 660 |
| images, performance, web-vitals |
| Those HTML Attributes You Never Use (by/via) | | 659 |
| attributes |
| Write HTML, the HTML Way (Not the XHTML Way) (by/via) | | 658 |
| xhtml, optimization |
| HTML Semantics (by) | | 657 |
| semantics |
| The Impact That High Quality Mark-Up Can Have on Accessibility, Performance, and Discoverability (by) | | 656 |
| videos, accessibility, performance |
| All HTML and CSS Cheatsheets in One Place (by) | | 655 |
| css, cheat-sheets |
| Building a Loading Bar Component (by/via) | | 654 |
| components, css, javascript |
| The Weirdly Obscure Art of Streamed HTML (by) | | 653 |
| streaming, performance |
| How to Automatically Size a Textarea Based on Its [Text] Using Vanilla JavaScript (by) | | 652 |
| how-tos, javascript |
| Aligning Content in Different Wrappers (by) | | 651 |
| css, alignment |
| It Needs to Map Back to a Role (by) | | 650 |
| accessibility, aria, semantics |
| A Look at the Dialog Element’s Super Powers (by) | | 649 |
| modals, javascript |
| Creating Native Web Components (via) | | 648 |
| web-components, javascript |
| It’s Always Been You, Canvas2D (by/via) | | 647 |
| css, canvas, javascript |
| Foundations: Headings (by/via) | | 646 |
| accessibility, fundamentals, headings, semantics |
| Web Component Pseudo-Classes and Pseudo-Elements Are Easier Than You Think (by/via) | | 645 |
| css, web-components |
| (Not So) Short Note on Being Owned (by) | | 644 |
| aria, accessibility |
| HTML Tips and Tricks | | 643 |
| tips-and-tricks |
| HTML Comments Work in JavaScript Too (by) | | 642 |
| javascript, comments |
| Support for Marking Radio Buttons Required, Invalid (by) | | 641 |
| accessibility |
| Column Headers and Browser Support (by) | | 640 |
| accessibility, semantics |
| There Is No Character Limit for “Alt Text” (by) | | 639 |
| accessibility, alt-text |
| How to Create a Search Page for a Static Website With Vanilla JS (by) | | 638 |
| how-tos, functionality, search, javascript |
| Why Radio Buttons Are Called Radio Buttons in UIs? (by) | | 637 |
| semantics, naming |
| MHTML in Chromium (by) | | 636 |
| browsers |
| Replace JavaScript Dialogs With the New HTML Dialog Element (by/via) | | 635 |
| modals, semantics |
| Introducing the Dialog Element (by/via) | | 634 |
| introductions, modals |
| HTML Cheat Sheet—HTML Elements List Reference (by/via) | | 633 |
| semantics, examples, cheat-sheets |
| 24 Lesser-Known HTML Attributes You May Want to Use (by) | | 632 |
| attributes |
| How to Convert Markdown to HTML (by/via) | | 631 |
| how-tos, markdown, conversion |
| More to Give Than Just the Div: Semantics and How to Get Them Right (by) | | 630 |
| semantics, accessibility |
| Context-Aware Web Components Are Easier Than You Think (by/via) | | 629 |
| web-components, javascript |
| Div Divisiveness (by) | | 628 |
| semantics |
| Find HTML Parsing Errors (by/via) | | 627 |
| browsers, dev-tools, parsing, quality |
| On the Peculiarities of Counting the Number of HTML Elements (by) | | 626 |
|
| Boolean Attributes in HTML and ARIA: What’s the Difference? (by) | | 625 |
| attributes, aria |
| HTML Is General, ARIA Is Specific (by) | | 624 |
| aria |
| Alt Tag Emptiness (by) | | 623 |
| accessibility, images, alt-text, aria |
| Labeling the Point: Scenarios of Label Misuse in WCAG (by/via) | | 622 |
| accessibility, forms, labels, wcag |
| Accessible Heading Structure (by/via) | | 621 |
| accessibility, headings |
| Faster Websites by Using Less HTML (by) | | 620 |
| cross-posts, performance, optimization, minimalism |
| Container Queries (by) | | 619 |
| css, container-queries |
| Form Autocomplete (by/via) | | 618 |
| forms |
| HTML Cheat Sheet (by/via) | | 617 |
| semantics, examples, cheat-sheets |
| 5 Common Misconceptions About WAI–ARIA and Accessibility (via) | | 616 |
| accessibility, aria |
| Image Display Elements (by) | | 615 |
| images, responsive-design |
| How to Define Your Relationship to Sites You Link To (by) | | 614 |
| how-tos, links, semantics, seo |
| Ultimate HTML Cheatsheet (by) | | 613 |
| cheat-sheets |
| 4 HTML Concepts You Didn’t Know (by) | | 612 |
| concepts, tables |
| CSS Can Help Improve Your HTML!? Buttons and Links (by) | | 611 |
| css, buttons, links, accessibility |
| Details/Summary (by) | | 610 |
| semantics |
| Embrace the Platform (by/via) | | 609 |
| css, javascript, web-platform |
| Defer Non-Critical Resources (by/via) | | 608 |
| performance |
| Markup (by/via) | | 607 |
| web-almanac, studies, research, metrics |
| On Yak Shaving and “<md-block>”, a New HTML Element for Markdown (by) | | 606 |
| web-components, markdown |
| The 6 Ways of Writing HTML (and Their Combinations) (by) | | 605 |
|
| Control Layout in a Multi-Directional Website (by/via) | | 604 |
| internationalization, css |
| Dear HTML Element (by) | | 603 |
|
| How to Make Blob Menu Using HTML, CSS and JavaScript (by) | | 602 |
| how-tos, css, javascript |
| Generate a Pull Request of Static Content With a Simple HTML Form (by/via) | | 601 |
| github |
| Get Your “Head” Straight (by/via) | | 600 |
| videos, performance |
| Semantics and How to Get Them Right (by/via) | | 599 |
| videos, semantics, accessibility |
| Detecting Specific Text Input With HTML and CSS (by/via) | | 598 |
| css |
| Designing a Reorderable List Component (by) | | 597 |
| lists, components, css |
| Debugging HTML: Accessibility (by/via) | | 596 |
| accessibility, debugging |
| In Defence of Dialog (by) | | 595 |
| modals |
| Learn Forms (by/via) | | 594 |
| courses, forms |
| Building Real-Life Components: Facebook Messenger’s Chat Bubble (by) | | 593 |
| components, css |
| Accessible Toggles (by/via) | | 592 |
| accessibility, toggles, javascript |
| HTMLoween—HTML, JS, and CSS to Make Your Blood Boil (by) | | 591 |
| css, javascript |
| Indecisive Skip Links and Their Targets—the Renaissance of the “<hr>” Element (by) | | 590 |
| accessibility, skip-links |
| If HTML and ARIA Don’t Allow It, It’s Probably a Bad Idea (by) | | 589 |
| aria, accessibility |
| Switch Role Support (by) | | 588 |
| accessibility, support |
| Making the Web Developer’s Pilgrimage (by) | | 587 |
|
| Semantic “menu” Context (by) | | 586 |
| semantics |
| Decoupling HTML, CSS, and JavaScript in Design Systems (by) | | 585 |
| css, javascript, design-systems |
| HTML With Superpowers (by) | | 584 |
| videos, components |
| Landmarks (by/via) | | 583 |
| aria, accessibility |
| Beginner’s Guide to Responsive Images: How to Get Them Right (by/via) | | 582 |
| guides, images, responsive-design |
| Building a Multi-Select Component (by/via) | | 581 |
| components, css, javascript |
| How to Win at CORS (by) | | 580 |
| how-tos, security, cors, http |
| The Autofill Dark Pattern (by/via) | | 579 |
| forms, anti-patterns |
| A Tangled Web of ARIA (by) | | 578 |
| accessibility, aria |
| Buttons vs. Links (by) | | 577 |
| semantics, buttons, links, comparisons |
| The Options for Password-Revealing Inputs (by/via) | | 576 |
| css, security, passwords, usability |
| How to Implement and Style the “Dialog” Element (by/via) | | 575 |
| how-tos, modals, css |
| How to Build an Expandable Accessible Gallery (by/via) | | 574 |
| how-tos, accessibility, css |
| Redundantly Redundant a11y Accessibility (by) | | 573 |
| accessibility |
| Links, Missing “href” Attributes, and Over-Engineered Code (by) | | 572 |
| attributes, links, accessibility |
| Declaring Page Language—and Declaring Changes in Language (by) | | 571 |
| accessibility, browsers |
| How I Built a Modern Website in 2021 (by) | | 570 |
| css, javascript |
| Comparing Page Language Declaration Setups in Screen Readers (by) | | 569 |
| accessibility, http, screen-readers, assistive-tech, comparisons |
| Specification for Spoken Presentation in HTML (by+/via) | | 568 |
| pronunciation |
| 7 Useful HTML Attributes You May Not Know (via) | | 567 |
| attributes |
| Intro to MJML: Responsive HTML Email Coding Made Easy (by/via) | | 566 |
| introductions, mjml, email, responsive-design |
| 29 Projects to Help You Practice HTML CSS JavaScript 2021 (by) | | 565 |
| css, javascript |
| Blowing Up HTML Size With Responsive Images (via) | | 564 |
| images, performance, responsive-design |
| Element Diversity (by) | | 563 |
|
| Twitter’s Div Soup and Uglyfied CSS, Explained (by) | | 562 |
| css, twitter+x |
| Building a Split-Button Component (by/via) | | 561 |
| components, css, javascript |
| Building a Stepper Component (by) | | 560 |
| components, css |
| HTML Cheatsheet (by) | | 559 |
| semantics, examples, cheat-sheets |
| Small Wins for Accessibility and Resilience (by) | | 558 |
| accessibility, resilience |
| Named and Framed (by) | | 557 |
| accessibility |
| One Favicon to Rule Them All (by) | | 556 |
| images, favicons |
| ARIA Spec for the Uninitiated (by/via) | | 555 |
| accessibility, aria |
| The Complete Guide to HTML Forms and Constraint Validation (by/via) | | 554 |
| guides, forms, validation |
| On the “<dl>” (by) | | 553 |
|
| The Ultimate Cheat Sheet List for Web Developers (by) | | 552 |
| css, javascript, cheat-sheets |
| 6 Useful Frontend Techniques That You May Not Know About (by) | | 551 |
| css, javascript, techniques |
| Accessibility of the “Section” Element (by) | | 550 |
| accessibility |
| Designing for the Unexpected (by/via) | | 549 |
| design, css |
| The 3-Second Frontend Developer Test (by) | | 548 |
| css, conformance, quality |
| 15 HTML5 Best Practices for Beginners to Master (by) | | 547 |
| best-practices |
| The Document Outline (by/via) | | 546 |
| accessibility |
| ARIA in HTML (by) | | 545 |
| accessibility, aria |
| Accessibility and SEO (by/via) | | 544 |
| accessibility, seo |
| Use the “i” Element, and Use It Appropriately (by) | | 543 |
| semantics |
| JavaScript Frameworks and the Lost Art of HTML (by/via) | | 542 |
| javascript, frameworks |
| OMG, SVG Favicons FTW! (by) | | 541 |
| images, favicons, svg |
| Half the Size of Images by Optimising for High Density Displays (by) | | 540 |
| images, performance |
| Why Validate? (by) | | 539 |
| css, quality, conformance, craft |
| Accessible Overflow (by) | | 538 |
| accessibility, css, overflow |
| The Hidden World of “aria-hidden” (by) | | 537 |
| accessibility |
| Don’t Overabstract Your Components (by) | | 536 |
| javascript, components |
| 2021: 98% of the Top 100 U.S. Websites Use Invalid HTML (by) | | 535 |
| css, conformance, metrics, quality, craft |
| The Button Cheat Sheet (by) | | 534 |
| cheat-sheets |
| Upgrade Your HTML III (by/via) | | 533 |
| books, minimalism, craft, conformance |
| Reducing HTML Payload With Next.js (Case Study) (by/via) | | 532 |
| nextjs, performance, case-studies |
| Checking “Under the Hood” of Code (by) | | 531 |
| dev-tools, browsers, debugging, console, javascript, css, history |
| Understanding Logical Focus Order (by) | | 530 |
| accessibility, focus |
| Not Your Typical Horizontal Rules (by) | | 529 |
| semantics |
| The Future of Web Software Is HTML-over-WebSockets (by/via) | | 528 |
| visions, websockets |
| Revisiting Dark Patterns With the HTML “dialog” Tag (by) | | 527 |
| modals, javascript |
| The Unreasonable Effectiveness of Simple HTML (by) | | 526 |
|
| HTML: The 16 Content Categories and Their Elements (by) | | 525 |
| semantics |
| HTML and CSS Techniques to Reduce Your JavaScript (by/via) | | 524 |
| css, javascript, performance |
| Notes on HTML 3.2 (by) | | 523 |
|
| Alt vs. Figcaption (by/via) | | 522 |
| accessibility, comparisons |
| Why It’s Good for Users That HTML, CSS, and JS Are Separate Languages (by) | | 521 |
| css, javascript |
| Know Your Standards (by) | | 520 |
| accessibility, standards, wcag, aria, link-lists |
| Standardizing Select and Beyond: The Past, Present, and Future of Native HTML Form Controls (by/via) | | 519 |
| forms |
| Upgrade Your HTML II (by/via) | | 518 |
| books, minimalism, craft, conformance |
| Markup (by+/via) | | 517 |
| web-almanac, studies, research, metrics |
| Come Full Circle—Back to HTML | | 516 |
| code-editors, vi+vim |
| A Guide to HTML and CSS Forms (No Hacks) (by/via) | | 515 |
| guides, css, forms |
| Islands Architecture (by) | | 514 |
| architecture, concepts |
| Web Standards (via) | | 513 |
| standards, w3c, xml, xhtml, css, wcag |
| Remembrance of Tags Past (by/via) | | 512 |
| history, web-platform, xhtml, css, hacks, doctype-switching |
| The 24 Boolean Attributes of HTML (by) | | 511 |
| attributes |
| HTML Tips (by) | | 510 |
| tips-and-tricks |
| Performance Tips: Minifying HTML, CSS, and JS (via) | | 509 |
| videos, performance, css, javascript, minification, tips-and-tricks |
| Setting Height and Width on Images Is Important Again (by/via) | | 508 |
| images, performance, web-vitals |
| How We Learned to Draw Text on HTML5 Canvas (via) | | 507 |
| canvas, apis, svg, javascript |
| If It Can Be Done Using an HTTP Header, Use an HTTP Header (by) | | 506 |
| maintainability, maintenance, http, http-headers |
| Why You Should Choose HTML5 “article” Over “section” (by/via) | | 505 |
| semantics, headings |
| POURing ARIA Into the HTML Element Specs (by/via) | | 504 |
| accessibility, aria |
| An HTML Optimizer’s Config for html-minifier (by) | | 503 |
| html-minifier, minification, optimization, configuration, performance, minimalism |
| How to Style and Animate the Letters in a String Using CSS (by) | | 502 |
| how-tos, css, animations |
| Conversational Semantics (by/via) | | 501 |
| videos, semantics, voice |
| Upgrade Your HTML (the Booklet) (by) | | 500 |
| books, minimalism, craft, conformance |
| On Writing Better Markup (by) | | 499 |
| quality, maintainability, performance, terminology |
| Heading Levels (by) | | 498 |
| headings |
| Optional HTML (by) | | 497 |
|
| Optional HTML: Everything You Need to Know (by) | | 496 |
| performance, minimalism |
| When to Use “img,” “img@ srcset,” and “picture” and “source” (by) | | 495 |
| images |
| The Problem With Web Development Checklists, or: The Frontend Checklist, Revised (by) | | 494 |
| checklists, accessibility, performance, seo, social-media |
| Browser Resource Hints: “preload”, “prefetch”, and “preconnect” (via) | | 493 |
| performance, hints, http-headers, http |
| HTML Optimization: A Standard Config for HTMLMinifier (by/via) | | 492 |
| optimization, configuration, tooling |
| Building a Node.js Express API to Convert Markdown to HTML (by/via) | | 491 |
| nodejs, express, markdown, conversion |
| Art Direction for the Web Using CSS Shapes (by/via) | | 490 |
| design, css, shapes |
| HTML and Performance: Leave Out Optional Tags and Quotes (by) | | 489 |
| performance |
| Speed Up Next-Page Navigations With Prefetching (by) | | 488 |
| performance, hints, http-headers, http, webpack |
| The “D” in the DOM (by/via) | | 487 |
| accessibility, headings |
| Splicing HTML’s DNA With CSS Attribute Selectors (by/via) | | 486 |
| attributes, css, selectors |
| Responsive Images (by/via) | | 485 |
| css, images, responsive-design |
| Conversational Semantics (by/via) | | 484 |
| semantics, voice |
| What Do You Need to Know When Converting a Flash Game Into HTML5? (via) | | 483 |
| migrating, flash |
| Improving Performance Perception: On-Demand Image Resizing (by/via) | | 482 |
| performance, optimization, images, resizing |
| DRY HTML or DRY CSS? (by/via) | | 481 |
| maintainability, principles, css, bem, oocss, atomic-css |
| Moving From Flash to HTML, CSS, and JavaScript (by/via) | | 480 |
| flash, css, javascript, refactoring |
| HTML, CSS, and Dependency Direction (by) | | 479 |
| css, dependencies, maintainability, best-practices |
| HTML 5.2 (by+/via) | | 478 |
| standards |
| A Developer’s Guide to Better Accessibility (by+/via) | | 477 |
| guides, accessibility, semantics, keyboard-navigation, naming, tooling |
| Building Accessible Menu Systems (by/via) | | 476 |
| accessibility, navigation, aria |
| The Front-End Checklist (by) | | 475 |
| websites, checklists, css, javascript, images, accessibility, performance, seo |
| Building Inclusive Toggle Buttons (by/via) | | 474 |
| accessibility, forms, buttons, toggles |
| The Nine Principles of Design Implementation (by/via) | | 473 |
| design, principles, css |
| What I Learned Building Google’s Web Frameworks (by) | | 472 |
| google, frameworks, css, lessons |
| Linting HTML Using CSS (by) | | 471 |
| css, linting, quality |
| HTML APIs: What They Are and How to Design a Good One (by/via) | | 470 |
| how-tos, apis, javascript |
| 20+ Docs and Guides for Front-End Developers (by/via) | | 469 |
| css, javascript, link-lists |
| Building a Fully-Accessible Help Tooltip (by) | | 468 |
| accessibility, tooltips, aria |
| HTML5 Page Structure Basics (by/via) | | 467 |
| fundamentals, semantics |
