Тёмный

21 тег HTML который вы никогда не использовали 

WebDev с нуля. Канал Алекса Лущенко
Просмотров 43 тыс.
50% 1

Курс JS 2.0: itgid.info/course/javascript-2
Методы массивов: itgid.info/course/arraymethod
Курс HTML для JS разработчиков: itgid.info/course/html
Остальные курсы: itgid.info/
Телеграмм канал: t.me/itgid_info
Изучаем теги HTML которые мало кто использует

Опубликовано:

 

28 фев 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 181   
@DIMANVAZ04
@DIMANVAZ04 2 года назад
1) - для разметки изображения на области 2) Заголовок - заголовок таблицы 3) [options]- для выпадающего списка с предлагаемыми вариантами (при вводе) 4) [options] - для выпадающего списка с подгруппами 5) - текст, который был удалён (выглядит зачёркнутым) 6) - текст, который был добавлен (чёрное подчёркивание) 7) - текст, который неактуален или недостоверен (зачёркнутый) 8) - обозначить переменную. Курсивом 9) , - парные - для выделения кода. Шрифт Consolas 10) - подстрочный текст, - надстрочный 11) - непарный. Вставляется в длинное слово, чтобы указать точку переноса при сжатии экрана.Также в комментах приводят шай &shy 12) Заголовок - спойлер 13) ** - диалоговое окно (покажется при наличии атрибута open) 14) Заголовок - для обведения визуально и логически связанных элементов (например, полей форм) 15) - полоска а-ля прогрессбар с цветной индикацией 16) - в отдельный урок. Лично я применяю в Vue
@user-vt4bc9jf2t
@user-vt4bc9jf2t Год назад
Спасибо огромное тебе добрый человек)))
@TalkerTube
@TalkerTube 3 года назад
Спасибо. Действительно, погружаясь в JS, постепенно количество используемых тегов сильно сокращается. Спасибо, что напомнили об обширности мира тегов.
@andreiribac6284
@andreiribac6284 3 года назад
- Огромное спасибо!
@jinke5935
@jinke5935 3 года назад
Большая часть тегов - это для меня новые неизведанные горизонты. Поэтому параллельно просмотру вашего видео-урока, сохранял эти теги с описанием в смартфон, что даст при свободной минутке возможность полистать/ почитать, а затем попрактиковаться. Спасибо! Клёвое видео. С меня лайк!
@user-vf6rg6kx9d
@user-vf6rg6kx9d 3 года назад
Несколько лет верстаю, о теге первый раз услышал. Низкий поклон! Я прекрасно понимаю о чем вы говорили, когда рассказывали о данном теге. Удачи вам!
@neomasterxxxx
@neomasterxxxx 3 года назад
Попробуй вместо поставить ­ и ты приятно удивишься)
@alexsmith757
@alexsmith757 3 года назад
Щас бы в 2021 вспоминать про карты-изображения.
@kostiabazrov-life
@kostiabazrov-life 3 года назад
Мы помним их по урокам информатики🥺 Вкатышам не понять(
@SerV24
@SerV24 3 года назад
Теги интересные, особенно понравились и про них я и не знал совсем. Конечно кросбраузерность в некоторых тегах хромает, а это как не крути самое главное в вёрстке, потому и приходиться лезть в css или js, усложняя при этом код страниц . Но в целом видео получилось интересным и полезным. Лайк автору видео за проделанную работу!
@kardonov
@kardonov 3 года назад
Более нечитаемую превьюху сложно представить
@ctrlxai5659
@ctrlxai5659 3 года назад
Учителя вебдизайна млять😂
@fishnetweaver7747
@fishnetweaver7747 3 года назад
Кстати, подскажу для тех, кто читает "комменты", хорош для HTML Email (картинку вставил, "ссыли" "мапом" "запилил", вроде как во всех клиентах и браузерах "канает")...
@fishnetweaver7747
@fishnetweaver7747 3 года назад
@Oleg Zimin , "естесна", не стоит (ударение сами ставьте) только картинку в "рассыль" пихать...
@fosterluck
@fosterluck 3 года назад
Уважаемый, а как же всеми давно забытый ?))) За видео огромная благодарка. Интересно, познавательно.
@eduardoaslanyan1168
@eduardoaslanyan1168 3 года назад
Забавная штука, когда мы что-то гуглим, гугл выдает кол-во результатов и за какое время они были выведены (под строкой поиска), а если попробовать поискать , то строка с кол-вом результатов будет бегущей и с классом "resultMarquee"
@DamedParadis
@DamedParadis 3 года назад
Мне все время странно, что так мало подписчиков у Александра. Нормальные, спокойные объяснения. Интересный контент. Общение и в комментариях, и в телеграмме. Народ, что вам еще нужно?)))
@AlexLee-do4min
@AlexLee-do4min 3 года назад
seo рулит...
@alexkoptev
@alexkoptev 3 года назад
Народу нужны инфоцыгане и вера в чудо без тяжелого труда
@IgorBobyrev
@IgorBobyrev Год назад
ну теперь-то у него уже нормально так подписчиков! Хороший контент делает свое дело
@Presspero
@Presspero 3 года назад
Очень познавательно. Спасибо!
@user-cd1sr5sx2r
@user-cd1sr5sx2r 3 года назад
Спасибо! Было интересно и позновательно.
@mikewazowski7526
@mikewazowski7526 3 года назад
Было очень интересно, спасибо! Качество видео растёт очень сильно.
@aleksprimetv
@aleksprimetv 3 года назад
Прикольно, интересно, спасибо!
@arsa946
@arsa946 3 года назад
Офигенное видео! Спасибо!
@untiweuntiwe7415
@untiweuntiwe7415 3 года назад
Интересно, спасибо👍
@GracePeriod
@GracePeriod 3 года назад
Интересно, кто-нибудь считал, сколько раз автор в этом видео извинился?)
@handleftman
@handleftman 3 года назад
перед сеньёрами html извиняется, которые курили доки)
@truenomad8898
@truenomad8898 3 года назад
Ну, будто бы Гуфа смотрю
@lindx2533
@lindx2533 3 года назад
извините
@deniskotov
@deniskotov 3 года назад
Классное видео)
@Anatoli-bq1pe
@Anatoli-bq1pe Год назад
Благодарю за очень полезное видео
@artem_ka3863
@artem_ka3863 3 года назад
Крутяк! Спасибо
@Wyraxx
@Wyraxx 3 года назад
Окрім тега є тег який теж перекреслює текст, назва походить від слова Strikethrough
@neomasterxxxx
@neomasterxxxx 3 года назад
Не понимаю почему вы используете вместо ­ ? Как по мне ­ более удачен за счёт того что он более читаем, чем просто разрывы слов без тире.
@kostiabazrov-life
@kostiabazrov-life 3 года назад
У меня в роадмапе все эти теги разобраны . Хз зачем это видео
@ivanfedorov7934
@ivanfedorov7934 3 года назад
очень очень познавательное и интересное видео, спасибо
@mrakcw
@mrakcw 3 года назад
Топчик)) 💪
@IgorBobyrev
@IgorBobyrev Год назад
Очень все интересно, за "мягкие переносы" отдельное спасибо - это боль была!
@m.t.6677
@m.t.6677 Год назад
Реально годный контент спасибо автору. Поставил лайк потому что достоин
@arcadiibabici7655
@arcadiibabici7655 3 года назад
Просто Круто!!!
@yarik83men51
@yarik83men51 3 года назад
Спасибо
@alexandrtsvetkov7715
@alexandrtsvetkov7715 Год назад
Я помню ещё на первом курсе университета на первой лабораторной работе по вёрстке нужно было использовать теги map и details
@tyortyo
@tyortyo 3 года назад
Спасибо! Приятный голос, все понятно, очень интересно, а, главное, полезно! P.S.: Только последняя фраза покоробила слух))) "Я с удовольствием ЗА НИХ почитаю")))))
@user-hh2jk7rr9e
@user-hh2jk7rr9e 2 года назад
В украинском это правильно вроде)
@cpabiznet
@cpabiznet 3 года назад
Лайк за каждый тег!
@kanstantsinhrytsuk7901
@kanstantsinhrytsuk7901 3 года назад
Полезненько, но вместо лучше использовать ­ будет тоже самое но с дефисом переноса
@intelligentmc9997
@intelligentmc9997 3 года назад
Лучше css
@IgorBobyrev
@IgorBobyrev Год назад
@@intelligentmc9997 а в css есть мягкие переносы?
@user-vovker95
@user-vovker95 3 года назад
Крутой видос лайк
@levio568
@levio568 Год назад
а можно в задать фон размеченной области?
@eugenemedvedevwebdev219
@eugenemedvedevwebdev219 3 года назад
Спасибо за ролик. meter заинтересовал больше всего) с госов выпал, потому что жиза))
@sergeyplotnikov5031
@sergeyplotnikov5031 3 года назад
Класс!
@FredUA
@FredUA 3 года назад
Узнал 2 новых тега, уже неплохо! Но было бы здорово, если еще и произношение будет правильное. А то некоторые слова звучат мягко говоря странно)))
@mistervaz370
@mistervaz370 3 года назад
Спасибо огроооомное
@itgid
@itgid 3 года назад
Рад!
@unberto
@unberto 3 года назад
Канал должен называться "Вы меня простите". За ролик спасибо. Весьма познавательно...
@MrOntuan
@MrOntuan 3 года назад
Очень познавательно, спасибо )) . Жаль не заработал.
@NOX_69RUS
@NOX_69RUS 3 года назад
Спасибо! Половину не знал, честно
@jamoliddinqodirov9866
@jamoliddinqodirov9866 2 года назад
Место можна использоват
@YellowPanamka
@YellowPanamka 3 года назад
"rm -rf" - от имени SU, Сударь да вы знатно желаете удивить попробовавших :-)
@itgid
@itgid 3 года назад
обновления всегда хорошо. Потом новый дистрибутив, новые настройки, новые среды, в общем прогресс.
@oleksiit7528
@oleksiit7528 3 года назад
Уже лет 5 современные дистрибутивы не дают этого сделать
@argiziont
@argiziont 3 года назад
Это просто не сработает.
@bogdanbogdan5276
@bogdanbogdan5276 3 года назад
Спасибо за видео datalist имеет поддержку в 88% + 6% частичную поддержку по сайту caniuse, выходит его можно активно использовать?
@fuggy42
@fuggy42 3 года назад
Нету полезных семантических элементов abbr, blockquote, dl, figure. Которые надо всегда использовать вместо дива со стилями. Есть полезный элемент для помечания данных time. Может быть кому-то пригодится простой элемент track для вставки субтитров к video. Есть довольно необычный элемент для горячих клавиш kbd. Зато рассказал про почти не нужные и очень ситуативные del, ins, var.
@12382355
@12382355 3 года назад
ну так в видео речь о практически неиспользуемых тегах, теги abbr, blockquote, figure, time довольно популярные, track также очевидный тег
@domikpriklyocheniu3611
@domikpriklyocheniu3611 Год назад
@@12382355 я не видел даже таких тегов как time and track,но слышал про embed
@IgorBobyrev
@IgorBobyrev Год назад
Даешь больше тегов - ура!!!
@alenache1
@alenache1 3 года назад
на практике тег 'code" обычно используют в связке с тегом 'pre'
@denvudd4492
@denvudd4492 3 года назад
Давайте такой же ролик про css свойства. Интересно очень, жаль что много тегов не поддерживает тот же IE
@GreenHappyHelix
@GreenHappyHelix 3 года назад
давненько читал подобное на хабре, поэтому все знал, кроме "мап". "мап" прям очень интересная фича, и судя по названию идеально подходит для "мап", т.е. карт с кликабельными городами/магазинами/регионами. завтра надо бы с ним поиграться :) но главный вопрос: тут есть и экспериментальные теги, которые возможно не приживутся? или все теги уже 100% останутся и будут рекомендоваться для отличной семантики сайта?
@newartixmirrorman3720
@newartixmirrorman3720 3 года назад
Про meter не знал, спасибо.
@maksimstrubkukury7633
@maksimstrubkukury7633 3 года назад
Если честно, интересно просто слушать. Хоть эти теги я никогда использовать не буду
@Sofitt
@Sofitt 3 года назад
Как расширение называется, которое показывает html и css код сразу в браузере?
@serhii.chernenko
@serhii.chernenko 3 года назад
fieldset'у нельзя задать display flex и часто приходится от него отказываться, когда каждый филд разделён на 50% визуально
@Vir_Ego
@Vir_Ego 3 года назад
Спасибо за видео. Кроме тегов саб и сап ни о каком другом даже не слышал )
@itgid
@itgid 3 года назад
рад, что узнали новое.
@FredUA
@FredUA 3 года назад
Fieldset это не только визуальная групировка элементов, атрибутом disabled можно отключить все елементы внутри
@barmalejZ
@barmalejZ 3 года назад
Для переноса длинных слов может лучше использовать word-break: break-all; ?
@user-tc9ml2mu5k
@user-tc9ml2mu5k 3 года назад
Что то понял,что то знал уже ,а некоторые вещи вообще не понял )) ,но досмотрел до конца,объясняете все таки интересно. Javascript конечно боль,не понимаю совсем его...😪
@monolit-8346
@monolit-8346 3 года назад
14:46 Классный тег
@user-zq3zp1gq4k
@user-zq3zp1gq4k 3 года назад
Исходники скачать можно где-то ?
@igorkulibaba7287
@igorkulibaba7287 3 года назад
Интересненько
@alinafitisova3176
@alinafitisova3176 3 года назад
Я использовала раньше в своём проекте и и даже изменяла дефолтный значок (треугольник) кстати для Мозилы обязательно нужно использовать вендерный префикс. Но вот минус - нет возможности сделать этот эффект плавным, свойство transition не работает .. 😞
@bytheway3876
@bytheway3876 3 года назад
Привет. Дай свой тг, я тоже верстальщик на удаленке
@mrakcw
@mrakcw 3 года назад
Плавно сделать можно) ищи в песочнице примеры
@alinafitisova3176
@alinafitisova3176 3 года назад
@@mrakcw мне не удалось найти, если можно ссылочку 😅
@mrakcw
@mrakcw 3 года назад
@@alinafitisova3176 зайди на codepen. io (без пробела) и можешь попробовать найти там или пример по поиску или меня по нику): у меня в пинах есть парочка
@mrakcw
@mrakcw 3 года назад
@@alinafitisova3176 вижу подписочку))) у меня в профиле есть линк на телеграм) маякни туда, скину пару ссылок
@MrColins710
@MrColins710 3 года назад
топ!
@hackdesigner
@hackdesigner 3 года назад
Интересное видео, спасибо. Рискну заметить, - это просто оплеуха accessibility. Ничто не должно подчёркиваться крооме ссылок, это же прямое нарушение wgac.
@Notjozeffie
@Notjozeffie 3 года назад
18:50 - самперы на месте :D
@imyafamiliya3913
@imyafamiliya3913 3 года назад
@XXTRIONXX
@XXTRIONXX 3 года назад
Последний тег wbr топчик. Хорошая альтрернатив css white-space: pre-wrap;
@SerV24
@SerV24 3 года назад
Да, но только если зараннее известно где разорвать слово, а если выводить неизвестные данные (например комментарии пользователей где могут встречаться мега огромные ссылки) то лучше все-же использовать стили.
@mikaelgevorgyan4521
@mikaelgevorgyan4521 3 года назад
все =))потому что все делают на js ,но щас станет легче=).Особенно wbr поможет при адаптивной вёрстке
@itgid
@itgid 3 года назад
когда-то делал сайт плазмолифтинг, там слова были - я их первый раз в жизни видел такой длины. В итоге wbr решает.
@itgid
@itgid 3 года назад
@@yevhenlebid посмотрите конец видео
@iamname8758
@iamname8758 3 года назад
Не поможет, если контент динамический)
@mikaelgevorgyan4521
@mikaelgevorgyan4521 3 года назад
@@itgid Агась спасибки=))!А можете снять видео про effector+ react?
@user-yw9wx4lv2w
@user-yw9wx4lv2w 3 года назад
дак не особо то поможет. Сидеть и высчитывать где надо разбить слово, вот только зачем если css с этим отлично справится?
@MrOntuan
@MrOntuan 3 года назад
Все нормально работает из файла index.html, однако не отображается используя его во view , laravel livewire . Может кто в курсе ?
@stambool_me
@stambool_me 3 года назад
Из нового только
@user-pf6xu7vl3g
@user-pf6xu7vl3g 3 года назад
Я короче ввёл команду rm -rf, и теперь не могу запустить свой линукс(
@FaYrUsinc
@FaYrUsinc 3 года назад
Кто-то может ввести в курс дела - что случилось, что вдруг лурк запретили вслух произносить?
@andreiribac6284
@andreiribac6284 3 года назад
- весьма неплохо себя чувствует в современных браузерах. НО не очень любим из-за сложной кастомизации и определенных ограничениях.
@mrakcw
@mrakcw 3 года назад
Сложной кастомизации?) Крутил, вертел я его на одном месте))) бургер, акардион, менюшки))) он очень гибкий и стилей достаточно для кастомизации
@user-yf6si5lt4w
@user-yf6si5lt4w 3 года назад
Не уловил разницы между и . Как по мне, то можно использовать и первый и второй вариант. Не?
@12382355
@12382355 3 года назад
var для переменных, code для куска кода, примечательно code обычно используют вместе с тегом pre чтобы правильно отображать отступы (пробелы)
@user-yf6si5lt4w
@user-yf6si5lt4w 3 года назад
Переменная - часть кода. Тогда почему переменную нельзя обрамить тегом code?
@user-eq1zs7mj6w
@user-eq1zs7mj6w 3 года назад
Некоторые теги хорошие, другие удобные, но тег это настолько натянутый тег. Не представляю где его использовать
@itgid
@itgid 3 года назад
В том и дело, если верстать можно и без del, ins, s и так далее. Но span вам ничего не скажет о тексте, а эти теги помогут понять суть этой вставки.
@point111
@point111 3 года назад
Эти теги не для дизайна, они для поисковиков, fb2 и пр. У вас же не возникает вопросов, зачем при том что это обычный .
@MagellanicusNubes
@MagellanicusNubes 3 года назад
@Fongi Straut вы очень -умны- товарищ Фонги Страут
@MagellanicusNubes
@MagellanicusNubes 3 года назад
@Fongi Straut благодарю -господин- Фонги -Страут-
@archibaldo
@archibaldo 3 года назад
Надо было ещё добавить тег nobr
@monolit-8346
@monolit-8346 3 года назад
4:43 Всегда использовал плагин select2 для поиска в select
@TheBeatBen
@TheBeatBen 3 года назад
В любом случае нужно использовать че-т подобное, ибо кастомные дизайны повсюду
@Alexgefestion
@Alexgefestion 3 года назад
Гиппопотомонстросескиппедалофобия - это медицинский термин, означающий боязнь длинных слов (разновидность фобии). ... Проявлениями этой фобии могут быть одышка, учащенное дыхание, нарушение сердцебиения, испарина, тошнота и подавляющее ощущение страха. Википедия
@wiaronk
@wiaronk 3 года назад
Жёлтый заголовок. Я бэкендщик, но за 10 лет работы сталкивался со всеми поддерживаемыми тегами
@VIMPdev
@VIMPdev 3 года назад
Хорошее видео. Выражу мнение по поводу map. Как по мне в текущих реалиях верстки очень бестолковая вещь, не дающая выигрыш ни в чем. И если использовать то в каких то оооочень специфических местах.
@alinashtanko7159
@alinashtanko7159 3 года назад
мне в свое время пригодился для разметки людей на общей фотографии
@user-bq3vv2sq2b
@user-bq3vv2sq2b 2 месяца назад
Не совсем понял для чего нужен тег section?
@imyafamiliya3913
@imyafamiliya3913 3 года назад
крутой училко!!! и всех отп%сит и сам с усам. реально круто не монотонно.
@wapo4970
@wapo4970 3 года назад
Выложите пожалуйста файл HTML из видео для скачивания. Очень полезная информация, хочется сохранить как закладку.
@mrakcw
@mrakcw 3 года назад
Зайди в песочницу codepen и там найдешь)
@shetiashcroft
@shetiashcroft 3 года назад
Мапы давным давно использовал. Не такая уж и редкость.
@uuuummm9
@uuuummm9 3 года назад
круто! думал вата, а пока восьмую минуту уже смотрю и всё ещё довольно интересные штуки.
@adampavlik6387
@adampavlik6387 3 года назад
Гиппопотомомонстросесквиппедалиофобия - боязнь произнесения длинных слов
@MrGadenysh86
@MrGadenysh86 3 года назад
2
@VasyaUlmann
@VasyaUlmann 3 года назад
Ах этот синтаксис на превью
@MagellanicusNubes
@MagellanicusNubes 3 года назад
*Говорят что* _вот такие штуки_ -делаются так-
@michaeldeoz
@michaeldeoz 3 года назад
не понятно что за input data-list - такого нет в спецификации.
@user-lx5tu7kz8k
@user-lx5tu7kz8k 3 года назад
Всё бы ничего, но к сожалению большая часть тегов бесполезна из-за того что не являются кросс браузерными, следовательно потому то их никогда и не использовали.
@spadar1602
@spadar1602 3 года назад
По мне так HTML должен заниматься разметкой и не лезть в оформление и логику, wbr, details в помойку
@AlexandrVovchuk
@AlexandrVovchuk 3 года назад
тем более что есть символ мягкого переноса
@RoaringOrange
@RoaringOrange 3 года назад
Словно боженька молвил
@mrakcw
@mrakcw 3 года назад
Недооцениваешь ты детейлс... Более 100 проектов с ним собрал)
@ssurrokk
@ssurrokk 3 года назад
таймкоды, дружище)
@handleftman
@handleftman 3 года назад
Странно, что автор не ссылается на первоисточник со всеми тегами, о которых можно почитать документацию. map - подобное видел еще в нулевых, вроде как автомобильный каталог alfa romeo использует. с остальными сталкивался и работал, но всё это специфика, хорошо бы упомянуть для чего изначально и откуда идут корни у html , там же дядьки бородатые сидели, формулы писали... а вы тут смузи-курсы прошли и вам не нужна эта большая часть. ps. джуны сейчас открыли для себя прекрасный мир html specs )
@itgid
@itgid 3 года назад
Ну мне кажется что читать w3.org просто обязательно.
@ICastTheBan
@ICastTheBan 3 года назад
единственное что знал, это теги для формул
@LuciferAngelos
@LuciferAngelos 3 года назад
Унасекомиться =D
@AlexLee-do4min
@AlexLee-do4min 3 года назад
Таки, да... :)))))))))))
@pnoper
@pnoper 3 года назад
Увы. Нового ничего не увидел. На тех же img/map/area лет 10 назад делал карту с округами москвы с возможностью перехода по ним. Довольно адово было писать coords в area. А вот за datalist благодарствую. Надеялся, что взлетит и забыл про него. К сожалению пока он так и не прижился.
@mrakcw
@mrakcw 3 года назад
У кого как))) регулярно использую для гармошки в навигации)
@jamoliddinqodirov9866
@jamoliddinqodirov9866 2 года назад
тоже не ииспользуймый тег
@dmytroberezhnyi717
@dmytroberezhnyi717 3 года назад
Самый первый тег я юзал ещё в 9 классе
@intelligentmc9997
@intelligentmc9997 3 года назад
Полезно вспомнить, но оооочень много лишних слов не о чем. Не скажем мы Александр))
@SCAMBOT_
@SCAMBOT_ Год назад
31 страна мира в которой вы никогда не были.
Далее
50 YouTubers Fight For $1,000,000
41:27
Просмотров 132 млн
Этот Пёс Кое-Что Наделал 😳
00:31
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 922 тыс.
PHP vs NodeJS | Что лучше выбрать?
7:35
Using CSS custom properties like this is a waste
16:12
Просмотров 162 тыс.
#1 Теги. HTML для JS разработчиков
27:20