Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Классический пинбол, как в древнем игровом автомате или в компактной игрушке: есть пружины, шарики и препятствия. В нашем варианте можно не только зарабатывать очки: чтобы пройти уровень, придется выполнить дополнительную миссию.

Пинбол Пикабу

Аркады, На ловкость, Казуальные

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

HTML + Верстка

С этим тегом используют

CSS Программирование Javascript IT Сайт Web Дизайн Frontend Все
164 поста сначала свежее
SculptorAI
SculptorAI
1 год назад

А вы согласны?⁠⁠

Некоторое время назад один состоятельный знакомый предположил, что такие программы, как Figma, Adobe Photoshop и многие другие подобные продукты скоро будут никому не интересны, поскольку их заменит Chat GPT, Midjourney или еще что-то подобное.

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

Прошло несколько месяцев, я увидел новые возможности Photoshop и был буквально поражен ими. Сомневаюсь, что Midjourney, при всех своих достоинствах, сможет сделать тоже самое.

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

Я думаю, что профессионалы своего дела однозначно не станут так быстро сдавать свои позиции и уж точно сразу не проиграют. Да, у новых продуктов есть свои неоспоримые достоинства, однако и «матерые старички не спешат уходить», поскольку их популярность и профессионализм проверены годами, а молодые – это лишь хайп на новых технологиях. Их популярность неоспорима, но вот настоящий успех нужно доказывать годами проверенной и надежной работы.

Только представьте насколько сильны будут возможности, например, Photoshop или Figma при наличии у них возможностей Chat GPT и Midjourney?

Несомненно, развитие и прогресс в области искусственного интеллекта и генеративных моделей, таких как Chat GPT и Midjourney, вносят значительные изменения во многие сферы деятельности, включая дизайн и редактирование графики.

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

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

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

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

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

https://t.me/sculptorai_sng

А вы согласны? IT, Развитие, Искусственный интеллект, Программирование, HTML, CSS, Дизайн, Верстка
Показать полностью 1
IT Развитие Искусственный интеллект Программирование HTML CSS Дизайн Верстка
13
4
SculptorAI
SculptorAI
1 год назад

Sculptor AI - новое поколение frontend разработки и не только...⁠⁠

Казалось бы, что сложного сделать сайт или приложение? В наше время существует огромное количество различных ресурсов: конструкторы сайтов, графические редакторы и многое другое. В конце концов ты можешь просто обратиться к специалисту, озвучить ему свои "хотелки", нарисовать приблизительный вариант сайта, составить техническое задание и т.д. и т.п. Если тебе нужен просто одностраничный сайт-визитка, то специалист сделает его тебе за пару дней в любом стандартном конструкторе... С таким сайтом ты будешь похож на очередного безликого персонажа из массовки, на которого никто и никогда не обратит внимания, если попадет на твою страничку. Однако, работа будет сделана быстро, хоть и бессмысленно.

Но что ты будешь делать, если тебе необходимо изготовить уникальный сайт или приложение с множеством страниц, с расчетными калькуляторами и т.п. Или же тебе нужно многостраничное и многоуровневое приложение, которое не сделать в банальном конструкторе. Тут тебе придется привлекать группу специалистов. Это будут и дизайнеры, и программисты и кого ты только не встретишь на своем пути, пока получишь готовый продукт. А сколько времени они потратят на то, чтобы его сделать? И все это ты будешь оплачивать... Поскольку время специалиста - это твои деньги.

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

Мы назвали его Sculptor AI.

В целом получился принципиально новый сервис для разработки сайтов и приложений на основе искусственного интеллекта, построенный по принципу конвертации дизайна макета вашего будущего сайта или приложения в корректный код. Однако, это не просто сервис для верстки в HTML и CSS. С его помощью вы сможете осуществлять кросс-браузерную и кросс-платформенную разработки, мобильную разработку, делать адаптивную верстку,  редактировать дизайн вашего будущего сайта или приложения, а также осуществлять первичную SEO-оптимизацию, создавать калькуляторы для расчетов, а также размещать свои уже готовые работы на продажу в личной галерее и многое многое другое.

