The semantic elements and attributes you reach for every day: document structure, media, forms, tables and accessibility. All rows are plain text - search to filter, click Copy to grab the pattern.
Reference rack
STATUSREADY
ROWS59
NETWORKLOCAL
MODEREFERENCE
| Item / pattern | What it means / how to use it | |
|---|---|---|
| <!DOCTYPE html> | Declares HTML5 and must be the very first line of every document. | |
| <html lang="en"> | The root element; always declare a language for SEO and accessibility. | |
| <head> | Container of non-visible metadata: title, meta, link, script. | |
| <meta charset="utf-8"> | Declares UTF-8 encoding and prevents mojibake for multilingual text. | |
| <meta name="viewport" ...> | content="width=device-width, initial-scale=1" enables responsive mobile layouts. | |
| <title> | Document title shown in the tab and in search results; vital for SEO. | |
| <body> | Everything a user sees lives inside the body. | |
| <h1> to <h6> | Headings; use exactly one h1 per page and never skip heading levels. | |
| <p> | A paragraph of text. | |
| <br> | Forced line break (empty element, no closing tag). | |
| <hr> | Thematic break, rendered as a horizontal rule (empty element). | |
| <a href="..."> | Hyperlink; href may be a URL, an #anchor, or a relative path. | |
| <a target="_blank"> | Opens in a new tab; always pair with rel="noopener noreferrer". | |
| <img src alt> | Image; alt is required and must describe the image for accessibility. | |
| <picture> | Responsive, multi-source images via child <source> elements. | |
| <figure> + <figcaption> | A self-contained illustration or code block plus its caption. | |
| <audio controls src> | Embedded audio playback with controls. | |
| <video controls src> | Embedded video playback with controls. | |
| <ul> + <li> | Unordered (bulleted) list. | |
| <ol> + <li> | Ordered (numbered) list. | |
| <dl> / <dt> / <dd> | Description list: a term followed by its description(s). | |
| <header> | Introductory content or a header for a page section. | |
| <nav> | Primary navigation block. | |
| <main> | The dominant unique content of the page; use exactly one per document. | |
| <section> | A thematic grouping of content, normally with its own heading. | |
| <article> | A self-contained, reusable unit: post, card, comment, entry. | |
| <aside> | Content tangential to the main flow: sidebars, callouts, ads. | |
| <footer> | Footer content for a page or section. | |
| <div> | Generic block container with no semantic meaning. | |
| <span> | Generic inline container; usually styled or scripted via class. | |
| <table> | Container for tabular data. | |
| <thead> / <tbody> / <tfoot> | Table row groups: header, body, footer. | |
| <tr> | A table row. | |
| <th> + <td> | Header cell / data cell; use scope="row" or scope="col" for accessibility. | |
| <caption> | Title or caption for the whole table. | |
| colspan / rowspan | "colspan=\"2\"" merges cells across columns or rows. | |
| <form action method> | A form; method GET puts parameters in the URL, POST sends them in the body. | |
| <label for> | Labels an input; clicking the label focuses the input. Required for accessibility. | |
| <input> | Single-line fields: text, email, number, password, checkbox, radio, file, date and more. | |
| <textarea> | Multi-line text input; size it with rows/cols or CSS. | |
| <select> + <option> | A dropdown picker. | |
| <button type> | A clickable button; type is submit/reset/button (default is submit inside forms). | |
| <fieldset> + <legend> | Groups related form controls and gives the group a label. | |
| <datalist> | Offers suggestions for an <input list="id"> field. | |
| required / minlength / maxlength | Native browser constraint-validation attributes. | |
| pattern="..."> | "pattern=\"[0-9]{3}\"" runs regex validation natively for inputs. | |
| autocomplete="off" | Disables browser autofill for sensitive or dynamic fields. | |
| <strong> / <em> | Strong importance / emphasis - semantic, not just bold and italic. | |
| <mark> | Highlights text (search matches, quotations). | |
| <code> / <pre> | Inline code / preformatted block that keeps whitespace. | |
| <blockquote> | An extended quotation; add cite for the source URL. | |
| <details> + <summary> | Native expand/collapse disclosure widget with zero JavaScript. | |
| <dialog> | A native modal or non-modal dialog element. | |
| <iframe src> | Embeds another document; add sandbox and loading="lazy". | |
| data-* attributes | Custom attributes like data-tags="x", readable from JS via element.dataset. | |
| aria-label / role | Accessibility attributes describing purpose and behavior to assistive tech. | |
| <canvas> | A 2D drawing surface driven by JavaScript. | |
| <svg> | Inline scalable vector graphics. | |
| <template> | Declares reusable markup that stays inert until cloned into the DOM. |