`<header>` - page header or block header

The HTML5 `<header>` tag is a semantic element used to define the header section of a document or a block, typically containing content such as titles, navigation, logos, etc. Compared to traditional `<div>` elements, it more clearly expresses structural intent, improving accessibility and SEO. The `<header>` can serve as the header for an entire page or as the header for an independent section. When using it, pay attention to nesting rules and hierarchical relationships. CSS can easily style the `<header>` to achieve responsive design. By default, `<header>` carries ARIA semantics, which can be further optimized to enhance accessibility. In practical applications, it is commonly used in e-commerce site headers and blog post headings. Avoid overuse, maintain uniqueness, and consider historical compatibility issues. The `<header>` often works in conjunction with tags like `<nav>`, `<h1>` to `<h6>`, and `<figure>`. It can also be dynamically modified via JavaScript to enable interactive effects.

<time> - date/time representation

The HTML5 `<time>` tag is a semantic element used to mark dates and times, providing a machine-readable standard format through the `datetime` attribute while displaying human-readable content. It supports various time formats, including pure dates, pure times, date-time combinations, and timezone representations. Practical use cases include news publication times, event countdowns, historical event timelines, and more. The `<time>` tag can be combined with microdata to enhance SEO and styled using CSS. While modern browsers fully support it, older versions of IE require compatibility handling. Compared to `<data>` and `<span>` tags, `<time>` has clear temporal semantics and can also enable dynamic time updates and internationalized time handling via JavaScript. The article concludes with a complete calendar event example demonstrating timezone conversion functionality.

<sup>-superscript text

The `<sup>` tag in HTML is used to define superscript text, which is displayed in a smaller font size above the baseline. It is primarily applied in scenarios such as mathematical formulas, chemical formulas, and footnote markers. This tag is a double-sided tag and is supported by all major browsers. Typical applications include mathematical exponentiation, chemical atomic counts, date ordinals, and academic reference markers. Custom styling can be achieved via CSS, and it contrasts with the `<sub>` (subscript) tag. It supports nesting other HTML tags. Responsive design requires consideration for mobile adaptation. Screen readers can recognize it normally, but for complex mathematical formulas, MathML is recommended. Practical examples include displaying complex formulas, multi-level superscripts, and animation effects. The default browser style is vertical alignment as superscript with a smaller font size. It can also be used in SVG and Canvas. Historically, it has been supported since HTML 2.0, with minimal performance impact. Semantically, it is superior to pure CSS implementations.

<sub>-subscript text

The `<sub>` tag in HTML is used to define subscript text, which is displayed in a smaller font size and offset below the baseline. It is primarily applied in chemical formulas, mathematical expressions, and footnote numbering, among other scenarios. This tag is an inline element and can contain phrasing content and other inline elements. Typical applications include representing chemical formulas like H₂O, mathematical variables such as a₁, a₂, ..., aₙ, and footnote markers in academic writing. The `<sub>` tag can be combined with other tags like `<strong>` and customized via CSS. Unlike the `<sup>` tag, which is used for superscript, `<sub>` is specifically for subscript. In practical development, it’s important to use semantic subscript correctly rather than just for visual effects. In responsive design, the size of subscripts may need adjustment on smaller screens. All modern browsers support the `<sub>` tag well. While CSS’s `vertical-align` property can achieve similar effects, `<sub>` offers greater semantic advantages. JavaScript can also dynamically manipulate this tag. For printing, subscript display can be optimized. Different languages may have varying conventions for subscript usage. The `<sub>` tag has almost no impact on page performance and has existed since HTML 2.0 with its functionality remaining largely unchanged.

<kbd>-Keyboard input translates this sentence into English, output only plain text, do not output any other content

The `<kbd>` tag in HTML is used to represent keyboard input content. By default, it is displayed in a monospace font and may include borders or background colors. The basic usage involves marking single keys or key combinations, such as Ctrl + S. Key combinations can be achieved by placing `<kbd>` tags side by side or nesting them. This tag is often used in conjunction with `<code>` or `<samp>` tags to distinguish different types of content. Users can customize the style of the `<kbd>` tag using CSS, such as adding shadows or rounded corners. Complex scenarios include representing menu paths or game control instructions. To improve accessibility, it is recommended to add the `aria-label` attribute. Additionally, it can be combined with JavaScript to achieve dynamic highlighting of keys by listening for keyboard events and changing the style of specific keys.

