SEMANTIC HTML LAYOUT. HTML tags and practical examples of semantic layout for beginners

SEMANTIC LAYOUT OF SITES. HTML tags and practical examples of semantic layout for beginners
In this video, I will talk about such a phenomenon as the semantic layout of sites. And I will not only tell, but also show everything in practice.
So what is semantics? In general, semantics is the science of the meaning of words and their influence on the perception of speech by other people. It studies the ways in which people understand and use language.
How does semantics work in website development? Probably, many of you believe that semantic layout is a banal presence in the code of a certain set of HTML tags and that's it. Yes, certain tags are indeed used and we, in this video, will study them, but the main point and difficulty is that first you need to correctly define this or that element in the design layout and only then implement it in HTML using the appropriate, as much as possible apt, tags.
Semantic layout helps improve the accessibility and SEO optimization of a website because it allows search engines to easily understand the content of a page and display it in search results. In addition, correct semantic markup allows users with disabilities to use special technologies, such as screen readers, to access site content. Therefore, such concepts as semantic layout and accessibility are inseparable. Although accessibility itself is the topic of a separate video.
Therefore, the main goal of semantic layout is to create an understandable and accessible website.
Lesson materials:
✅ Layout - drive.google.com/file/d/11mCk...
✅ Tags - fls.guru/semantics-tags.html
✅ Code examples - fls.guru/semantics-code.html
Services:
✅ Inclusion validator: caninclude.glitch.me/
✅ HTML validator: validator.w3.org/
00:00 - In class
00:24 - What is semantics?
00:39 - What is semantic layout?
02:12 - Semantic HTML tags
03:06 - Tags H1-H6. Semantic HTML tags for content
04:19 - Tag P. Semantic HTML tags for content
05:14 - Tag A. Semantic HTML tags for content
05:50 - Tags UL LI, OL LI. Semantic HTML tags for content
06:21 - Tags DL, DT, DD. Semantic HTML tags for content
07:00 - Tags IMG, VIDEO, AUDIO. Semantic HTML tags for content
07:20 - Tags FIGURE, FIGCAPTION. Semantic HTML tags for content
08:13 - Tags TABLE, TR, TH, TD. Semantic HTML tags for content
08:48 - Tags Q, BLOCKQUOTE, CITE. Semantic HTML tags for content
09:35 - ADDRESS tag. Semantic HTML tags for content
10:24 - TIME tag. Semantic HTML tags for content
10:52 - Tags DETAILS, SUMMARY. Semantic HTML tags for content
11:59 - Tags MARK, SPAN. Semantic HTML tags for content
13:32 - Tags STRONG, B. Semantic HTML tags for content
14:31 - EM tags, I. Semantic HTML tags for content
15:29 - Tag FORM. Semantic HTML tags of forms
16:12 - Tags INPUT, TEXTAREA, SELECT, OPTION. Semantic HTML tags of forms
17:12 - LABEL tag. Semantic HTML tags of forms
18:00 - Tags FIELDSET, LEGEND. Semantic HTML tags of forms
18:46 - The BUTTON tag. Semantic HTML tags of forms
20:32 - HEADER tag. Semantic HTML tags of constructions
22:03 - Tag FOOTER. Semantic HTML tags of constructions
22:35 - Tag MAIN. Semantic HTML tags of constructions
23:06 - Tag ASIDE. Semantic HTML tags of constructions
23:29 - Tag NAV. Semantic HTML tags of constructions
24:23 - SECTION tag. Semantic HTML tags of constructions
25:08 - ARTICLE tag. Semantic HTML tags of constructions
26:02 - Tag DIV. Semantic HTML tags of constructions
26:37 - Nesting of tags, validation
28:54 - Practical examples of semantic layout
31:56 - Layout analysis and construction of semantic structures
40:42 - Conclusion

[@FreelancerLifeStyle]

❤ Вподобайка та комент допомагають розвивати навчальний контент! 🔴 Платний курс по верстці: edu.fls.guru 🔴 Карта каналу: miro.com/app/board/o9J_lZB3YKI=/ 🔴 Отримати доступ до екстра контенту + підтримати канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстці: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@OlegOberemok]

