Правильное использование классов и идентификаторов

@Валерий_К · Регистрация: 04.01.2026

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Строю сайт чисто на HTML и, чтобы потом можно было обратиться к JS
(если выучу сей язык), ставлю „где ни попадя“ ID в каркасе сайта.
Например:

HTML5
1
2
3
4
<header id="header" header class="container header">
<main id="main" main class="container main main-content">
<div id="block-1" class="block">
<div id="block-2" class="block">

И так далее по „списку“ до конца каркаса сайта.
Вот что вычитал:
«Если планируется обратиться к элементу HTML документа через язык JavaScript,
то обязательно надо применять id, реализовывать это через классы намного сложнее.
https://myrusakov.ru/div-id-class.html

В других источниках:
Именовать id для нужд js можно как угодно, главное чтобы было понятно.
Но при условии, что id не будет использоваться в качестве селектора для стилей.

Именовать id для нужд js. Получение доступа к элементу из JavaScript.
В языке есть специальный метод, чтобы найти элемент по атрибуту id
и получить к нему доступ — getElementById().
Дальше с найденным элементом можно производить нужные действия.....

Для меня это пока темный лес...
Просветите, пожалуйста хотя бы в двух словах, если у кого грамотного найдется время:
«Да, можно» — «Нельзя так делать». «Можно. Хуже не будет».
С уважением, Валерий.

@Mysterious Light · 04.01.2026, 19:59

Для того, чтобы обратиться к элементу на странице, желательно представлять себе, в каком контексте и с какой целью возникает желание к нему обратиться.

Если страница состоит из небольшого количества элементов и их набор не меняется (скажем, форма с кнопками, поле для рисование, несколько полей с текстом и т.п.), то можно каждому назначить уникальный id и обращаться к ним через getElementById.

Если же на странице есть вариативный контент (например, список комментариев под постом, который меняется по мере того, как пользователи оставляют комментарии) или если элементов много (например, для галереи фотографий неразумно каждой фотографии присваивать id), то лучше идти от логики.
Например, обработчик нажатия на элемент знает элемент, на который пользователь нажал, а потому можно поменять его состояние (напр., добавить класс) из обработчика onclick без id.

В любом случае лучше расписать, какие события возможны, как система должна на них реагировать и какие компоненты архитектурно присутствуют в модели, и из этого искать лучший способ реализации.

@voraa · 04.01.2026, 20:01

Сообщение от Валерий_К

Именовать id для нужд js можно как угодно, главное чтобы было понятно.

Вообще id - произвольная строка. Но лучше делать ее как идентификатор - начинается с буквы, содержит буквы и цифры. можно еще "-".
Лепить id на все элементы совсем не обязательно. Только на основные. А остальные уже можно искать внутри них пользуясь другими характеристиками - классами, атрибутами..

Сообщение от Валерий_К

В языке есть специальный метод, чтобы найти элемент по атрибуту id
и получить к нему доступ — getElementById().

Ну да. Но чаще всего его не достаточно. Часто нужно бывает найти не один, а кучу каких то однородных элементов. id тут не поможет. Есть универсальные методы querySelector и querySelectorAll, позволяющие искать по типу элемента, id классам и атрибутам. Один (первый) или все подходящие. Изучайте и пользуйтесь ими.

@NTHing · 04.01.2026, 22:14

Далеко не будем ходить. Открываем инструменты разработчика и смотрим...

@Валерий_К · 05.01.2026, 08:05 **[ТС]**

Спасибо большое всем за помощь!
И еще к этому вопросу.
Строил сайт на флексах, разобравшись мало–помалу...
А тут под руку попался этот макет:
https://itchief.ru/html-and-cs... i169779846
приспособил под себя —
сайдбар только уже сделал (1/4), стили кое-где поменял,
добавил кое-что.... Тут в верстке ID-ми и не пахнет!
Я это к чему — может и мне не заморачиваться с этими id?
Строить потихоньку свой сайт HTML, а там видно будет.
Разберусь со временем.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<header class="container">
  <!-- Шапка страницы -->
</header>
<main class="container">
  <div class="row">
    <article class="col col__article">
      <!-- Основная часть -->
    </article>
    <aside class="col col__aside">
      <!-- Боковая область -->
    </aside>
  </div>
</main>
<footer class="container">
  <!-- Футер -->
</footer>

