Tags
#php
#kotlin
#bash
#go
#sql
#rust
#typescript
#html
#java
#python
#files
#utils
#strings
#http
#concurrency
#async
#json
#arrays
#security
#types
#crypto
#database
#dates
#format
HTML
Radio Group with Fieldset + Legend
Always wrap radio groups (and checkboxes that share semantics) in a `<fieldset>` with a `<legend>`. Screen readers announce the legend before each option — without it, the choice is contextless.
@admin
HTML
Details / Summary — Native Accordion
`<details>` is the built-in "click to expand" widget. Free keyboard navigation, search-engine-indexable content (open or closed), no JS needed. Style with CSS to match your design.
HTML
Hero Section
The big "above the fold" intro on a landing page: large heading, sub-copy, primary CTA, optional supporting image. Keep the H1 unique to the page and one per document.
HTML
RTL (Right-to-Left) Document
Set `dir="rtl"` on the root element for languages that read right-to-left (Arabic, Hebrew, Persian). The browser flips text alignment, scroll, and form controls automatically. Use `dir="auto"` to let user-generated text decide per-block.
HTML
Print Stylesheet Setup
Tune the print layout: hide nav/footer, force black-on-white text, expand absolute URLs, hide images you don't want printed. Save your users from wasting paper on the page chrome.
HTML
Textarea with Character Counter
Combine `maxlength` (hard cap) with a small JS-driven live counter. Browsers won't let users paste past `maxlength`, so this is purely UX feedback.
HTML
Datalist — Autocomplete Suggestions
`<datalist>` attaches type-ahead suggestions to any text input. The user can still type something custom — it's suggestions, not a hard constraint.
HTML
Registration Form (new-password + email-verify)
`autocomplete="new-password"` tells password managers to OFFER a generated password instead of filling an existing one. `autocomplete="email"` and `inputmode="email"` give phones the right keyboard.
HTML
Email-Friendly Mailto + Tel Links
`mailto:` and `tel:` URI schemes open the user's email client or phone dialer directly. Support subject, body, cc, bcc as query params — and pre-format phone numbers for international.
HTML
Login Form (with autocomplete hints)
A complete login form with the autocomplete attributes that browsers + password managers depend on. Missing these causes 1Password, Bitwarden, and Chrome to mis-detect the form.
HTML
404 Not Found Page
A useful 404 isn't apologetic — it helps the user find what they were looking for. Include a search box, links back to popular pages, and a clear "Go home" CTA.
PHP
Strip HTML Safely (whitelist tags)
Strip nearly all HTML from a string but keep a small whitelist (e.g. links, line breaks, inline formatting). Wraps strip_tags with sensible defaults and a callback to also drop event-handler attributes.
HTML
Pricing Plan Card
Single-tier pricing card with plan name, price, feature list, CTA. Replicate three times for a standard pricing page; highlight the "recommended" tier with a different border color.
HTML
Card Pattern (article + link wrapper)
The standard content card — image, title, excerpt, meta. Make the WHOLE card clickable by wrapping the title link and using `::after` to extend the hit area to the full card.
HTML
Time Element with datetime Attribute
`<time datetime="...">` lets you display a human-friendly date while giving machines an ISO-8601 timestamp. Used by browsers, Schema.org parsers, and screen readers.
HTML
Code Markup — pre, code, kbd, samp, var
HTML has five semantic elements for technical text: `<code>` (source code), `<pre>` (preserve whitespace), `<kbd>` (keyboard input), `<samp>` (sample output), `<var>` (math/program variable). Each has a different meaning to screen readers and search engines.
HTML
Semantic Article Structure
`<article>` for self-contained content (blog post, comment, news item). Each article gets its own header, body, and (optionally) footer. Helps screen readers, RSS, and Google understand structure.