Змістовний урок, зрозуміле пояснення. Все, як завжди, на найвищому рівні!

[@vampir4ik100]

Все чітко та структуровано як завжди. Дякую за такий детальний розбір семантики ☺

[@txt0xtx]

Дуже чекав відео про семантику. Дякую!

[@drive_to_achieve]

Просто не слов! Жека - самый лучший ! Стиль подачи материала просто божественный! Спасибо за годный контент, Фрилансер по жизни !!!!!!!!!!!!

[@MrSstar12345]

Дякую Євгене за титанічну працю, все розписано і розкладено по поличках!

[@alex-troshin]

Жека лучший! Не устану этого говорить! Спасибо тебе за труды

[@yehorvla]

Лайк, коментар, просування. Дякую за якісний, освітний проєкт.

[@tunyk]

Супер! Гарна підготовка та матеріали. Дуже актуальна тематика.

[@user-zu5gk8ng2p]

Прекрасне відео, на дуже важливу тему у верстці, дякую тобі

[@valeron93]

Як же він вкладається у кожне відео! Заряджає та мотивує на вивчення! Дякую❤

[@vladyslav8362]

Дякую, Євгене. З версткою працюю вже давно, але з приводу правильного використання тегів часом виникали сумніви :)

[@leonid_stasiuk]

Дуже дякую за твій корисний і інформативний контент. У тебе на каналі найкраще викладена інформація по верстанню сайтів для початківців.

[@oksanakukhotska7190]

Дуже потрібний контент 🎉

[@alexandrs.1706]

Як завжди, відео на висоті! Дякую.

[@paxideno]

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

[@BVZhylenko]

Жека, Красава!!! Як завжди все чітко, зрозуміло та по суті. Ще й з матеріалами в описі. Була б змога поставив кучу лайків. Так тримати!!!

[@ruslan_lwow79]

Дякую. Круто цікаво, важливо. Вподобайка!

[@ZPUA24]

Спасибо, давно ждали видео по семантике)

[@artemmarchenko1]

О так, давно чекав цю тему😊

[@bondvitaliy]

Як завжди - відео вогняне🔥 🔥 Лайк, підписка, коментар! Шлю позитивно заряждені частинки із побажанням успіху у житті! Хто ділиться зі світом, той завжди отримує навзаєм!

[@FreelancerLifeStyle]

Дякую!

[@user-hp3up5dp7v]

Спасибо!!! Я наконец-то разобралась с article, aside и section, их вложенностью и как это все применяется на практике. Благодарю за уроки!!

[@user-bx1nc6lw5u]

Дякую за інформативне відео!

[@quercus4181]

Змістовний урок, зрозуміле пояснення.

[@alonahilbert9959]

Євгене, дякую тобі за таке чудове відео👍 працюєш навіть не дивлячись на свята))

[@user-mh3dl2vw9m]

Женя, твої відоси, просто як знахідка, як кишеньковий довідник, про все, чудовий відос! Велика Дяка за старання! Так тримати 💪✊

[@FreelancerLifeStyle]

Дякую!

[@vlad_vostochnyi]

шикарний відос!і семантка ,і пояснення великої кількості тегів,і практика!велика повага та велика вдячність!

[@ukrDED]

З кожним твоїм новим випуском, я суттєво покращую свої знання. І з кожним моїм новим проектом, я намагаюсь звикнути до правильної побудови, чи використання тих чи інших властивостей. І коли в мене все вдається, - то радію як дитина. Адже наскільки стає все легко і зрозуміло, коли ти маєш знання. Дякую тобі, друже, за твою титанічну працю! Я навіть завантажив собі всі твої відео. І тепер то для мене як посібники)

[@user-hv7jb3bx3c]

Хороший обзор. Спасибо.

[@kirby9906]

Дякую за корисне відео.

[@liudmylastarovoit839]

дякую за урок) як завжди, якісна подача матеріалу)

[@FreelancerLifeStyle]

