Skip to content

Commit

Permalink
update links: replace DT link with real target (#36302)
Browse files Browse the repository at this point in the history
* update

* Update files/en-us/web/html/global_attributes/lang/index.md

* Update files/en-us/web/html/global_attributes/lang/index.md

* Update files/en-us/web/html/global_attributes/lang/index.md

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
  • Loading branch information
skyclouds2001 and Josh-Cena authored Oct 11, 2024
1 parent c0daf1f commit 816cc4d
Show file tree
Hide file tree
Showing 36 changed files with 46 additions and 46 deletions.
4 changes: 2 additions & 2 deletions files/en-us/web/api/animation/commitstyles/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ browser-compat: api.Animation.commitStyles

{{APIRef("Web Animations")}}

The `commitStyles()` method of the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)'s {{domxref("Animation")}} interface writes the [computed values](/en-US/docs/Web/CSS/computed_value) of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes#style) attribute. `commitStyles()` works even if the animation has been [automatically removed](/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#automatically_removing_filling_animations).
The `commitStyles()` method of the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)'s {{domxref("Animation")}} interface writes the [computed values](/en-US/docs/Web/CSS/computed_value) of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute. `commitStyles()` works even if the animation has been [automatically removed](/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#automatically_removing_filling_animations).

`commitStyles()` can be used in combination with `fill` to cause the final state of an animation to persist after the animation ends. The same effect could be achieved with `fill` alone, but [using indefinitely filling animations is discouraged](https://drafts.csswg.org/web-animations-1/#fill-behavior). Animations [take precedence over all static styles](/en-US/docs/Web/CSS/Cascade#cascading_order), so an indefinite filling animation can prevent the target element from ever being styled normally.

Using `commitStyles()` writes the styling state into the element's [`style`](/en-US/docs/Web/HTML/Global_attributes#style) attribute, where they can be modified and replaced as normal.
Using `commitStyles()` writes the styling state into the element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute, where they can be modified and replaced as normal.

## Syntax

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Each property and value pairing is known as a [CSS declaration](/en-US/docs/Web/
- owner node
- : The {{domxref("element")}} that the CSS declaration block is associated with, otherwise null.
- updating flag
- : Set when the CSS declaration block is updating the owner node's [`style`](/en-US/docs/Web/HTML/Global_attributes#style) attribute.
- : Set when the CSS declaration block is updating the owner node's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute.

When a {{domxref("CSSStyleDeclaration")}} is returned by a [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) interface these properties are set to appropriate values as defined by the specification.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/document/execcommand/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ An example of [how to use execCommand with contentEditable elements](https://cod

### Using insertText

This example shows two very basic HTML editors, one using a {{HTMLElement("textarea")}} element and one using a {{HTMLElement("pre")}} element with the [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes#contenteditable) attribute set.
This example shows two very basic HTML editors, one using a {{HTMLElement("textarea")}} element and one using a {{HTMLElement("pre")}} element with the [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) attribute set.

Clicking the "Bold" or "Italic" buttons inserts the appropriate tags in the element, using `insertText` to preserve the edit history, so the user can undo the action.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ In HTML, apart from the default behavior for images, links, and selections, no o

To make other HTML elements draggable, three things must be done:

1. Set the [`draggable`](/en-US/docs/Web/HTML/Global_attributes#draggable) attribute to `"true"` on the element that you wish to make draggable.
1. Set the [`draggable`](/en-US/docs/Web/HTML/Global_attributes/draggable) attribute to `"true"` on the element that you wish to make draggable.
2. Add a listener for the {{domxref("HTMLElement/dragstart_event", "dragstart")}} event.
3. [Set the drag data](/en-US/docs/Web/API/DataTransfer/setData) in the above listener.

Expand All @@ -36,9 +36,9 @@ draggableElement.addEventListener("dragstart", (event) =>
);
```

The [`draggable`](/en-US/docs/Web/HTML/Global_attributes#draggable) attribute is set to `"true"`, so this element becomes draggable. If this attribute were omitted or set to `"false"`, the element would not be dragged, and instead the text would be selected.
The [`draggable`](/en-US/docs/Web/HTML/Global_attributes/draggable) attribute is set to `"true"`, so this element becomes draggable. If this attribute were omitted or set to `"false"`, the element would not be dragged, and instead the text would be selected.

The [`draggable`](/en-US/docs/Web/HTML/Global_attributes#draggable) attribute may be used on any element, including images and links. However, for these last two, the default value is `true`, so you would only use the [`draggable`](/en-US/docs/Web/HTML/Global_attributes#draggable) attribute with a value of `false` to disable dragging of these elements.
The [`draggable`](/en-US/docs/Web/HTML/Global_attributes/draggable) attribute may be used on any element, including images and links. However, for these last two, the default value is `true`, so you would only use the [`draggable`](/en-US/docs/Web/HTML/Global_attributes/draggable) attribute with a value of `false` to disable dragging of these elements.

> [!NOTE]
> When an element is made draggable, text or other elements within it can no longer be selected in the normal way by clicking and dragging with the mouse. Instead, the user must hold down the <kbd>Alt</kbd> key to select text with the mouse, or use the keyboard.
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/html_drag_and_drop_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ This section is a summary of the basic steps to add drag-and-drop functionality

#### Identify what is draggable

Making an element _draggable_ requires adding the [`draggable`](/en-US/docs/Web/HTML/Global_attributes#draggable) attribute and the {{domxref("HTMLElement.dragstart_event","dragstart")}} event handler, as shown in the following code sample:
Making an element _draggable_ requires adding the [`draggable`](/en-US/docs/Web/HTML/Global_attributes/draggable) attribute and the {{domxref("HTMLElement.dragstart_event","dragstart")}} event handler, as shown in the following code sample:

```html
<script>
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/htmlelement/autocapitalize/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,4 +72,4 @@ controller.addEventListener("input", (e) => {

## See also

- [`autocapitalize`](/en-US/docs/Web/HTML/Global_attributes#autocapitalize) HTML global attribute
- [`autocapitalize`](/en-US/docs/Web/HTML/Global_attributes/autocapitalize) HTML global attribute
2 changes: 1 addition & 1 deletion files/en-us/web/api/htmlelement/contenteditable/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,4 @@ A string.
## See also

- {{domxref("HTMLElement.isContentEditable")}}
- The [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes#contenteditable) global attribute.
- The [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) global attribute.
2 changes: 1 addition & 1 deletion files/en-us/web/api/htmlelement/draggable/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,5 +45,5 @@ if (notDraggableElement.draggable) {

## See also

- [`draggable`](/en-US/docs/Web/HTML/Global_attributes#draggable) HTML global attribute
- [`draggable`](/en-US/docs/Web/HTML/Global_attributes/draggable) HTML global attribute
- [HTML Drag and Drop API](/en-US/docs/Web/API/HTML_Drag_and_Drop_API) overview
4 changes: 2 additions & 2 deletions files/en-us/web/api/htmlelement/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ _Also inherits properties from its parent, {{DOMxRef("Element")}}._
- {{DOMxRef("HTMLElement.anchorElement")}} {{ReadOnlyInline}}&nbsp;{{non-standard_inline}} {{experimental_inline}}
- : Returns a reference to the element's anchor element, or `null` if it doesn't have one.
- {{DOMxRef("HTMLElement.attributeStyleMap")}} {{ReadOnlyInline}}
- : A {{DOMxRef("StylePropertyMap")}} representing the declarations of the element's [`style`](/en-US/docs/Web/HTML/Global_attributes#style) attribute.
- : A {{DOMxRef("StylePropertyMap")}} representing the declarations of the element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute.
- {{domxref("HTMLElement.autocapitalize", "autocapitalize")}}
- : A string that represents the element's capitalization behavior for user input. Valid values are: `none`, `off`, `on`, `characters`, `words`, `sentences`.
- {{domxref("HTMLElement.autofocus")}}
Expand Down Expand Up @@ -74,7 +74,7 @@ _Also inherits properties from its parent, {{DOMxRef("Element")}}._
- {{DOMxRef("HTMLElement.spellcheck")}}
- : A boolean value that controls the [spell-checking](/en-US/docs/Web/HTML/Global_attributes/spellcheck) hint. It is available on all HTML elements, though it doesn't affect all of them.
- {{DOMxRef("HTMLElement.style")}}
- : A {{DOMxRef("CSSStyleDeclaration")}} representing the declarations of the element's [`style`](/en-US/docs/Web/HTML/Global_attributes#style) attribute.
- : A {{DOMxRef("CSSStyleDeclaration")}} representing the declarations of the element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute.
- {{DOMxRef("HTMLElement.tabIndex")}}
- : A `long` representing the position of the element in the tabbing order.
- {{DOMxRef("HTMLElement.title")}}
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/api/htmlelement/inputmode/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ The {{domxref("HTMLElement")}} property **`inputMode`** reflects the value of th

It provides a hint about the type of data that might be entered by the user while editing the element or its contents. This allows the browser to display an appropriate virtual keyboard.

It is used primarily on {{HTMLElement("input")}} elements, but is usable on any element in [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes#contenteditable) mode.
It is used primarily on {{HTMLElement("input")}} elements, but is usable on any element in [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) mode.

## Value

Expand Down Expand Up @@ -53,4 +53,4 @@ For details on the usage of this attribute, see the page for the [`inputmode`](/

## See also

- [inputmode](/en-US/docs/Web/HTML/Global_attributes#inputmode) attribute
- [inputmode](/en-US/docs/Web/HTML/Global_attributes/inputmode) attribute
2 changes: 1 addition & 1 deletion files/en-us/web/api/htmlelement/iscontenteditable/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,4 @@ infoText2.textContent += " " + secondParagraph.isContentEditable;
## See also

- {{domxref("HTMLElement/contentEditable")}}
- The [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes#contenteditable) global attribute.
- The [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) global attribute.
2 changes: 1 addition & 1 deletion files/en-us/web/api/htmlelement/spellcheck/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,4 @@ Note that you must enable the browser setting to check spelling and grammar.

## See also

- [`spellcheck`](/en-US/docs/Web/HTML/Global_attributes#spellcheck) HTML global attribute
- [`spellcheck`](/en-US/docs/Web/HTML/Global_attributes/spellcheck) HTML global attribute
2 changes: 1 addition & 1 deletion files/en-us/web/api/htmlelement/translate/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,4 +60,4 @@ controller.addEventListener("change", (e) => {

## See also

- [`translate`](/en-US/docs/Web/HTML/Global_attributes#translate) HTML global attribute
- [`translate`](/en-US/docs/Web/HTML/Global_attributes/translate) HTML global attribute
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,4 @@ element.virtualKeyboardPolicy = "manual";

## See also

- [`virtualkeyboardpolicy`](/en-US/docs/Web/HTML/Global_attributes#virtualkeyboardpolicy) HTML global attribute
- [`virtualkeyboardpolicy`](/en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) HTML global attribute
2 changes: 1 addition & 1 deletion files/en-us/web/api/htmlimageelement/longdesc/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ The _deprecated_ property **`longDesc`** on
the {{domxref("HTMLImageElement")}} interface specifies the URL of a text or HTML file
which contains a long-form description of the image. This can be used to
provide optional added details beyond the short description provided in the
[`title`](/en-US/docs/Web/HTML/Global_attributes#title) attribute.
[`title`](/en-US/docs/Web/HTML/Global_attributes/title) attribute.

## Value

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/htmlimageelement/name/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ A string providing a name by which the image can be referenced.
> [!WARNING]
> This property is deprecated and is only in the
> specification still for backward compatibility purposes. Since it functions
> identically to [`id`](/en-US/docs/Web/HTML/Global_attributes#id), you can and should use it instead.
> identically to [`id`](/en-US/docs/Web/HTML/Global_attributes/id), you can and should use it instead.
## Specifications

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/element/b/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_a
- Use the `<b>` for cases like keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced (but not including any special importance).
- Do not confuse the `<b>` element with the {{HTMLElement("strong")}}, {{HTMLElement("em")}}, or {{HTMLElement("mark")}} elements. The {{HTMLElement("strong")}} element represents text of certain _importance_, {{HTMLElement("em")}} puts some emphasis on the text and the {{HTMLElement("mark")}} element represents text of certain _relevance_. The `<b>` element doesn't convey such special semantic information; use it only when no others fit.
- Similarly, do not mark titles and headings using the `<b>` element. For this purpose, use the {{HTMLElement("Heading_Elements", "h1")}} to {{HTMLElement("Heading_Elements", "h6")}} tags. Further, stylesheets can change the default style of these elements, with the result that they are not _necessarily_ displayed in bold.
- It is a good practice to use the [`class`](/en-US/docs/Web/HTML/Global_attributes#class) attribute on the `<b>` element in order to convey additional semantic information as needed (for example `<b class="lead">` for the first sentence in a paragraph). This makes it easier to manage multiple use cases of `<b>` if your stylistic needs change, without the need to change all of its uses in the HTML.
- It is a good practice to use the [`class`](/en-US/docs/Web/HTML/Global_attributes/class) attribute on the `<b>` element in order to convey additional semantic information as needed (for example `<b class="lead">` for the first sentence in a paragraph). This makes it easier to manage multiple use cases of `<b>` if your stylistic needs change, without the need to change all of its uses in the HTML.
- Historically, the `<b>` element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of the `<b>` element has been changed.
- If there is no semantic purpose to using the `<b>` element, you should use the CSS {{cssxref("font-weight")}} property with the value `"bold"` instead in order to make text bold.

Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/html/element/bdi/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,15 @@ If `EMBEDDED-TEXT` is LTR, this works fine. But if `EMBEDDED-TEXT` is RTL, then
1 - EMBEDDED-TEXTst place
```

If you know the directionality of `EMBEDDED-TEXT` in advance, you can fix this problem by wrapping `EMBEDDED-TEXT` in a {{HTMLElement("span")}} with the [`dir`](/en-US/docs/Web/HTML/Global_attributes#dir) attribute set to the known directionality. But if you don't know the directionality - for example, because `EMBEDDED-TEXT` is being read from a database or entered by the user - you should use `<bdi>` to prevent the directionality of `EMBEDDED-TEXT` from affecting its surroundings.
If you know the directionality of `EMBEDDED-TEXT` in advance, you can fix this problem by wrapping `EMBEDDED-TEXT` in a {{HTMLElement("span")}} with the [`dir`](/en-US/docs/Web/HTML/Global_attributes/dir) attribute set to the known directionality. But if you don't know the directionality - for example, because `EMBEDDED-TEXT` is being read from a database or entered by the user - you should use `<bdi>` to prevent the directionality of `EMBEDDED-TEXT` from affecting its surroundings.

Though the same visual effect can be achieved using the CSS rule {{cssxref("unicode-bidi", "unicode-bidi: isolate")}} on a {{HTMLElement("span")}} or another text-formatting element, HTML authors should not use this approach because it is not semantic and browsers are allowed to ignore CSS styling.

Embedding the characters in `<span dir="auto">` has the same effect as using `<bdi>`, but its semantics are less clear.

## Attributes

Like all other HTML elements, this element supports the [global attributes](/en-US/docs/Web/HTML/Global_attributes), except that the [`dir`](/en-US/docs/Web/HTML/Global_attributes#dir) attribute behaves differently than normal: it defaults to `auto`, meaning its value is never inherited from the parent element. This means that unless you specify a value of either `rtl` or `ltr` for `dir`, the {{Glossary("user agent")}} will determine the correct directionality to use based on the contents of the `<bdi>`.
Like all other HTML elements, this element supports the [global attributes](/en-US/docs/Web/HTML/Global_attributes), except that the [`dir`](/en-US/docs/Web/HTML/Global_attributes/dir) attribute behaves differently than normal: it defaults to `auto`, meaning its value is never inherited from the parent element. This means that unless you specify a value of either `rtl` or `ltr` for `dir`, the {{Glossary("user agent")}} will determine the correct directionality to use based on the contents of the `<bdi>`.

## Examples

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/element/fieldset/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
- [`disabled`](/en-US/docs/Web/HTML/Attributes/disabled)
- : If this Boolean attribute is set, all form controls that are descendants of the `<fieldset>`, are disabled, meaning they are not editable and won't be submitted along with the {{htmlelement("form")}}. They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the {{HTMLElement("legend")}} element won't be disabled.
- `form`
- : This attribute takes the value of the [`id`](/en-US/docs/Web/HTML/Global_attributes#id) attribute of a {{HTMLElement("form")}} element you want the `<fieldset>` to be part of, even if it is not inside the form. Please note that usage of this is confusing — if you want the {{HTMLElement("input")}} elements inside the `<fieldset>` to be associated with the form, you need to use the `form` attribute directly on those elements. You can check which elements are associated with a form via JavaScript, using {{domxref("HTMLFormElement.elements")}}.
- : This attribute takes the value of the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attribute of a {{HTMLElement("form")}} element you want the `<fieldset>` to be part of, even if it is not inside the form. Please note that usage of this is confusing — if you want the {{HTMLElement("input")}} elements inside the `<fieldset>` to be associated with the form, you need to use the `form` attribute directly on those elements. You can check which elements are associated with a form via JavaScript, using {{domxref("HTMLFormElement.elements")}}.
- `name`

- : The name associated with the group.
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/element/heading_elements/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ When headings are nested, heading levels may be "skipped" when closing a subsect

Another common navigation technique for users of screen reading software is to generate a list of [sectioning content](/en-US/docs/Web/HTML/Element#content_sectioning) and use it to determine the page's layout.

Sectioning content can be labeled using a combination of the [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) and [`id`](/en-US/docs/Web/HTML/Global_attributes#id) attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.
Sectioning content can be labeled using a combination of the [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) and [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.

#### Sectioning content examples

Expand Down
Loading

0 comments on commit 816cc4d

Please sign in to comment.