Используя Sculptor AI вам не потребуются знания HTML и CSS (в том числе сетки и CSS-фреймворки, спецификации W3C и WHATWG, HTML5/CSS3 Polyfills), препроцессоров CSS (Sass, Less, Stylus и т. д.), фреймворков и библиотек: jQuery, Angular.JS, React.JS, Vue.JS и т.д., инструментов дебаггинга (Chrome Dev Tools, Firebug и прочие) и многого другого, что необходимо для полноценной разработки.

Теперь каждый пользователь сервиса Sculptor AI может самостоятельно и без специальных знаний в области html и языков программирования произвести конвертацию дизайна, созданного в любом графическом редакторе (Figma, Sketch, Adobe XD и т.п.).

В настоящий момент продукт завершен на стадии прототипа и мы решили сделать небольшую презентацию, чтобы заявить о себе https://youtu.be/G7Xkt0yP7Mc

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

Сервис Scuiptor AI сможет объединить дизайнеров, frontend разработчиков, SEO специалистов и многих других, кто работает с сфере создания сайтов и приложений.

Наши контакты:

https://twitter.com/SculptorAI/

https://t.me/sculptorai

https://t.me/sculptorai_sng

Показать полностью 1
[моё] IT HTML CSS Верстка Искусственный интеллект Видео YouTube
5
7
sinloehal
2 года назад
Спроси Пикабу

Какие есть нестандартные значения атрибута rel в теге link?⁠⁠

Какие есть нестандартные значения атрибута rel в теге link?

Например я встречал значение <link rel="stylesheet/less" ...

Такого значения в списке значений в справочниках не нашел. Получается в этот атрибут можно указывать любые произвольные значения? И эти значения потом передаются в обработчик файла указанного в href для дальнейшей интерпретации?

Консультация Вопрос Web HTML Верстка Frontend Текст
2
1156
romakozlitin367
romakozlitin367
2 года назад
Web-технологии

35 лучших бесплатных курсов HTML/CSS верстки в 2023⁠⁠

Подготовили для вас статью с бесплатными курсами по верстке html/css. В некоторых курсах есть тренажеры: можно проходить теории и там же практиковаться.

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

HTML и CSS — это языки веб-программирования, использующиеся в паре для верстки сайтов. Функционал пары следующий: HTML представляет собой "каркас", основные компоненты будущей страницы, а CSS, расширяя возможности HTML, помогает разработчику уточнять дизайн сайта.

Тренажеры

  1. Бесплатный тренажер по html/css

    Тип: Тренажер состоит из блоков теории, после которого сразу идет практика с задачами прямо внутри тренажера.

    Язык: русский.

    После завершения курса, вы сможете бесплатно получить сертификат о прохождении.

  2. Learn-html.org

    Тип: обучающий онлайн-тренажер.

    Язык: английский.

  3. Grid Critters

    Тип: обучающая онлайн-игра.

    Язык: английский.

Бесплатные курсы от школ

  1. “Как стать frontend-разработчиком с нуля?” от Skillfactory

    Простое решение для начинающих программистов — карьерный гид компании Skillfactory. Краткий мануал расскажет об основных задачах работников сферы IT и возможностях обучения. Чтобы получить гид, необходимо указать лишь имя и адрес электронной почты.

  2. “Основы HTML и CSS” от Stepik

    Основы программирования на HTML и CSS от Тимура Гудиева на платформе Stepik. Чтобы ввести участников в кодинг, автору потребуется всего 10 видеоуроков, а для активной практики он подготовил 34 теста по каждой из тем.

  3. “Введение в HTML5” от Курсера

    Курс — введение в HTML5 от Колин ван Лент и Чарльз Северанс на платформе Coursera. В этой программе при поддержке Мичиганского университета длительность в 3 недели преподаватели расскажут о базовых навыках владения языком, а по окончании всех участников ждет электронный сертификат.

  4. “Создание сайта на HTML” от ItProger

    Данный курс по верстке сайта от itProger.com предлагает базовые знания сразу по четырем направлениям: HTML, CSS, JS и jQuery — с реальным продуктом по итогам обучения — собственным сайтом. Вся программа рассчитана на 11 видеоуроков и 108 практических заданий.

  5. “Верстка сайта” от ItProger

  6. "Курс HTML для начинающих" от PHP.ZONE

  7. "Веб-разработка для начинающих: HTML и CSS" от Stepik

  8. "Знакомство с HTML и CSS" от HTML академии

  9. "Курс HTML / CSS" от Beonmax

  10. "Уроки HTML5" от ItProger

  11. "Основы HTML, CSS и веб-дизайна" от Хекслет

  12. "Курс HTML и CSS - верстка сайтов для начинающих" от School PHP

  13. "Уроки CSS" от ItProger

  14. "Введение в веб-разработку" от Hexlet

  15. "Вводный курс по HTML и CSS для начинающих" от ShowSkill

