Core attributes in HTML are attributes that can be applied to almost all HTML elements. They provide basic functionalities and properties to elements. Here are some core attributes commonly used in HTML:
1. id: Specifies a unique identifier for an element. The value must be unique within the HTML document.
<div id="header">...</div>
2. class: Specifies one or more class names for an element, which can be used to apply CSS styles or JavaScript functionality.
<div class="container">...</div>
3. style: Allows inline CSS styling to be applied directly to an element.
<p style="color: red; font-size: 16px;">...</p>
4. title: Provides additional information about the element, typically displayed as a tooltip when the user hovers over the element.
<img src="example.jpg" alt="Example" title="This is an example image">
5.lang: Specifies the language of the content within the element.
<html lang="en">
6. dir: Specifies the direction of the text within the element, either left-to-right (ltr) or right-to-left (rtl).
<div dir="rtl">...</div>
7. tabindex: Specifies the order in which an element receives focus when navigating through the document using the Tab key.
<input type="text" tabindex="1">
8. accesskey: Defines a keyboard shortcut to navigate to or activate the element.
<button accesskey="s">Save</button>
9. contenteditable: Indicates whether the element's content can be edited by the user.
<div contenteditable="true">Editable content</div>
10. hidden: Hides the element from being displayed in the browser.
<div hidden>Hidden content</div>
11. role: Specifies the role of the element in accessibility technologies like screen readers.
<div role="navigation">...</div>
12. aria-* attributes: A set of attributes used for accessible Rich Internet Applications (ARIA). They provide additional information to assistive technologies.
<div role="button" aria-label="Close" tabindex="0"></div>
'13. draggable: Indicates whether an element is draggable. It allows the user to drag and drop elements.
<img src="example.jpg" draggable="true">
14. spellcheck: Specifies whether the element's content should be checked for spelling errors.
<textarea spellcheck="true"></textarea>
15. contenteditable: Indicates whether the content of an element is editable by the user.
<div contenteditable="true">Editable content</div>
16. data-* attributes: Custom attributes used to store custom data for an element. They are accessible via JavaScript and CSS.
<div data-id="123" data-category="books"></div>
17. autocomplete: Specifies whether the browser should automatically complete the input value based on previous user input.
<input type="text" autocomplete="on">These attributes offer additional control, accessibility, and customization options for HTML elements, enhancing the user experience and enabling developers to build more interactive and accessible web applications.