Html_elmt.obsolete-non-conforming-features

description::
×
· Elements in the following list are entirely obsolete, and must not be used by authors:
* acronym
* applet
* basefont
* bgsound
* big
* blink
* center
* dir
* font
* frame
* frameset
* isindex
* keygen
* listing
* marquee
* menuitem
* multicol
* nextid
* nobr
* noembed
* noframes
* param
* plaintext
* rb
* rtc
* spacer
* strike
* tt
* xmp
[{2023-10-21 retrieved} https://html.spec.whatwg.org/multipage/obsolete.html#non-conforming-features]

name::
* McsEngl.Html_elmt.obsolete-non-conforming-features,

Html_elmt.obsolete-conforming-features

description::
×
· Features listed in this section will trigger warnings in conformance checkers.

name::
* McsEngl.Html_elmt.obsolete-conforming-features,

Html_elmt.details

description::
×
"The **`<details>`** HTML element is a built-in way to create **expandable / collapsible content** without JavaScript.
---
## What it does
* Hides content by default
* Reveals it when the user clicks
* Commonly used for FAQs, disclosures, or “more info” sections
---
## Basic syntax
```html
<details>
<summary>Click to expand</summary>
<p>This content is hidden until opened.</p>
</details>
```
### How it works
* `<summary>` → the visible clickable label
* Everything else inside `<details>` → hidden content
---
## Open by default
```html
<details open>
<summary>Already open</summary>
<p>This content is visible on page load.</p>
</details>
```
The `open` attribute controls the state.
---
## Styling with CSS
You can fully style it like normal elements:
```html
<style>
details {
border: 1px solid #ccc;
padding: 0.5rem;
border-radius: 6px;
}
summary {
cursor: pointer;
font-weight: bold;
}
</style>
```
---
## JavaScript interaction (optional)
```js
const details = document.querySelector("details");
details.addEventListener("toggle", () => {
console.log(details.open ? "Opened" : "Closed");
});
```
* `details.open` → `true | false`
* `toggle` event fires on open/close
---
## Accessibility notes
✅ Keyboard accessible
✅ Screen-reader friendly
✅ Better than custom JS accordions when possible
---
## Common use cases
* FAQ sections
* Collapsible documentation
* “Advanced settings” panels
* Legal disclaimers / extra info
---
## Browser support
✔ Supported in all modern browsers (Chrome, Firefox, Safari, Edge)
---
### TL;DR
`<details>` is the **native HTML accordion**:
* No JS required
* Accessible by default
* Easy to style and control
If you want, I can also show:
* Nested `<details>`
* FAQ layout patterns
* How to animate open/close smoothly"
[{2026-01-13 retrieved} https://chatgpt.com/c/69663875-63c0-832e-9215-67889e58b8a0]

name::
* McsEngl.Html_elmt.accordion,
* McsEngl.Html_elmt.details,
* McsEngl.Html_elmt.hidden,
* McsEngl.details-HtmlElmt,

Html_elmt.heading

description::
×
· HTML-heading-elements (<h1> through <h6>) are used to define headings and subheadings in a-webpage. They create a-hierarchical whole-part structure.

name::
* McsEngl.Html_elmt.heading,

Html_elmt.input

description::
"The <input> element can be used to create a variety of different input controls, each with its own purpose. Here are some of the most common types of input controls:
* text: A text input control allows the user to enter a single line of text.
* password: A password input control allows the user to enter a password. The text entered in the password input control is not displayed to the user.
* checkbox: A checkbox input control allows the user to select one or more options.
* radio: A radio input control allows the user to select one option from a group of options.
* select: A select input control allows the user to choose an option from a list of options.
* button: A button input control allows the user to submit the form or perform an action."
[{2023-08-27 retrieved} https://bard.google.com/]

attribute-spellcheck::
· Html-code: <input type="text" spellcheck="true">
· The spellcheck attribute is a global attribute that specifies whether the element may be checked for spelling errors. It can be used with any element that contains text, including <input> elements.

name::
* McsEngl.Html_elmt.input,
* McsEngl.input-HtmlElmt,

Html_elmt.section

description::
× Mcsh-creation: {2026-08-10}
"The <section> element is a semantic HTML tag used to group related content into a thematic block within a document — typically content that would make sense as its own entry in an outline.
It's part of HTML5's semantic elements (along with <article>, <nav>, <aside>, <header>, <footer>), introduced to replace generic <div> soup with tags that describe meaning, not just layout.
A typical <section> includes a heading (<h1>–<h6>) that identifies what it's about:
```html
<section>
<h2>Company History</h2>
<p>Founded in 2010, the company started as...</p>
</section>
```
A few defining points:
The W3C/WHATWG spec says a <section> represents a "generic standalone section" — it should group content that's thematically related and would logically appear in a document outline, like chapters, tabbed panes, or numbered sections of an article.
It differs from <div> in that <div> carries no semantic meaning (pure grouping/styling container), while <section> tells browsers, assistive tech, and search engines "this is a distinct, meaningful chunk of content."
It differs from <article> in that <article> is meant for self-contained, independently distributable content (a blog post, a news story), while <section> is for grouping parts of a larger whole that aren't necessarily standalone.
Best practice: don't use <section> just as a styling hook — if you just need a div for CSS/JS purposes with no thematic grouping, use <div> instead."
[{2026-08-10 retrieved} claude.ai]

name::
* McsEngl.section-Html-element!⇒Html_sect,
* McsEngl.Html_sect!=section-Html-element,
* McsEngl.Html_elmt.section!⇒Html_sect,