Độ dài tối đa thực tế cho id HTML là gì?


88

Thông số kỹ thuật HTML cho biết

Mã thông báo ID và TÊN phải bắt đầu bằng một chữ cái ([A-Za-z]) và có thể được theo sau bởi bất kỳ số chữ cái, chữ số ([0-9]), dấu gạch ngang ("-"), dấu gạch dưới ("_") , dấu hai chấm (":") và dấu chấm (".").

Và mặc dù khai báo SGML của HTML 4 sử dụng giá trị 65536 cho NAMELEN, nó lưu ý "Tránh các giới hạn cố định."

Nhưng chắc chắn các trình duyệt, triển khai CSS và bộ công cụ JavaScript phải có một số giới hạn về độ dài mà chúng hỗ trợ. Giới hạn nhỏ nhất như vậy an toàn để sử dụng trong ứng dụng HTML / CSS / JS là gì?


3
Cảm ơn bạn và +1 đã chỉ ra rằng ID phải bắt đầu bằng một chữ cái. Tôi đã sử dụng các ID như '1', '2', '3', '4', '5' mà không gặp vấn đề gì. Tôi thực hiện rất nhiều widget và yếu tố tương tác liên quan đến khảo sát và sử dụng IDS như thế này được tạo cho một thuộc tính 'điểm' thuận tiện cũng như tham chiếu ID. Hôm nay tôi đã cố gắng làm cho một số CSS hoạt động mà lẽ ra nó phải hoạt động. Tôi thậm chí đã chạy nó qua trình xác thực W3C và nó không cảnh báo tôi về vấn đề này ... Nhưng bài đăng này đã làm được. Và bây giờ khi tôi thay đổi id = '5' thành 'x5x' thì css hoạt động ... Bây giờ tôi chỉ cần thay đổi chương trình con tính điểm để loại bỏ dấu x! Thx một lần nữa.
Ben A. Hilleli

Câu trả lời:


216

Mới thử nghiệm: 1 triệu ký tự hoạt động trên mọi trình duyệt hiện đại: Chrome1, FF3, IE7, Konqueror3, Opera9, Safari3.

Tôi nghi ngờ rằng những ID dài hơn cũng có thể trở nên khó nhớ.


15
Anh chàng này đã thực hiện được 10 "triệu" ký tự! stackoverflow.com/a/1496150/74585
Matthew Lock

1
Tôi xin lỗi. 1 triệu? Như trong 1 triệu?
beliha

8
@phihag Khi tôi học CS ở Toronto, và người hướng dẫn châm biếm rằng "tất nhiên mọi người đều biết tại sao lại thiếu 10 ngày trong lịch Gregory vào tháng 10 năm 1582", tôi đã phải hỏi một đồng nghiệp, người này nhìn tôi và nói với vẻ trịch thượng " Bởi vì lịch Gregorian được thông qua, cái gì, bạn chưa bao giờ đi học tiểu học? " Tôi đã không. Không phải ở Canada. Tôi đi học tiểu học ở Ai Cập, và thay vào đó tôi học về Lịch Hồi giáo. Điều tương tự với các tiền tố SI: bạn có thể có lợi ích của nền giáo dục phương Tây, tôi thì không. Nhưng dù sao cũng cảm ơn vì thái độ hạ mình.
beliha

2
@beliha Khá chắc chắn rằng ít nhất ở đây ở Bồ Đào Nha, tôi chưa bao giờ nghe nói rằng lịch Gregory thiếu 10 ngày vào tháng 10 năm 1582 và tôi đoán rằng tôi không phải là người duy nhất. Tôi không nghĩ rằng trường học đã bao giờ dạy điều đó từ những gì tôi có thể nhớ được nên sẽ là điều táo bạo đối với bất kỳ ai khi mong mọi người biết điều đó.
user7393973

1
@beliha Tôi đã học trường phương Tây và thậm chí không biết rằng chúng tôi sử dụng lịch Gregory (ít nhất là theo tên này), chúng tôi chỉ sử dụng thuật ngữ lịch độc lập. và khoảng 10 ngày thiếu sót này, tôi đã học được từ youtube.
Tinaira

15

Đối với tôi, một giới hạn thực tế là ID tôi có thể lưu trữ trong đầu trong thời gian tôi làm việc với HTML / CSS.

Giới hạn này thường là từ 8 đến 13 ký tự, tùy thuộc vào thời gian tôi đã làm việc và nếu các tên có ý nghĩa trong ngữ cảnh của phần tử.


5
Tôi muốn nói thêm rằng có thể mở rộng "bộ đệm nội bộ" của một người bằng cách sử dụng các tiền tố, nếu cần. :-)
Ben Blank

12
Câu hỏi này vẫn rất quan trọng, bởi vì với RIA, thường thời gian ID được tạo bằng mã và để trở thành duy nhất, có thể dài; như một ví dụ: window_2_panel_12_group_6_label_2 _...
Josh

3

Đôi khi tôi sẽ kết thúc với các ID rất dài, nhưng tôi đặt tên chúng nhất quán để phù hợp với mục đích chính xác của chúng.

Ví dụ...

<div id="page">
    <div id="primary-content"></div>
    <div id="secondary-content"></div>
    <div id="search-form-and-primary-nav-wrapper">
        <form id="search-form"></form>
        <ul id="primary-nav">
            <li id="primary-nav-about-us"></li>
        </ul>
    </div>
    <a id="logo"><img /></a>
</div><!-- /#page -->

Như bạn có thể thấy, các bộ chọn đôi khi khá dài. Nhưng IMHO dễ dàng hơn rất nhiều so với làm việc với một cái gì đó như YUI grids.css nơi bạn kết thúc với các ID như #doc, #bd, # yui-main, v.v.


3
Những gì tôi làm rất nhiều là đặt tên chúng theo phương pháp truyền thống, vì vậy hãy có div id = 'user', sau đó trong đó tôi có thể có ba div, id = 'user-stats', id = 'user-kho', id = 'user- phép thuật ', sau đó nói trong số liệu thống kê người dùng, tôi có thể có 5 div, id =' user-stats-strength ', id =' user-stats-agility ', id =' user-stats-Defense ', id =' user- thống kê-trí tuệ ', id =' người dùng-thống kê-sức khoẻ ', v.v., mà tôi thấy rất hữu ích để nhớ id của họ, miễn là tôi duy trì các quy ước đặt tên, tức là -'s hoặc _ cho dấu cách hoặc camelCase.
Psytronic

2

Nếu đây là một câu hỏi mang tính học thuật, thì nó khá thú vị ... nhưng theo các phương pháp hay nhất có liên quan, bạn không cần - hoặc không muốn - kéo dài chúng ra. Nếu bạn cần lưu trữ dữ liệu về một phần tử HTML, tốt hơn nên đặt nó vào một thuộc tính trên đối tượng DOM.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.