Будь ласка)

[@kompotius]

Це так круто !) Величезне дякую, в цій тему купа питань

[@user-py4ky8iv8f]

Женя дякую за такий корисний контент🙂👍

[@valeriynv9454]

Гарний контент.

[@vladsavchuk7271]

Круто! Як завжди дуже інформативно і цікаво! Так тримати!

[@user-es2vr3cv1v]

🎉круто, дякую

[@taraspylypiv8771]

Ура, нове відео)))) Зачекалися. А також,в семантичні верстці крім лайка і підпіски, ще потрібно обов'язково використовувати, написання коменту)). дякую за чудовий український контент.

[@kuz9476]

Однозначно лайк👍😊

[@feederok5957]

Дякую за відео! 😅🎉🎉🎉як завжди доступно і змістовно!

[@user-sp9gh1sj7c]

Столько работы для нас , спасибо большое 🙏🙏🙏🙏🙏🙏🙏🙏 Процветания Вам

[@const6185]

Привiт! Даже просто слушать тебя удовольствие. Дякую

[@malosource]

Очень хороший урок ))+

[@stylist_katrin]

Женя, дякую 🙏🏻 з кожним твоїм відео все більше закохуюсь у верстку 😊

[@FreelancerLifeStyle]

Радий що корисно!

[@soloveistanislav3536]

Дякую, дуже актуальне та потрібне відео!

[@user-mn2ty2wu4w]

Дуже дякую , цікаво і корисно.

[@bogdanheikkinen3431]

Як же мені цього відосу не вистачало на початку свого шляху, дякую за титанічну роботу

[@skemap]

не можу повірити що це безкоштовний контент. Дякую!

[@FreelancerLifeStyle]

Будь ласка!

[@donttagmeyouworstsubhuman]

Дуже круто, Женю. Не передати словами на скільки безцінний Ваш контент. Вдячний вам за неймовірні старання і за якісні знання!

[@FreelancerLifeStyle]

Будь ласка!

[@yuriikoval2453]

Дякую за крутий та корисний контент 😊

[@MaksMokriev]

Дякую за матеріал. Гарна подача інформації. Цікаві онлайн сервіси - треба спробувати.

[@arseny_afanasyev]

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

[@user-gk1bs9fr4m]

Привіт! Хедер це тільки верхня полоска з меню? Як тоді бути з фоном? Чи робити хедер абсолют і тоді фон задавати першій секції main?

[@FreelancerLifeStyle]

хедер абсолют і тоді фон задавати першій секції main

[@timbapumba3132]

Скучал за этим позитивом на видиках)

[@davedavidovich9833]

За Шевченка прибрав лайк і знову поставив)

[@innaklymovych3554]

Дякую , друже

[@zetwerk283]

Супер! Дякую!

[@grolland-cr]

Доброго дня Євгене, раніше ви говорили, що хочете зробити курс по react і cms системам, хотілося б дізнатися в який час ви плануєте їх зробити і що буде першим, просто щоб дізнатися вивчати з інших джерел або чекати кращого вчителя у світі, вас? Дякую за урок!

[@grolland-cr]

Писав з гугл перекладача, бо знаю українську гірше ніж російську, якщо є помилки то вибачаюсь)

[@maximka2246]

Дякую за корисне відео. Тепер верстка буде ще якісніша. Вподобайку влупити не забув!

[@FreelancerLifeStyle]

Дякую!

[@volodymyrmatselyukh8808]

Максимально корисна інформація. Пригадав собі тег address. Піду підпиляю сайт) Дякую. Все дуже чітко. Видно що автор цінує час глядачів.

[@verstal]

Лайк неглядя. Т.к. тема очень нужная и по важности не уступает самой верстке. Чуть посмотрел. Все пока норм, но на счет H1 уже можно использовать больше одного. И уже довольно давно.

[@FreelancerLifeStyle]

Ну, я так не роблю

[@valeron93]

Можеш пояснити з цього приводу? Бо різняться думки. Десь натикався на відео з реддіта, наче сео гугл пояснює що можна використовувати декілька