@estic · 05.01.2026, 08:28

Сообщение от Валерий_К

Я это к чему — может и мне не заморачиваться с этими id?

Идентификаторы необходимы в нормальном сайте. Но не нужно идентифицировать все подряд элементы. Делайте это по необходимости, соблюдая определенные правила образования идентификаторов. Помимо манипуляций со стороны JS-кода идентификаторы также могут использоваться для стилизации идентифицируемых элементов, а также для ссылок на фрагменты (блоки) страницы, например /page#fragment.

Добавлено через 2 минуты

Сообщение от Валерий_К

Строю сайт чисто на HTML

Многостраничный сайт "чисто на HTML" сейчас не делают. В крайнем случае используют "генераторы статических сайтов".

@Валерий_К · 05.01.2026, 10:54 **[ТС]**

А что делать, если сайт давно построен и в нём не одна сотня страниц?
Висел в инете, потом решил его переработать.
Может проще залить на хостинг и подключить готовый движок?
Тот же wordpress.
Вот что значит не общаться с умными людьми...
Зашел я как-то давно на один форум, задал вопрос —
меня, как дилетанта, сначала облаяли и вразумлять начали...
Толком ничего не понял...
Больше по форумам не ходил...
Делать нормальный сайт — это учить JS, php и др.
А это не один год, особенно, когда годов самому дальше некуда.

@estic · 05.01.2026, 11:26

Сообщение от Валерий_К

А что делать, если сайт давно построен и в нём не одна сотня страниц?

Преобразовать в динамический и т.п. без "внешних" изменений, если до этого структура и т.п. были нормальными.

Сообщение от Валерий_К

Может проще залить на хостинг и подключить готовый движок?

"Движок" автоматически не "подхватит" статический сайт. Нужно конвертировать.

Добавлено через 6 минут

Сообщение от Валерий_К

Делать нормальный сайт — это учить JS, php и др.
А это не один год, особенно, когда годов самому дальше некуда.

Если вы изначально не разработчик, и сайт нужен просто для публикации содержимого, много знать не обязательно. Достаточно общих основ. Детально изучаете конкретные инструменты и техники публикации, которые используете/собираетесь использовать.

Добавлено через 7 минут
Лучше, конечно, чтобы за сайтом приглядывал специалист. Так можно избежать наличия откровенных ошибок, которые не видны неспециалисту. Поддержка, не требующая много времени, может стоить немного. Также можно периодически заказывать "аудит". Потом по отчетам аудитора можно и самому проверять сайт, используя описанные в отчете критерии.

@Валерий_К · 05.01.2026, 11:59 **[ТС]**

Спасибо всем!
Я не разработчик, и не собираюсь им быть.
Сайт нужен просто для публикаций.
Для себя, может и для кого-либо будет интересно.
Уверенно знаю HTML и CSS.
Ну и общие основы сайтостроения.
Что еще нужно знать дилетанту?
Как сайт html можно конвертировать в нормальный?
Или это может только специалист?
Вот нашел:
Как перевести html сайт на CMS?
https://rche.ru/1414_kak-perev... a-cms.html

@estic · 05.01.2026, 13:04

Сообщение от Валерий_К

Или это может только специалист?

Ответ скорее да, чем нет. Но сложность зависит от самого статического сайта. Если типов страниц немного, однотипные страницы имеют шаблонный HTML-код и т.п., то "спарсить" данные несложно.

Для разработчиков есть готовые наработки, например https://habr.com/ru/articles/709262/, а для любителей распространенных CMS могут быть соответствующие плагины.

Напишите адрес (можно просто домен) вашего сайта.

@Валерий_К · 05.01.2026, 13:29 **[ТС]**

Большое спасибо!
Но, к сожалению, я его пока убрал с хостинга.
Надо переработать, упростить.
В принципе, задача ясна.
Как только будет готов сайт - я дам адрес.
С уважением, Валерий.

@estic · 05.01.2026, 14:58

Сообщение от Валерий_К

Надо переработать, упростить.

При переработке обращайте внимание на пригодность к парсингу. Или сразу готовьте данные под шаблоны. Т.е. можно отдельно сохранять url или слаг ресурса, его имя (т.е. основную часть содержимого title), описание для мета-тега, основное содержимое (т.е. содержимое тега-контейнера) и т.п. Когда основное содержимое в основном состоит из однотипных блоков, например на странице списка, думайте на уровне отдельного блока: возможно, к объектам списка нужно добавить какие-то дополнительные метаданные, например время публикации или краткое описание именно для данного списка, а не для мета-тега.

