СЕМАНТИЧНА ВЕРСТКА САЙТІВ. HTML-теги та практичні приклади семантичної верстки для початківців

СЕМАНТИЧНА ВЕРСТКА САЙТІВ. HTML-теги та практичні приклади семантичної верстки для початківців В цьому відео я розповім про таке явище як семантична верстка сайтів. І не тільки розповім, але й покажу все на практиці. Отже що таке семантика? Взагалі семантика – це наука про значення слів та їхній вплив на сприйняття мовлення іншими людьми. Вона вивчає способи, за допомогою яких люди розуміють і використовують мову. Як симантика працює в розробці сайтів? Напевне, багато хто з вас вважають, що семантична верстка – це банальна присутність в коді певного набору HTML-тегів і все. Так, певні теги дійсно використовуються і ми, в цьому відео, їх вивчимо, але основна суть та складність полягає в тому, що спочатку треба правильно визначити той чи інший елемент в макеті дизайну і вже потім реалізувати його в HTML за допомогою відповідних, якомога більш влучних, тегів. Семантична верстка допомагає покращити доступність та SEO-оптимізацію веб-сайту, оскільки вона дозволяє пошуковим системам легко розуміти зміст сторінки та відображати його в результатах пошуку. Крім того, правильна семантична розмітка дозволяє користувачам з обмеженими можливостями використовувати спеціальні технології, такі як екранні читачі, для доступу до контенту сайту. Тому такі поняття як семантична верстка та доступніть нерозлучні. Хоча сама доступніть є темою окремого відео. Отже головна мета семантичної верстки полягає у створенні зрозумілого та доступного веб-сайту. Матеріали уроку: ✅ Макет - https://drive.google.com/file/d/11mCkxl30U435AwOaz_3drs4piv8fPFzb/view ✅ Теги - https://fls.guru/semantics-tags.html ✅ Приклади коду - https://fls.guru/semantics-code.html Сервіси: ✅ Валідатор вкладенності: https://caninclude.glitch.me/ ✅ HTML-валідатор: https://validator.w3.org/ 🔴 Платний курс по верстці: https://edu.fls.guru ❤️ Стати спонсором каналу: https://www.youtube.com/channel/UCedskVwIKiZJsO8XdJdLKnA/join 🤟 БЕЗКОШТОВНИЙ курс по верстці сайтів (HTML, CSS, JavaScript): https://www.youtube.com/playlist?list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr 🔴 Платний курс по верстці: https://edu.fls.guru 🔴 Карта каналу: https://miro.com/app/board/o9J_lZB3YKI=/ 🔴 Отримати доступ до екстра контенту + підтримати канал: https://www.patreon.com/freelancerlifestyle 🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстці: https://t.me/flschat (https://teleg.run/flschat) 🔴 Facebook: https://www.facebook.com/freelancerlifestyle 🔴 Instagram: https://www.instagram.com/freelancer.lifestyle 00:00 - В уроці 00:24 - Що таке семантика? 00:39 - Що таке семантична верстка? 02:12 - Семантичні HTML-теги 03:06 - Теги H1-H6. Семантичні HTML-теги для контенту 04:19 - Тег P. Семантичні HTML-теги для контенту 05:14 - Тег A. Семантичні HTML-теги для контенту 05:50 - Теги UL LI, OL LI. Семантичні HTML-теги для контенту 06:21 - Теги DL, DT, DD. Семантичні HTML-теги для контенту 07:00 - Теги IMG, VIDEO, AUDIO. Семантичні HTML-теги для контенту 07:20 - Теги FIGURE, FIGCAPTION. Семантичні HTML-теги для контенту 08:13 - Теги TABLE, TR, TH, TD. Семантичні HTML-теги для контенту 08:48 - Теги Q, BLOCKQUOTE, CITE. Семантичні HTML-теги для контенту 09:35 - Тег ADDRESS. Сема нтичні HTML-теги для контенту 10:24 - Тег TIME. Семантичні HTML-теги для контенту 10:52 - Теги DETAILS, SUMMARY. Семантичні HTML-теги для контенту 11:59 - Теги MARK, SPAN. Семантичні HTML-теги для контенту 13:32 - Теги STRONG, B. Семантичні HTML-теги для контенту 14:31 - Теги EM, I. Семантичні HTML-теги для контенту 15:29 - Тег FORM. Семантичні HTML-теги форм 16:12 - Теги INPUT, TEXTAREA, SELECT, OPTION. Семантичні HTML-теги форм 17:12 - Тег LABEL. Семантичні HTML-теги форм 18:00 - Теги FIELDSET, LEGEND. Семантичні HTML-теги форм 18:46 - Тег BUTTON. Семантичні HTML-теги форм 20:32 - Тег HEADER. Семантичні HTML-теги конструкцій 22:03 - Тег FOOTER. Семантичні HTML-теги конструкцій 22:35 - Тег MAIN. Семантичні HTML-теги конструкцій 23:06 - Тег ASIDE. Семантичні HTML-теги конструкцій 23:29 - Тег NAV. Семантичні HTML-теги конструкцій 24:23 - Тег SECTION. Семантичні HTML-теги конструкцій 25:08 - Тег ARTICLE. Семантичні HTML-теги конструкцій 26:02 - Тег DIV. Семантичні HTML-теги конструкцій 26:37 - Вкладеність тегів, валідація 28:54 - Практичні приклади семантичної верстки 31:56 - Аналіз макету та побудова семантичних конструкцій 40:42 - Заключення 👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - https://www.youtube.com/channel/UCJNVBfLijFSa_tBcrNZKZag 👉 @codeonly канал з практикою HTML CSS JS 👋 Мене звати Женя Андріканич, я IT - спеціаліст. Більше 10ти років займаюсь розробкою сайтів. Перейняти досвід: https://www.youtube.com/c/freelancerlifestyle #навчання #верстка #фрілансерпожиттю 🤟 Живи, а працюй у вільний час! ©