Вы видимо очепятались, aria-* атрибуты задают состояние элементов, что важно для программ чтения с экрана, но это не семантика. Семантика это атрибут role.
Значительную часть структуры сайтов делают не из семантических тегов, а из тегов общего назначения - div, span, даже section и article туда можно отнести.
Что бы использовать их в целях стилизации и не “промахнуться", дав стили другому тегу, для них назначают классы и даже атрибуты. Про результату имеется нагромождение div и span, смысл которых понятен только из их класса.
Кастомные теги, если не использовать их API, позволяют использовать их уникальное имя для стилизации и прочего, минуя необходимость писать атрибут class, и в некоторых случаях data-*. Уникальное имя выполняет функции выделения блока среди других, а за счёт отсутствия необходимости писать атрибуты для этого позволяет писать разметку быстрее, а сама разметка становится короче.
Ты же логика и с атрибутами - порой проще написать атрибут без data-*, чём подписать класс, а эффект будет такой же.
1: Вопрос о целесообразности - закрыт. Использовать кастомные теги без семантики заместо вместо div-ов и span-ов без семантики, что бы не было необходимости прописывать классы. Если есть встроенные теги с семантикой - следует использовать их. Я не писал о том, что и про них нужно забыть. Смысл не в экономии килобайт (вы серьёзно подумали, что для работы кастомных тегов нужна библиотека?), смысл в том, что бы писать меньше (атрибут class, как и data-* не используется), а значит - быстрее. Нет, правда, почему я должен доносить настолько очевидные вещи!? Бонусом частичное решение проблем каскада (переопределить тег классом проще, чем другой класс). Если вы и в правду не смогли понять, почему теги предпочтительней классов в ~80% случаев, перечитайте статью, вас интересует первая половина. 2: Прошу, наденьте очки обратно и удалите затемняющий слой, или что там у вас на очках - вы даже с ними плохо видите. Прочтите статью ЦЕЛИКОМ, вас интересует раздел "Расширенное использование или JS API". Уделите время и вы всё найдёте.
И да, вы не нашли слово "shadow" в тексте потому, что я использовал вместо него слово "теневую" (теневую разметку). Пересмотрите свой опыт использования поиска по словам.
Верстка должна быть в первую очередь семантичной для поисковиков и машин которые ее будут обрабатывать
В таком случае, переход веба на машинный код или тотальное использование веб-фреймворков в вашей логике является совершенно практичным... О людях подумайте.
Практичность тоже очень субъективное понятие.
Принцип DRY, как и время - очень субъективная штука!
Выходит вы показали разницу как делать не надо и как делать совсем не надо.
Вы небось когда читали учебник физики, пребывали в ярости - ну к чему эти абстрактные примеры в вакууме!? Где искажение времени, вызванное гравитацией!?
Вам непременно нужны хотя бы два курса журналистского факультета
Всего лишь 2 курса?
АХАХАХА, вы умеете себя в грязь затаптывать. Да, журфак не повредит. Да что уж там, вам не повредит дополнительное образование в любом объёме и количестве.
Использование веб-компонентов должно быть не для замены div-ов, а для замены их классов, в следствии чего улучшается читаемость и уменьшается объем кода, да и некоторые проблемы каскада от этого решаются. Это не только красиво, но и практично.
Вы сравниваете нарочно плохую верстку с нарочно еще более плохой версткой.
Специально сделал такой пример, что бы показать разницу наиболее наглядно. Я в курсе, что можно сделать лучше.
вам нужно свойство display как минимум прописать для корректного отображения.
И без него будет корректно отображаться, а про их изначальный стиль в статье упомянул:
Да да, все ваши кастомные элементы изначально строчные. Учитывайте это при стилизации.
И да, посмотрел вашу статью про веб-компоненты. Вам непременно нужны хотя бы два курса журналистского факультета, содержание нормальное, структуру нужно дорабатывать.
Это кажется так. Их используют, просто об этом никто не знает.
Крупнейшие компании мира делают и поддерживают очень малый объём сайтов, их творения вполне можно считать редкостью.
div-ы я использовал нарочито, специально. О том, что существуют семантические теги для соответствующих целей я знаю, но нужно же было дать понять всю глубину глубин.
Angular работает как сторонняя библиотека, ей даже пользоваться надо уметь. Кастомные элементы работают из коробки, как и другие теги, и если не трогать API - даже изучать не надо.
Не в курсе про Lit, но использование веб-компонентов вообще необязательно. Существует нескромный арсенал встроенных, как семантических тегов (вроде section, hr и header) так и возможность стилизовать общие теги (div, span) через классы. Те же кнопки прекрасно реализованы через тег button. И да, для использования веб-компонентов, как и других тегов использование JS API обязательно чуть менее, чем полностью.
Прошу прощения у автора комментария, который задал вопрос про SEO, я тупо промахнулся и вместо написания ответа отклонил его. :с
Касаемо влияния кастомных тегов на SEO и подобного - они равнозначны span, а значит семантики не имеют. Роботы их не учитывают. Безусловно, им можно задать семантику через атрибут role, но это сомнительно. Если есть возможность - используйте семантические встроенные теги вместо кастомных.
Думайте над прочтённым, я привёл аргументы в пользу того, зачем их использовать. 1: Кастомные теги в ~80% случаев заменяют классы, особенно при использовании атрибутов. Это не столько красиво, сколько короче. И да, дублирование кода (даже такими вещами как атрибут class) - не есть хорошо, хоть и терпимо. Логика тут такая же, как и при необязательных точках с запятой в JS. 2: "Но об этом не написано" - читайте прежде чем писать или очки снимите. Я и про JS API упомянул, и про теневой DOM, и про кастомизацию встроенных тегов.
Не путайте алгоритм с теорией. Последняя допускает ответвления и вольные трактовки, но не алгоритм.
Алгоритм, грубо выражаясь, последовательность действий, приводящая к предсказуемому результату. Если результат становится не совсем предсказуем, значит алгоритм нужно дорабатывать. Адаптивность никогда не помешает.
И не поспоришь, реально отвратительная штука.
И верно. Чего только стоит направленное ядерное оружие.
Вы видимо очепятались, aria-* атрибуты задают состояние элементов, что важно для программ чтения с экрана, но это не семантика. Семантика это атрибут role.
Что же, попробую ещё раз.
Значительную часть структуры сайтов делают не из семантических тегов, а из тегов общего назначения - div, span, даже section и article туда можно отнести.
Что бы использовать их в целях стилизации и не “промахнуться", дав стили другому тегу, для них назначают классы и даже атрибуты. Про результату имеется нагромождение div и span, смысл которых понятен только из их класса.
Кастомные теги, если не использовать их API, позволяют использовать их уникальное имя для стилизации и прочего, минуя необходимость писать атрибут class, и в некоторых случаях data-*. Уникальное имя выполняет функции выделения блока среди других, а за счёт отсутствия необходимости писать атрибуты для этого позволяет писать разметку быстрее, а сама разметка становится короче.
Ты же логика и с атрибутами - порой проще написать атрибут без data-*, чём подписать класс, а эффект будет такой же.
1: Вопрос о целесообразности - закрыт. Использовать кастомные теги без семантики заместо вместо
div-ов иspan-ов без семантики, что бы не было необходимости прописывать классы. Если есть встроенные теги с семантикой - следует использовать их. Я не писал о том, что и про них нужно забыть.Смысл не в экономии килобайт (вы серьёзно подумали, что для работы кастомных тегов нужна библиотека?), смысл в том, что бы писать меньше (атрибут class, как и data-* не используется), а значит - быстрее. Нет, правда, почему я должен доносить настолько очевидные вещи!?
Бонусом частичное решение проблем каскада (переопределить тег классом проще, чем другой класс).
Если вы и в правду не смогли понять, почему теги предпочтительней классов в ~80% случаев, перечитайте статью, вас интересует первая половина.
2: Прошу, наденьте очки обратно и удалите затемняющий слой, или что там у вас на очках - вы даже с ними плохо видите.
Прочтите статью ЦЕЛИКОМ, вас интересует раздел "Расширенное использование или JS API". Уделите время и вы всё найдёте.
И да, вы не нашли слово "shadow" в тексте потому, что я использовал вместо него слово "теневую" (теневую разметку). Пересмотрите свой опыт использования поиска по словам.
Вы небось до сих пор гриды не используете из-за их не 100% поддержки?
Хм, не знал о таком. Благодарю, информация полезная.
В таком случае, переход веба на машинный код или тотальное использование веб-фреймворков в вашей логике является совершенно практичным... О людях подумайте.
Принцип DRY, как и время - очень субъективная штука!
Вы небось когда читали учебник физики, пребывали в ярости - ну к чему эти абстрактные примеры в вакууме!? Где искажение времени, вызванное гравитацией!?
АХАХАХА, вы умеете себя в грязь затаптывать. Да, журфак не повредит. Да что уж там, вам не повредит дополнительное образование в любом объёме и количестве.
Использование веб-компонентов должно быть не для замены
div-ов, а для замены их классов, в следствии чего улучшается читаемость и уменьшается объем кода, да и некоторые проблемы каскада от этого решаются. Это не только красиво, но и практично.Специально сделал такой пример, что бы показать разницу наиболее наглядно. Я в курсе, что можно сделать лучше.
И без него будет корректно отображаться, а про их изначальный стиль в статье упомянул:
И да, посмотрел вашу статью про веб-компоненты. Вам непременно нужны хотя бы два курса журналистского факультета, содержание нормальное, структуру нужно дорабатывать.
Упомянуто в тексте:
Крупнейшие компании мира делают и поддерживают очень малый объём сайтов, их творения вполне можно считать редкостью.
div-ы я использовал нарочито, специально. О том, что существуют семантические теги для соответствующих целей я знаю, но нужно же было дать понять всю глубину глубин.В какой то степени, реакцию на изменение атрибутов можно так рассматривать, но да, этого не всегда достаточно.
Angular работает как сторонняя библиотека, ей даже пользоваться надо уметь. Кастомные элементы работают из коробки, как и другие теги, и если не трогать API - даже изучать не надо.
Не в курсе про Lit, но использование веб-компонентов вообще необязательно. Существует нескромный арсенал встроенных, как семантических тегов (вроде section, hr и header) так и возможность стилизовать общие теги (div, span) через классы.
Те же кнопки прекрасно реализованы через тег button.
И да, для использования веб-компонентов, как и других тегов использование JS API обязательно чуть менее, чем полностью.
Прошу прощения у автора комментария, который задал вопрос про SEO, я тупо промахнулся и вместо написания ответа отклонил его. :с
Касаемо влияния кастомных тегов на SEO и подобного - они равнозначны span, а значит семантики не имеют. Роботы их не учитывают.
Безусловно, им можно задать семантику через атрибут role, но это сомнительно. Если есть возможность - используйте семантические встроенные теги вместо кастомных.
Думайте над прочтённым, я привёл аргументы в пользу того, зачем их использовать.
1: Кастомные теги в ~80% случаев заменяют классы, особенно при использовании атрибутов. Это не столько красиво, сколько короче.
И да, дублирование кода (даже такими вещами как атрибут class) - не есть хорошо, хоть и терпимо. Логика тут такая же, как и при необязательных точках с запятой в JS.
2: "Но об этом не написано" - читайте прежде чем писать или очки снимите. Я и про JS API упомянул, и про теневой DOM, и про кастомизацию встроенных тегов.
Не путайте алгоритм с теорией. Последняя допускает ответвления и вольные трактовки, но не алгоритм.
Алгоритм, грубо выражаясь, последовательность действий, приводящая к предсказуемому результату. Если результат становится не совсем предсказуем, значит алгоритм нужно дорабатывать. Адаптивность никогда не помешает.
На кой чёрт нужен алгоритм, если он нежизнеспособен в реальности и его прямо надо допиливать?
Именно по этому важно уметь доказывать свою правоту, начальству в падлу (свои дела есть) разбираться, оно проверит тому, кто лучше докажет.