35 лучших бесплатных курсов HTML/CSS верстки в 2023 Программирование, HTML, CSS, Верстка, Курсы программирования, Основы HTML, IT, Создание сайта, Длиннопост, Текст, Подборка

Курсы с Youtube

  1. Создаем сайт на основе CSS3 + HTML5

    Краткий курс по созданию сайта на HTML5 и CSS3. За 14 видео автор канала Гоша Дударь расскажет все о верстке своего сайта, а также поделится общей информацией о профессии Frontend-разработчика

  2. HTML для начинающих

    Это курс для веб-программистов, поделенный на две части. В первой части объясняет и показывает автор канала loftblog, а во второй инсайтами и важной информацией для HTML-верстальщиков поделится Анастасия Редченкова.

  3. Верстка сайта #7 Создание лендинга для свадебного фотографа

    YouTube-курс "Верстка сайта" от FrontCoder. За 17 видео автор канала объяснит и покажет, как создать свой сайт на HTML и CSS всего за несколько часов на реальном примере — сайте свадебного ведущего.

  4. Верстка сайтов || Лендинги, интернет-магазины, портфолио

    Курс по верстке сайтов на HTML и CSS от LectorWeb. Плейлист содержит 17 коротких YouTube-видео со всем необходимым для начинающих Frontend-разработчиков.

  5. Курс HTML & CSS

    Видеокурс для начинающих HTML- и CSS-верстальщиков от Андрея Андриевского. За несколько часов хронометража автор проходится по основам кодинга с помощью данных языков, а также дает полезные советы желающим попробовать себя в сфере веб-разработки.

  6. HTML для начинающих

    Видеоуроки по HTML-верстке от ВебКадеми для начинающих программистов и учащихся образовательных учреждений. Программа рассчитана на 17 коротких роликов, в рамках которых автор канала Юрий Ключевский расскажет зрителям об основных аспектах веб-разработки.

  7. Бесплатный курс по верстке сайтов (Front End). Уроки HTML CSS JS

  8. HTML 2021 - Свежий курс веб-разработки

  9. ФРОНТЕНД. Введение во Frontend | Технострим от VK Team

  10. Web разработка

  11. Учим HTML за 1 Час! #От Профессионала

  12. БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS // Фрилансер по жизни

  13. Веб-разработчик 10.0

  14. Web разработка

  15. Front-End разработка. Курсы по HTML, CSS, JavaScript

  16. Фронтенд разработка (осень 2017)

  17. Web-разработка

35 лучших бесплатных курсов HTML/CSS верстки в 2023 Программирование, HTML, CSS, Верстка, Курсы программирования, Основы HTML, IT, Создание сайта, Длиннопост, Текст, Подборка

Что можно делать с помощью HTML и CSS?

Применяя HTML и CSS в верстке и веб-программировании, разработчики могут:

  • Применяя HTML и CSS в верстке и веб-программировании, разработчики могут:

  • Менять стиль и дизайн веб-проектов;

  • Отлаживать код

Сколько приносит верстка HTML и CSS в 2023 году?

По данным HH.ru, в феврале 2023 года средняя зарплата верстальщика на HTML и CSS составляет 46 000 рублей. Senior-программисты могут получать до 70 000 рублей, а вот Junior — примерно 35 000.

В то же время, рынок труда предлагает около 1 600 вакансий для позиции верстальщиков HTML и CSS каждый месяц.

Почему HTML?

Выступая практически универсальным решением в программировании, Java представляет собой:

  • Язык с понятной структурой — у Java несложный синтаксис;

  • Широкий выбор фреймворков — есть готовый набор решений для любых проектов;

  • Безопасный кодинг — JVM блокирует попытки навредить коду;

  • Обратно совместимый язык — все коды полностью функционируют вне зависимости от даты написания.

