Пожалуйста, оцените предоставленный HTML и CSS код. Является ли такой подход приемлемым?

Здравствуйте! Мне было бы интересно узнать ваше мнение о моем коде. Весь сайт создан с использованием нестандартного подхода, а именно с применением списков, как показано ниже: <br/> <pre><code class="html">&lt;ul class="slider_ul"&gt;
      &lt;li class="slider_arrow_one"&gt; &lt; &lt;/li&gt;
      &lt;img src="media/photo.jpg" class="slider_img"&gt;
      &lt;li class="slider_arrow_two"&gt; &gt; &lt;/li&gt;
      &lt;ul class="slider_ul_ul"&gt; 
        &lt;li class="slider_description"&gt;Описание Описание Описание Описание Описание Описание ...&lt;/li&gt;
        &lt;button class="default_button"&gt;Далее&lt;/button&gt;
        &lt;li class="slider_ul_ul_text"&gt;Рейтинг 4/5&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/ul&gt;</code></pre> <br/> По сути, это позволяет мне быстрее писать код с минимальным использованием CSS. Что вы думаете об этом блоке? <br/>
  • 28 декабря 2024 г. 15:33
Ответы на вопрос 4
Ваша идея использовать списки (`<ul>`, `<li>`) для создания слайдера интересна, однако такая практика не является стандартной и имеет свои недостатки. Вот некоторые замечания и рекомендации по вашему коду:

### Положительные аспекты:
1. **Понятность**: Использование списков может рассматриваться как структура, в которой элементы логически сгруппированы, хотя слайдеры обычно не требуют применения семантически правильной разметки.
2. **Быстрота написания**: Как вы уже заметили, это может упростить процесс верстки для вас.

### Отрицательные аспекты:
1. **Семантика**: `<ul>` и `<li>` предназначены для представления списков. Использование этих тегов для элементов управления слайдером (например, изображения и кнопки) не соответствует семантике HTML и может вызвать недопонимание у других разработчиков, а также у пользователей, использующих вспомогательные технологии.
2. **Доступность**: Неправильное использование HTML может повлиять на доступность. Например, экраны для чтения могут неверно интерпретировать структуру, потому что они ожидают, что списки будут содержать списочные элементы.
3. **CSS и JS**: Используя нестандартные разметки, вам может потребоваться больше времени для написания CSS и JavaScript, чтобы сделать слайдер функциональным и стильным.
4. **Мобильные устройства**: Использование кнопок и изображений внутри списков может привести к сложностям с адаптивной версткой.

### Рекомендации:
1. **Семантически правильная разметка**: Рассмотрите использование более подходящих элементов, таких как `<div>`, `<section>`, `<button>`, с правильными классами для управления стилями и функциональностью.
2. **Использование ARIA**: Если всё же решите использовать списки, подумайте о применении атрибутов ARIA для улучшения доступности.
3. **Легкость поддерживания**: Выберите структуру, которая будет более понятна и удобна для поддержки, особенно если проект будет развиваться или его будут поддерживать другие разработчики.

### Пример альтернативного подхода:
```html
<div class="slider">
  <button class="slider_arrow left">←</button>
  <img src="media/photo.jpg" alt="Описание изображения" class="slider_img">
  <button class="slider_arrow right">→</button>
  <div class="slider_description">Описание Описание Описание...</div>
  <button class="default_button">Далее</button>
  <div class="slider_rating">Рейтинг 4/5</div>
</div>
```
Этот пример семантически правильнее и упрощает работу с слайдером.

В заключение, хотя ваш метод может быть приемлем для быстрого создания прототипов, я все же рекомендую следовать семантическим стандартам HTML и использовать более адаптированные структуры для создания более чистого и доступного кода.
Ну вы, по-сути, в некоторых местах вместо дивов использовали зачем-то списки и сделали разметку не только невалидной, но и семантически неправильной. 
С этим кодом не смогут работать другие разработчики, да и вы потом замучаетесь что-то менять.
Так делать не нужно, это кривая экономия на спичках.
Так лучше не писать. Как по мне, такой код выглядит не очень красиво и в тегах списков не должно быть ничего кроме тегов элементов списка. Можно сделать например так: 
<div class="slider">
    <div class="slider-left">
      <button class="arrow-left">&lt;</button>
      <img class="slider-image" src="media/photo.jpg" alt="">
      <button class="arrow-right>&gt;</button>
    </div>
    <div class="slider-right">
      <p class="slider-description">Описание Описание Описание Описание Описание Описание ...</p>
      <button class="slider-button">Далее</button>
      <p class="slider-text">Рейтинг 4/5</p>
    </div>
  </div>
для проверки html  можешь использовать https://validator.w3.org/ 
а для css https://jigsaw.w3.org/css-validator/#validate_by_u... (лично не использовал)
Похожие вопросы