друзья Всех приветствую Надеюсь вы легко справились с предыдущими уровнями и готовы ответить на вопросы которые я отнес уже к продвинутому уровню потому что на начальных этапах понимания тех вопросов которые мы разберем В данном видео вряд ли имеет какой-то смысл без практики Но для кого-то из вас данный вопрос могут показаться простыми или вовсе банальными Ну значит вы огромные Молодцы верстаете валидно то есть правильно но не все мы с первого раза понимаем Как расстать правильно и также я не зря упомянул валидность верстки В данном видео будет много вопросов направленные именно инвалидность верстки так как одно дело просто сверстать сайты получить результат макете а другое дело сочетать его валидно чтобы не возникало никаких Сюрпризов в дальнейшем В каком бы браузере или операционной системе не открыли вашу работу Согласитесь что лучше изначально понимать только правильно использовать те или иные теги чем потом проверяете вёрстку через различные сервисы или что еще хуже на продакшене и потом тратить время на исправление косяков валидность верстки мы будем проверять с помощью апплидатора wrec куда будем вставлять разметку из примеров думаю достаточно лирики давайте уже перейдем к вопросам которые я вам подготовил является ли данная разметка правильной Если вы смотрели предыдущие видео из данной серии то как бы наверняка должны с легкостью были ответить на данный вопрос потому что в одном из ответов я упоминал уже что название айдишников не должны повторяться на одной и той же странице так как это будет ошибкой в данном примере разметки именно тот случай Как видите один тот же айтишник если мы ставим данную разметку валидатор посмотрим что он на это скажет давайте увеличим И как видите он именно и ругается на то что у нас одинаковые яичники является ли данная разметка правильной данная разметка будет не валидна потому что мы не можем располагать блочные теги внутри инвайновых тегов об этом нам собственно и говорит валидатор то что элементы в данном случае P мы не можем располагать когда черный элемент внутри спана соответственно чтобы сделать наш пример валидным нам необходимо поменять теги местами делаем валидатор и проверяем и Как видите нет никаких не ошибок не предупреждений является ли данная разметка правильной данная разметка не будет валидной потому что опять же так Label у нас является и онлайновым и мы не можем внутри него засовывать дочерними элементами блочные теги то об этом нам и говорит Собственно валидатор как и в предыдущем примере но на практике часто встречается К сожалению данной проблемы и люди почему-то думают что вы его можно пихать Все что душе угодно но надеюсь что вы все же так не делаете и чтобы сделать наш пример валидным давайте закомментируем мы можем поступить следующим образом вынести соответственно игло ибо все блочные теги а саму его разместить на 3 ТГП и связать лейбл и Input атрибутами пор и ID то есть прописываем одинаковые наименование и теперь посмотрим что нам скажет на этого редактор вот Это лишнее мы уберем чтобы не ругался на это и как видите все ошибки пропадают является ли данная разметка правильной данная разметка не будет валидной потому что не допускается вкладывать одну форму внутри другой и вложенная форма будет браузером попросту игнорируется об этом нам то же самое в принципе говорит валидатор выдавая ошибки и то же самое можно посмотреть в браузере Как видите здесь присутствует только один тег for и все остальные инпуты находятся внутри него Может ли быть несколько заголовков H1 на странице на данном вопрос Мы уже давно идут споры Одни говорят что можно другие говорят что нельзя якобы это как-то влияет на поисковые системы Но что нам скажет валидатор на этот счет и Как видите валидатор не выдает никаких ошибок И предупреждений следовательно несколько заголовков H1 может быть на странице Теперь давайте разберем влияние нескольких тегов H1 на seo-оптимизацию до HTML 5 версии за счет заголовков строилась структура страницы и Да там иерархии заголовков было очень важна но с приходом 5 версии HTML и добавлением семантических тегов много изменилось теперь структуры страницы во многом зависит от двух моментов Первое это корневые теги которые вы видите сейчас на экране В основном сейчас интересует Бади а также от секционированных тегов которым относится такие теги как section artical Now и сайт Давайте разберемся на примере текущая наша разметка с точки зрения валидатора Как вы видели не имеет изъянов но с точки зрения SEO оптимизации Она плохая и сеошники явно не оценят данные приколы Объясню почему корневой тег у нас один соответственно это Body секционных тегов нет но при этом присутствует два заголовка H1 которые используются для обозначения раздела какого-то содержимого на странице в данном случае под разделом понимается корневой или секционные теги и так как раздел нас 1 это соответственно так Бади то есть заголовок первого уровня тоже должен быть один а не два думаю вы уже улавливаете соль Но если бы заголовки были например внутри какого-то секционного тега допустим у нас такая разметка то с точки зрения seo-оптимизации тоже было бы все окей то есть у нас соответственно один секционный трек один заголовок один селекционный тег тоже один заголовок Итак давайте подытожим немного данный вопрос варианты решения проблем seo-оптимизации с заголовками H1 следующие 1 если нет секционных тегов на странице Следовательно один корневой тег в данном случае это Body и соответственно один заголовок H1 страницы второй вариант Если есть секционные теги и нет заголовка H1 у корневого тега опять же это Бади то соответственно один секционный так и один заголовок внутри один секционный так и опять внутри и Третий вариант когда есть секционные теги и есть заголовок H1 у корневого элемента то есть соответственно Вот идет сначала какой-то заголовок а потом только начинаются секционные теги Следовательно внутри секционного тега будет также присутствует заголовок но уже его иерархия будет начинаться не с первого а со второго и так далее Может ли быть несколько тегов header или Footer на странице на странице может быть несколько тегов Как header так и футер просто так ужестояло что Их используют только в шапке и подвале страницы но и также можно использовать и в различных блоках если в них предполагается наличие шапки или подвала Давайте посмотрим это на примере допустим у нас есть соответственно классический Бади где есть хедер Мейн и футер но допустим у нас внутри Main присутствует какой-то блок Dip внутри которого мы также поделились содержимое на это соответственно и теперь давайте посмотрим что скажет нам по этому поводу валидатор и Как видите валидатор нам не выдает никакие предупреждения или ошибки Следовательно мы можем использовать неограниченное количество хедеров или футеров на странице если того подразумевает данный разметка единственное ограничение нельзя вкладывать хедеры фудеры внутрь друг друга Почему не используется стандарт html5 при верстке email рассылок если вам доводилось хотя бы Однажды верстать письмо то вы понимаете какая-то боль при верстке писем используется стандартно HTML 4 который появился аж еще в 1997 году и подавляющее большинство используемых сегодня почтовых клиентов соответственно появились именно при нём и с тех пор практически не развивались в направлении mail рассылок поэтому новая технологии данные на пятой версии HTML просто-напросто не будут поддерживаться Какой из вариантов разметки является правильным оба варианта разметки абсолютно валидны мы можем вкладывать Как арктикал section так и наоборот Давайте посмотрим что нам скажет по этому поводу валидатор и Как видите валидатор тоже не имеет ничего против нет никаких ошибок и предупреждений единственное что следует еще делать Так это добавлять заголовки внутри секционных тегов Как видите у нас есть один сексон и так и внутри него сразу заголовок сразу заголовок иначе валидатор соответственно вам выдаст тоже предупреждение если сейчас уберу заголовок и Как видите он выдает предупреждение то что артику должен содержать в себе заголовок На какие элементы из примера сработает данный селектор так как расположение количества тегов без класса может быть случайным то псевдокласса nth Child intege of Type тут нам не помогут есть более универсальный селектор который нам поможет это сделать в чем его смысл так как нам нужны соответственно параграфы параграфы без класса соответственно мы прописываем псевдокласс not и Передаем туда атрибут который мы хотим исключить в данном случае это атрибут классно то есть Нам нужны элементы соответственно без класса и нам с помощью данного селектор будет без разницы Каким элементом из класса стоит по счету там первым вторым третьем четвертом без разницы вот и все и также с помощью данной записи мы никак не будем засорять селектор ненужными стилями Давайте посмотрим как это выглядит в браузере вот допустим у нас есть зеленый текст который мы прописались с помощью данного селектора и есть параграф из класса но при этом Как видите у него не прописывается и не перебивается не как стиль То есть то что мы задали у вас Красная у без класса зеленый и они никак не пересекаются какой тег отвечает за описание страницы в интернете при поисковом запросе за описание страницы в интернете при поисковом запросе отвечает метатег у которого в атрибуте на им прописано значение description что переводится как описание у метатегов очень много разновидностей и с помощью них как раз поисковики и браузер получает всю техническую информацию о сайте теперь посмотрим на примере Допустим мы сделали запрос Яндекс картинки Как видите нам выдал соответственно Яндекс картинки и у него после заголовка есть небольшое описание и Как видите в мета-теге description в атрибуте контекст контент точнее именно это тексты передается то есть забавные картинки заставки и так далее Как видите совпадает и соответственно название страницы будет также отображаться в теге в теги тайтл если блоку задано свойством overful по оси X равной значению hidden тогда Какое свойство станет по умолчанию по оси Y Как вы знаете по умолчанию свойства overfall По обеим осям имеет значение visible Но как Только мы изменим любую за 7 значения отличная от visible и при этом явно не пропишем значение по второй координате то ей автоматически присвоится значение акта в этом легко убедиться сымитировав данную ситуацию в браузере допустим у нас есть вот два блока первый и второй и они как-то стилизовано но у первого бок соответственно Давайте посмотрим как это Теперь дело выглядит браузере То есть у первого блока у которого мы прописывали Как видите у него появляется Scroll только по оси X соответственно у второго блока у него прописан наоборот соответственно только по оси Y и теперь если Мы например один блок какой-то уберем сейчас допустим 2 мы его удалим сейчас а Первый расширим пускай будет 100 VV и Как видите Scroll пропадает Потому что контенту есть куда влезать Чем полезны дата атрибуты дата атрибуты позволяют хранить дополнительную информацию стандартных HTML элементах которые мы можем без труда обратиться как с помощью CSS так с помощью JavaScript с помощью CSS соответственно Обращаемся к какому-то там классу тегу и также квадратных скобках Передаем нужно нам дата атрибут а с помощью JavaScript Мы также можем например найти через селектор HTML элемент у которого есть дата атрибут и с помощью объекта dataset обратиться к данному атрибуту Как можно оптимизировать скорость загрузки сайта на примере изображений оптимизировать скорость загрузки за счет лишь одних изображений можно как минимум тремя способами сразу скажу что у каждого способа есть свои плюсы и минусы но глубоко вдаваться подробности мы соответственно не будем и первый способ это использовать формат изображений Давайте посмотрим браузере допустим вот у нас есть картинка с форматом JPEG и картинка с форматом Как видите с форматом GP к она весит 100 48 килобайт А с форматом vp85 округлить что примерно в полтора раза легче и при этом разница в качестве практически незаметна Если Вы прям уже совсем будете вглядываться то можете увидеть какую-то разницу второй способ это использовать адаптивное изображение которое мы уже разбирали в одном из предыдущих видео опять же если посмотреть как это все дело работает в браузере допустим нас есть какие-то картинки Мы например сжимаем вот у нас поменялась картинка здесь опять зажали опять появилась и третий вариант это использовать ленивую загрузку изображений иначе говоря момент загрузки страницы мы будем подгружать лишь те изображения которые будут подгружаться при скроллинге странице то сейчас как видите у нас вот такой вот список Если я сейчас чуть начну дальше прокручивать У нас должна появиться еще одна картинка вот ведь появилась еще мы докрутили до определенного момента и браузер понял что у нее необходимо подгружать и чтобы браузер понимал что у картинки отложенная загрузка картинки надо прописать атрибут лолдинг со значением Какое CSS правило явно задает кодировку символов в таблице стилей это правило чарса в большинстве случаев браузер и сам может определить кодировку но все же рекомендуется явно прописывать кодировку в начале css-файла Чтобы избежать различных ошибок в отображении даже если вы используете только латиницу и если вы используете например компиляторе наподобие гаупа то после преобразования с файла препроцессор в обычный файл вы также увидите первой строчкой указания кодировки вашего CSS файла что ж на этом У меня все Надеюсь что вопросы были полезны Если да то не поленитесь поставьте старания хотя бы лайк этому видео Ну или поделиться своим мнением в комментариях и до встречи в следующих видео пока