СЕМАНТИЧНА ВЕРСТКА САЙТІВ. 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:00:24 – Що таке семантика?
00:00:39 – Що таке семантична верстка?
00:02:12 – Семантичні HTML-теги
00:03:06 – Теги H1-H6. Семантичні HTML-теги для контенту
00:04:19 – Тег P. Семантичні HTML-теги для контенту
00:05:14 – Тег A. Семантичні HTML-теги для контенту
00:05:50 – Теги UL LI, OL LI. Семантичні HTML-теги для контенту
00:06:21 – Теги DL, DT, DD. Семантичні HTML-теги для контенту
00:07:00 – Теги IMG, VIDEO, AUDIO. Семантичні HTML-теги для контенту
00:07:20 – Теги FIGURE, FIGCAPTION. Семантичні HTML-теги для контенту
00:08:13 – Теги TABLE, TR, TH, TD. Семантичні HTML-теги для контенту
00:08:48 – Теги Q, BLOCKQUOTE, CITE. Семантичні HTML-теги для контенту
00:09:35 – Тег ADDRESS. Сема нтичні HTML-теги для контенту
00:10:24 – Тег TIME. Семантичні HTML-теги для контенту
00:10:52 – Теги DETAILS, SUMMARY. Семантичні HTML-теги для контенту
00:11:59 – Теги MARK, SPAN. Семантичні HTML-теги для контенту
00:13:32 – Теги STRONG, B. Семантичні HTML-теги для контенту
00:14:31 – Теги EM, I. Семантичні HTML-теги для контенту
00:15:29 – Тег FORM. Семантичні HTML-теги форм
00:16:12 – Теги INPUT, TEXTAREA, SELECT, OPTION. Семантичні HTML-теги форм
00:17:12 – Тег LABEL. Семантичні HTML-теги форм
00:18:00 – Теги FIELDSET, LEGEND. Семантичні HTML-теги форм
00:18:46 – Тег BUTTON. Семантичні HTML-теги форм
00:20:32 – Тег HEADER. Семантичні HTML-теги конструкцій
00:22:03 – Тег FOOTER. Семантичні HTML-теги конструкцій
00:22:35 – Тег MAIN. Семантичні HTML-теги конструкцій
00:23:06 – Тег ASIDE. Семантичні HTML-теги конструкцій
00:23:29 – Тег NAV. Семантичні HTML-теги конструкцій
00:24:23 – Тег SECTION. Семантичні HTML-теги конструкцій
00:25:08 – Тег ARTICLE. Семантичні HTML-теги конструкцій
00:26:02 – Тег DIV. Семантичні HTML-теги конструкцій
00:26:37 – Вкладеність тегів, валідація
00:28:54 – Практичні приклади семантичної верстки
00:31:56 – Аналіз макету та побудова семантичних конструкцій
00:40:42 – Заключення

👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв’ю з цікавими IT-спеціалістами – https://www.youtube.com/channel/UCJNVBfLijFSa_tBcrNZKZag
👉 @codeonly канал з практикою HTML CSS JS

👋 Мене звати Женя Андріканич, я IT – спеціаліст. Більше 10ти років займаюсь розробкою сайтів.
Перейняти досвід: https://www.youtube.com/c/freelancerlifestyle

#навчання #верстка #фрілансерпожиттю

🤟 Живи, а працюй у вільний час! ©