<optgroup> - option grouping

The `<optgroup>` tag in HTML is used to create option groups within a `<select>` element, improving the readability of dropdown menus. It must include a `label` attribute to define the group name and can be set as `disabled` to deactivate the entire group. The basic syntax involves nesting `<optgroup>` and `<option>` elements inside `<select>`. In practice, options can be grouped by categories, such as fruits and vegetables, or dynamically generated. CSS can customize group styles, like bold text or indented options. Note that `<optgroup>` cannot be nested, and mobile devices may ignore styling. While `<datalist>` does not support grouping, CSS can simulate this effect. Combining JavaScript enables interaction with other form elements. For accessibility, it is recommended to add clear semantics and ARIA attributes to the groups.

`<select>` - dropdown selection box

The `<select>` tag in HTML is used to create dropdown selection boxes, working with the `<option>` tag to enable single or multiple selections. The basic usage involves defining options with `<option>`, where the `value` attribute determines the submitted value, the `selected` attribute sets the default selection, and the `multiple` attribute enables multi-select. The `<optgroup>` tag can group options. JavaScript can dynamically manipulate `<select>` content, such as loading corresponding cities based on country selection. CSS can partially customize styles, like removing default arrows or adding background images. For accessibility, it is recommended to associate `<label>` tags and descriptions, and handle disabled states. Practical applications include form submissions and combining with `<input>` for search filtering, as well as dynamically modifying option content to enhance user interaction.

<button>-Clickable button

The `<button>` tag in HTML is used to create clickable buttons that support various interactive scenarios, such as form submission and triggering JavaScript events. The basic syntax includes the `type` attribute to define behavior, such as `submit`, `button`, and `reset`. Core attributes include `disabled`, `form`, and `autofocus`. Event handlers can be bound via JavaScript, and button content can nest HTML elements. CSS can be used to customize styles. Practical applications include form submission, button groups, and loading state buttons. For accessibility, it is recommended to provide text labels and ensure keyboard operability. It differs from other elements like `<input>` and `<a>` tags. Browser compatibility requires attention to IE styling differences and form submission behavior.

`<textarea>` - Multi-line text input

The `<textarea>` tag in HTML is used to create a multi-line text input field, suitable for user input of longer text such as comments or messages. It supports dynamic resizing, placeholder text, disabled state, and other features, and can be further customized via CSS and JavaScript. The basic syntax is a double tag, allowing the definition of initial rows and columns. Core attributes include `name` and `id` for data identification, `placeholder` for hint text, `disabled` and `readonly` to control editing, `maxlength` and `minlength` to limit character count, and `autofocus` for automatic focus. The `form` attribute associates it with an external form. CSS can adjust dimensions and enable responsive layouts, while JavaScript allows dynamic value retrieval or real-time character counting. Practical applications include form submissions and rich text editor foundations. Note browser compatibility and performance considerations.

`<input>` - input control

The HTML input element is the most commonly used control in forms. By setting the type attribute, various input types can be created, including text, password, checkbox, radio button, file upload, etc. Basic attributes include name, id, value, placeholder, required, and more. HTML5 introduced more semantic input types such as email, number, date, color, range, etc. Form validation can be implemented using attributes like required and pattern. Using labels for association improves accessibility. It supports features like disabled, readonly, and autocomplete. The datalist element can provide input suggestions. Practical applications include login and registration forms, where browser compatibility and accessibility must be considered. It is recommended to always use the label tag, ensure visible focus states, and optimize performance by avoiding excessive real-time validation and using the autocomplete attribute appropriately. Special consideration should be given to input experience on mobile devices.

`<form>` - form container

