Nếu là một lập trình viên web, chắc hẳn bạn đã quen thuộc với việc thiết kế và lập trình một website sử dụng HTML rồi đúng không. Thế nhưng HTML có bao nhiêu thuộc tính toàn cục và vận dụng chúng như thế nào liệu bạn đã nắm bắt được hay chưa? Trong bài viết này, Stringee và các bạn sẽ cùng nhau tìm hiểu về chủ đề này nhé.

1. Global attribute trong HTML là gì?

Global attribute là thuộc tính chung của tất các các phần tử, các thẻ trong HTML. Chúng ta có thể sử dụng chúng trên tất cả các phần tử kể cả việc nó cũng có thể không có tác dụng trên một số phần tử nhất định.

Các Global attribute có thể được chỉ định trên tất cả các phần tử HTML, ngay cả những phần tử không được chỉ định trong tiêu chuẩn. Điều đó có nghĩa là bất kỳ phần tử không chuẩn nào vẫn phải cho phép các thuộc tính này, mặc dù việc sử dụng các phần tử đó có nghĩa là tài liệu không còn tuân thủ HTML5 nữa. Ví dụ: các trình duyệt tuân thủ HTML5 ẩn nội dung được đánh dấu là <foo hidden> … </foo>, ngay cả khi <foo> không phải là một phần tử HTML hợp lệ.

2. Danh sách các global attribute trong HTML

  • accessKey: định nghĩa một phím tắt cho phần tử hiện tại
<a href="https://www.w3schools.com/html/" accesskey="h">HTML</a><br>
<a href="https://www.w3schools.com/css/" accesskey="c">CSS</a>
  • class: định nghĩa một hay nhiều tên class cho một phần tử
<html>
<head>
<style>
h1.intro {
  color: blue;
}

p.important {
  color: green;
}
</style>
</head>
<body>

<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>

</body>
</html>
  • contenteditable: cho biết nội dung của phần tử đó có được phép chỉnh sửa hay không
<p contenteditable="true">This is an editable paragraph.</p>
  • data-*: sử dụng để lưu các thông tin của riêng website hoặc ứng dụng

>>> Xem thêm bài viết:

- Hướng dẫn cài đặt unix linux 

- Hướng dẫn cài đặt k8s Kubenertes Cluster

- Scheduling - Lập lịch trên K8s

<p contenteditable="true">This is an editable paragraph.</p>
  • dir: liệt kê cho biết hướng của phần tử. Nó sẽ nhận vào các giá trị sau ltr (trái sang phải), rtl (phải sang trái), auto (do tác nhân người dùng quyết định)
<p dir="rtl">Write this text right-to-left!</p>
  • draggable: cho biết phần tử có được phép kéo thả hay không
<input type="text" enterkeyhint="search">
  • enterkeyhint: định nghĩa phím hoặc từ có thể hiển thị các gợi ý
<input type="text" enterkeyhint="search">
  • hidden: phần tử có bị dấu hay không
<p hidden>This paragraph should be hidden.</p>
  • id: định nghĩa một giá trị id duy nhất cho phần tử
<html>
<body>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>
  • inert: trình duyệt nên bỏ qua phần tử này
<div inert>
  <button onclick="alert(42)">
  <input type="text">
  <a href="https://w3schools.com">W3Schools.com</a>
</div>
  • intputmode: chế độ bàn phím ảo được sử dụng
<input type="text" inputmode="numeric">
  • lang: cho biết ngôn ngữ sử dụng cho phần tử
<p lang="fr">Ceci est un paragraphe.</p>
  • popover: định nghĩa một popover element
<h1 popover id="myheader">Hello</h1>
<button popovertarget="myheader">Click me!</button>
  • spellcheck: phần tử có tính năng check chính tả hay không
<p contenteditable="true" spellcheck="true">This is a paragraph.</p>
  • style: inline css cho phần tử
<h1 style="color:blue;text-align:center;">This is a header</h1>
<p style="color:green;">This is a paragraph.</p>
  • tabindex: thứ tự tab cho phần tử
<a href="https://www.w3schools.com/" tabindex="2">W3Schools</a>
<a href="http://www.google.com/" tabindex="1">Google</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
  • title: thông tin thêm cho phần tử
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p title="Free Web tutorials">W3Schools.com</p>
  • translate: chỉ ra rằng nội dung trong phần tử có nên được dịch hay không
<p translate="no">Don't translate this!</p>
<p>This can be translated to any language.</p>

Kết

Trên đây là những chia sẻ từ Stringee về các thuộc tính mà chúng ta có thể đặt được cho bất kỳ phần tử HTML nào. Nên nhớ rằng các thuộc tính này không phải lúc nào cũng sẽ cho ra kết quả như nó có thể khi đặt vào các thẻ không được hỗ trợ. 

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy,  Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: