Чи слід робити HTML-якіри з 'name' або 'id'?

Коли ви хочете звернутися до певної частини веб-сторінки http://example.com/#fooметодом " ", слід скористатися

<h1><a name="foo"/>Foo Title</h1>

або

<h1 id="foo">Foo Title</h1>

Вони обидва працюють, але вони рівні, чи мають смислові відмінності?

Відповідно до специфікації HTML 5, 5.9.8 Навігація до ідентифікатора фрагмента :

Для документів HTML (і типу MIME text / html) слід дотримуватися наступної моделі обробки, щоб визначити, що є зазначеною частиною документа.

1. Проаналізуйте URL-адресу, і нехай fragid буде <fragment> компонентом URL-адреси.
2. Якщо непомітним є порожній рядок, то зазначена частина документа - це верхня частина документа.
3. Якщо в DOM є елемент, який має ідентифікатор, точно рівний fragid, тоді першим таким елементом у порядку дерева є зазначена частина документа; зупиніть алгоритм тут.
4. Якщо в DOM є елемент, який має атрибут імені, значення якого точно дорівнює fragid, то першим таким елементом у порядку дерева є зазначена частина документа; зупиніть алгоритм тут.
5. В іншому випадку не зазначена частина документа.

Отже, це буде шукати id="foo", а потім буде слідуватиname="foo"

Редагування: Як вказував @hsivonen, у HTML5 aелемент не має атрибута імені. Однак вищезазначені правила все ще застосовуються до інших названих елементів.

Ви не повинні використовувати <h1><a name="foo"/>Foo Title</h1>жоден аромат HTML, який використовується text/html, оскільки синтаксис порожнього елемента XML не підтримується в text/html. Однак <h1><a name="foo">Foo Title</a></h1>у HTML4 гаразд. Він недійсний у HTML5, як зараз розробляється.

<h1 id="foo">Foo Title</h1>добре в HTML4 та HTML5. Це не буде працювати в Netscape 4, але ви, ймовірно, буде використовувати десяток інших функцій, які не працюють у Netscape 4.

Я мушу сказати, якщо ви збираєтеся посилатися на цю область на сторінці ... наприклад, page.html # foo та Foo Title не є посиланням, яке ви повинні використовувати:

<h1 id="foo">Foo Title</h1>

Якщо замість цього поставити <a>посилання навколо нього, на заголовок буде впливати <a>конкретна CSS на вашому веб-сайті. Це просто додаткова розмітка, і вона вам не потрібна. Я настійно рекомендую розміщувати ідентифікатор на заголовку не тільки, що він краще формується, але він дозволить вам або адресувати цей об’єкт у Javascript або CSS.

У Вікіпедії активно використовується ця функція:

<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>

І Вікіпедія працює для всіх, тому я б почувався безпечним дотримуватися цієї форми.

Крім того, не забувайте, ви можете використовувати це не тільки з прольотами, але і з divs або навіть клітинками таблиці, і тоді у вас є доступ до: target pseudo-class на елементі. Просто слідкуйте за тим, щоб не змінювати ширину, як, наприклад, жирним текстом, тому що переміщується вміст навколо, що турбує.

Іменні якіри - мій голос - уникнути:

• "Імена та ідентифікатори знаходяться в одному просторі імен ..." - Два атрибути з однаковим простором імен просто божевільні. Скажімо, вже застарілі.
• "Прив’язуючі елементи без href atribute" - І знову ж таки, характер елемента (гіперпосилання чи ні) визначається тим, що має атрибут ?! Подвійний божевільний. Здоровий глузд говорить уникати цього взагалі.
• Якщо ви коли-небудь стиліть якір без псевдокласу, стайлінг стосується кожного. У CSS3 ви можете обійти це за допомогою селекторів атрибутів (або однакового стилю для кожного псевдокласу), але все-таки це вирішення. Зазвичай це не виходить, оскільки ви вибираєте кольори за псевдокласом, а підкреслення, яке присутнє за замовчуванням, його має лише сенс видалити, що робить його таким же, як і інший текст. Але ви коли-небудь вирішите зробити свої посилання жирними, це спричинить проблеми.
• Netscape 4 може не підтримувати функцію id, але все ж невідомий атрибут не спричинить жодних проблем. Це те, що для мене викликало сумісність.

