Section 1.1: The enterkeyhint Attribute

The enterkeyhint attribute is a new addition to the HTML <input> tag. This attribute influences the style and behavior of the enter key on virtual keyboards, particularly on mobile devices and tablets. It helps users understand the action that will occur when they press enter. Common values for this attribute include "enter," "done," "go," "next," "previous," "search," and "send."

For instance, if you set enterkeyhint="search" in a search input box, the enter key on a mobile device will display "Search," allowing users to submit their query easily.

Here's an example showcasing the enterkeyhint property set to "search":

The possible values for enterkeyhint and their meanings are as follows:

• "enter": Default behavior for a newline operation.
• "done": Indicates completion of input, often changing the key to "done" after the last form field.
• "go": Initiates navigation to a new page or starts a process.
• "next": Moves the user to the next input field in multi-field forms.
• "previous": Takes the user back to the previous input field.
• "search": Triggers a search operation in a search box.
• "send": Indicates that a message or text will be sent, useful in chat or email applications.

Section 1.2: Customizing Ordered Lists

When working with ordered lists, several lesser-known attributes can help customize the numbering:

• reversed: Allows the list to be numbered in reverse order, from high to low.
• start: Specifies the starting number for the list.
• type: Defines whether to use numbers, letters, or Roman numerals.
• value: Sets a custom number for specific list items.

For example:

<ol reversed start="10">

<li>Item 10</li>

<li>Item 9</li>

<li>Item 8</li>

</ol>

Section 1.3: The Decoding Attribute of Images

The decoding attribute of the <img> tag controls how images are decoded. It has three possible values:

• sync: Decodes the image synchronously, blocking page rendering until the image is fully decoded, which may delay the initial visual display.
• async: Decodes the image asynchronously, allowing for a smoother page load but potentially displaying partially loaded images initially.
• auto: Lets the browser decide the best method for decoding.

Here is an example illustrating the use of the decoding attribute:

Section 1.4: The Loading Attribute of Iframes

The loading attribute on <iframe> tags optimizes page loading performance. It determines when the iframe content should begin loading and can take three values:

• eager: The default setting that loads the iframe immediately, regardless of its position on the screen.
• lazy: Initiates loading only when the iframe is about to enter the viewport, improving load times, especially for pages with multiple iframes.
• auto: Allows the browser to decide the loading timing.

Section 1.5: The Crossorigin Attribute

The crossorigin attribute is essential for cross-origin resource sharing (CORS). It is used with elements such as <img>, <script>, and <link> to control how resources are requested from different origins.