[@verstal]

@@valeron93 можна, і це вже не є помилкою. Головне щоб стилі відрізнялись від інших h.

[@user-lg4ff2od5t]

Велике дякую, багато нового

[@iskello4942]

В мене питання по js-скрипту. Роблю сайт на кілька сторінок. На одній буде конкретний скрипт, відсутній на інших сторінках. Тому на них будуть вспливати помилки, що неможливо отримати змінну, на яку я посилаюсь (тому що ці змінні створені тільки на одній сторінці). Ця помилка може заблокувати весь подальший скріпт. Як такого уникнути?

[@user-qc5cq9kb2y]

Запоминаем, а потом на div-ах верстаем)) Крутой контент, Женя!

[@user-zu1hr3nb9e]

Твій канал - це діамант для охочих вчити верстку. 2 роки тому починав вкатуватися у frontend з твоїм каналом. Зараз маю досвід написання складних React-додатків, роботи з WordPress але верстку досі підтягую завдяки тобі. Постійно відкриваю щось нове і дивуюся, як багато всього лише в одній верстці!

[@petersen1554]

Привіт Женя. Чи є в тебе гайд про CSS-властивість "container" та "@container "? Ящо такий є, дай, будь ласка, посилання на відео.

[@maximiloi]

Женя, а кнопку button (відкриття меню) в тег nav, після або до ul, це не семантично?

[@FreelancerLifeStyle]

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

[@FreelancerLifeStyle]

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

[@Ukr_sunflower]

Чекаю React)

[@deniskotov]

Женя, твои верные подписчики ждали это видео 3 года😊😊

[@FreelancerLifeStyle]

Дякую!

[@user-cw1rz3dg8y]

дякую за відео!

[@Alex_Mokryi]

Ооооо, топ!

[@Nadia_Hub4uk]

Дуже вдячна за круте відео і зрозумілу подачу) мені це відео дуже допомогло 😊🤗

[@plimuthusa6445]

Євгене, щиро дякую за перехід на українську! Це крок та позиція, зважаючи на певне зменшення аудиторії тощо. Тисну руку!

[@FreelancerLifeStyle]

Головне якість)

[@plimuthusa6445]

Стосовно якості навіть сумнівів ніколи не було - один з найкращих каналів в мережі по тематиці.

[@pushkareff]

Як завжди круто і без води. Дякую, Жека! Можу запропонувати для миттєвої валідаціі ще розширення для браузерів Validity - користуюсь постійно. Маленький та зручний, працює як на сервері, так і на локалці.

[@FreelancerLifeStyle]

Дяка!

[@user-oq5sg4tz1j]

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

[@FreelancerLifeStyle]

Ні

[@user-qx2wj1zb3z]

Дуже дякую за відео)

[@sweet_donut_]

😍😍😍

[@user-gi3ri2rs4f]

Підписуюсь залюбки!!! Дякую за україномовний💛💙 корисний контент👍

[@toptywka]

Дуже приємно українською слухати 💛💙 дякую за гарний контент!

[@user-om4zo6lb6d]

Доброго дня. Питання, як в такому випадку як на відео в макеті (header та section у тега main) задати спільну картинку ?

[@FreelancerLifeStyle]

Хедер не має фону, тільки перша секція в мейн

[@user-om4zo6lb6d]

@@FreelancerLifeStyleтоді у header буде фіксоване позиціювання ?

[@FreelancerLifeStyle]

@@user-om4zo6lb6d так, звичайно

[@user-om4zo6lb6d]

@@FreelancerLifeStyleдякую 🎉😊

[@xeira2990]

Привіт! Хотів поставити таке питання, чи є сенс зараз вивчати популярні фреймворки на кшталт React, Vue, bootstrap та інше? Я зовсім недавно почав самонавчання і доки що не до кінця розумію навіщо вони якщо є flex і grid. А JS навiть не починав.

[@MrSstar12345]

саме треба почати з JS, а потім вчити React, Vue, Angular, ,бо то є фреймворки JS, а bootstap то фреймворки CSS

