There are a lot of HTML attributes, in addition to some basic attributes, there are many useful and particularly powerful attributes
This article will introduce 24 powerful HTML attributes that can make your website more dynamic and interactive, making users feel more comfortable and happy.
Let's explore these 24 powerful HTML attributes together!
1、Accept
The Accept attribute is used to specify a list of MIME types that the browser can handle.
hint:
A MIME type is a standard used to identify a document type,
For example, text/html means an HTML document, image/jpeg means a JPEG image, etc.
By including the Accept attribute in the HTTP request header, the browser can tell the server which MIME types it can accept in response. Based on this information, the server can choose the most appropriate response type and return it to the browser. The value of the Accept attribute is a comma-separated list of MIME types. Wildcards can be used to represent the categories of MIME types. For example, text/* represents all text types.
2、Autofocus
The Autofocus property is used to automatically set the focus to the specified element when the page loads.
hint:
Autofocus attributes can be applied to various HTML elements such as text boxes, buttons, drop-down lists, etc.
In HTML5, the Autofocus attribute can omit the attribute value, indicating that the focus is set to the first element with the Autofocus attribute.
When the page loads, if there is an element with the Autofocus attribute, the browser will automatically focus the cursor on that element, allowing the user to interact directly with that element without manually clicking or using the Tab key to switch focus.
3、Input mode
The Inputmode attribute is used to specify the type of input content in the input box.
It helps browsers better optimize the typing experience, for example, by automatically popping up the appropriate virtual keyboard on mobile devices.
text: The default value, which means input any text.
none: indicates that no input is required.
tel: Indicates to enter a telephone number.
url: Indicates the input URL address.
email: Indicates to enter an email address.
numeric: Indicates the input number.
decimal: Indicates inputting a number with a decimal point.
search: Indicates to enter a search keyword.
The level of support for the Inputmode attribute may vary in different browsers.
Therefore, compatibility testing is required when using the Inputmode property.
4、Pattern
The Pattern attribute is a regular expression pattern used to specify the input content in the input box. It can help the browser to verify whether the content entered by the user conforms to the specified format requirements.
If the content entered by the user does not match the regular expression pattern specified by the Pattern attribute, the browser will display a default error message.
hint:
The value of the Pattern attribute must be a valid regular expression.
The Pattern attribute can only be applied to elements that can enter text, such as text boxes, text fields, and password boxes.
The Pattern attribute will not prevent users from entering illegal characters, but will verify that the input content meets the specified format requirements when submitting the form.
The error message for the Pattern property can be customized using the title property.
Typically, the Pattern attribute is used together with the required attribute to ensure that the user input conforms to the specified format requirements and is not empty. For example, you can use the Pattern property to validate user input for zip codes, phone numbers, email addresses, and more.
5、Required
The Required attribute is an attribute used to specify whether a form element is required.
If a form element has a Required attribute, then when the form is submitted, if the value of the element is empty, the browser will prevent the form from being submitted and prompt the user to fill in the field.
hint:
The Required attribute can only be applied to form elements, not to other HTML elements.
The Required attribute does not verify whether the content entered by the user meets the specified format requirements, only whether the element is empty.
The Required attribute does not prevent users from submitting spaces or whitespace characters, so other means of validating user input are required.
The Required attribute can be used together with the Pattern attribute to verify that the user-entered content conforms to the specified format requirements.
The Required attribute can be used with the Autofocus attribute to ensure that when the user enters the form page, the focus is automatically on the required field.
The Required attribute is often used with the type attribute of form elements, such as text boxes, drop-down lists, radio boxes, check boxes, etc.
6、Autocomplete
The Autocomplete attribute is an attribute used to specify whether autofill is enabled for form elements.
The Autocomplete attribute helps users fill out forms faster and reduces the chance of typos.
hint:
on: The default value, which means that the autofill function is enabled.
off: Indicates that the autofill function is disabled.
name: Indicates that the name attribute of the form element is used as the keyword for automatic completion.
email: Indicates to use the most recent email address entered by the user as the autocomplete keyword.
username: Indicates that the user name recently entered by the user is used as the keyword for auto-completion.
current-password: Indicates that the password recently entered by the user is used as the keyword for auto-complete.
new-password: Indicates that the new password recently entered by the user is used as the keyword for auto-complete.
tel: Indicates to use the last phone number entered by the user as the keyword for autocomplete.
address-level1: Indicates that the country or region name recently entered by the user is used as the keyword for auto-completion.
address-level2: Indicates that the province or state name recently entered by the user is used as the keyword for auto-completion.
address-level3: Indicates that the city or region name recently entered by the user is used as the keyword for auto-completion.
address-level4: Indicates that the most recent street name entered by the user is used as the keyword for auto-completion.
country: Indicates that the country name recently entered by the user is used as the keyword for auto-complete.
The degree of support for the Autocomplete attribute may vary in different browsers. Therefore, compatibility testing is required when using the Autocomplete property.
7、Multiple
The Multiple attribute is an attribute used to specify whether a form element allows multiple selections. The Multiple attribute is typically applied to form elements such as dropdown lists, file uploads, and checkboxes.
The Multiple attribute is typically applied to form elements such as dropdown lists, file uploads, and checkboxes.
hint:
The Multiple attribute can only be applied to form elements such as drop-down lists, file uploads, and check boxes, and cannot be applied to form elements such as radio boxes and text boxes.
The value of the Multiple property must be a boolean value, true or false.
The default value of the Multiple attribute is false, which means that multiple selections are not allowed.
When the value of the Multiple property is true, the drop-down list will be displayed as a multi-selectable list box, the check box will be displayed as a multi-selectable check box list, and the file upload will allow the user to select multiple files.
When using the Multiple attribute, it is necessary to process the multi-selected values in the background program, for example, use an array to store the multi-selected values.
If the form element has the Multiple attribute set, the user can select multiple options, not just a single option.
8、Download
The Download attribute is an attribute for specifying a file name when linking to download a file.
If the link sets the Download attribute, then when the user clicks the link to download the file, the browser will save the file locally and use the file name specified by the Download attribute to name the file.
hint:
The value of the Download property can be any string representing the filename to use when downloading the file.
The Download attribute can only be applied to tags, not to other HTML elements.
The Download attribute doesn't change the actual file name, it just uses the specified file name when downloading.
The value of the Download attribute can be dynamically generated, for example using JavaScript to generate the filename.
When using the Download attribute, you need to ensure that the downloaded file is legal and does not violate the copyright and privacy of others.
The Download attribute is commonly used on tags to download PDFs, images, audio, video, and other files.
9、Contenteditable
The Contenteditable attribute is an attribute used in HTML to specify whether an element can be edited.
hint:
The value of the Contenteditable attribute can be true, false, or inherit.
The default value of the Contenteditable property is false, indicating that the element is not editable.
When the value of the Contenteditable property is true, the element is editable. When the value of the Contenteditable attribute is inherit, the editability of the element is inherited from the parent element.
The Contenteditable attribute does not change the default behavior of the element, eg tags can still jump to other pages.
When using the Contenteditable attribute, you need to pay attention to security issues to avoid XSS attacks and malicious script injection.
If an element sets the Contenteditable attribute, the user can enter text, insert pictures, modify styles, etc. in the element. The Contenteditable attribute is usually applied to elements such as <div> and <p> to implement functions such as rich text editors and editable tables.
10、Readonly
The Readonly attribute is an attribute in HTML that specifies whether a form element is read-only.
hint:
The value of the Readonly attribute must be a Boolean value, true or false.
The default value of the Readonly attribute is false, indicating that the form element is editable.
When the value of the Readonly attribute is true, the form element is read-only. The Readonly attribute cannot prevent users from modifying the value of form elements via JavaScript.
The Readonly attribute differs from the Disabled attribute, which disables the form element so that it cannot submit data.
When using the Readonly attribute, you need to process the read-only value in the background program, such as using a hidden field to store the read-only value.
If a form element has the Readonly attribute set, the user can see the value of the element, but cannot modify the value of the element. Typically, the Readonly attribute is applied to form elements, such as text boxes, drop-down lists, and date pickers, to display data or prevent users from modifying data.
11、Hidden
The Hidden attribute is an attribute used to specify whether an element is hidden.
hint:
The hidden attribute is an attribute that specifies whether an element is hidden. The value of the hidden attribute must be a boolean value, either true or false.
By default, the value of the hidden attribute is false, indicating that the element is not hidden.
When the value of the hidden attribute is true, the element will be hidden.
It should be noted that the hidden property is different from the display:none property of CSS. The display:none attribute completely removes the element from the page, so it cannot be accessed via JavaScript or otherwise.
When using hidden properties, you need to handle hidden values in the background process, such as using hidden fields to store hidden values.
If an element has the Hidden attribute set, the element will not be displayed on the page, but it still exists on the page and can be accessed through JavaScript, etc. The Hidden attribute is usually applied to elements such as form elements, buttons, images, etc. to pass data or control page behavior without affecting page layout. Note that the Hidden property is not the same as the CSS display:none property. The display:none attribute completely removes the element from the page, and the element cannot be accessed via JavaScript or otherwise. When using the Hidden attribute, hidden values need to be processed in the background program, such as using hidden fields to store hidden values.
12.Spellcheck
The Spellcheck attribute is an attribute in HTML that specifies whether to enable spell checking for an element.
hint:
When an element sets the Spellcheck attribute, the element can enable spell checking.
The value of this attribute can only be a Boolean value, true or false. By default, the value of the Spellcheck attribute is false, indicating that the element does not enable spell checking.
When the value of the Spellcheck attribute is true, the element enables spell checking.
However, the extent to which this property is supported by different browsers may vary, and different browsers may have different spell-checking algorithms and dictionaries.
When using the Spellcheck attribute, you need to pay attention to security issues to avoid XSS attacks and malicious script injection.
If an element has the Spellcheck attribute set, then when the user enters text in the element, the browser will automatically check for spelling errors and display a red wavy line under the incorrect word. The Spellcheck attribute is typically applied to elements such as text boxes and text fields to improve the accuracy of user input.
13. Translate
If an element has the Translate attribute set, it specifies whether the element needs to be translated. This attribute is usually used in the case of multilingual web pages to control whether certain elements need to be translated.
hint:
The value of the Translate attribute must be yes or no, indicating whether the element needs to be translated.
The default value of the Translate attribute is yes, indicating that the element needs to be translated.
When the value of the Translate attribute is no, the element does not need to be translated.
Different browsers support the Translate property differently, and may have different translation algorithms and dictionaries.
When using the Translate attribute, you need to pay attention to security issues to avoid XSS attacks and malicious script injection.
If an element has the Translate attribute set, the browser will decide whether to translate the content of the element according to the value of the attribute. The Translate attribute is often used in multilingual versions of websites to control which elements need to be translated and which elements do not.
14. Loading
"Loading" is a new attribute in HTML that can be used to specify the priority of the browser when loading resources. When loading a web page, the browser will load resources according to the specified priority, so as to improve the loading speed of the web page and user experience.
This attribute can be applied to tags such as <img>, <iframe>, <script>, <link> and <audio>.
hint:
lazy: Indicates that the resource should be loaded lazily after the page loads. It's the default value.
eager: Indicates that the resource should be loaded as soon as the page loads.
auto: Indicates that the browser should decide when to load the resource by itself.
Not all browsers support loadingAttributes, so compatibility checks are required when using them.
15、Onerror
onerror is a JavaScript event handler for handling JavaScript errors.
An onerror event handler can be added to the window object to catch JavaScript errors globally.
hint:
message: error message.
source: The URL of the script where the error occurred.
lineno: The line number where the error occurred.
colno: The column number where the error occurred.
error: An Error object containing details about the error.
The onerror event handler can only catch JavaScript errors that are not caught by other error handlers. Therefore, it is best to use try-catch statements in your code to catch and handle JavaScript errors.
16、Poster
poster is an attribute of the HTML5 <video> tag that specifies an image to display before the video is loaded and played.
hint:
The poster attribute only applies to <video> tags, not to <audio> tags.
It is commonly used to provide a preview image or thumbnail of a video.
17、Controls
controls is an attribute in HTML5 <video>, <audio> tags, which is used to specify whether to display the controls of the media player.
If the controls property is set to controls, controls will be displayed on the media player, such as a play/pause button, volume control, progress bar, etc.
<!DOCTYPE html>
<html>
<head>
<title>Controls Example</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>`The controls attribute is only available in browsers that support HTML5. If the browser does not support HTML5, the control will not be displayed.
18、Autoplay
autoplay is an attribute in the HTML5 <video>, <audio> tags that specifies whether the media should play automatically on page load.
If the autoplay attribute is set to autoplay, the video will play automatically when the page loads.
<!DOCTYPE html>
<html>
<head>
<title>Autoplay Example</title>
</head>
<body>
<video width="320" height="240" autoplay>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>`Autoplay can negatively affect the user experience, so use the autoplay attribute with caution. In some cases, browsers may prevent autoplay, such as on mobile devices, where the user must first interact with the page to allow autoplay.
19、Loop
loop is an attribute in HTML5 <video>, <audio> tags, which is used to specify whether the media should be played in a loop after the end of playback.
If the loop property is set to loop, the video will loop after it finishes playing.
<!DOCTYPE html>
<html>
<head>
<title>Loop Example</title>
</head>
<body>
<video width="320" height="240" loop>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>`Looping may negatively impact the user experience, so use the loop attribute with caution.
20、Cite
cite is a global attribute in HTML that can be used to specify the source of a citation.
The value of the cite attribute should be a URL pointing to the source of the citation.
hint:
The cite attribute can be applied to tags such as <blockquote>, <q>, <del>, etc.
If the citation source is not a URL, the value of the cite attribute can be set to a string describing the source of the citation
<!DOCTYPE html>
<html>
<head>
<title>Cite Example</title>
</head>
<body>
<blockquote cite="https://www.example.com/quote">
This is a quote from an external source.
</blockquote>
<q cite="https://www.example.com/quote">
This is a short quote from an external source.
</q>
<del cite="https://www.example.com/deleted">
This text has been deleted from an external source.
</del>
<ins cite="https://www.example.com/inserted">
This text has been inserted from an external source.
</ins>
</body>
</html>The cite attribute does not automatically create a link, so if you need to create a link, you need to use the <a> tag and set the href attribute to the value of the cite attribute.
21、Datetime
datetime is an attribute in the HTML <time> tag that specifies a date and time. The datetime attribute is used to specify the date and time in the HTML <time> tag. It provides a standardized way to represent time and date information, and it helps search engines and browsers understand date and time information in web pages. In addition, the datetime attribute can also be used to calculate the time difference, so as to realize some time-related functions.
The value of the datetime attribute should be a valid date and time format, such as YYYY-MM-DDThh:mm:ss.
The datetime property does not automatically format the date and time, so you will need to use JavaScript or other tools to format the date and time.
22、Async
async is an attribute in the HTML <script> tag that specifies whether the script should be loaded asynchronously.
If the async attribute is set to async, the script will be loaded asynchronously and will not block parsing and rendering of the page.
Scripts loaded asynchronously may execute before the rest of the page loads, so use with caution. This can cause errors if the script depends on other parts of the page.
23、Defer
defer is an attribute in the HTML <script> tag that specifies whether the script should be lazy loaded.
If the defer attribute is set to defer, the script will delay loading after page parsing is complete until it is executed.
<!DOCTYPE html>
<html>
<head>
<title>Defer Example</title>
<script defer src="script.js"></script>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>In the above example, we set the defer attribute to defer, which will cause the script to be lazy loaded. In this case the script will be executed after the page has been parsed and will not block the page from loading.
24、Draggable
Draggable Draggable is an attribute in HTML5 that allows users to move elements by dragging them. When an element is set to draggable, the user can drag the element using the mouse or touch screen. When dragging an element, a series of events will be triggered, such as dragstart, drag, dragenter, dragleave, dragover, and dragend, which can be used to implement the drag and drop function.
Finish
If you are a professional front-end engineer, you must have used many attributes! Are you using the 24 powerful attributes shared above in your projects?
At the end of the article, I would like to remind you that it is not easy to create an article. If you like my sharing, please don’t forget to like and forward it so that more people in need can see it. At the same time, if you want to gain more knowledge of front-end technology, welcome to follow me, your support will be the biggest motivation for me to share. I will continue to output more content, so stay tuned.
Original:
https://javascript.plainenglish.io/24-powerful-html-attributes-every-senior-web-engineer-should-master-ad8a4df0776eAuthor: Xiuer Old
Indirect translation, some self-adapted and added parts, the translation level is limited, it is inevitable that there are omissions, welcome to correct