Ответы пользователя по тегу HTML
  • Можно ли писать div вне body?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    Это так.
    Браузер прожуёт довольно страшную хрень, которую напишет разработчик, но есть ровно ноль причин её писать сознательно.
    Ответ написан
    1 комментарий
  • Как сохранить состояния select, checkbox, radiobuttons и пр. на странице HTML?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Не совсем понятно, что именно вам нужно сохранять и что именно не работает.
    Временное состояние формы, чтобы пользователь мог закрыть страницу, не отправляя изменения на сервер, и вернуться к ней позже? Или прям полноценное редактирование?

    Если второе, то это и должно храниться на сервере. Или у вас при открытии формы поля формы не заполняются значениями из БД и она пуста? Тогда это отдельная проблема, не имеющая никакого отношения к JS.

    Если же первое, то у вас, как я понял, уже есть какой-то скрипт, только он багованный - показывайте, мы вам поможем разобраться.
    Ответ написан
  • Есть ли смысл учить абсолютно все элементы HTML?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    Сложный вопрос...
    Простой ответ: конечно, в зубрёжке нет смысла.

    Более сложный: если вы не знаете о существовании чего-либо, то вы не сможете вовремя понять, что задача требует именно этого инструмента. Но и задачи, которые требуют чего-то необычного, встречаются редко, поэтому их и нет в обучающих материалах. Есть не так много элементов с какими-то специальными атрибутами, я бы рекомендовал просто посмотреть их страницы на MDN прочитать про атрибуты, но не зубрить их. Ну а относительно элементов заморачиваться нужно ещё меньше - если вы не используете <a href="#"/> там, где должен быть <button/>, вы уже сделали половину семантики страницы.
    Ответ написан
    6 комментариев
  • Почему некоторые картинки не отображаются на github?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    - https://yungdnxl.github.io/img/Mobile_item_2.png
    + https://yungdnxl.github.io/img/mobile_item_2.png

    Даже Гитхаб их при сортировке помещает в разные места: https://github.com/yungdnxl/yungdnxl.github.io/tre...
    Ответ написан
    1 комментарий
  • Не работает ссылка на определнную часть другой страницы сайта?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    href="C:/Users/User/Desktop/site%20about%20web%20design/list/list.html/#underlist"
    HTML ничего не знает про ваши диски. Ссылка должна иметь вид /list/list.html#underlist и обрабатываться веб-сервером, тогда всё будет работать.
    Возможно, конечно, файловая ссылка тоже обработается, но её как минимум нужно исправить, убрав слэш перед якорем. Но лучше всё же учиться сразу правильно, т.е. использовать веб-сервер.
    Ответ написан
    3 комментария
  • Можно ли вставлять video тег внутрь h1?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    Согласно спецификации - можно.
    С точки зрения SEO - никто не знает точно может ли это как-то повредить. Я бы, наверное, не скрывал текст через opacity, а прятал его за блоком с видео. Но хорошего решения тут нет.
    Ответ написан
  • Как оставить focus рабочим только для меню?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега CSS
    Нужно назначать кликнутой ссылке отдельный класс, который бы обозначал её активность.
    Это делает на основании адреса страницы либо бэкенд при генерации шаблона, либо JS, если это SPA.

    В представленной песочнице это может выглядеть примерно так:
    .nav ul li a.active {
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: .1em;
    }

    const $links = document.querySelectorAll('.nav a');
    
    Array.from($links).forEach(($link) => {
      $link.addEventListener('click', (event) => {
        document.querySelector('.nav a.active')?.classList.remove('active');
        event.target.classList.add('active');
      })
    });
    Ответ написан
    1 комментарий
  • Как выставить фото в select?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    Выставить что либо, кроме plain text, в option невозможно ни "на джаве", ни "на ксс".
    Используйте библиотеку кастомных селектов, например, select2.
    Ответ написан
    Комментировать
  • Как настроить prettier для html чтоб не закрывал одиночные тэги?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    Ответ написан
    Комментировать
  • Названия в классов: я могу раздавать их рандомно или есть некая традиция, игнорирование которой считается плохим тоном?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега CSS
    В программировании есть традиция давать сущностям понятные имена.

    При этом, что такое "понятное имя", каждая команда договаривается самостоятельно. Кто-то пишет только на грамотном английском, кто-то использует колхозную транслитерацию. Один и тот же элемент на разных проектах может называться по-разному, потому что у них разная предметная область (например, menu/navigation). И так далее.

    Дополнительно, существуют и схемы наименования, самая популярная - БЭМ.

    С точки зрения же механики, браузеру совершенно всё равно, что написано у вас в классах (за исключением небольших технических ограничений, описанных в спецификации).
    Ответ написан
    Комментировать
  • Почему не делают табы радио-кнопками?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    Семантично делать их ссылками.
    Радио-кнопки предполагают наличие формы, оборачивать табы в форму нелогично, так что вам кажется неправильно.
    Ответ написан
    5 комментариев
  • Зачем комментарии на сайте оборачивать в тег article?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    его рекомендуют оборачивать тегом article
    Тут нужно дать ссылку на эту рекомендацию, чтобы мы могли её оценить не на уровне "Рабинович по телефону напел".

    его можно использовать в любом другом месте, а как использовать комментарий на другом сайте
    Когда говорят об использовании "в любом месте", подразумевают "любое место данного сайта". И в рамках сайта комментарий действительно может быть оторван от условного рецепта: например, в профиле пользователя может выводиться список всех его комментариев (как здесь) или в сайдбаре может выводиться список всех последних комментариев (как на vc.ru).

    На самом деле все эти семантические теги, введённые в HTML5, не оказывают абсолютно никакого влияния ни на что (за исключением небольшого количества функциональных тегов, которые упрощают доступность), так что вы можете не заморачиваться слишком сильно. Это не говоря про то, что семантика этих тегов жёстко привязана к конкретному сайту - то, что будет логично на одном, будет бредом на другом. Универсальных правил использования семантических тегов нет, есть рекомендации, которые вы вольны игнорировать.

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

    TLDR: Не хотите - не оборачивайте, не случится ровным счётом ничего. Это всего лишь рекомендация и примеры в них для семантических тегов иногда притянуты за уши, потому что эти теги в большинстве своём не решали какие-то реальные проблемы, а были введены для красоты, которая у каждого своя.
    Ответ написан
    7 комментариев
  • Как изменить положение элементов в вёрстке?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега CSS
    Нужно их вырезать в HTML из .center-box и вставить в элемент, который и является правой колонкой.
    Или вы хотите без изменения HTML этого добиться? Это так себе идея.
    Ответ написан
  • Как сделать фильтр с поиском размеров +-15% по значению типа 1,2*3,5 -?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    Порядок решения такой:
    1. Разбиваете введённую строку на два числа.
    2. Для каждого числа определяете диапазон, умножив его на 0,85 и 1,15.
    3. У каждого элемента списка разбиваете его строку с размерами на два числа функцией из п.1 и проверяете, входят ли они в нужный диапазон.


    Хоть какую-то сложность тут может представлять только нормализация строки, если она требуется. Т.е. если требуется обрабатывать строку, например, и в формате "1.2x3.5", помимо приведённого в вопросе, то придётся немного заморочиться с определением где там числа. Но, на самом деле и тут всё довольно просто: заменяем запятые на точку, а всё, что не цифра и не точка заменяем на пробел. А дальше уже регуляркой легко получить из получившейся строки два числа.
    Ответ написан
  • Как преобразовать код в JSX в HTML, CSS и JS?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега CSS
    Опишите свою реальную задачу, потому что сейчас непонятно, чего именно вы хотите добиться, и из-за этого нельзя дать какой-то адекватный ответ.

    Вы хотите полностью отказаться от React и перейти на более «простые» инструменты? Скорее всего, это невозможно — если используется React, то у вас сложные динамические интерфейсы и никакими автоматическими средствами переписать их на ванильный js не выйдет — только руками. Но это будет требовать знаний куда больших, чем просто использование React.

    Если же вы хотите отказаться от JSX, но оставить React, то это автоматизировать уже можно, но задача очень странная.
    Ответ написан
    Комментировать
  • Как убрать элемент со странице, которого нет в разметке html?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега CSS
    Само собой, они есть в HTML разметке.
    Больше ничем по картинке помочь не можем.
    Ответ написан
    Комментировать
  • Какую логику посоветуете при работе с изображениями с помощью атрибута loading?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    Ну вы выберите чего вы хотите: грузить картинки всегда, чтобы страница после загрузки не зависела от сети, или грузить их только при необходимости. Это так-то взаимоисключающие вещи.

    Можно написать костыль, который после DOMContentLoaded будет проходить по картинкам и убирать этот атрибут - тогда "разные тесты" не будут возбуждаться, но для реальных людей польза от lazy пропадёт.
    Ответ написан
    Комментировать
  • Как с помощью JS изменить значение SELECT списка на значение с атрибутом selected?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    <select>
      <option value="1" selected="selected">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    
    <button>Reset</button>


    const $select = document.querySelector('select');
    
    document.querySelector('button').addEventListener('click', () => {
      $select.value = $select.querySelector('option[selected]').value;
    });
    Ответ написан
    Комментировать
  • Не работает input type="text". что делать?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    Верхний инпут перекрывает margin нижнего (email). Просто так это не исправить, тут всё надо переделывать на нормальную вёрстку.
    Ответ написан
    2 комментария
  • Не работает ссылка?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    100% на неработающую часть ссылки налезает какой-то другой блок, перекрывающий клик. Другой причины, по которой может не работать обычная ссылка не может быть.
    Ответ написан
    2 комментария