- Sample program output

The `<samp>` tag in HTML is used to identify sample output from computer programs, which is displayed in a monospace font by default to distinguish it from regular text. It is often used in conjunction with the `<code>` and `<kbd>` tags to mark up code snippets, keyboard input, and program output, respectively. In practical applications, it can simulate command-line output, error messages, or dynamic interactive content. CSS can be used to customize its appearance, such as modifying fonts or background colors. When combined with the `<pre>` tag, it preserves multi-line output formatting. For accessibility, it is recommended to use the `aria-live` attribute to assist screen readers in recognizing dynamic content updates.

<var>-variable name

The `<var>` tag in HTML is used to mark variable names, commonly found in mathematical expressions and programming code. Browsers typically display the content of the `<var>` tag in italics by default, but its style can be customized via CSS. This tag carries semantic meaning, specifically representing mathematical variables, programming variables, or user input placeholders. It is often used in conjunction with tags like `<code>` and `<kbd>`, and is widely applied in programming documentation and mathematics education. All browsers support the `<var>` tag, which has been compatible from HTML 2.0 to HTML5. The `<var>` element can be manipulated via JavaScript and is also usable in frameworks like React and Vue. Documentation tools such as JSDoc internally utilize the `<var>` tag. When automating tests, special attention is required for handling `<var>` elements. In HTML emails, most clients support the `<var>` tag. It can also be combined with web components to create custom elements, and even used within SVG. The `<var>` tag is versatile and widely supported across various contexts.

`-Computer code translates this sentence into English, outputs plain text directly, and does not output anything else`

In HTML, the `code` tag is used to mark up computer code snippets, typically used in conjunction with the `pre` tag to preserve formatting and indentation. Browsers display it by default in a monospace font to distinguish it from regular text. The `code` tag is an inline element suitable for short code snippets, while multi-line code requires the `pre` tag. The article compares other code-related tags like `samp`, `kbd`, and `var`, and provides methods for styling customization, including background color and fonts. Practical applications include API documentation, technical blogs, and command-line operation suggestions. It recommends integrating syntax highlighting libraries to improve readability while considering accessibility and responsive design. The article also covers features like code copying, testing and validation, performance optimization, version comparison, annotation practices, internationalization, and security considerations, offering developers a comprehensive solution for code display.

<cite>-citation source

In HTML, the `<cite>` tag is used to mark the title of a work or the source of a citation, such as books, articles, movies, music, etc. It is often used in conjunction with `<blockquote>` to clearly indicate the source of the quotation. HTML5 emphasizes semantics, and the role of the `<cite>` tag is to clarify citation relationships rather than merely stylistic decoration. The correct usage is to wrap the title of the work, not the author's name, and to avoid nesting interactive elements. Browsers typically render it in italics by default, but this can be adjusted via CSS. The `<cite>` tag is friendly to search engines and screen readers and can be combined with microdata to enhance SEO. Practical applications include citing movies, academic papers, music albums, etc. Unlike other citation tags like `<q>` and `<blockquote>`, `<cite>` only marks the source and does not contain the quoted content itself.

`- Inline quote`

The `<q>` tag in HTML is used to mark short inline quotations, with browsers adding quotation marks by default. Unlike the `<blockquote>` for long quotations, it does not create a line break but is embedded within a paragraph. The basic usage involves wrapping the quoted text in `<q>` tags, and it supports the `cite` attribute to specify the source URL. The quote style and text appearance can be customized via CSS, with variations across different language environments. The `<q>` tag helps screen readers identify quoted content and is suitable for quotations shorter than three lines. It is often paired with the `<cite>` tag, providing semantic value that benefits SEO and accessibility. In practice, it can be used for article citations, dialogue markers, and similar scenarios. All modern browsers support the `<q>` tag. Best practices include using it appropriately, maintaining consistent styling, and adding the `cite` attribute. Advanced techniques like animations and responsive design can be achieved with CSS. The `<q>` tag became standard in HTML4 and gained clearer semantics in HTML5. To validate correct usage, methods include disabling CSS, testing with screen readers, and using HTML validators. Performance impact is minimal, but overuse should be avoided. Related tools include HTML validators and MDN documentation. Real-world examples show that the `<q>` tag maintains text flow. Extended applications include dialogue systems, legal documents, and more. Internationalization considerations involve adapting to different language-specific quotation styles.