Разница между «ID» и «CLASS» в HTML
Индентификаторы (id) и классы (class) — это «крючки»
Мы можем различными путями описать содержимое HTML-документа. Основные элементы, такие, как , и выполняют свою работу, но основной набор тегов не может покрыть каждое возможное оформление страничного элемента или слоя. Для этого нам нужно использовать идентификаторы и классы.
Как вариант, мы имеем боковые боксы для контента, которые мы можем разделить следующим образом:
И какова все-таки разница между ними?
Идентификаторы всегда уникальны для одной страницы
- Каждый элемент может иметь только один ID.
- На каждой странице может быть только один элемент с ID.
Ваш код страницы не пройдет валидацию, если вы используете одинаковые ID более, чем один раз. Так как валидность для нас очень важна, не стоит забывать об уникальности идентификаторов.
Классы не уникальны
- Вы можете использовать одинаковые классы для разных элементов.
- Вы можете использовать разные классы для одинаковых элементов.
Любая информация, необходимая для наложения стилей на разные объекты, может быть описана в class. Для примера – страница с множественными “widget” :
Вы можете использовать имя класса “widget” как крючок, чтобы, например, сделать больше, чем другие, но при этом сохраняя все атрибуты. Вы можете накладывать на один объект более, чем один класс:
Нет необходимости использовать новый класс, просто добавьте новый необходимый класс справа или слева. Эти классы, разделенные через пробел, нормально воспринимаются всеми браузерами в любом количестве (но не стоит доходить до фанатизма и создавать тысячу и более классов для одного элемента).
Идентификаторы имеют специальную функциональность для браузера
Классы не имеет специального функционала в браузерах, в отличии от идентификатора. Идентификаторы имеют очень важное свойство, так называемое «мера упорядочности (hash value)». Например, если вы введете в строке браузера строку ttp://your_site.ru#comments, то браузер попытается найти элемент с идентификатором, равным comments и автоматически совершит прокрутку страницы, чтобы показать этот элемент.
Это и является основой причиной уникальности идентификатора, поэтому ваши браузеры знают куда скроллить.
При обработке джаваскриптом страницы, быстрее всего будут найдены элементы с идентификаторов, чем с классом.
Элемент может содержать оба свойства
Ничто не мешает вам иметь и идентификатор, и класс на одном элементе. На самом деле, это часто очень хорошая идея. Возьмем, к примеру, разметку по умолчанию для элемента списка комментариев:
К нему применен класс, который вам может понадобиться для стилизации всех комментариев на странице, но он также имеет уникальное значение идентификатора (динамически генерируется CMS). Это значение идентификатора полезно для прямой ссылки. Теперь можем легко ссылаться на конкретный комментарий на определенной странице.
CSS все равно
Что касается CSS, вы ничего не можете сделать с идентификатором, такого что вы не можете сделать с классом, и наоборот. Я помню, когда я впервые изучал CSS, и у меня возникла проблема, иногда я пытался устранить неполадки, переключаясь между этими значениями. Нету. CSS не волнует.
Но помним, что вес селектора CSS с идентфиикатором, больше селектора класса.
Javascript
Люди из JavaScript уже, вероятно, более созвучны различиям между классами и идентификаторами. JavaScript зависит от наличия только одного элемента страницы с любым конкретным идентификатором, иначе обычно используемая функция getElementById не будет надежной. Для тех, кто знаком с jQuery, вы знаете, как легко добавлять и удалять классы для элементов страницы. Это встроенная функция jQuery.
Обратите внимание, что такой функции не существует для идентификаторов. JavaScript не несет ответственности за манипулирование этими значениями, это вызовет больше проблем, чем стоило бы.
И да, Javascript значительно быстрее найдет элемент с идентификатором, чем элемент с классом.
Если не нужны, то и не используйте
Как видите, классы и идентификаторы очень важны, и мы полагаемся на них каждый день, чтобы выполнить стилизацию и манипулирование страницами, которые нам нужны. Тем не менее, вы должны использовать их разумно и семантически.
Это значит избегать таких вещей:
Мы уже знаем, что этот элемент является ссылкой, но он еще и якорный элемент. Нет смысла накладывать на него идентификатор, так как мы уже наложили стиль через его тег.
.link
Также избегайте этого:
Идентификатор здесь используется надлежащим образом, так как на странице, скорее всего, будет только один правый столбец, но название неуместно. Попробуйте описать контекст элемента, а не то, где он находится или как он выглядит. Идентификатор здесь «боковой панели» будет более подходящим.
Микроформаты требуют специфические названия классов
Думаешь, микроформаты у тебя не укладываются у тебя в голове? Это не так, всё просто! Это просто обычная разметка, использующая стандартизированные имена классов для информации, которую они содержат. Пример стандартной vCard:
CommerceNet , CA Email: [email protected]
Павел Сайк
15 лет назад
Комментарии 8
Добавить комментарий ×
При прочих равных условиях, создание документа с class обходится меньшей кровью, чем с id (в общем случае, от 2 до 10% выигрыша). Если принять во внимание, что element.class-селекторы отрабатывают быстрее, чем #id на те же 10%, то общий выигрыш при использовании в документе классов перед идентификаторами составит порядка 15%. В абсолютном значении эти цифры не так велики: для Centrino Duo 1.7 получается цифра примерно в 0,0085мс на 1 идентификатор (в среднем, 3 CSS-правила и 1 употребление).
Для документа со 100 элементами выигрыш может составить почти 1мс, для документа с 1000 — 8,5мс! Средняя страница в интернете имеет 500–1000 элементов (проверить, сколько элементов на странице, можно просто запустив javascript:alert(document.getElementsByTagName(‘*’).length) в адресной строке браузера на какой-либо открытой странице), поэтому это уже то, за что можно побороться.
Однако, значительную нагрузку составляет именно создание DOM-дерева в документе (можно посмотреть, как экспоненциально растет время для Opera, Firefox и Safari) и самого документа (постоянное время в 60мс для IE, которое превосходит все остальные накладные расходы при создании среднего документа). В целом, эти операции уходит от 70% всего времени (т.е. наибольшая экономия достигается за счет минимизации размера дерева и количество HTML-страниц, загружаемых, например, во фрейме, в этой области планируется провести дополнительные исследования).
На скорость вычисления одного элемента по идентификатору, как ни странно, наибольшее влияние оказывает опять-таки DOM-Дерево, чем количество таких элементов. Даже при 1000 элементов с id более половины временных издержек можно урезать, если просто сократить общее число элементов (особенно хорошо это заметно для IE).
В целом же, основных советов два: уменьшайте DOM-дерево и используйте id только в случае действительной необходимости.
Запись множественных атрибутов.
Здесь имеются принципиальные различия между id и class. Так – одному объекту можно задать сразу несколько классов:
При записи в CSS нескольких стилей с одинаковыми атрибутами для классов это будет так:
Атрибут id
Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.
Синтаксис
id="имя"
Значения
Идентификатор должен обязательно начинаться с латинского символа и может содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо.
Значение по умолчанию
Применяется к тегам
Пример
HTML5 IE Cr Op Sa Fx
Атрибут id
Div id в html что это
Глобальный атрибут (en-US) id устанавливает элементу уникальный идентификатор (ID), имя которого должно быть уникальным в документе (на странице). Его назначением является идентификация элемента при связывании (использование идентификатора фрагмента), скриптинге или стилизации (с помощью CSS).
Интерактивный пример
Значение этого атрибута «непрозрачная» строка: это означает, что веб-автор не должен использовать его для передачи какой-либо информации. Особое значение, например семантическое, получать из этой строки не надо.
Значение id не должно содержать пропусков (пробелов, табуляции и т.д). Браузеры обрабатывают пробелы, как часть уникального идентификатора. В отличии от атрибута class , который позволяет разделять пробелами значение (указывать несколько классов через пробел), элементы могут иметь только один ID.
Примечание: Использование символов отличных от ASCII букв, цифр, ‘_’ , ‘-‘ и ‘.’ может вызвать проблемы, связанные с совместимостью, т.к. они не были разрешены в HTML 4. Несмотря на то, что в HTML5 ограничение было снято, для совместимости ID должен начинаться с латинской буквы.
Спецификации
Specification
HTML Standard
# global-attributes:the-id-attribute-2
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
- Все глобальные атрибуты.
- Element.id отражает этот атрибут.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 4 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Div id или div class, что лучше использовать в верстке?
Какой из способов лучше и корректнее, подскажите пожалуйста.
И еще один вопрос, как правильно называется верстка, при которой текст при уменьшении экрана перемещается блоками, а не накладывается друг на друга. Чтобы сайт хорошо складывался с мобильных приложений. Сейчас изучаю CSS3 позиционирование, потому таким вопросом и задаюсь
�� Подобається Сподобалось 0
До обраного В обраному 0
Схожі топіки
- CSS для дизайнерів і не тільки. Основи, які має знати кожен. Частина 2
- CSS для дизайнерів і не тільки. Основи, які має знати кожен. Частина 1
- Як тестити верстку на 4К моніторі, якщо в наявності тільки full HD?
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
32 коментарі
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Данный вопрос возникает после изучегия в его лишь основ css js html. Не надо спешить в учебе. Если стоит задача изучить быстро и как нибуть html css и начать лепить на заказ проекты — это плохая затея. На такие вопросы в гугл имееться милион ответов и видео пояснений. В учебе главное научиться саиому находить ответы на Правильно поставленный поисковику вопрос.
Какой из способов лучше и корректнее, подскажите пожалуйста
Разница в том, что через id ты ссылаешься из js на один конкретный элемент. Если задаётся стиль на id, то соответственно такой элемент должен быть только один, вроде как синглтон. В принципе в html плодить лишние сущности ни к чему, и ссылаться можно другими способами.
как правильно называется верстка, при которой текст при уменьшении экрана перемещается блоками, а не накладывается друг на друга
*bootstrap* — либа с классами для адаптивной вёрстки, думаю тебе именно это нужно.
Div id или div class, что лучше использовать в верстке?
если див уникальный, то id, если таких дивов много, то class,
div id bottom-line»> Відповісти
Для стилей классы, для работы с DOM из JSa в селекторах используют и то и другое. Так же id полезен для всяких «for» атрибутов.
И еще один вопрос, как правильно называется верстка, при которой текст при уменьшении экрана перемещается блоками, а не накладывается друг на друга.
Адаптивная. Заодно можешь погуглить flexbox.
Используй классы с css-modules.
Gennady Dogaev full-stack web developer (freelance) 25.11.2017 12:51
Да не важно class или id пока это «list», а не «spisok».
Технически есть следующие моменты:
1. Id может быть только у уникального элемента (1 на страницу), элементов с одинаковым классом может быть много.
2. Для элементов с id создается глобальная переменная (в js) — dev.to/. -ids-are-global-variables Мне неизвестно влияет ли это как-то на производительность. На объём потребляемой памяти должно влиять. Не критично, но мне кажется не стоит прям везде лепить id.
Я лично предпочитаю классы. Id могу использовать в css если он и так для js нужен.
И еще один вопрос, как правильно называется верстка, при которой текст при уменьшении экрана перемещается блоками, а не накладывается друг на друга.
Что-то как-то непонятно. Есть такое понятие как адаптивная верстка. Это когда с помощью медиа-запросов применяются разные css-правила в зависимости от размера экрана. Если что-то при уменьшении наложилось на что-то — это значит что версткой под данный экран разработчик не заморачивался. Но мне кажется это не тот ответ который вы ищете. Возможно вы спрашиваете про flexbox.
Євген Козлов Front-end developer в SoftServe 25.11.2017 22:31
1. Id может быть только у уникального элемента (1 на страницу)
это актуально только для трех вещей: document.getElementById(так как он в принципе может вернуть только один элемент), использование в качестве якоря, добавляя в URL #id — и, как следствие, псевдокласс :target
На объём потребляемой памяти должно влиять
нет, оно через ссылки работает, как и все объекты
Совсем глупый совет: скачай или купи приличную книгу. Потому что нюансов там туева хуча, и далеко не таких простых. Одна только война браузеров чего стоит.
Victor Musienkо Senior Engineer в Noibu.com 25.11.2017 09:09
Блоки — блочная верстка, сетка еще, либо адаптивность.
Правильно использовать class, из-за классов таблицы стилей называются каскадными, поскольку любая библиотека в нужный момент сможет перекрыть classname, но не id. 256 classnames == 1 id.
Чел, беги отседова, а то щас понасоветуют, не унесешь. Есть же более авторитетные источники. Такие вещи на форумах не спрашивают, это не тема для обсуждения.
не буду говорить про сам вопрос и отправлять читать гайды
но, че тут непонятного, грубо говоря: id для уникальных объектов на странице ( уникальный идентификатор), class для множества. Юзаются по ситуации.
по селекторам: id имеет приоритет над классом
если вы задаете такие вопросы, то вам рано еще заниматься css3 позиционированием, так как CSS сегодня это не то, что было даже 5 лет назад, flexbox, grid и тд.
по последнему вопросу: responsive design
короче смотрите в сторону bootstrap, там и позиционирование и responsive design
Podoprigora Alexandr front-end developer в freelace 25.11.2017 01:59
Podoprigora Alexandr front-end developer в freelace 25.11.2017 02:52
в верстке желательно использовать только классы. Айди осмысленно используют в очень специфических случаях до которых судя по всему вам далеко.
То что накладывается друг на друга — абсолютное позиционирование. И если не совать его куда не надо, сайт даже без стилей по-умолчанию будет с блоками которые перемещаются, а не накладываются.
Задавайте побольше таких вопросов. Хочется конечно послать на RTFM, но хоть самооценку подымает.
А есть какое-то научное доказательство столь безапелляционным заявлениям?
Потому как встречаются подобные часто, но всё сводится к холивару. И по больше части от тех, кто сам пока наверстал мало.
Как по мне, и то и другое — прекрасно дополняет друг друга.
да, для обоих вариантов есть юзкейсы, но новичок скорей всего налажает больше если будет пытаться пользоваться обеими вариантами вместо только классов.
научное доказательство тут такое же как доказательство любого пункта в стайлгайдах и правилах линтеров, т.е. его нет, т.к. это вопрос из раздела стиля написания кода. Писать можно как угодно, вопрос скорей «как писать так чтобы не получить лишних проблем при определенных условиях».
Авторитетно заявляю: один х&й.
Но есть загвоздочка по классам: их правила каскадные, и эти каскады ниипически жрут оперативу. Потому, чем точнее ты можешь натравить правило, тем лучше.
Если по существу, то классы хороши только там, где это действительно классы. Несколько элементов, объединённых одним поведением, или же одним стилем.
Ровно ничего не мешает тебе иметь И классы, И идентификаторы в определениях для одного и того же элемента. Например, классы отвечают за цветовой дизайн, видимость, позиционирование. В то время как правила для ID будут задавать геометрию самого элемента, слои, видимость, абсолютные позиции.
Поскольку современные браузеры прекрасно дебажат CSS, то на первое место выступает НЕ удобочитаемость стиля, а прежде всего корректность правил.
Самый скотский селектор CSS — это звёздочка. Можешь почитать на Хабре, сколько проблем она может создать, и насколько сложно их ловить. В остальном же чувствуй себя свободно, назначая правила по принципу «я художник, я так вижу». CSS прекрасно поддаётся рефакторингу в будущем, на зрелом проекте. Но писать всё красиво с первого раза — только время потратишь.
Афигеть ты заявил конечно, айдишники использывать в верстке это как goto использывать в коде.
Только классы, их можно переиспользывать, их нужно переиспользывать.
Методологию БЕМ в зубы и вперед, не слушать таких комментов.
А кроме ьобаной методологии жопы Хэнка доводы против идентификаторов есть?
Почему в обычном программировании всё работает на идентификаторах. А вот на вёрстке — плохому танцору id мешают. Я не отрицаю классы. Но использовать исключительно классы — всё равно что вместо адреса на письме писать «в доме, где резной палисад»
Gennady Dogaev full-stack web developer (freelance) 26.11.2017 23:02
Можешь почитать на Хабре, сколько проблем она может создать, и насколько сложно их ловить.
Звёздочка конечно сильна, но что там ловить-то? Перекосило верстку, открываешь средства разработчика и сразу смотреть какие правила на элемент действуют.
Євген Козлов Front-end developer в SoftServe 25.11.2017 00:44
id для стилей — отстой
1. приоритет у стилей через #spisok будет просто ужасающий(ну, разве что селекторый везде как [id=spisok] вставлять) — замахаешься потом !important тыкать повсюду
2. классы позволяют композицию: , id нет
зачем же тогда нужен id?
нет, не для обращения из js(который сто лет как позволяет querySelectorAll, если влом ставить jQuery ради такой ерунды)
если вставить в URL после # id какого-то элемента, то браузер, загрузив страницу, прокрутит к этому месту.
потому идеальное применение id — это человекочитаемые фрагменты-закладки.
А кроме религиозных причин, другие — есть?
Да, классы прекрасны для оформления, когда речь действительно идёт об общих задачах. Особенно при написании шаблонов, библиотек, и т.д. и т.п.
Но точно так же, при окончательной доводке проекта в конкретику, когда уже точно знаешь что где будет и как должно выглядеть — нужно быть настолько же точно уверенным что рулишь конкретным элементом, и правила не совьются в петлю.
Я больше скажу, здесь и инлайновые стили не западло. И как раз таки с целью однозначного разруливания стиля, в том числе по времени обработки, и по неконфликтности.
Если по существу, то дизайн — это целый класс задач, которые прекрасно разделяются. Львиная доля делается классами. Но когда у тебя есть например панель входа — то она и должна рулиться геометрией как панель входа. Но это не значит, что она не будет иметь классов.
Да, для одного элемента правила окажутся разбросанными по нескольким местам. И это нормально, и даже лучший вариант. Как нормально и то, что одно из этих мест будет с
А применение id для JS настолько же оправдано, как и для CSS. В первую очередь потому, что мозг программиста тоже не резиновый и не восьмиядерный. Ему в разы проще оперировать конкретикой, а не абстракциями, которые сам чёрт не знает что захватывают в свою область видимости.
________
Дизайнеры всё время забывают, что потом их стиль полезут «по быстрику» править говнокодеры. Особенно если фрилансерам дадут на час работы.