Почему HTML и CSS?

HTML и CSS — наиболее популярные языки во всех формах веб-программирования. Так, они:

  • Экономно расходуют ресурсы сервера сайта — из-за своей структуры код занимает мало места в системе;

  • Упрощают разработку сайтов — один файл стилей можно применить сразу на все страницы;

  • Ускоряют загрузку сайта — браузер кеширует стили, а далее загружает только данные;

  • Совмещают любые устройства — если они имеют доступ к редакторам HTML- и CSS-файлов.

Показать полностью 2
Программирование HTML CSS Верстка Курсы программирования Основы HTML IT Создание сайта Длиннопост Текст Подборка
115
2
OverCode
OverCode
2 года назад

Веб-студия - производственный ад или благо?⁠⁠

Эх.. Первый пост на данной платформе.
Интересно, получится ли написать что-то интересное?!

Сегодня, хотелось бы создать задаток для будущих постов в данной серии.
Она (серия), повествует, о том, как решил создать свою веб-студию, что из этого вышло на данный момент и выйдет в будущем.

Сразу хочу ответить, что сам по себе - разработчик средней руки.
Имею в стеке HTML5, CCS3, JS, Node.js, PHP, React.js, SQL, PostgreSQL и Kotlin.
Занимаюсь программированием около 3.5 лет и на данный момент, заканчиваю учебное заведение по специальности. С предисловием - всё. Переходим к самому интересному (возможно, что не очень).

Опустим процесс обучения азам и сразу перейдём к моменту получения первого заказа.
Интересно, что успел его выцепить ещё в то время, когда еле-еле освоил азы HTML и CSS.
Как-то гулял по просторам интернета и попал на биржу «Weblancer». Не могу сказать, что она сильно популярная, но в отличие от аналогов в RU сегменте, хотя бы даёт пару бесплатных откликов и возможность получить реальный заказ, а не спамит кучей фейков от ботов.
Тогда, моим максимумом были простенькие landing-page и формочки. Отправив пару откликов на немногочисленные запросы, которые хотя бы в теории мог выполнить, получил один положительный ответ и сразу же упало сообщение в личку от заказчика. Им оказался мужчина из Киева, который занимался перепродажей БУ стиральных машинок. Стоимость работы была мизерная (как и большинство подобных на фрилансе) - около 4000 рублей, но тогда, мне казалось, что это какие-то космические деньги.

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

Требовался простенький сайт, который должен был включать в себя написанные копирайтером текста и соответствовать заданной стилистике, которая, к слову, была достаточно лёгкой, так как, представляла из себя что-то похожее на сайты прямиком из середины нулевых.
Ох.. Каким же испытанием для меня стала вёрстка этого простенького на данный момент макета и его адаптирование под мобильные устройства. Ушли примерно 2 дня, слёзы, пот, кровь и нервы, но сайт был сделан и функционирует по сей день.

Заказчик был крайне доволен, оставил положительный отзыв и предложил подработать личным репетитором для его сына. Ставку согласовали в размере 500 руб/час (взрыв мозга для меня в 17 лет). Можно ли сказать, что был хорошим репетитором? Думаю, что да, хоть мои знания на тот момент и ограничивались самым базисом, старался подготавливать интересный материал и повторять все необходимые темы к урокам. Потом, парень ушёл на летние каникулы и к сожалению - больше мы не сотрудничали. В этом году, мужчина написал мне в Discord с просьбой помочь разобраться в части кода и мы быстренько разобрали, что там и как. Собственно, больше не контактировали, но опыт оказался интересным и зародил во мне желание найти подобное в будущем.

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

Затем, последовал период проблем в личной жизни и мне пришлось выпасть из всего этого примерно на год. Осознал, что нахожусь в простое и никуда не двигаюсь. Принял волевое решение сутками налегать на документацию и в ускоренном темпе осваивать различные технологии. Так прошло около нескольких месяцев и на меня вышел подрядчик. Мы успели закрыть несколько крупных заказов и несколько landing-page, вошёл во вкус и начал получать удовольствие от профессии - это уже не было таким адом, каким было в момент изучения материала. Сложно передать боль и страдания во время изучения чего-то сложного, когда месяцами не выходишь из дома, смотришь в экран и пытаешься в чём-то разобраться, но предполагаю, что студенты технических ВУЗов смогут понять.

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

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

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