<h1 id="foo">Foo Title</h1>

це те, що слід використовувати. Не використовуйте якір, якщо не хочете посилання.

Голова для користувачів JavaScript: всі ідентифікатори стають глобальними змінними під вікном .

<h1 id="foo">Foo Title</h1>

Щойно створений глобальний JS:

window.foo

Значення window.fooбуде значення HTMLElementдля h1.

Якщо ви не можете гарантувати, що всі значення, використані в idатрибутах, є безпечними, ви можете віддати перевагу дотримуванню name:

<h1 name="foo">Foo Title</h1>

Семантичної різниці немає; тенденція стандартів спрямована на використання, idа не на використання name. Однак існують відмінності, які можуть nameу деяких випадках віддати перевагу . Специфікація HTML 4.01 пропонує такі підказки :

Використовувати idабо name? Автори повинні враховувати такі питання, вирішуючи, використовувати idчи використовувати nameім'я якоря:

• Атрибут id може виступати не тільки як ім'я якоря (наприклад, селектор аркушів стилів, ідентифікатор обробки тощо).
• Деякі старші користувацькі агенти не підтримують якір, створений за допомогою атрибута id.
• Атрибут name дозволяє багатшими якорями імен (з сутностями).

Метод ідентифікації не працюватиме на старих браузерах, метод нових імен якоря буде застарілим у нових версіях HTML ... Я б пішов з id.

У мене є веб-сторінка, що складається з декількох вертикально складених контейнерів div, однакових за форматом і відрізняються лише серійним номером. Я хотів приховати назву якоря у верхній частині кожного діла, тому найбільш економічним рішенням виявилося включення якоря як ідентифікатора у відкриваючий тег div, тобто,

<div id="[serial number]" class="topic_wrapper">

Лише спостереження щодо розмітки Форма розмітки у попередніх версіях HTML надала опорну точку. Форми розмітки в HTML5 за допомогою атрибута id, хоча в основному є еквівалентними, потребують елемента для ідентифікації, майже всі з яких, як очікується, містять вміст.

Наприклад, може бути використаний порожній проміжок або div, але таке використання виглядає і пахне виродженим.

Одна з думок - використовувати елемент wbr для цієї мети. Wbr має порожню модель вмісту і просто заявляє, що можливий розрив рядка; це все ще трохи безоплатно використання тегів розмітки, але набагато менше, ніж безоплатно ділення документів або порожній проміжок тексту.

Другий зразок присвоює унікальний ідентифікатор цьому елементу. Потім цим елементом можна керувати або отримати доступ за допомогою DHTML.

Перший, з іншого боку, встановлює назване місце в документі, схоже на закладку. Прикріплений до «якоря», має ідеальний сенс.

У html 5 id=""атрибут визначає унікальний ідентифікатор для елемента, який також є якорем для фрагмента зв'язку. У попередніх стандартах html name=""атрибут <a>елемента визначає якір для посилання на фрагмент. Я рекомендую щось на кшталт:
<a name="foo" id="foo"></a><h1>Foo Title</h1>
Оскільки підтримка id=""атрибуту є дещо плямистою (навіть якщо останні версії всіх основних браузерів підтримують його, випуски, які не мають кількох років [І найкраще щось не порушувати) якщо немає вагомих причин]). Він сумісний, і він не стилює те, що є в елементі посилання, оскільки закриття </a> все ще знаходиться поза елементом, але воно все ще діє у всіх чинних стандартах.

Переконайтесь, що name=""і id=""атрибути <a>елемента однакові.

Як щодо використання атрибута name для старих браузерів та атрибута id для нових браузерів. Будуть використані обидва варіанти, і за замовчуванням буде застосовано резервний метод !!!

Вся концепція "названий якор" використовує атрибут name за визначенням. Вам слід просто дотримуватися використання імені, але атрибут ID може бути корисним для деяких ситуацій javascript.

Як і в коментарях, ви завжди можете використовувати обидва, щоб хеджувати свої ставки.