Обрамляющий эти данные шаблон не обязательно должен быть общим для всех страниц сайта. Может быть несколько "общих" шаблонов. Также может быть общий шаблон для разнотипных страниц и "подшаблон" для конкретного типа страницы. Например, начинающие часто пытаются включить тег h1 в основное содержимое, боясь, что на страницах другого типа его не будет в том же самом месте. Это ошибка. Никогда не забывайте про возможность использования "подшаблона" наподобие:

PHP
1
2
3
4
5
<div class="page">
  <h1 class="page-title"><?= e($page['title']) ?></h1>
<?= $page['content'] ?>
 
</div>

Добавлено через 1 минуту
На e() не обращайте внимания. Потом объясню.

@Валерий_К · 05.01.2026, 16:32 **[ТС]**

Вот мой типичный блок - на каждой странице несколько таких,
а таких страниц много - по темам.
Может для начала все упростить?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="block">
<h3>Название</h3>
<p><a href="pictures-/.jpg" style="width: 300px; height: 400px;"><img src="pictures-/.jpg" style="border: 1px solid; width: 300px; height: 300px; float:left; margin: 5px 20px 0px 20px;" title="" alt=""/></a></p>
<p><a href="pictures-/.jpg" style="width: 800px; height: 600px;"><img src="pictures-/.jpg" style="border: 1px solid; width: 400px; height: 300px; float:; margin: 5px 20px 0px 0px;" title="" alt=""/></a></p>
<p class=""  style="display: block; padding-left:20px; margin-top: -5px;">
Фото: Описание левой картинки
<a rel="nofollow" target="_blank" href="" title="">Ссылка на фото.</a>
</p>
<p class="" style="display: block; padding-left:20px; margin-top: -5px;">
Фото: Описание правой картинки 
<!--noindex--><a rel="nofollow" target="_blank" href="" title="">Закрытая ссылка на фото.</a><!--/noindex-->
</p>
<p class="" style="display: block; padding-left:20px; margin-top: -5px;">
Контент.
</p>
</div>

@estic · 05.01.2026, 17:20

Сообщение от Валерий_К

Вот мой типичный блок - на каждой странице несколько таких

А блок может открываться на отдельной странице или во всплывающем блоке? Изображений всегда по два?

Встраиваемые стили (атрибут style) - это плохая практика. Также тег p часто используете не по назначению.

Добавлено через 5 минут
Основной объект данных у вас - это сообщение в ленте. Страницы будут строиться из блоков сообщений и соответствовать темам, как я понял. Темы - это тоже объекты данных. К ним будут привязываться сообщения по числовому идентификатору темы. У сообщений тоже будут числовые идентификаторы. По ним можно выполнять сортировку сообщений на странице, особенно если нет более подходящего для этого свойства.

Пагинация или бесконечная прокрутка в темах есть? Как пользователь находит темы? Есть какой-то список тем или меню?

@Валерий_К · 05.01.2026, 17:46 **[ТС]**

На каждой странице несколько блоков, они не открываются -
идут один за другим по вертикали. Штук 5 блоков на одной странице,
потом по пагинации можно перейти на 2-ю стр. и т.д.
Изображений всегда по два, редко одно. Так повелось.
Этому шаблону не один год, для сайта html он, наверное, годится. На практике работает.
Можно стили у тега р убрать и регулировать размер шрифта из внешнего файла css.
Не знаю что и делать, надо все в корне менять... Или кидать все...

Добавлено через 3 минуты
Может вам архив сайта скинуть на почту,
если есть время посмотреть?

@estic · 05.01.2026, 17:58

Сообщение от Валерий_К

На каждой странице несколько блоков, они не открываются -
идут один за другим по вертикали.

Это называется "лента сообщений". Как в соц. сетях (микроблогах).

Идентификаторы сообщений должны быть связаны с идентификаторами соответствующих блоков, например 1 <=> post1. Причем основными адресами сообщений, даже несмотря на отсутствие страниц отдельных сообщений, должны быть адреса наподобие /info/1, а не /info#[post]1. Это особенно полезно для многостраничных лент: постоянный адрес может запускать переадресацию на актуальную страницу ленты, например сначала на /info#1, а со временем на /info?p=2#1 и т.д.

