Основные ошибки при верстке сайта. Их решение, советы.

Рад Вас снова приветствовать, дорогие друзья! В данной статье мы поговорим о часто допускаемых ошибках при верстке сайта, а так же об валидной верстке в целом.

Валидная верстка? Зачем мне это?

Казалось бы, подумаешь, мелкие недочеты… Работает? И отлично. Но постойте!

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

Ниже, Вы сможете рассмотреть основные советы по валидной структуре создаваемого сайта, основные допускаемые ошибки, на которых и сделан акцент в данной статье.

p.s. В качестве полезного инструмента для проверки валидности Ваших web-страниц, советую распространенный ресурс validator.w3.org.

1. Будьте внимательны со вложенностью тегов

Кто может быть застрахован от нелепых, или по не внимательности, ошибок при кодировании? Всегда нужно зрительно просматривать написанное Вами.

<div id="wrapper"></div>
<div id="header"></div>

Так и при написании структуры web-страницы, задумали одну структуру, а вышло что-то страшное, начинаете проверять все теги, вложенность, открытие и закрытие каждого тега и блока. Как и в данном примере мы вынесли header сайта за основной блок.

Бывают и другие ошибки вложенности, не такие глобальные, но очень неприятные:

<div id="news">
<p>Esistono innumerevoli variazioni dei passaggi del Lorem Ipsum, ma la maggior parte hanno subito delle variazioni del tempo, a causa dell’inserimento di passaggi ironici, o di sequenze casuali di caratteri palesemente poco verosimili.
<a href="#">Read more..</p></a>
</div>

Ссылка на полный текст  новости «Read more..», закрывается тегом абзаца </p>, уже после которого идет тег закрытия ссылки. Это довольно часто возникающие ошибки, зачастую допускаемые по невнимательности.

2. Не забывайте про атрибуты тегов

Так как мы с Вами заговорили об валидной верстке, то давайте будем придерживаться данного принципа. Часто, например при вставки изображений на сайт через тег <img>, забывают указывать такой важный атрибут alt=»».

Поверьте, это важная «мелочь»!

Каталог коттеджей

<img src="http://www.argut.ru/img/lesraps/raps_p_7.jpg" alt="Каталог коттеджей"/>

Данный атрибут предназначен для описание Вашего изображения, в случае, если оно не было загружено по какой-либо причине. Это важно не только для поисковых систем, но и особенно тогда, когда Ваше данное изображение является ссылкой, и перенаправляет пользователя на какой-либо ресурс или прочее.

Поэтому, не забываем об этом, друзья.

3. Семантика!

Загадочное слово? Все намного проще.. Семантика — это смысл, информационное содержание языка.  Структурными единицами языка HTML являются теги.

Заголовки заключается в теги h1-h6:

<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>

Списки (навигация) в теги <ul>,<ol> и имеют вложенность из структурных элементов <li></li>:

<ul id="nav">
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
</ul>

Код, который соответствует этим условиям, называют семантическим, т.е. каждому элементу на веб-странице, соответствует правильное смысловое значение. К чему я все это веду? Этим я хочу сказать, что многие попросту не соблюдают этих простых семантических правил.

Прямым примером нарушения семантики будет так же самая навигация:

<div id="nav">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</div>

В данном примере, применив CSS стили Вы можете  достигнуть желаемого результата в отображении навигации, но вся логика документа «коту под хвост».

В HTML существует большое количество семантических тегов: <address>,<dfn>, <blockqote>,<code> и т.д. Подробнее о всех Вы сможете узнать на этом ресурсе.

Главное, старайтесь соблюдать семантику, друзья!

4. Названия классов и идентификаторов элементов

Задавая определенный класс (class) или идентификатор (id) элементу на странице, ориентируйтесь на его смысловое значение.

Задавайте в по возможности смысловые названия, чтобы Вам было проще ориентироваться по стилям и структуре кода:

<div class="news">
  <h3 class="news-title">Заголовок новости</h3>
  <div class="news-text">Текст новости</div>
</div>

Не указывайте слишком длинные названия значений данных атрибутов, как в примере ниже:

<div class="center-news-content">
  <h3 class="news-content-title">Заголовок новости</h3>
</div>

Старайтесь задавать не длинные и понятные значения.

5. Файлы стилей CSS

Когда Вы работаете над версткой сайта, то в Вашем распоряжении всегда находится один файл со стилями, которым Вы оперируете. Но стили, так же полезно разбивать по группам. Например:

  • файл стилей для основной структуры сайта и его графического интерфейса;
  • файл стилей для сброса всех стилей по умолчанию заданных спецификацией браузера, перед началом верстки сайта;
  • файл стилей для всплывающих (модальных) элементов на сайт и т.д.

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