А вот что же будет дальше, Вы, узнаете из последующих постов, которые, уверяю - будут интересными, объёмными и постараются передать Вам наш опыт.

С Вами был OverCode.
Всех благ и до новых встреч!

Веб-студия - производственный ад или благо? IT, Web-программирование, Веб-разработка, Верстка, Блог, Истории из жизни, Программирование, Интернет, Услуги, Поиск работы, Заказ, Бизнес, Wordpress, CSS, Удаленная работа, Опыт, Фриланс, Программа, Javascript, HTML, Длиннопост
Показать полностью 1
[моё] IT Web-программирование Веб-разработка Верстка Блог Истории из жизни Программирование Интернет Услуги Поиск работы Заказ Бизнес Wordpress CSS Удаленная работа Опыт Фриланс Программа Javascript HTML Длиннопост
12
shaitan.vladimir
shaitan.vladimir
2 года назад
Web-технологии

Композиция тегов HTML⁠⁠

https://youtube.com/shorts/zagqcI3uyck?feature=share

[моё] IT Разработка Интернет HTML Основы HTML Htmlbook Браузер Веб-разработка Frontend Верстка Верстальщик Видео YouTube
6
user4413921
2 года назад
Лига тыжпрограммистов

Помогите удалить лого из файла html⁠⁠

Пикабчане, добрый вечер.


Помогите пожалуйста. Как удалить из файла html лого MindManager?(скриншот)

(без потери навигации и текста)


Сам файл: https://dropmefiles.com/nEmOO

Также при закрашивании лого, пропадает навигация по файлу и зум

Помогите удалить лого из файла html Программирование, HTML, Помощь, Frontend, Верстка, Компьютерная помощь

Пробовал открыть через Visual Studio Code и блокнот -- иероглифы

Открывал через хром или оперу, после удаления кода и сохранения файла -- порушена навигация и половина текста пропадает.

Помогите удалить лого из файла html Программирование, HTML, Помощь, Frontend, Верстка, Компьютерная помощь
Показать полностью 2
[моё] Программирование HTML Помощь Frontend Верстка Компьютерная помощь
36
2
Web.Study
Web.Study
2 года назад

Что лучше использовать:  <button> или <a>?⁠⁠

Что лучше использовать:  <button> или <a>? Верстка, HTML, Семантика, IT, Длиннопост

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

Что из себя представляет каждый тег?

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


Ссылка — это элемент навигации. Это просто текст, при нажатии на который юзер переходит на другую страницу или перемещается по блокам на текущей странице.

Что будет, если поменяем их местами?


Если мы сделаем из ссылки кнопку, то получится нечто, что работает вообще не так как нужно. Почему?


Если мы обернем URL-адрес не в тег <a>, а в тег <button>, то браузер предложит выполнить действия, которые положены для кнопки, а не для ссылки. Такой элемент нельзя будет открыть в отдельной вкладке, поделиться ссылкой и т.д.

Что лучше использовать:  <button> или <a>? Верстка, HTML, Семантика, IT, Длиннопост
Что лучше использовать:  <button> или <a>? Верстка, HTML, Семантика, IT, Длиннопост

При наведении курсора на ссылку её адрес должен появляться внизу окна браузера. URL-адрес, обёрнутый в <button>, не отобразится.

Что лучше использовать:  <button> или <a>? Верстка, HTML, Семантика, IT, Длиннопост

Теперь посмотрим, что будет если вместо кнопки мы сделаем ссылку.


Если функциональный элемент обернуть в тег <a>, то при клике правой кнопкой мыши всплывающее окно будет как у ссылки, но оно не будет иметь смысла. Такая «ссылка» не имеет корректного адреса, а значит конкретное взаимодействие (скопировать, открыть, поделиться и т.д) невозможно.

Что лучше использовать:  <button> или <a>? Верстка, HTML, Семантика, IT, Длиннопост

Что же всё-таки использовать?


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

Что лучше использовать:  <button> или <a>? Верстка, HTML, Семантика, IT, Длиннопост

Заключение


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

Кнопка подразумевает выполнение действия. Ссылка - это только ссылка.

Показать полностью 5
[моё] Верстка HTML Семантика IT Длиннопост
6
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии