Сегодня мы поговорим про вёрстку сайта. Список из наиболее распространённых ошибок при вёрстке сайтов от начинающих frontend разработчиков. Если вы новичок в веб-дизайне или программист, который хочет попробовать себя во "фронтенде", старайтесь избегать этих ошибок.
Все когда-то начинали, а начало веб-разработки как раз и происходит с вёрстки сайтов. Вы изучаете основные теги HTML, далее стилизацию CSS, пытаетесь это объединить и начинаете верстать сайты. Для кого то этот этап проходит очень быстро, кому то приходится помучиться с вёрсткой, пока не придёт полное понимание происходящего.
Когда пытаешься сверстать первый сайт, то не обращаешь внимание на какие то мелкие ошибки и недочёты, к сожалению, если их вовремя не заметить и не убрать, то они будут повторяться снова и снова и вы даже не будете знать о них.
Типичные ошибки при вёрстке сайтов возникают не только уначинающих веб-разработчиков. Все ошибки можно разделить на те, которые появляются из-за не внимательности и на те ошибки, которые появляются из-за не знания.
При любой вёрстке сайта, самое главное помнить о том, что есть определённые требования к качеству работы дизайнера и верстальщика. Основным критерием грамотной вёрстки можно считать полное сходство с макетом и правильная реструктуризация кода. Чтобы не переучиваться в дальнейшем, обратите внимание на наиболее распространённые ошибки.
1) Не использование современного редактора кода
Мы имеем кучу инструментов, которые помогают нам в работе, ускоряют разработку и дают зарабатывать быстрее. Используйте SUBLIME TEXT и его плагины.
2) Сокращение классов или написание их транслитом
Например <div class="block-poiska"></div>. Это категорично не правильно. Называйте классы английскими словами отражающими их суть, слова не сокращайте, пишите слова целиком. Например <div class="search-block"></div>.
3) Не использование семантических тегов
Семантические элементы HTML доступно описывают свой смысл. Не правильный подход, создавать блок и прописывать ему такой класс, например header, класс nav, класс main. Для этого давно уже существуют теги nav, main, saction, footer и так далее. Так вы легко создаёте видимую структуру страницы и что самое главное, сематнически верную.
4) Задание стилей для каждого тега прямо в HTML документе
Главная идея в семантике HTML и CSS, как раз в том, что бы разделить страницу на структуру документа и так же стили. По этому не имеет смысла писать CSS стили в нутри HTML тегов. Задавайте стили для каждого элемента всегда в отдельном CSS файле.
5) Задание больше одного тега <H1> на странице
В этом теге находится заголовок нашей страницы. С точки зрения поисковых систем, на одной странице не может быть больше одного заголовка <h1>, а вот тегов от <h2> до<h6> может быть сколько угодно.
6) Использование блочного элемента внутри строчного
В HTML существует 2 типа элементов, блоки и строки. С помощью блоковых элементов выстраивается структура страницы. Это div, ul, h3 и другие элементы. Их свойство по умолчанию display:block;.
Строчные элементы, к которым относится span, li, a, label, используются внутри блочных элементов. По умолчанию их свойство задаётся как display:inline;
7) Отсутствие alt="" атрибута для изображения
ALT атрибут помогает поисковикам лучше ранжировать страницу в поисковой выдаче.
8) Не использование валидатора w3c после окончания вёрстки
На сайте w3.org есть специальный валидатор HTML файлов, он проверяет код страницы и выдаёт незамеченные ошибки. это может быть не закрытый тег, пропущенная строка или свойство. Чем меньше ошибок нашёл валидатор, тем лучше отобразится страница в браузере и быстрее будет работать ваш сайт.
На этом в принципе и всё! Поставьте лайк и подпишитесь на канал Яндекс.Дзен. Спасибо и до новых встреч!