{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Любой начинающий специалист при работе с проектами может совершать определенные ошибки, которые повторяли до него другие. Чтобы этого не происходило полезно учиться на чужом опыте и предупреждать заранее такие ситуации. В этой статье мы разберем популярные ошибки начинающих верстальщиков сайтов.","type":"unstyled","key":"8tr99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не используй блочные элементы внутри строчных","type":"header-two","key":"5p9t5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML имеет два типа элементов: строчные и блочные.","type":"unstyled","key":"dsd7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Блочные элементы выстраивают структуру страницы. Например:\n

-

и т.д.","type":"unstyled","key":"8u1k9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строчные элементы используются, в основном, внутри блочных элементов, к ним относятся такие тэки: ,
, , и т.д. По умолчанию им задается свойство display: inline.","type":"unstyled","key":"mcbe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Неправильно:","type":"unstyled","key":"2c9h7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"815nl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Заголовок
","type":"unstyled","key":"d6q9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"unstyled","key":"206ec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Пункт 1
","type":"unstyled","key":"erkqs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Пункт 2
","type":"unstyled","key":"14jj5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"unstyled","key":"95rqc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6qe4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Правильно:","type":"unstyled","key":"5ucjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"unstyled","key":"bcelj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Заголовок
","type":"unstyled","key":"3tmef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"unstyled","key":"c8628"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Пункт 1
","type":"unstyled","key":"353hd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Пункт 2
","type":"unstyled","key":"nljf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"unstyled","key":"1r7m4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"unstyled","key":"823jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Страница не проверена через валидатор","type":"header-two","key":"1fabt"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":21,"offset":18}],"inlineStyleRanges":[],"text":"На сайте w3c есть валидатор html-файлов. Он проверяет чистоту и качество кода страницы и выдает ошибки: незакрытый тег, пропущенную строку или свойство. Чем меньше ошибок нашел валидатор, тем лучше отобразится страница в браузере и быстрее будет работать сайт.","type":"unstyled","key":"fbrh2"},{"data":{"image":{"id":"60018daef8b1af50bb2aa92d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b0edq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рис. 1 - валидатор html-файлов","type":"unstyled","key":"endoj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не указана html версия документа","type":"header-two","key":"1eegq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычно это удается избежать, когда используются плагины в текстовых редакторах кода, к примеру emmet. Однако такая ошибка встречается.","type":"unstyled","key":"fu4t2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы сообщить браузеру, какая версия HTML-разметки используется на странице, нужно использовать тег .","type":"unstyled","key":"b5a4u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если браузер не смог определить версию html, то он покажет страницу с ошибками. Например, может сбиться оформление.","type":"unstyled","key":"29b0u"},{"data":{"image":{"id":"60018daef8011c4a014ada96"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nРис. 2 - пример использования ","type":"atomic:image","key":"jte5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не используй тэг
для создания списка","type":"header-two","key":"d9btf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Бывает, встречаются такие фрагменты кода, в которых список создан посредством тэга разрыва строки
. Для создания списка используй специально созданные для этого тэги
или
.","type":"unstyled","key":"fq2e8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Неправильно:","type":"unstyled","key":"bcedj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"line1
","type":"unstyled","key":"61emm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"line2
","type":"unstyled","key":"ebheg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"line3
","type":"unstyled","key":"59kq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Правильно:","type":"unstyled","key":"9f5jc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"unstyled","key":"12jjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
line1
","type":"unstyled","key":"7ot99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
line2
","type":"unstyled","key":"bmddv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
line3
","type":"unstyled","key":"2r1ah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"unstyled","key":"f9ntu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не игнорируй атрибут alt в тэге ","type":"header-two","key":"2fr5b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Очень часто встречается такая ошибка, как не заполненный атрибут alt или полное его отсутствие. Это связано не только с SEO-оптимизацией, это также вспомогательный элемент. В ситуации, когда картинки слетит у вас будет альтернативный текст на ее месте отражающий контекст.","type":"unstyled","key":"cvppg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Неправильно:","type":"unstyled","key":"3r8uh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2gt7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Правильно:","type":"unstyled","key":"eu8st"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"img\"$ ","type":"unstyled","key":"chago"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полное отсутствие комментариев в коде","type":"header-two","key":"59o7i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Комментарии в коде полезны для навигации внутри кода. Но при этом важно не плодить все возможные комментарии. Используй их в меру, чтобы другому специалисту было проще ориентироваться, особенно это касается, когда код переваливает за 1000 строк.","type":"unstyled","key":"69nrl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не правильно заданные имена классов","type":"header-two","key":"2dbm0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начинающие специалисты дают классам сокращенные или бессмысленные, ничего не значащие названия, или пишут их кириллицей.","type":"unstyled","key":"9iafp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Называйте классы английскими словами, чтобы они отражали смысл и суть данного элемента или блока. Нельзя начинать названия классов с цифр или дефиса.","type":"unstyled","key":"eag5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Правильно:","type":"unstyled","key":"a57gp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".shopping-cart-block","type":"unstyled","key":"7f766"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".facebook-icon","type":"unstyled","key":"2e18v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Неправильно:","type":"unstyled","key":"7q8k0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".forma-blok","type":"unstyled","key":"e9ool"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".специальная-кнопочка","type":"unstyled","key":"ftb4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".-1-block","type":"unstyled","key":"7mgeu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".2-line","type":"unstyled","key":"2bioj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".shp-pg","type":"unstyled","key":"22ftq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не сброшены изначальные отступы","type":"header-two","key":"21vja"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В каждом браузере используются внутренние стили по умолчанию. Если не сбросить их в самом начале, то для элементов будут выставлены разные отступы, из-за чего одна и та же страница будет выглядеть по-разному в нескольких браузерах.","type":"unstyled","key":"ab32j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы избежать этого сбрасывайте отступы для всех элементов:\n* {","type":"unstyled","key":"2l5cn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin: 0;","type":"unstyled","key":"fgp9q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"padding: 0;","type":"unstyled","key":"kum7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"box-sizing: border-box;","type":"unstyled","key":"eeidp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"6bj6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Резюмируем","type":"header-two","key":"2vn4d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каких ошибок стоит избегать начинающим верстальщикам:","type":"unstyled","key":"96aa3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"использование блочных элементов внутри строчных;","type":"unordered-list-item","key":"11nmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"код не проверен через валидатор;","type":"unordered-list-item","key":"8ghjg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"не указана html версия документа;","type":"unordered-list-item","key":"59e4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"использование тэга
для создания списка;","type":"unordered-list-item","key":"66trr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"игнорирование атрибута alt в тэге ;","type":"unordered-list-item","key":"16i28"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"полное отсутствие комментариев в коде или их чрезмерное количество;","type":"unordered-list-item","key":"2tue4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"некорректные имена классов;","type":"unordered-list-item","key":"fnvcn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"не сброшены изначальные отступы.","type":"unordered-list-item","key":"cg9f2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"БЛОГ","type":"header-two","key":"3dv0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"S4xcMuds99lJEF0ek869"}],"entityMap":{"0":{"data":{"href":"https://validator.w3.org/","url":"https://validator.w3.org/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}