В зависимости от ситуации, чтобы не подключать несколько файлов стилей в теге  <head> вашей страницы, Вы можете просто подключить их к базовому файлу стилей Вашего проекта или же к какому-либо другому файлу, при помощи функции import «?.css» CSS файла, тем самым просто расширив его с минимум кода:

import "filename.css";
#wrapper {
  width: 800px;
  margin: 0 auto;
}

6. Тег <img> и свойство background-image

По началу, я сам когда-то задавался таким вопросом: в каких ситуациях более целесообразно использовать HTML тег <img> для отображения изображения, а в каких CSS  свойство background-image — фоновое изображение?

Использовать тег <img> нужно, если:

  • изображение — это часть содержания (например: логотип, схему, человека). Плагины наподобие «опубликовать на стене» и прочие, не увидят ваш логотип, если он будет в background-image;
  • вы собираетесь сделать, чтобы люди смогли распечатать страницу, и вы хотите, чтобы изображения, были включены по умолчанию для отображения на печати;
  • изображение имеет важное смысловое значение, например, знак предупреждения.

Свойство  background-image нужно использовать, если:

  • это презентационная графика Вашего сайта;
  • изображение не является частью содержания;
  • Вам нужно повторить изображение несколько раз;
  • Вам нужно использовать спрайт, для скорости загрузки страницы.

7. Группировка CSS свойств

Часто я встречаю в файлах стилей большие объемы кода, которые можно с легкостью сократить, и привести в более компактный и читабельный вид. Рассмотрим, к примеру:

.text {
    font-family: Arial, Tahoma, sans-serif;
    font-size: 14px;
    font-weight: italic;
    line-height: 20px;
    border-color: #ccc;
    border-width: 1px;
    border-style: solid;
}

Очень длинный код, который можно сократить в три раза, с помощью группировки свойств:

.text {
    font: italic 14px/20px Arial, Tahoma, sans-serif;
    border: 1px solid #ccc;
}

Таким простым способом мы привели наш в код в более грамотный вид, и люди которые возможно будут работать с ним в будущем, только скажут Вам «спасибо!».

8. Пишите читабельный код

Безусловно, у каждого свой стиль программирования, написания кода. Но всегда приятней работать, когда код написан внятно, с вложенностью, аккуратно, с отступами. В процессе работы над Вашим сайтом, объемы кода буду увеличиваться в разы! Даже, если Вы единственный человек, который работает и будет работать над своим проектом в будущем, у Вас перед глазами будет просто каша. Я рекомендую Вам придерживаться «чистого кодирования».
Например, многие пишут CSS-код в таком стиле:

.news{font:13px Arial,Verdana,Tahoma,sans-serif;color:#414141;background-color:#eee;padding:10px 15px;margin-bottom:20px};

А теперь представьте, сколько придется подобного кода в таком стиле написать для стилизации всего сайта. Вы сломаете потом не только голову, но и глаза, разбираясь в нем или же пытаясь найти какой-то фрагмент для исправления.

Я рекомендую Вам пользоваться такой записью, или же ей подобной:

.news {
   font: 13px Arial,Verdana,Tahoma,sans-serif;
   color: #414141;
   background-color: #eee;
   padding: 10px 15px;
   margin-bottom: 20px;
}

Согласитесь, такой  код намного читабельней и понятней.

Если Вам сложно и очень непривычно перестраиваться на новый — «чистый» стиль кодирования, постарайтесь заставить себя. Вам это будет только плюсом.

На этом я заканчиваю данную статью. Благодарю всех за внимание! Если Вам не хватило какой-то информации или же материал Вам понравился, оставляйте свои комментарии ниже. Спасибо.

Автор: Сергей Губарев

Комменты

  • Спасибо. Много нового узнал. Есть вопрос: в навигации использование тегов списков нужно для поисковиков? А также, насколько нужно использование тега nav ?

    • Дмитрий Валак: 06-05-2015 в 19:16

      Лучше использовать тег nav, и для роботов при индексации понятней, да и самому приятней. Разметка чище и логичнее.

  • super! pravda uze znal mnogoe.

  • последний пункт спорный, первый вариант для меня читабельнее, особенно если селекторов очень много, а сам лист в десятки раз короче

  • Спасибо, Сергей.
    Статья очень понравилось, читал с удовольствием.

  • Спасибо Дмитрий.Очень нужные и полезные советы.

  • Статья интересная, но не мешало бы в начале статьи рядом с кодом «как не надо» добавить «как должно быть» по примеру 7 и 8 обзатцев.