HTML global attributes

 All HTML elements have attributes, which we call global attributes, which can be used in all elements. We will introduce these attributes one by one below.

id Unique element identification symbol

id is used to set the unique identifier of HTML elements. The id of each HTML element needs to be unique and not repeatable in the entire HTML document.

There are three purposes for setting id:

1. Used as the anchor name of the <a> link. For example, clicking the link <a href="#myid">will jump to <tag id="myid">the element at
2. Used in JavaScript, the element can be accessed by id
3. Used in CSS, id can be used as selector (selector)

Id name can have characters with ASCII letters, numbers, bottom line _, a bar -and point ..

Syntax example:

<p id="exciting">The most exciting paragraph on the page. One of a kind!</p>

class Element category name

class is used to set the class names of HTML elements. Each HTML element can have multiple categories. You can use space-separated to create different category names.

class has two purposes:

1. Used in JavaScript, the element can be accessed through class
2. Used in CSS, class can be used as a selector (selector)

The naming rules for class are:

1. Start with an AZ or az
2. Then any of these A-Z a-z 0-9 - _characters
3. class name is case-sensitive

Syntax example:

<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>

style Set CSS style

style is used to directly set the CSS style (inline style) of the HTML element, and the CSS priority set with the style attribute is the highest, which will override the style written in <style> or an external style sheet .

Syntax example:

<p style="padding: 15px; line-height: 1.5; text-align: center; border: 3px solid #000;">
   Hello World!
</p>

show result:

Hello World!

title

The title is used to provide additional information about the HTML element. When the mouse moves over the element, a tooltip will appear in the browser to display the title.

Syntax example:

<div title="hello~~">Hover Me!</div>

data-*

The data attribute data-* of the HTML element is used to store custom data attributes, usually used to interact with JavaScript access.

Defining a data attribute data-* consists of two parts:

1. data- beginning
2. Then any string represents the data name

Syntax example:

<img src="ship.png"
     data-ship-id="324"
     data-weapons="laserI laserII"
     data-shields="72%"
     data-x="414354"
     data-y="85160"
     data-z="31940">

tabindex

tabindex sets a number to set the HTML element to be focusable, and you can jump to the element when you press the tab key, and the order of the tabindex numbers also represents the jump order when you press the tab key.

If tabindex is set to a negative number, it means that the element can be focused, but it does not participate in the navigation switching of keyboard keys (such as tab).

Syntax example:

<a href="https://www.fooish.com/" tabindex="2">Fooish</a>
<a href="https://www.google.com/" tabindex="1">Google</a>
<a href="https://www.facebook.com/" tabindex="3">Facebook</a>

contenteditable

contenteditable is used to set whether the content of the element can be edited by the user (editable).

contenteditable has two attribute values:

• true: Indicates that the element can be edited
• false: Indicates that the element cannot be edited (default value)

Syntax example:

<div contenteditable="true">
    <p>點我看看是不是可以編輯</p>
</div>

show result:

Click me to see if it can be edited

dir Text direction

dir is used to set the direction order of language and text, dir has these values:

• ltr: Left to right, like English
• rtl: Right to left, like Arabic
• auto: Let the browser automatically determine, the default value

Syntax example:

<p dir="rtl">This paragraph is in English but incorrectly goes right to left.</p>
<p dir="ltr">This paragraph is in English and correctly goes left to right.</p>
<p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
<p dir="auto">هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>

show result:

This paragraph is in English but incorrectly goes right to left.

This paragraph is in English and correctly goes left to right.

This paragraph is in Arabic, but incorrectly from left to right.

This paragraph is in Arabic, so you must move from right to left.

draggable Elements that can be dragged

draggable specifies that the element can be dragged (drag and drop), usually with JavaScript.

draggable has two attribute values:

• true: Indicates that the element can be dragged
• false: Indicates that the element cannot be dragged (default value)

Syntax example:

<p draggable="true">This is a draggable paragraph.</p>

hidden Hidden element

Hidden is used to set whether the HTML element should be hidden from the screen. Usually, the user can only see it after meeting certain conditions. hidden is a boolean.

Syntax example:

<p>You can see me</p>
<p hidden>You can not see me</p>

show result:

You can see me

accesskey Assign keyboard shortcuts

accesskey is used to generate keyboard shortcuts so that the HTML element can be accessed quickly, and the attribute value of accesskey is to specify a character (English word or number).

Syntax example:

<button accesskey="s">Stress reliever</button>

Different operating systems or browsers have different ways of using shortcut keys:

Windows shortcut keys:

• Firefox: Alt + Shift + key
• Edge: Alt + key
• Internet Explorer: Alt + key
• Google Chrome: Alt + Shift + key
• Safari: Alt + key
• Opera: Alt + key

Mac shortcut keys:

• Firefox: Control + Option + key 或 Control + Alt + key
• Google Chrome: Control + Alt + key
• Safari: Control + Alt + key
• Opera: Control + Alt + key

lang

lang is used to provide language information about the content of a webpage, declare the language of the content of an HTML element (language), can be used to help search engines (Google) to determine the content, used in CSS selectors, etc.

<html lang="en">
  <p>This paragraph is English.</p>
  
  <p lang="en-GB">This paragraph is defined as British English.</p>
  <p lang="fr">Ce paragraphe est défini en français.</p>
</html>

Common lang settings:

• English en
• French fr
• traditional Chinese zh-Hant
• Traditional Chinese used in Taiwan zh-Hant-TW
• Traditional Chinese for Mainland China zh-Hant-CN
• Traditional Chinese in Hong Kong zh-Hant-HK
• Traditional Chinese used in Macau zh-Hant-MO
• Traditional Chinese in Singapore zh-Hant-SG
• Simplified Chinese zh-Hans
• Simplified Chinese for Taiwan zh-Hans-TW
• Simplified Chinese for Mainland China zh-Hans-CN
• Simplified Chinese for Hong Kong zh-Hans-HK
• Simplified Chinese for Macau zh-Hans-MO
• Simplified Chinese in Singapore zh-Hans-SG
• Hakka zh-hakka

spellcheck Automatic instant spell check

Controls whether the browser should perform instant spell checking on the content. This is usually used on editable elements, such as <input>, <textarea> or contenteditable="true" elements.

spellcheck has two attribute values:

• true: Indicates to open spell check
• false: Indicates to turn off spell check

Syntax example:

<p contenteditable spellcheck="true">This exampull will be checkd fur spellung when you try to edit it.</p>

translate Whether the statement content needs to be translated

Translate is used to declare that the content of the HTML element needs to be translated. This attribute will be used for example when Google Translate does web page translation.

There are two attribute values ​​for translate:

• yes: Indicates that it needs to be translated
• no: Indicates that it does not need to be translated

Syntax example:

<footer>
  <small>© 2020 <span translate="no">BrandName</span></small>
</footer>