Используйте с тегом атрибуты name и id для создания в документе идентификаторов фрагментов. Однажды сформированный, он становится потенциальной целью гиперссылки.
До появления HTML 4.0 единственным способом создания идентификатора фрагмента было применение атрибута name с тегом . С возникновением в языке атрибута id, который используется практически со всяким тегом, любой HTML- или XHTML-элемент может служить
идентификатором фрагмента. Тег сохраняет атрибут name по историческим причинам и поддерживает также id. Эти атрибуты могут заменять друг друга, так как id – это просто более современная версия атрибута name. Каждый из них может быть использован совместно с атрибутом href, позволяя при помощи одного тега определить как гиперссылку, так и идентификатор фрагмента.
Можно думать об идентификаторе фрагмента как о принятом в HTML аналоге метки, на которую осуществляется переход при исполнении оператора goto во многих языках программирования. Атрибут name в теге или id в допустимых тегах устанавливает в документе метку. Когда такая метка применяется в гиперссылке, это эквивалентно приказу броузеру перейти (goto) на нее в документе.
Значение атрибутов name и id – это любая строка символов, заключенная в кавычки. Данная строка должна начинаться с буквы, за которой могут следовать буквы, числа, дефисы, символы подчеркивания, двоеточия и точки. Она должна быть уникальной меткой, которую нельзя повторно использовать другим атрибутам name или id в этом документе, хотя в иных разработках можно применять снова.
Вот примеры использования name и id:
Обрезка вашего кумкватового дерева
Заметьте, что якорь помещен в заголовок раздела предположительно большого документа. Мы рекомендуем так поступать со всеми главными разделами ваших работ, чтобы было удобнее на них ссылаться и в будущем их можно было бы автоматически обрабатывать, извлекая, скажем, информацию о затронутых в документе темах.
сразу перенесет его к разделу, который мы поименовали в предыдущем примере.
Содержимое тега с атрибутами name и id отображается обычным способом, без каких-либо специальных эффектов.
Формально говоря, нет необходимости помещать что-либо из содержимого документа в тег с атрибутом name, поскольку он отмечает лишь место в документе. Однако на практике некоторые броузеры игнорируют тег, не содержащий хотя бы фразы, слова или изображения. По этой причине разумно вставлять по меньшей мере один отображаемый элемент в тело всякого тега .
Синтаксис:
name = "value" >Значения атрибута
Значение | Описание |
---|---|
application-name | Указывает имя веб-приложения, которое запущено на этой странице. Браузеры могут использовать эту информацию для идентификации приложения. |
author | Указывает имя автора документа. |
description | Задает описание для страницы. Это описание могут использовать поисковые машины для отображения результатов поиска. |
generator | Указывает один из программных пакетов, который использовался для создания этого документа (как правило подобные мета-теги формируются автоматически, если используется какой-либо конструтор создания сайтов). |
keywords | Задает разделенный запятыми список ключевых слов. Ключевые слова могут использоваться некотрыми поисковыми машинами. |
На этой странице перечислены прочие допустимые значения (расширения) атрибута name тега : MetaExtensions .
При необходимости предусмотрена возможность добавить значения к этому списку, что cделает их имена юридически закрепленными за стандартом метаданных HTML5 (изменения в данном реестре не будут отражены в валидаторах в режиме реального времени, но обновятся в течении одной недели или около того).
Часто используемые значения атрибута
Рассмотрим часто используемые варианты использования тега :
Описание в данном теге довольно важное, его учитывают поисковые машины при индексации. Атрибут content в данном примере содержит описание конкретной веб-страницы сайта. Не рекомендуется использовать длинные описания.
Представляет собой список ключевых слов (касающиеся конкретной страницы). Ходит много споров о том учитывается или нет поисковыми системами это значение, исходя из перечня, используемых метатегов в Google, то он не учитывает этот мета тег, а Яндекс, в некоторых случаях оставляет за собой право его использовать.
Индексация страниц
Используется поисковыми системами при индексации страниц:
Доступные значения:
Настройка области просмотра
Обращаю Ваше внимание на то, что область просмотра определяет, как веб-страница отображается на мобильном устройстве, если она не задана, то ширина страницы считается равной стандартному значению, и она уменьшается на мобильном устройстве, чтобы поместиться на его экране.
Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:
name = "viewport" content = "width=device-width, initial-scale = 1" >- Атрибут name задает имя документа метаданным, значение "viewport" дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
- Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip ), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height .
- Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).
Если все страницы Вашего сайта адаптированы для просмотра на мобильных устройствах, то размещение вышеуказанного мета тега является обязательным.
Доступные значения:
Значение атрибута | Определение |
---|---|
width | Определяет ширину в пикселях области просмотра (значение - положительное целое число или device-width ). |
height | Определяет высоту в пикселях области просмотра (значение - положительное целое число или device-height ). |
initial-scale | Определяет соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение - положительное целое число от 0.0 до 10.0. |
minimum-scale | Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale ). Значение - положительное целое число от 0.0 до 10.0. |
maximum-scale | Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale ). Значение - положительное целое число от 0.0 до 10.0. |
user-scalable | Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб). |
Отличия HTML 4.01 от HTML 5
Нет.Пример использования
"Бесплатные уроки по созданию сайтов" > "HTML, CSS, JavaScript, jQuery" >Это заголовок.
Это параграф.
В данном примере мы использовали три элемента :
- первый мета элемент описывает содержимое документа (значением атрибута name мы указали, что это описание страницы (description ), а текстовое содержимое указали в атрибуте content . Это описание могут использовать поисковые машины для отображения результатов поиска.
- второй мета элемент описывает ключевые слова в документе (значением атрибута name мы указали, что это ключевые слова (keywords ), а текстовое содержимое указали в атрибуте content . Ключевые слова могут использоваться некотрыми поисковыми машинами.
- третий мета элемент описывает имя автора документа (значением атрибута name мы указали, что это автор документа (author ), а имя автора указали в атрибуте
19 ответов
Атрибут name используется при отправке данных при отправке формы. Различные элементы управления реагируют по-разному. Например, у вас может быть несколько переключателей с разными атрибутами id , но те же name . Когда отправлено, в ответе есть только одно значение - выбранный вами переключатель.
Конечно, там больше, чем это, но это определенно заставит вас думать в правильном направлении.
Используйте атрибуты name для элементов управления формой (например, и
Используйте атрибуты id , когда вам нужно адресовать определенный элемент HTML с CSS, JavaScript или идентификатор фрагмента . Можно также искать элементы по имени, но проще и надежнее искать их по идентификатору.
В чем разница? Короткий ответ: используйте оба и не беспокойтесь об этом. Но если вы хотите понять эту глупость, она тощая:
id = для использования в качестве цели следующим образом: name= также используется для обозначения полей в сообщении, отправляемых на сервер с HTTP (HyperText Transfer Protocol) GET или POST, когда вы нажимаете submit в форме. id = обозначает поля для использования JavaScript и Java DOM (Document Object Model). Имена в name= должны быть уникальными в пределах формы. Имена в id = должны быть уникальными внутри всего документа. Иногда имена name= и id = будут отличаться, потому что сервер ожидает одно и то же имя из разных форм в том же документе или разных радиокнопках в той же форме, что и в примере выше. Id = должен быть уникальным; name= не должен быть. JavaScript нуждался в уникальных именах, но здесь было слишком много документов без уникальных имен name=, поэтому люди W3 изобрели тег id, который должен был быть уникальным. К сожалению, старые браузеры этого не понимали. Поэтому вам нужны обе схемы именования в ваших формах. ПРИМЕЧАНИЕ: атрибут "имя" для некоторых тегов, таких как , не поддерживается в HTML5. Как я думаю об этом и использую его просто: id
используется для CSS и JavaScript/jQuery (должен быть уникальным на странице) name
используется для обработки формы в PHP, когда форма отправляется через HTML (должна быть уникальной в форме - в некоторой степени, см. Paul ниже) ID - используется CSS, определяет экземпляр уникальный
div, span или других элементов. Появляется внутри модели Javascript DOM, позволяя вам получить к ним доступ с различными вызовами функций. Тег имени для полей - это уникальная форма для - если вы не делаете массив, который хотите передать на обработку на PHP/сервер. Вы можете получить к нему доступ через Javascript по имени, но я думаю, что он не отображается как node в DOM или могут применяться некоторые ограничения (вы не можете использовать.innerHTML, например, если я правильно помню).
Цель не должна быть тегом , она может быть Или и т.д., которая часто является чистым кодом.
Как говорят другие сообщения, name по-прежнему используется (требуется) в формах. Он также по-прежнему используется в тегах META.
Чтобы обеспечить совместимость, наличие подходящих имен и значений атрибутов id, когда они определены, является хорошей идеей. Однако будьте осторожны: некоторые теги, особенно радиокнопки, должны иметь неоднозначные значения имен, но требуют уникальных значений id. Еще раз, это должно указывать на то, что идентификатор - это не просто замена имени; они различны по назначению. Кроме того, не снижайте стиль старого стиля, глубокий взгляд на современные библиотеки показывает такой стиль синтаксиса, который используется для повышения производительности и удобства. Ваша цель всегда должна быть в отношении совместимости.
Теперь в большинстве элементов атрибут name устарел в пользу более вездесущего атрибута id. Однако в некоторых случаях, в частности, поля формы (
Существует четкое различие между идентификатором и именем. Очень часто, когда имя продолжается, мы можем установить значения одинаковыми. Тем не менее, идентификатор должен быть уникальным, а имя в некоторых случаях не должно включать радиокнопки. К сожалению, уникальность значений id, в то время как улавливается проверкой разметки, не так согласована, как должна быть. Реализация CSS в браузерах будет стилизовать объекты, которые имеют значение id; таким образом, мы не можем улавливать ошибки разметки или стиля, которые могут повлиять на наш JavaScript до выполнения.
Это взято из книги JavaScript- The Complete Reference by Thomas-Powell
Идентификатор элемента ввода формы не имеет ничего общего с данными, содержащимися в элементе. Идентификаторы предназначены для подключения элемента с помощью JavaScript и CSS. Атрибут name, однако, используется в HTTP-запросе, отправленном вашим браузером на сервер, в качестве имени переменной, связанного с данными, содержащимися в атрибуте value.
Например:
Когда форма отправлена, данные формы будут включены в заголовок HTTP следующим образом:
Если вы добавите атрибут идентификатора, он ничего не изменит в заголовке HTTP. Это просто упростит привязку его к CSS и JavaScript.
Если вы не используете собственный метод отправки формы для отправки информации на сервер (и вместо этого выполняете это с помощью javascript), вы можете использовать атрибут name для добавления дополнительной информации к вводу - скорее, как сопряжение с скрытым входное значение, но выглядит аккуратно, потому что он включен во вход.
Этот бит все еще работает в Firefox, хотя я предполагаю, что в будущем он не сможет быть разрешен.
У вас может быть несколько полей ввода с одинаковым именем, если вы не планируете подавать старомодный способ.
Тег "id" используется CSS и JavaScript для назначения стилей и действий над элементом ввода. Библиотеки, такие как jquery, используют идентификатор как ярлык, поэтому его обычно полезно устанавливать.
Атрибут "name" элемента формы - это то, что фактически отправляется вашим веб-браузером в отправке/запросе HTTP GET или POST на веб-сервер. Если вы оставите его пустым, у вас не будет соответствующего идентификатора, связанного с вашим контентом.
Однако вы можете использовать JavaScript для отправки своих форм через AJAX, что означает, что вы никогда не отправляете переменные формы через GET или POST через прямое представление веб-браузера. В этом случае поле имени не нужно, хотя это не очень удобно.