[@xeira2990]

@@MrSstar12345 Зрозумів, дякую

[@rostyslavkinash5232]

дякую за відео

[@dimondimonov6417]

Я так внимательно смотрел, как будто фильм интригующий посмотрел😊. Подача супер. А в первой секции я бы тег p использовал, так как там может добавиться текст и это уже будет параграфами

[@yogaselection]

Я досмотрел)

[@myvideoediting902]

Євгене - ти ТОП!

[@user-oy8sf7yk3g]

Mega dude ❤❤❤

[@fedorfedfreddietheodoref4070]

Дддддяяяяккккууууююююю 😊

[@ando7472]

Жеский кач мозга, дякую дякую велике

[@Andrey_Mendel]

Дякую, Євгене! Дуже корисно! Тепер розумієш семантику, яку Ви показуєте в прикладах верстки. А в голові одразу думки, може треба якісь свої сторінки переробити на section...

[@user-pz5fr2nv7b]

Перепрошую. Якщо "header" і "main" йдуть окремо, то як "background (main)" потрапляє також і на "header"? Хіба вони не мають бути в одному блоці? Момен відео 34:08

[@obstb]

цікаве питання, яке автор не пояснив!

[@user-pz5fr2nv7b]

@@obstb я знайшов відповідь у іншому відео. Там за рахунок позиціювання картинка розміщується на сусідній блок.

[@obstb]

@@user-pz5fr2nv7b ага, нижче в іншому такому самому коментарі - автор так само пояснив

[@obstb]

@@user-pz5fr2nv7b я думаю хедер має розміститись на іншому блоці за рахунок абсолюьного позиціювання, а не картинка

[@user-pz5fr2nv7b]

@@obstb, саме так

[@reddevilhere]

Тоооооп! Простіше пояснень на жодних курсах не зустрінеш! Дякую!!

[@whoisleshalight8514]

Дякую. друже!! 3рік з тобою) Змінив професію бармена на верстальника) Насолоджуюсь роботою! І все це завдяки тобі! Величезне спасибі!!!!

[@davedavidovich9833]

клас

[@bohdanlutsak6824]

бляха, це неймовірно потужний контент💪🔥

[@FreelancerLifeStyle]

Дякую!

[@user-if2fo6yr6w]

Найкращий!

[@doublegold4061]

Відео гарне, але у мене є питання. Чи повинен логотип входити в тег nav? Це ж теж елемент навігації як і пункти меню

[@FreelancerLifeStyle]

Гадаю що ні

[@MrSstar12345]

зазвичай логотип це посилання на головну сторінку, але він не вкладається в nav

[@obstb]

@@FreelancerLifeStyle а ось інший відомий блогер - От 0 до 1, гадає що так (має входити в тег nav).

[@kd-fishing]

Круто, що на рідній мові. Останній раз дивився твої відоси, роки два назад, коли, ще від програмування не тошнило. І сьогодні згадав круто змонтований відос про канал 'Фрілансер по життю' і знайшов, щоб глянути ще раз

[@aidragnil8244]

Спасибо большое за видео ❤ Не понимаю ни украинский ни английский Но как то выкручиваюсь😂

[@user-lu8le4mt3i]

Перейди на другой канал😐

[@yashulja]

лайк та коментар

[@sweet_donut_]

Дякую що перейшов на Українську! Так приємно тебе слухати ♥️ Дякую за чудовий урок!

[@bozzhik]

а до этого на русском было прямо невыносимо слушать?)

[@bozzhik]

@@Sung_Jin-VVoo мне тоже довольно комфортно на украинском смотреть его видео, но такие комментарии выбешивают

[@nataliya200]

Ви праві 😉 Почала слухати його лише після того, як він перейшов на українську мову.

[@bozzhik]

@@nataliya200 а до этого чем он вас не устраивал? Отсутствием национализма?

[@MrSstar12345]

@@bozzhik так, особливо після 22.02.2022

[@andriikytsak170]

ще не переглядав відео, але вже лайк та комент за твою українську