The `<form>` tag in HTML is the core element for creating forms, used to collect user input data and submit it to the server for processing. Forms include various interactive elements such as text boxes, buttons, dropdown menus, and more. The basic structure of the `<form>` tag includes the `action` attribute to specify the submission URL and the `method` attribute to define the submission method, typically `GET` or `POST`. Forms support multiple encoding types, with `multipart/form-data` being essential for file uploads. Elements like `<fieldset>` and `<label>` help better organize and associate form components. HTML5 provides built-in validation features, such as the `required` and `pattern` attributes. Form event handling includes events like `submit` and `input`. JavaScript can dynamically manipulate forms, such as adding fields or collecting data. Form design must consider styling, security, and accessibility. Modern frontend frameworks like React and Vue offer solutions for form state management. Optimizing form performance involves reducing the number of fields and using appropriate input types.

<colgroup> - column grouping

The `<colgroup>` tag in HTML is used to group columns in a table and is typically used in conjunction with the `<col>` tag. It allows developers to uniformly set styles or attributes for table columns without having to configure each cell individually. The `<colgroup>` must be a child element of `<table>`, placed after `<caption>` and before other table elements. It supports attributes like `span`, `style`, and `class`, and can contain multiple `<col>` tags, each representing a column. In practical applications, it can be used to uniformly style columns, enable responsive control, or optimize performance. Regarding browser compatibility, note that some CSS properties may behave inconsistently, pseudo-class selectors do not apply, and `<colgroup>` styles are combined with cell styles, with later-defined styles taking higher priority. While modern layout techniques like CSS Grid can replace some table functionality, `<colgroup>` still holds advantages for true tabular data.

The <col>-column attribute

In HTML, the `<col>` tag is used to define properties for table columns and must be used in conjunction with `<colgroup>`. It is an empty element that does not directly contain content but affects the presentation of entire columns through styles or attributes, such as width and background color. The basic usage involves nesting `<col>` within `<colgroup>`. Key attributes include `span` (to define the number of columns affected) and `style` or `class` (to control column styling). Practical applications include fixed column widths and zebra-striped tables. Important considerations include style priority issues, the inability to replace `colspan`, methods for dynamic modification, and compatibility issues (which can be resolved by adding classes to cells). Advanced techniques include pairing with `:nth-child` selectors and print optimization. The `<col>` tag often collaborates with tags like `<colgroup>`, `<table>`, and `<caption>`.

`<td>` - table data cell

The `<td>` tag in HTML tables is used to define table data cells, which must be nested within `<tr>` tags and, together with `<th>` tags, form the core structure of the table. Key attributes include `colspan` and `rowspan` for cell merging, and the `headers` attribute for improved accessibility. CSS can be used to control cell styling, such as padding, borders, and hover effects. In responsive design, tables can be stacked for small screens. JavaScript enables dynamic modification of cell content, while advanced applications include nested tables and editable cells. Performance optimization involves avoiding excessive nesting and using virtual scrolling techniques. Accessibility best practices emphasize adding `caption` and ARIA labels. Modern CSS techniques like Grid layout and sticky headers enhance table functionality. Common issue solutions cover text overflow, zebra striping, and border handling. In terms of browser compatibility, all modern browsers support the `<td>` tag, though older versions of IE may have differences in certain attribute implementations.

<th> - table header cell

In HTML, the `<th>` tag is specifically used to define table header cells, which differ from regular `<td>` cells. By default, `<th>` has bold and centered styling and semantically represents column or row headers. `<th>` supports attributes like `colspan` to span across columns, `rowspan` to span across rows, `scope` to define the associated range, and `headers` to link to other headers. Unlike `<td>`, `<th>` is recognized by screen readers as a header. Its styling can be fully customized via CSS. In responsive design, tables can be converted to card layouts to enhance accessibility, requiring the use of the `scope` attribute. Adding `<caption>` and `aria-describedby`, dynamically generating headers via JavaScript, and grouping headers with `<thead>`, `<tbody>`, and `<tfoot>` can handle complex tables. Headers can also implement sorting, fixed positioning, include form controls, handle multiline text, and integrate icons. Associating `<th>` with data via `data-*` attributes enhances functionality. Overall, `<th>` is a crucial element for building semantic and accessible tables.