Сообщение от Валерий_К

Можно стили у тега р убрать и регулировать размер шрифта из внешнего файла css.

Да. Так обычно и делают.

Добавлено через 1 минуту
Напишу адрес почты (в) VK.

@Валерий_К · 05.01.2026, 18:06 **[ТС]**

Хорошо.

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .

@Mysterious Light $Эксперт по математике/физике$ 4313 / 2105 / 431 Регистрация: 19.07.2009 Сообщений: 3,205 Записей в блоге: 24
	04.01.2026, 19:59
	Для того, чтобы обратиться к элементу на странице, желательно представлять себе, в каком контексте и с какой целью возникает желание к нему обратиться. Если страница состоит из небольшого количества элементов и их набор не меняется (скажем, форма с кнопками, поле для рисование, несколько полей с текстом и т.п.), то можно каждому назначить уникальный id и обращаться к ним через getElementById. Если же на странице есть вариативный контент (например, список комментариев под постом, который меняется по мере того, как пользователи оставляют комментарии) или если элементов много (например, для галереи фотографий неразумно каждой фотографии присваивать id), то лучше идти от логики. Например, обработчик нажатия на элемент знает элемент, на который пользователь нажал, а потому можно поменять его состояние (напр., добавить класс) из обработчика onclick без id. В любом случае лучше расписать, какие события возможны, как система должна на них реагировать и какие компоненты архитектурно присутствуют в модели, и из этого искать лучший способ реализации. 0

@NTHing 1782 / 963 / 388 Регистрация: 26.11.2014 Сообщений: 1,966 Записей в блоге: 1
	04.01.2026, 22:14
	Далеко не будем ходить. Открываем инструменты разработчика и смотрим... Миниатюры 0

@Валерий_К 0 / 0 / 0 Регистрация: 04.01.2026 Сообщений: 8
	05.01.2026, 10:54 [ТС]
	А что делать, если сайт давно построен и в нём не одна сотня страниц? Висел в инете, потом решил его переработать. Может проще залить на хостинг и подключить готовый движок? Тот же wordpress. Вот что значит не общаться с умными людьми... Зашел я как-то давно на один форум, задал вопрос — меня, как дилетанта, сначала облаяли и вразумлять начали... Толком ничего не понял... Больше по форумам не ходил... Делать нормальный сайт — это учить JS, php и др. А это не один год, особенно, когда годов самому дальше некуда. 0

@Валерий_К 0 / 0 / 0 Регистрация: 04.01.2026 Сообщений: 8
	05.01.2026, 11:59 [ТС]
	Спасибо всем! Я не разработчик, и не собираюсь им быть. Сайт нужен просто для публикаций. Для себя, может и для кого-либо будет интересно. Уверенно знаю HTML и CSS. Ну и общие основы сайтостроения. Что еще нужно знать дилетанту? Как сайт html можно конвертировать в нормальный? Или это может только специалист? Вот нашел: Как перевести html сайт на CMS? https://rche.ru/1414_kak-perev... a-cms.html 0

@Валерий_К 0 / 0 / 0 Регистрация: 04.01.2026 Сообщений: 8
	05.01.2026, 13:29 [ТС]
	Большое спасибо! Но, к сожалению, я его пока убрал с хостинга. Надо переработать, упростить. В принципе, задача ясна. Как только будет готов сайт - я дам адрес. С уважением, Валерий. 0

@Валерий_К 0 / 0 / 0 Регистрация: 04.01.2026 Сообщений: 8
	05.01.2026, 17:46 [ТС]
	На каждой странице несколько блоков, они не открываются - идут один за другим по вертикали. Штук 5 блоков на одной странице, потом по пагинации можно перейти на 2-ю стр. и т.д. Изображений всегда по два, редко одно. Так повелось. Этому шаблону не один год, для сайта html он, наверное, годится. На практике работает. Можно стили у тега р убрать и регулировать размер шрифта из внешнего файла css. Не знаю что и делать, надо все в корне менять... Или кидать все... Добавлено через 3 минуты Может вам архив сайта скинуть на почту, если есть время посмотреть? 0

@Валерий_К 0 / 0 / 0 Регистрация: 04.01.2026 Сообщений: 8
	05.01.2026, 18:06 [ТС]
	Хорошо. 0