SEMANTIC HTML LAYOUT. HTML tags and practical examples of semantic layout for beginners
Vložit
- čas přidán 16. 06. 2024
- 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
❤ Вподобайка та комент допомагають розвивати навчальний контент!
🔴 Платний курс по верстці: 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
Змістовний урок, зрозуміле пояснення. Все, як завжди, на найвищому рівні!
Все чітко та структуровано як завжди. Дякую за такий детальний розбір семантики ☺
не можу повірити що це безкоштовний контент. Дякую!
Будь ласка!
Дякую, Євгене. З версткою працюю вже давно, але з приводу правильного використання тегів часом виникали сумніви :)
Дуже чекав відео про семантику. Дякую!
Як же він вкладається у кожне відео! Заряджає та мотивує на вивчення! Дякую❤
Дякую Євгене за титанічну працю, все розписано і розкладено по поличках!
Жека, Красава!!! Як завжди все чітко, зрозуміло та по суті. Ще й з матеріалами в описі. Була б змога поставив кучу лайків. Так тримати!!!
Лайк, коментар, просування. Дякую за якісний, освітний проєкт.
Дуже дякую за твій корисний і інформативний контент. У тебе на каналі найкраще викладена інформація по верстанню сайтів для початківців.
Прекрасне відео, на дуже важливу тему у верстці, дякую тобі
Супер! Гарна підготовка та матеріали. Дуже актуальна тематика.
Як завжди - відео вогняне🔥 🔥 Лайк, підписка, коментар! Шлю позитивно заряждені частинки із побажанням успіху у житті! Хто ділиться зі світом, той завжди отримує навзаєм!
Дякую!
Столько работы для нас , спасибо большое 🙏🙏🙏🙏🙏🙏🙏🙏 Процветания Вам
Женя, твої відоси, просто як знахідка, як кишеньковий довідник, про все, чудовий відос! Велика Дяка за старання! Так тримати 💪✊
Дякую!
Дуже круто, Женю. Не передати словами на скільки безцінний Ваш контент. Вдячний вам за неймовірні старання і за якісні знання!
Будь ласка!
Жека лучший! Не устану этого говорить!
Спасибо тебе за труды
Дуже потрібний контент 🎉
Євгене, дякую тобі за таке чудове відео👍 працюєш навіть не дивлячись на свята))
О так, давно чекав цю тему😊
З кожним твоїм новим випуском, я суттєво покращую свої знання. І з кожним моїм новим проектом, я намагаюсь звикнути до правильної побудови, чи використання тих чи інших властивостей. І коли в мене все вдається, - то радію як дитина. Адже наскільки стає все легко і зрозуміло, коли ти маєш знання. Дякую тобі, друже, за твою титанічну працю! Я навіть завантажив собі всі твої відео. І тепер то для мене як посібники)
Просто не слов! Жека - самый лучший ! Стиль подачи материала просто божественный! Спасибо за годный контент, Фрилансер по жизни !!!!!!!!!!!!
Жека, як завжди чудове, змістовне відео! Так тримати! Ти найкращий вчитель і твій курс з верстки - це щось неймовірне!
Як завжди, відео на висоті! Дякую.
дякую за урок) як завжди, якісна подача матеріалу)
Будь ласка)
шикарний відос!і семантка ,і пояснення великої кількості тегів,і практика!велика повага та велика вдячність!
Ура, нове відео)))) Зачекалися. А також,в семантичні верстці крім лайка і підпіски, ще потрібно обов'язково використовувати, написання коменту)).
дякую за чудовий український контент.
Дякую. Круто цікаво, важливо. Вподобайка!
Круто! Як завжди дуже інформативно і цікаво! Так тримати!
Просто лучший, часто выгораю и забрасываю верстку, но твои видео заставляют идти дальше и не сдаваться.
Це так круто !)
Величезне дякую, в цій тему купа питань
Дякую за матеріал. Гарна подача інформації. Цікаві онлайн сервіси - треба спробувати.
Дякую за корисне відео.
Дякую за інформативне відео!
Дякую за корисне відео. Тепер верстка буде ще якісніша. Вподобайку влупити не забув!
Дякую!
Змістовний урок, зрозуміле пояснення.
Супер! Дякую!
Спасибо, давно ждали видео по семантике)
Женя дякую за такий корисний контент🙂👍
Дуже дякую за відео)
Спасибо!!! Я наконец-то разобралась с article, aside и section, их вложенностью и как это все применяется на практике. Благодарю за уроки!!
Дякую, дуже актуальне та потрібне відео!
Дуже приємно українською слухати 💛💙 дякую за гарний контент!
Євгене, щиро дякую за перехід на українську! Це крок та позиція, зважаючи на певне зменшення аудиторії тощо. Тисну руку!
Головне якість)
Стосовно якості навіть сумнівів ніколи не було - один з найкращих каналів в мережі по тематиці.
Дякую за відео! 😅🎉🎉🎉як завжди доступно і змістовно!
Женя, дякую 🙏🏻 з кожним твоїм відео все більше закохуюсь у верстку 😊
Радий що корисно!
Гарний контент.
Твій канал - це діамант для охочих вчити верстку. 2 роки тому починав вкатуватися у frontend з твоїм каналом. Зараз маю досвід написання складних React-додатків, роботи з WordPress але верстку досі підтягую завдяки тобі. Постійно відкриваю щось нове і дивуюся, як багато всього лише в одній верстці!
Максимально корисна інформація. Пригадав собі тег address. Піду підпиляю сайт) Дякую. Все дуже чітко. Видно що автор цінує час глядачів.
Як же мені цього відосу не вистачало на початку свого шляху, дякую за титанічну роботу
Як завжди круто і без води. Дякую, Жека!
Можу запропонувати для миттєвої валідаціі ще розширення для браузерів Validity - користуюсь постійно. Маленький та зручний, працює як на сервері, так і на локалці.
Дяка!
Підписуюсь залюбки!!!
Дякую за україномовний💛💙 корисний контент👍
Дуже дякую , цікаво і корисно.
🎉круто, дякую
Однозначно лайк👍😊
Привiт! Даже просто слушать тебя удовольствие. Дякую
Дуже вдячна за круте відео і зрозумілу подачу) мені це відео дуже допомогло 😊🤗
Дякую. друже!! 3рік з тобою) Змінив професію бармена на верстальника) Насолоджуюсь роботою! І все це завдяки тобі! Величезне спасибі!!!!
Запоминаем, а потом на div-ах верстаем))
Крутой контент, Женя!
Тоооооп! Простіше пояснень на жодних курсах не зустрінеш!
Дякую!!
Дякую за крутий та корисний контент 😊
Дякую, Євгене! Дуже корисно! Тепер розумієш семантику, яку Ви показуєте в прикладах верстки. А в голові одразу думки, може треба якісь свої сторінки переробити на section...
Дякую за контент! Вподобайка! По семантиці гарні приклади. Було гарно мати більш прикладів розбору дизайну сайту по семантиних блоках. Думаю в інших відео таке Є. Дуже корисно! :)
Круто, що на рідній мові. Останній раз дивився твої відоси, роки два назад, коли, ще від програмування не тошнило. І сьогодні згадав круто змонтований відос про канал 'Фрілансер по життю' і знайшов, щоб глянути ще раз
Велике дякую, багато нового
Хороший обзор. Спасибо.
Лайк неглядя. Т.к. тема очень нужная и по важности не уступает самой верстке.
Чуть посмотрел. Все пока норм, но на счет H1 уже можно использовать больше одного. И уже довольно давно.
Ну, я так не роблю
Можеш пояснити з цього приводу? Бо різняться думки. Десь натикався на відео з реддіта, наче сео гугл пояснює що можна використовувати декілька
@@valeron93 можна, і це вже не є помилкою. Головне щоб стилі відрізнялись від інших h.
Дякую , друже
дякую за відео!
Дякую що перейшов на Українську!
Так приємно тебе слухати ♥️
Дякую за чудовий урок!
а до этого на русском было прямо невыносимо слушать?)
@@Sung_Jin-VVoo мне тоже довольно комфортно на украинском смотреть его видео, но такие комментарии выбешивают
Ви праві 😉 Почала слухати його лише після того, як він перейшов на українську мову.
@@nataliya200 а до этого чем он вас не устраивал? Отсутствием национализма?
@@bozzhik так, особливо після 22.02.2022
просто респектище тобі за перехід на укр мову) , розумію, багато переглядів втратив.
За Шевченка прибрав лайк і знову поставив)
ще не переглядав відео, але вже лайк та комент за твою українську
бляха, це неймовірно потужний контент💪🔥
Дякую!
Вражений... нарешті зрозумілою мовою. Дякую
Скучал за этим позитивом на видиках)
Жеский кач мозга, дякую дякую велике
Женя, твои верные подписчики ждали это видео 3 года😊😊
Дякую!
дякую за відео
Очень хороший урок ))+
То чувство, когда понемногу въезжаешь в украинский через английские субтитры, крайне годно
дякую за корисну інформацію
Євгене - ти ТОП!
Чекаю React)
Доброго дня Євгене, раніше ви говорили, що хочете зробити курс по react і cms системам, хотілося б дізнатися в який час ви плануєте їх зробити і що буде першим, просто щоб дізнатися вивчати з інших джерел або чекати кращого вчителя у світі, вас? Дякую за урок!
Писав з гугл перекладача, бо знаю українську гірше ніж російську, якщо є помилки то вибачаюсь)
Найкращий!
чудова робота
Хай квітне Український ютюб ! Особливо коли це професійний канал !
Очень Очень Очень Очень и Очень нужная и полезная информация!!Чуть ли не гимн HTML!!!Огромное спасибо!!!
😍😍😍
Я так внимательно смотрел, как будто фильм интригующий посмотрел😊. Подача супер. А в первой секции я бы тег p использовал, так как там может добавиться текст и это уже будет параграфами
Уровень желания понимать ролики Жени невероятен, уже неплохо понимаю мову)) 🔥 Дякую!
Українською💖, хоч давно вже знаю цю тему, переглядаємооо🥵🥵🥵🥵
*Коментар на підтримку каналу*
дякую
Ооооо, топ!
Привіт.
Зроби відео по своїм топ міксінам )
я б малий обсяг тексту обгорнув в - стилізувати менше(не треба обмежувати ширину і прибирати нихній і верхній відступи).
Чудовий канал